The Marble Does Not Yield
Bilingual literary web app with scroll-driven storytelling and WCAG AAA compliance
Video Walkthrough
Screenshots
1 / 10
The Challenge
Long-form bilingual literary content needs a web experience that serves the narrative, not the framework. Full i18n libraries add runtime overhead for a two-language site, streaming services complicate optional audio narration, and accessibility becomes critical when the content demands sustained attention.
The Solution
A static-first Next.js app where every technical decision serves the reading experience. Custom i18n with JSON labels + Markdown prose, author-read audio via a single play/pause toggle, scroll-driven IntersectionObserver animations that respect prefers-reduced-motion, and 104 kB First Load JS through React Server Components.
Key Features
- Custom i18n architecture — JSON for labels + Markdown for prose, zero-overhead language switching without any i18n framework
- Scroll-driven storytelling with multi-stage color fade animations (3.5s) via IntersectionObserver, all respecting prefers-reduced-motion
- WCAG AAA compliance with proper contrast ratios, semantic HTML, and reduced-motion support for cognitively loaded content
- 104 kB First Load JS — static generation with React Server Components eliminates client-side hydration cost
- Six-iteration UX refinement from complex audio player to minimal toggle, demonstrating taste and restraint
Results
- 104 kB First Load JS — zero client-side hydration cost
- WCAG AAA compliance across both language variants
- Six-iteration UX refinement process documented end-to-end
- Zero i18n framework dependencies for full bilingual support
Have a similar challenge?
Let's talk about how a solution like this could work for your team. Free call, no pitch.
Book a Free Call