The Ruin
The story behind The Ruin
Inspired by Seven Wonders of the Ancient World on Wikipedia
Built with Three.js · InstancedMesh · Custom GLSL Shaders · Orthographic Camera · Scroll-Driven Sections
Techniques Per-Instance Staggered Assembly · 4 Destruction Shader Modes (Fire, Earthquake, Imaginary, None) · Shape Generators for 7 Architectural Silhouettes · Viewport Shake · Light Parchment Palette
Direction A list written 2,300 years ago. Six of the seven things it describes are gone. The list itself survived all of them.
Result Scroll through seven monuments built from 5,000 particles each — watch them assemble, read their epitaph, then watch them die by their historical cause: earthquake, fire, arson, or the quiet suspicion that they never existed at all
The Story
Around 225 BC, Philo of Byzantium compiled a list. He called it “The Seven Sights of the World” — seven structures from across the Mediterranean that any educated traveler should see. The Lighthouse of Alexandria, the Colossus of Rhodes, the Statue of Zeus, the Temple of Artemis, the Mausoleum at Halicarnassus, the Hanging Gardens of Babylon, and the Great Pyramid of Giza.
By the time his list circulated widely, several of the structures were already damaged. Within a few centuries, most were gone. Earthquakes took the Lighthouse and the Colossus. Fire consumed the Statue of Zeus. A man named Herostratus burned the Temple of Artemis to the ground for no reason other than to make himself famous — and the fact that we still know his name means it worked. The Mausoleum survived longer than most, then fell to earthquakes and was dismantled by Crusaders for building stone. The Hanging Gardens are the strangest case: every ancient writer described them, but no Babylonian text mentions them, no archaeological trace has been found, and there is a serious scholarly argument that they never existed at all.
One survived. The Great Pyramid of Giza — the oldest on the list, built 2,300 years before the list was even written — is still standing. Not because it was protected or maintained. Because it is a pile of stone so massive, so geometrically simple, that there is nothing to burn, nothing to topple, nothing to dismantle efficiently. It endures by being irreducible.
The list outlived six of the seven things it describes. That felt like a story worth telling — not chronologically, but emotionally.
The Take
A parchment-colored screen. The title fades in: “The Ruin. Seven wonders of the ancient world. Six destructions. One survivor.” Scroll to begin.
Each wonder occupies a full scroll section. As you enter it, thousands of tiny stone-colored cubes drift inward from scattered positions and assemble into the silhouette of the structure — a stepped lighthouse, a standing figure with outstretched arms, a seated god on a throne, a colonnade of ten pillars, a three-tiered mausoleum, a terraced ziggurat, a triangle. The shapes are not realistic. They are architectural drawings made of particulate matter, rendered with an orthographic camera so there is no perspective distortion — everything reads like a diagram, a schematic, an entry in an ancient catalog.
Text appears alongside: the name, the dates, a sentence about what the wonder was. Then the epitaph fades in, and the destruction begins.
The Lighthouse shears laterally — horizontal bands of particles slide in alternating directions as the structure collapses under seismic shear, chunks falling with accelerating gravity. The viewport itself shakes. The Colossus breaks the same way but faster — 56 years of existence, gone. The Statue of Zeus burns: particles rise and drift like embers, glowing orange-white as they climb and fade. The Temple of Artemis burns the same way. The Mausoleum shears and falls. Each destruction is driven by its actual cause.
Then the Hanging Gardens assemble — and something is wrong. The particles never fully solidify. They flicker and phase, each one oscillating between visible and near-transparent on its own sine cycle, the whole structure shimmering like a mirage. The epitaph reads: “The only wonder that may never have existed.” The gardens do not destroy in the conventional sense. They simply fade out, as if they were never quite there.
The final section: the Great Pyramid. It assembles with the same staggered drift as every other wonder. 35 visible stone courses. The dates read “2580 BC — present.” The epitaph: “Still here.” You wait for the destruction. It does not come. The particles hold. The pyramid breathes — a gentle sine-wave displacement, each particle rising and settling by fractions of a pixel — but it does not break. You can scroll past it, and it simply stays.
The ordering is deliberate. It is not chronological. The sequence moves from structures that endured for centuries (the Lighthouse, 1,600 years), to ones that barely lasted a lifetime (the Colossus, 56 years), to ones destroyed by human cruelty (Herostratus), to one that may be fictional, to the one that refuses to end. The emotional arc is a narrowing funnel: from slow erosion to sudden violence to ontological doubt to permanence.
The Tech
InstancedMesh with Per-Instance Shader Attributes
Each wonder is a single THREE.InstancedMesh containing 5,000 instances of a tiny box geometry (0.055 units per side). Three custom InstancedBufferAttribute arrays drive the animation: aDelay (a random 0-1 float that staggers both assembly and destruction timing), aSeed (a random float for deterministic pseudo-randomness in displacement and color), and aOriginalPos (the vec3 target position for each particle within the architectural silhouette). The instance matrix stores each particle’s target position, rotation, and scale. The vertex shader computes an offset that interpolates between a scattered origin and zero (assembled) based on the uAssembly uniform, which is added to the instance transform. This keeps the CPU cost at zero per frame for position updates; all 5,000 particles animate on the GPU.
Four Destruction Modes in One Vertex Shader
A single vertex shader handles all destruction types via the uDestructionType integer uniform. Fire (type 0) displaces particles upward with per-instance velocity variation (2.0 + aSeed * 3.0), adds sinusoidal horizontal drift to simulate convection, and passes a vGlow varying to the fragment shader that shifts the particle color from stone toward orange-white. Earthquake (type 1) applies lateral shear based on the particle’s vertical position — mod(floor(aOriginalPos.y * 3.0 + 0.5), 2.0) alternates shear direction between horizontal bands, producing visible fault-line separation rather than uniform collapse — then adds quadratic gravity (destroyT * destroyT * (3.0 + aSeed * 4.0)). Imaginary (type 2) never fully assembles; it modulates alpha on every frame with sin(uTime * 3.0 + aSeed * 40.0), producing per-particle flicker that makes the entire structure shimmer independently of scroll position. None (type 3) skips destruction entirely — the pyramid holds.
Canvas-Silhouette Shape Sampling
Each wonder’s particle positions are generated by drawing a recognizable 2D silhouette onto an offscreen 256×256 canvas, then randomly sampling filled pixels to produce world-space coordinates. The Lighthouse is drawn as three stacked rectangles with hard setbacks and a circular beacon. The Colossus is a standing human figure with V-shaped legs, extended arms, and a torch flame. The Temple of Artemis is a wide colonnade of 10 thin column rectangles with a low pediment. The Zeus is a seated figure inside a rectangular throne frame. The Mausoleum has three tiers — a solid podium, a narrower colonnade, and a small pyramid cap. The Gardens are five flat terrace rectangles stepping inward. And the Pyramid is the only triangle. Each silhouette is drawn in white on black, all white pixels are collected, and 5,000 random samples are drawn, converted back to world coordinates via the inverse of the canvas mapping. This approach guarantees that the particle cloud actually forms the intended shape — earlier approaches using purely procedural generators (random x/y placement within mathematical bounds) consistently produced triangular masses regardless of the intended shape.
Orthographic Camera and Parchment Palette
The scene uses THREE.OrthographicCamera with a frustum size of 8 units and no perspective foreshortening. This was a deliberate choice: perspective would make the shapes read as 3D objects in space, while orthographic makes them read as diagrams — elevation drawings, catalog entries, the visual language of architectural documentation. The background is #f0e8d8, a light parchment, with text in #2a2218 dark sepia. Typography uses Cormorant Garamond at weight 300. This is a conscious break from the dark backgrounds that dominate the archive — the subject is ancient, documentary, archival, and the palette follows.
Scroll-Driven Section Management
The experience divides total scroll distance into 8 equal sections (140vh each). A normalizedScroll value maps the scroll position into a 0-to-8 range, from which currentSection and sectionProgress (0-1 within each section) are derived. Assembly occupies the first 20% of section progress (uAssembly = min(1.0, progress / 0.2)). Destruction begins at 45% and completes at 95% — leaving a 25% window where the structure stands intact and readable. Text appears at 5% and hides at 92%. The epitaph line fades in separately after 50%, timed to land just as destruction begins. Only the active section’s mesh is visible (plus a brief overlap for the transition), keeping draw calls to a single InstancedMesh at any time.
Viewport Shake
When an earthquake destruction is active (type 1, between 10% and 90% destruction progress), a CSS class adds a shake keyframe animation to the canvas element — 2-pixel random translations at 0.08s intervals. This is applied to the canvas rather than individual particles, so the entire viewport judders as a unit. The effect is suppressed via prefers-reduced-motion: reduce.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.