The Marble Does Not Yield

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

Demo Video

The Problem

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

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.

Ready to discuss a similar solution?

Let's explore how AI automation can help your business.

Schedule a Consultation