The Marble Does Not Yield
Bilingual literary web app with scroll-driven storytelling and WCAG AAA compliance
Video Demostrativo
Capturas de Pantalla
1 / 10
El Desafío
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.
La Solución
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.
Características Clave
- 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
Resultados
- 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
¿Tienes un desafío similar?
Hablemos sobre cómo una solución así podría funcionar para tu equipo. Llamada gratis, sin compromiso.
Agendar Llamada Gratis