Sisyphus

A scroll narrative on the myth of Sisyphus — roughly 28 screens, one page, no navigation between the chapters. A white sculpted relief shatters into five modern burdens; a transition clip carries you across; a blueprint grid grows into a night city and then inverts into an epilogue that ends with ( again ), which rewinds the whole hill to the first frame.

Sisyphus is a piece about repetition that you operate by repeating a gesture: you scroll, and the scroll is the labour. It runs as a single continuous page in two chapters, with nothing between them that says a chapter has ended — the second simply slides over the first while a clip plays underneath.

Chapter one — the relief

A white sculpted relief of Sisyphus, rendered in three.js as a single textured plane cut into per-cell quads. Moving the cursor over the stone reveals a silver twin underneath through a fluid mask. Scrolling shatters the plane, resolves the fragments into a sparse editorial grid, and hands over to five “modern burdens” — particle dust-clouds that dissolve one into the next, each morphing into the word it stands for.

The bridge

Crossing the end of the arc plays a transition clip once, as a backdrop, while chapter two slides in from the right over it. It fires on a downward crossing of a scroll line rather than on being past it — a browser restoring a scroll container a frame after mount otherwise looks exactly like a crossing, and the clip would auto-play on arrival.

Chapter two — the record

A Camus-cover band of half-square triangles inhabiting a blueprint grid; four movements — ROCK, ASCENT, SUMMIT, RETURN — whose titles cross the screen as you scroll; a night city that grows out of the flat grid and extrudes into 3D as darkness falls; and an inverted epilogue that ends with ( again ), which rewinds the whole hill back to the first frame and re-arms the bridge for another lap.

One must imagine Sisyphus happy.

Albert Camus, The Myth of Sisyphus

Two pieces, one timeline

The interesting constraint was structural: the chapters were built separately and merged afterwards. Three things have to be singular for that to work — one scroller, one Lenis instance, one requestAnimationFrame loop — and the page owns all three. Each chapter is a module that is handed the scroll position rather than reading any global state of its own, which is what lets two independently-authored pieces share a timeline without fighting over it.

The piece was composed for landscape and adapted afterwards. On a narrow screen the relief crops to the figure rather than letterboxing, the titles show one at a time instead of travelling past each other, and the hover reveal — which has no touch equivalent — is replaced by a timed pass over the stone on arrival.