Within The Stately Lies The Sty
The story behind The Unfold
Inspired by Miura fold on Wikipedia
Built with Three.js · MeshStandardMaterial · DirectionalLight (Shadows) · CanvasTexture
Techniques UV-Mapped Panel Geometry · Shadow Mapping · Drag Interaction
Direction Build a draggable Miura fold where the rigid origami physically conceals letters, revealing that STATELY hides STY
Result A 3D paper surface you drag to unfold — hidden columns accordion open to reveal what dignity was concealing all along
The Story
The Miura fold is one of engineering’s elegant solutions. Invented by Koryo Miura in 1985, it’s a rigid origami pattern that allows a surface to be compactly folded and unfolded in a single motion. Pull one corner, and the entire structure expands. Push it back, and it collapses uniformly.
NASA uses it for solar panels on satellites. Map makers adopted it decades ago. It’s efficiency incarnate - maximum surface area, minimum volume when stored.
But the Wikipedia article on the Miura fold got us thinking about what else folding conceals.
The Take
STATELY.
Seven letters. A word that means dignified, imposing, grand. The kind of word you’d use to describe a mansion, a ceremony, a person of great bearing.
Now fold it. Compress those seven columns into three. What remains visible?
STY.
The word for a pig’s enclosure. The metaphor for filth, disorder, degradation.
Beneath every dignified surface, something base waits to be revealed.
The experience literalizes this hidden meaning. The Miura fold isn’t just a clever engineering solution - it’s a mechanism for concealment. The word STATELY contains STY the way every facade contains the thing it’s hiding. You just have to know how to fold it.
The Tech
Three.js handles the 3D geometry and rendering. The fold simulation uses a grid of panels (7 columns x 4 rows) that pivot on alternating axes.
The key insight: a Miura fold isn’t random creases. It’s a precise accordion pattern where odd columns fold forward and even columns fold backward, creating a zigzag that compresses horizontally while maintaining vertical alignment.
The implementation creates each panel as a separate PlaneGeometry with UV mapping that positions its portion of the STATELY texture. The texture itself is a 2048x1024 canvas with each letter centered in its column.
When folding:
- Visible columns (0, 3, 6 = S, T, Y) compress toward center
- Hidden columns (1, 2, 4, 5 = T, A, E, L) accordion-fold behind their neighbors
- Opacity decreases on hidden columns to sell the occlusion
- Subtle rotation on the fold group adds depth perception
The fold amount interpolates from 0 (fully unfolded, STATELY visible) to 1 (fully folded, only STY visible). Drag interaction maps horizontal movement to this value, with snap behavior on release.
Shadow mapping gives the paper weight. The cream color (#f5f0e8) reads as paper without being stark white.
The Experience
Drag horizontally.
Start with the folded state. You see STY - a truncated, mysterious three-letter word. It looks incomplete. Something is obviously missing.
Drag right to unfold. The panels pivot outward, the hidden letters emerge, and STATELY reveals itself. Dignified. Complete.
But you know the truth now. You’ve seen what’s hiding inside.
Double-click (or double-tap) to toggle between states if dragging feels like too much work. The snap animation handles the transitions smoothly.
The mobile experience uses touch controls with the same mapping. There’s something more satisfying about physically dragging the fold open on a touch screen - it feels like you’re actually handling paper.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.