REFERENCE
- Gallery page: https://magpui.com/en/i/procedural-kyoto-woodshop-craft-site-33fbe5
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/procedural-kyoto-woodshop-craft-site-33fbe5/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/procedural-kyoto-woodshop-craft-site-33fbe5/clip.mp4
- Original post: https://x.com/designcodeio/status/2117260582986662260 by @MengTo
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A one-page scroll story for a traditional woodworking workshop with eight chapters, each one a single craft object rendered in real time inside the same dim wooden workshop room. Everything 3D is generated in code: no model files, no texture images. Scrolling moves a chapter counter; the current object eases out and the next one assembles in the same spot while the room, light shafts and camera drift stay continuous. It should feel quiet, warm and museum-like, like walking along a craftsman's bench at dusk.
DESIGN SYSTEM
- Full-viewport WebGL canvas behind a fixed HTML overlay; 16:9 layout with text on the left 40% and the object centered right.
- Typography: a high-contrast didone/transitional serif for display titles, 96-120px, weight 400, tight tracking (-0.02em); a matching CJK serif for the 2-character kanji next to each title at about 60% of the title size, stacked vertically. Body is the same serif in italic, 15-16px, line-height 1.5, max width 340px. Small labels (chapter numbers, nav, specs) in a light sans or mono, 10-11px, uppercase, letter-spacing 0.12em.
- Colors: room shadows #120D09, wood mid-tones #5A3A22 and #8B5E3B, warm highlight light #F3E2C0, text #F1E8DA, muted labels #9C8E7C, one accent amber #E0A15A for a highlighted word in the body copy.
- Top bar 48px: wordmark left with small kanji, two text links, a right-aligned volume label and a small white pill button (radius 4px, 11px text, padding 6px 12px).
- Bottom right: an index list of the eight chapters (number + name, 10px), the active one in full white, the others at 45% opacity. Bottom left: a tiny edition label.
- Under the body copy, a three-column spec row (label 9px uppercase muted, value 12px), e.g. pattern / strips / tolerance.
MOTION
- Chapter change on scroll (one chapter per ~100vh, pinned canvas): outgoing title and copy fade and slide up 24px over 400ms, cubic-bezier(.4,0,.2,1); incoming title reveals letter by letter, 30ms stagger, 600ms each, translateY 40% -> 0 with cubic-bezier(.16,1,.3,1); body copy fades in 200ms later.
- Object transitions: the outgoing object scales 1 -> 0.92 and fades in 500ms; the incoming one builds in its own way over 900-1400ms with cubic-bezier(.22,1,.36,1): lattice strips slide into place in a staggered grid, the gouge carves the wave pattern progressively with chips flying, a flame flickers at the base of the charred boards with a rising smoke particle column, the plane leaves curled shavings that drop and settle.
- Ambient: slow camera dolly of 2-3% and a 1-2 degree yaw loop (12s, ease-in-out sine), dust motes drifting through two soft light shafts from the paper windows, warm light flicker of ±4% intensity.
- Chapter index: active row cross-fades 300ms.
SECTIONS
1. Intro: wordmark-size title with kanji, one-line italic subtitle, a framed lattice screen standing on a wooden floor.
2-8. One chapter per craft, each with a small "0N - CATEGORY" kicker, huge title + kanji, two-line italic copy with one amber word, the spec row, and its object: geometric lattice screen, wave-carved board on an easel, charred vertical boards over a small fire, a set of chisels on an indigo cloth roll, a dovetailed chest of drawers, a wedge joint of two timbers, a hand plane with shavings.
9. Closing: centered call to commission a piece with the small pill button.
IMPLEMENTATION
- three.js (or React Three Fiber) with one persistent scene; build every object from primitives, ExtrudeGeometry and instanced meshes; wood grain from a procedural shader (layered noise along one axis + ring bands) on MeshStandardMaterial, cloth and paper from noise too. Light: one warm key spotlight, a cool weak fill, volumetric shafts as additive cone meshes, soft shadows (PCFSoft, 1024 map).
- GSAP ScrollTrigger pins the canvas and maps scroll to a chapter index and a 0-1 progress per chapter; build-in animations are timelines driven by that progress so scrolling back reverses them.
- prefers-reduced-motion: no camera drift or particles; chapters cross-fade 200ms and objects appear already built.
- Keyboard: arrow keys / PageDown jump to the next chapter; the chapter index items are buttons with visible focus rings.
- Performance: cap DPR at 1.75, dispose geometry of chapters more than one step away, keep under ~150 draw calls, pause rendering when the tab is hidden.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, fonts and button components; map the browns and cream to the closest existing tokens. Do not copy the original wordmark, brand name, kanji choices or copy: write placeholder craft names and text.
SUCCESS CHECK
- Scrolling through the page shows eight distinct procedurally generated objects in the same lit room, with no external model or texture files loaded.
- Each chapter's title reveals letter by letter and the object build-in reverses cleanly when scrolling back up.
- With reduced motion on, chapters still change and stay readable without camera drift or particles.
