an animated letter and poetry site
A gift-style microsite: a wax seal you break to open a letter, a forest that breathes and changes with the hour, and a poetry book you turn page by page.
Demonstration build. Designed and built by me to show craft — a front-end piece, not a client commission. Everything animates and works; the words are placeholder.
- Type
- Demonstration build
- Stack
- JS · Canvas · CSS
- Pages
- Letter, book, apology
- Editor
- Browser CMS
Captured from the live demo, desktop and phone · try it yourself ↗
Why I built it
Most of my work is websites with a job to do. This one is the opposite corner of the craft: a piece meant to be felt in the first few seconds — the kind of thing you would send someone rather than a business would sell from. I built it to show pacing, motion and typography working together, not conversion rate.
The scene is alive
The background is a forest built in layers — a photographic far layer, drifting mist, light rays, and a near silhouette — with a canvas of fireflies and falling leaves over the top. It parallaxes gently and never sits still.
It also keeps time. On load the site reads the clock and picks dawn, day, dusk or night, and grades the whole forest to match; add ?time=night to force a mood. Everything respects prefers-reduced-motion and falls still for anyone who asks for that.
A letter, then a book
The entrance is a sealed envelope — break the wax and the letter unfolds into chapters, one screen at a time, with a typewriter line and a small question to answer.
The poetry collection is a real book: a cover you drag or tap to open, pages that turn with a swipe or the arrow keys, a contents list, and each poem also reachable on its own page for sharing.
Words you can change
None of the text is hard-wired into the design. Every line — titles, the letter, all ten poems, the quotes — lives in a single content.json, and a small editor overlays it onto the pages at load, with the built-in words as a fallback if it is missing.
There is a browser editor to rewrite any of it without touching code. In this demonstration it runs in a read-only demo mode; on a real build it publishes through a tiny serverless function.
How it looks on a phone
A piece like this gets opened on a phone, from a message, one-handed. Every screen here is checked down to 360px — the book, the letter and the poems all reflow and stay legible.
How it works
Two moving parts: the scene engine that keeps the forest alive, and a content layer that lets every word be rewritten without opening the code.
The living scene
- Fireflies and falling leaves run on a single
<canvas>, sized to the viewport and paused when the tab is hidden. - The forest is layered — photo, mist, rays, silhouette — and parallaxes on pointer and scroll.
- A tiny inline check reads the clock and sets dawn / day / dusk / night;
?time=overrides it. - Every motion honours
prefers-reduced-motionand falls still on request.
The editor
- All copy lives in one
content.json; a loader overlays it onto every page, with the baked-in words as a fallback. - A browser editor edits poems, letter and quotes with live preview — no code, no build step.
- Publishing goes through a small serverless function; here it runs in a safe, read-only demo mode.
The decisions behind it
No framework
Plain HTML, CSS and JavaScript — no build step, no dependency to update, nothing to break in two years.
One scene, four moods
The same forest grades itself to dawn, day, dusk or night from the clock, so the site never looks the same twice.
Content you can edit
Every line lives in a single JSON file, editable from the browser — the design stays fixed while the words change.
Other builds
Need one of these for real?
Tell me what it is for and who it is going to. I will tell you what it costs and how long it takes — no charge for the conversation.