The Marble Does Not Yield
Bilingual literary web app with scroll-driven storytelling and WCAG AAA compliance
Video Demo
El Problema
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 Principales
- 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
Overview
The Marble Does Not Yield is a production-grade bilingual narrative web application built with Next.js 14. It presents long-form literary content in English and Spanish with author-read audio narration, restrained scroll-triggered animation, and accessibility-first design.
The project treats the web as a medium for serious storytelling. Every technical decision serves the narrative: animations are cinematic but restrained, controls are minimal, and the design prioritizes sustained reading over feature density. Typography uses Fraunces for display and Source Serif 4 for body, with a deliberate 72ch max-width and 1.75-1.8 line height.
Built as both a literary project and a portfolio demonstration, it showcases how AI-augmented development (Claude, Windsurf) works as a collaborative tool for architecture decisions, refactoring, debugging, and documentation — not as a code generator.
¿Listo para discutir una solución similar?
Exploremos cómo la automatización con IA puede ayudar a tu negocio.
Agendar una Consulta