Ir al contenido principal
CushLabs logo CUSHLABS.AI
Volver al Portafolio

The Marble Does Not Yield

Bilingual literary web app with scroll-driven storytelling and WCAG AAA compliance

Production

Video Demostrativo

Video Demostrativo

Capturas de Pantalla

1 / 10
The Marble Does Not Yield diapositiva 1
The Marble Does Not Yield diapositiva 2
The Marble Does Not Yield diapositiva 3
The Marble Does Not Yield diapositiva 4
The Marble Does Not Yield diapositiva 5
The Marble Does Not Yield diapositiva 6
The Marble Does Not Yield diapositiva 7
The Marble Does Not Yield diapositiva 8
The Marble Does Not Yield diapositiva 9
The Marble Does Not Yield diapositiva 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

Proyectos Relacionados

¿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