The Inscription

Inspired by Mesoamerican writing systems on Wikipedia

Built with Three.js · Scroll-driven camera · Procedural geometry

Techniques Vertex distortion for organic stone · Accordion-fold codex · Fragment particle cloud · Section-based text fade

The idea

Mesoamerica is one of three places where writing developed independently. The Wikipedia article describes fifteen distinct writing systems spanning three millennia — from the Olmec’s carved serpentine blocks to the Maya’s eight hundred logographic-syllabic glyphs to the Aztec’s painted codices. After the Spanish conquest, nearly all of it was burned.

The experience is a vertical descent through that timeline. Each writing system gets a 3D object floating in warm amber light: a heavy stone block, a standing slab, a tall stele, an accordion-folded codex. Then scattered fragments — all that survived.

Scroll architecture

The Three.js canvas is position: fixed, covering the viewport. A scroll-spacer div creates 700vh of scrollable height (7 sections × 100vh). JavaScript reads window.scrollY each frame, normalizes it to 0–1, and moves the camera downward through a vertical arrangement of 3D objects.

Text overlays fade based on proximity to each section’s center — fully visible within 25% of the section, fading by 45%. The text sits on the left third of the viewport, leaving the right for the 3D objects.

Procedural stone

Each stone object uses BoxGeometry with subdivisions, then vertex positions are displaced using a deterministic hash function to create organic surface irregularity. The distortion is subtle (0.025–0.04 units) but enough to break the CG-perfect look and suggest weathered stone.

The fragments

The destruction section replaces solid objects with 40 thin flat shards — BoxGeometry with near-zero depth — scattered in a loose cloud. Each shard has its own spin speed and downward drift. They slowly fall and rotate, like ashes.