Inner Sleeve

Five-Fold Box Renderer

• · The same article DOM is cloned five times. The centre face stays flat while the top, bottom, left and right faces are folded away at rotateX / rotateY ±90°, and the five are assembled into a box under a 20vw perspective — an open carton seen from the inside.
• · The side walls are mirrored with scaleX(-1) and dropped to 5% opacity, so they read as text showing through the paper rather than a second copy. All five faces receive the same translateY on scroll, which is why a sentence running off the centre face continues across the fold instead of breaking at it.

Hijacked Smooth Scroll without a Library

• · No scroll library. The body is forced to the article height plus one viewport so the native scrollbar survives, and a requestAnimationFrame loop chases scrollY with a lerp of 0.1 and writes the result into the transforms of all five faces — about thirty lines in total.
• · The same loop derives reading progress and drives the READ % track in the top-right corner. Body height is re-measured after fonts and images load and on every resize, so the scroll range never drifts away from the content.

Mouse-driven Perspective Origin

• · Pointer position is normalised to a 0.1–0.9 range and eased with a lerp of 0.08 before being written to perspective-origin, which travels from 33% / 35% at the top-left to 68% / 68% at the bottom-right. The box leans with the hand rather than snapping to it.
• · Its easing coefficient is deliberately different from the scroll lerp, so the two motions never lock into step — the page follows the wheel at one speed and the viewpoint follows the mouse at another.

Client-side Column Switching

• · The four articles live as JSON and a render function builds their HTML. Switching columns fades the box out with GSAP, resets scroll to zero, remounts all five faces with the new article and fades back in.
• · The ruler tabs, the arrow buttons and the keyboard all share one goTo(), which locks while a transition is running, so a second click mid-fade cannot leave two articles on screen at once.

Generated Asset Pipeline

• · Every image is generated in Python Pillow rather than sourced: four cover collages (a magnifier, an amethyst, dentures, a bonsai), eight documentary photographs, ten screentone fragments, two pixel cursors and the logo.
• · Torn-paper edges, drop shadows, halftone, film grain and duotone are written as composable functions, and every render is seeded, so the whole set can be regenerated identically after any change.

Toggleable Layers

• · A puzzle overlay whose pieces are nudged on hover on desktop and dragged with Draggable + InertiaPlugin on mobile, a custom cursor, and a 3D cover card that rotates toward the mouse and folds shut on click.
• · Three UI versions — the original-style header, a floating dock and the full-width ruler — are kept in the markup behind display-tag comment blocks, so each can be switched on or off without touching the code.

Box as Page

A white box on grey paper. There is no header and no hero — the page opens on an object label and the article title, the way a scanned object arrives, and the reader is already inside the carton.

Full-width Tab Ruler

Twelve UI studies were drawn before the ruler was chosen — four layout changes, four material changes, four concept derivations. The one that stayed puts the wordmark, four tabs, links and arrows on a single line, with the current column marked by a heavy underline.

Type as Texture

The mirrored text on the side walls and the body copy sliding down the floor are texture, not content. Inter Tight carries the articles and JetBrains Mono the labels and the progress track.

Editorial Blocks

Five block types cover all four articles: a single-column body, a two-column body with the lead on the left, an arrowhead pull quote, a transcript with the speaker set on the left, and a two-photograph block.