V26-004 // Case study
After the Empire
A web experience about return, accumulation, and the quiet after an ending. Thomas Cole's five paintings become a 20-visit passage through wilderness, empire, ruin, and renewal.
01 // The brief
The return is part of the story
The brief was deliberately small. The goal was to translate the emotional movement of The Course of Empire into a browser experience with no feed, branching choices, or reward for staying longer.
The only meaningful action is coming back. Each qualifying load advances a persistent sequence, so the same site changes in its animation, image treatment, and typography as time passes. The question was whether a single build could behave differently from state to state without becoming five small sites stitched together.
02 // The constraint
Designing for the next visit
The work needed to feel inevitable without feeling like a progress bar. The state machine had to remain invisible, each painting family needed its own character, and the transitions had to carry as much meaning as the text.
The first plan included a desktop-only gate. During the build, it became clear that the visual system could hold smaller screens, so the gate was removed. Mobile and desktop now enter the same sequence, with responsive painting crops and a layout that keeps the quotations legible at every width.
That decision raised the bar for the visual system. A recoloured template would not be enough. Each state has its own typographic register, with five typefaces carrying the qualities of savage, arcadian, consummate, destruction, and desolate states without announcing the change.
The paintings are rendered through a WebGL fragment shader as fields of coloured dots. A seeded pattern determines which cells remain, while a protected focus area keeps the image recognisable. Toward the edges, the dots scatter and dissolve as the sequence advances. The image treatment interpolates between visit keyframes, allowing each painting to move gradually toward its next condition rather than simply switching to a new filter.
03 // The arc
Five paintings,
Ten thresholds
The visitor moves through two literary states for each painting. A hard transition marks the arrival of a new world; a soft transition lets the current world turn in on itself.
The painting remains the stable reference point while the quotation, typography, image treatment, and motion change around it. Savage enters by drifting. Consummation arrives with weight. Desolation becomes slower and increasingly sparse.
The five images remain recognisable throughout. What changes is the register surrounding them, allowing the same material to accumulate a different meaning with every return.
04 // The context
The quotes were never really about people
Each of the ten thresholds carries a line drawn from outside the work: Longfellow, Coleridge, Byron, Wordsworth, Chaucer, Juvenal, Shakespeare, Eliot, Shelley, Brontë.
Read end to end, without any knowledge of Cole or their original contexts, the quotations still form a complete story. The voice begins broadly, speaking as a civilisation speaks of itself, then gradually narrows toward a single remaining witness.
That arc depends on taking lines written within very different relationships and allowing their address to change. By Desolation, there is no other person left inside the piece for a line to be spoken to. The words remain the same; what they are speaking to has changed.
The clearest example is the closing line from Wuthering Heights. In the novel, Heathcliff is addressing Catherine’s ghost, asking her to haunt him rather than leave him alone in a silence where he can no longer find her.
Here, there is no ghost left to address and no lover left to mourn. There is only the land closing back over what was built on it. Asking to be haunted becomes the last alternative to being met with nothing at all. The land does not answer. It waits, then takes the site back.
None of this depends on the visitor recognising it. The quotations carry their own arc whether or not a single source is identified. Cole’s paintings give the piece its shape; the rereading gives the sequence a reason to exist beyond its mechanics.
05 // The mechanism
The browser remembers
On each production load, resolveVisit() reads
empire_visits, increments the count, and resolves the
next state. The sequence is capped at 20 visits and paired with a
stable UUID. There is no account, dashboard, server-side state, or
external tracking involved.
The experience runs from a single data-driven state array behind a
STATES object, keeping the quotation, attribution,
palette, and animation family together. The image treatment
maintains its own visit keyframes, while the transitions module
selects the appropriate motion variant and transition weight for the
active family.
That separation keeps the systems coordinated without turning every state into one oversized animation. The text, painting, and motion can change together while remaining independently authored.
06 // The terminal state
Silence is also an arrival
Visit 20 does not introduce another spectacle. It holds the final image in silence, lets the last text emerge slowly, and leaves room for the possibility of life continuing in the shadows of memory.
The sequence ends there. Every return after the twentieth visit remains in the terminal state. The work can begin again only when its stored history is deliberately cleared.
That permanence gives the ending its weight. For nineteen visits, return has meant movement; each arrival revealed another stage in the life of the landscape. At the twentieth, return becomes recognition. The world has reached its final condition, and the visitor has to encounter it again without the promise of another transformation.
The land has absorbed everything that came before it. What remains is the memory of having watched it happen.
07 // Outcome
A small site with a long memory
The finished work is deliberately lean: vanilla HTML and CSS, bundled fonts, GSAP for motion, and a WebGL image treatment. It requires no CMS or networked state, respects reduced-motion preferences, and gives every visitor the same responsive entry into the sequence.
Cole’s paintings gave the work its five-part structure, the rest is supplied by the browser. Visit count, sequence of states, and transition logic are all handled client-side.
Twenty visits were enough to prove the idea. The same build can hold a complete visual and literary progression, remember where the visitor is within it, and arrive at a genuinely different condition without changing its underlying structure.
The result is less a collection of twenty versions than one work with twenty states. That distinction is the useful part. It gives durational web work a practical structure that can live entirely in the browser.
08 // Contact
What could your website reveal over time?
Vernalia builds narrative websites and interactive experiences where the medium can become part of the story. If your project has a world, a story, or an idea that could unfold through interaction, movement, return, or discovery, tell me about it.
Have a project in mind?
Send me an email and tell me what you're making, where it is now, and what you'd like the website to do.
Share your project