FR-009 · Interactive Single-Page Experience
The Field of Roses
LiveDesign + Build2026100 PERF · 100 A11Y
Outcome
A single-page designed object that ships ~9 kB of JavaScript and hits Lighthouse 100 performance / 100 accessibility — proof that one idea, told slowly, can carry a whole site.
The Field of Roses is a quiet, single-page reminder that flowers — and people — bloom at different times. I built it for anyone who feels behind: a night field of roses that glows where your cursor touches it, ten hand-picked quotes on patience, and nothing else. It's a designed object rather than a product — no backend, no tracking, nothing to buy — and every technical decision serves that restraint.
A designed object, not a product
Most encouragement online arrives wrapped in a funnel — a newsletter to join, a course to buy, a metric to move. This page refuses all of it. There's no backend, no tracking, and nothing for sale; the message is the whole product. That framing set the constraint for everything downstream: if a feature didn't help say 'your time to bloom will come' more quietly or more beautifully, it didn't ship. The result is closer to a printed keepsake than a web app — a page you visit when you need it, that asks nothing back.
- No backend, no analytics, no conversion path — on purpose
- One idea, told slowly, as the entire scope
Two photographs and a mask make the signature interaction
The hero is two layered photographs of the same rose field — one dark, one lit — with a radial CSS mask that follows the pointer. As visitors move through the field, they light it up themselves: the metaphor is the interaction. There's no WebGL, no canvas, no library — just a mask-image driven by two custom properties updated on pointermove. It's the site's whole thesis in one gesture: the field is already full of light; you just haven't moved through it yet.
- Dark + lit photographs of the same field, layered
- Radial CSS mask follows the pointer — no WebGL, no canvas
- The visitor lights the field up — the metaphor is the interaction
Ten quotes, dealt like a deck
The 'Pick a rose' generator holds ten hand-picked quotes on patience and perseverance — scripture, Churchill, and other voices that have carried people through slow seasons. They deal from a shuffled deck, so nothing repeats until every quote has been seen, with a crossfade reveal and one-tap copy so a line can leave the page with you. Quote changes announce through an aria-live region, and the markup is semantic blockquote/cite — a quote generator that's honest about being one.
- Shuffled-deck dealing — no repeats until all ten are seen
- Crossfade reveal + one-tap copy
- aria-live announcements, semantic blockquote/cite markup
Dependency-light on purpose
The stack is Next.js 15 (App Router), React 19, TypeScript, and Tailwind CSS v4 — and almost nothing else. Scroll reveals run on IntersectionObserver, animations are pure CSS, and the page ships roughly 9 kB of JavaScript. Accessibility was treated as a feature, not a pass: prefers-reduced-motion support throughout, WCAG-AA contrast at every step against a near-black ground. Lighthouse came back 100 performance and 100 accessibility — the quiet page is also the fast one.
- Next.js 15 + React 19 + TypeScript + Tailwind v4
- IntersectionObserver reveals, pure-CSS animation, ~9 kB page JS
- Lighthouse 100 perf / 100 a11y, reduced-motion-aware throughout
The smallest details carry the tone
The palette is pulled from the photography itself — near-black night, deep wine reds, rose pink, warm parchment — with Cormorant Garamond as the editorial voice and Jost for structure. Then the details most visitors never notice: the tab title changes to 'The field is still here.' when you leave, a rose waits in the dev console for anyone who opens it, and even text selection and focus rings match the palette. None of it is necessary. All of it is the point — care, applied evenly, down to the corners nobody checks.
- Palette sampled from the photographs: night, wine, rose, parchment
- Cormorant Garamond for voice, Jost for structure
- Tab title, console rose, selection + focus rings — all in-world
- Credits
- Solo — design & direction
- AI
- Designed with Claude and built by directing Claude Code — reviewing every diff and making every taste call myself. The rose-field imagery was generated with GPT Image.
