Everything Has Been Replaced
The story behind The Plank
Inspired by Ship of Theseus on Wikipedia
Built with Canvas 2D · GSAP ScrollTrigger · Procedural Illustration
Techniques Bezier Hull Geometry · Per-Plank Aging System · Seeded Procedural Grain · Scroll-Driven State Machine · Layered Sine Water · Film Grain Overlay
Direction Map the scroll position to 2,000 years of ship maintenance, making each plank replacement visible as the paradox unfolds in real time
Result A scroll experience where you watch a ship lose every original plank, a second ship assemble from the discards, and Theseus himself arrive — changed beyond recognition
The Story
Plutarch posed the question around 75 AD: the Athenians preserved the ship Theseus sailed home from Crete. As planks rotted, they replaced them. Over centuries, every single piece of the original ship was swapped out. Is it still the Ship of Theseus?
Thomas Hobbes made it worse in the 17th century: what if someone collected all the discarded planks and reassembled them into a second ship? Now you have two ships. Which one is real?
The thought experiment has no resolution. That’s why it’s lasted 2,000 years.
The Take
Scrolling IS the passage of time. At the top, a complete ship sails into an Athenian harbor. By the time you’ve scrolled to the middle, every plank has been replaced — some twice. The ship looks the same but shares nothing with the original. The discarded planks have piled on the dock and begun arranging themselves into a mirror image.
This is a deliberate departure from the last four experiences (all pure WebGL2 fragment shaders). Canvas 2D with GSAP ScrollTrigger trades mathematical precision for illustrative warmth — hand-drawn grain lines, bezier-curved hulls, a Mediterranean harbor at permanent golden hour.
At the midpoint, the camera zooms out. Two ships face each other across a stone dock. One made entirely of new wood. One made entirely of old. Then a figure appears — small, featureless. He stops between them. He recognized neither. Neither recognized him. They had all been replaced. The “they” is deliberately ambiguous. The planks. The ships. Theseus himself. The cells of his body replaced seven times over.
The Tech
Hull Geometry. The ship hull is a series of bezier curves forming a Greek galley profile — tall stern post, low bow with a ram, curved keel. Each hull is drawn as a clipped path, and planks are rectangular strips rendered inside this clip region. The second ship mirrors the hull path horizontally.
Per-Plank Aging. Thirty-five individually tracked planks, each with a scheduled replacement time spread across the scroll range. Each plank ages on its own clock: honey-colored fresh timber (hsl(35, 55%, 58%)) darkens to walnut (hsl(25, 30%, 28%)), grain lines roughen, a hairline crack appears, then the plank slides out and a fresh one takes its place. The replacement schedule accelerates — slow at first, then rapid-fire as centuries compress. Per-plank tint variation (seeded random hue/lightness offsets) prevents the uniform-wood-swatch look.
Procedural Grain Lines. Each plank gets seeded procedural grain — sinusoidal curves with per-plank random frequency and phase, drawn as thin strokes within the plank bounds. The grain roughens with age by adding noise to the line positions.
Layered Water. Water is multiple sine waves at different frequencies and amplitudes, always animating regardless of scroll position. The composite creates a convincing harbor surface with moving highlights.
Compositing Stack. Sky gradient → distant building silhouettes (seeded RNG for consistent randomness) → stone dock with horizontal mortar lines → ships with clipped planks → water → warm vignette → film grain (128px noise canvas drawn with overlay composite mode for an aged-manuscript quality).
Scroll-Driven State Machine. GSAP ScrollTrigger with scrub: true drives all transitions: ship entry, plank replacements, camera zoom-out, second ship assembly, figure appearance, and final fade. Each state is a scroll range, and the canvas re-renders on every scroll frame.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.