REFERENCE
- Gallery page: https://magpui.com/en/i/cryostat-scroll-story-in-3d-e981d3
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cryostat-scroll-story-in-3d-e981d3/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cryostat-scroll-story-in-3d-e981d3/clip.mp4
- Original post: https://x.com/ignatdesigner/status/2117989919591379323 by @ignatdesigner
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 pinned, scroll-driven 3D storytelling section that follows one compute job from a line of code down into a cryogenic machine and back. The viewport stays pinned while the scroll moves a camera vertically through a procedurally built dilution-refrigerator: a code card at the top, then a stack of round gold plates connected by thin rods and bundles of silver coax lines, a glowing pulse that travels down a copper cable, and at the bottom a square processor package whose chip lights up. Then the pulse climbs back and the story returns to the code card with a result. It should feel cinematic, warm and precise, like a product film the reader scrubs with the scroll. Mobile first (portrait), scaling up to desktop.
DESIGN SYSTEM: Background a near-black warm gradient (#0B0806 at the edges to #1A0F08 behind the machine) with a faint radial copper haze (#C46A2A at 15% opacity) and a few tiny floating dust specks. Top left: a small pill tag (dot #FF7A2F + label 'Quantum cloud', 12px, #E8DCCF on rgba(255,255,255,0.06), 1px border rgba(255,255,255,0.1), radius 999px). Headline 2 lines, clean grotesque sans, about 30px mobile / 56px desktop, weight 500, #F4EEE8, tight leading 1.05. Code card: dark glass panel (#141010 at 85%, 1px border rgba(255,255,255,0.08), radius 12px, window dots), 12px monospace with orange keywords (#FF8A3D), lilac strings (#B9A3FF), a small orange 'Run' chip. Materials: plates warm gold/brass (#C8913F base, metallic 0.9, roughness 0.35) with a bright emissive white-orange rim on the active plate; rods thin brass; coax lines silver-gray (#9A9A9E); pulse cable copper with an emissive core (#FFB25A). Floating temperature label next to the active plate: tiny dot + small caption ('Top plate') + value ('300 K', '50 K', '4 K', '800 mK', '100 mK') in a dark pill, 11/14px. Bottom step card: dark glass (#151010 at 80%, radius 10px, 1px border rgba(255,255,255,0.08)) with a 2px orange left bar, step number '01' to '05' in #FF7A2F 12px, title 16px #F4EEE8, two lines of 13px #A89D92 copy. Under it a 1px progress track with an orange to lilac gradient fill (#FF7A2F to #A58BFF) and a small mouse-scroll icon at the right.
MOTION: Pin the section for about 5 viewport heights; map scroll progress 0-1 to a master timeline with scrub (smoothing 0.6s). 0-0.15: code card visible, a cable grows from the Run chip downward (draw-on via shader uniform or tube geometry drawRange) while a light pulse (emissive sprite with additive glow) leaves the chip. 0.15-0.35: camera dollies down and slightly orbits (about 15 deg yaw) to the top plate; the active plate's rim glows up over 300ms equivalent of scroll, temperature label crossfades to 300 K. 0.35-0.65: camera keeps descending through the stages, each plate takes the glowing rim in turn as the pulse passes, label values step down (300 K, 50 K, 4 K, 800 mK, 100 mK) with a 200ms fade and 6px slide; coiled heat exchanger springs come into view near the bottom. 0.65-0.8: camera pushes in on the processor package, which rotates in from the side; the chip blooms (emissive intensity 0 to 4, bloom pass) when the pulse arrives. 0.8-1: pulse travels back up, camera pulls up to the code card, which shows a small result bar chart under the code. Step cards switch at each chapter: outgoing fades and slides up 8px over 250ms, incoming fades in from 8px below with cubic-bezier(0.22, 1, 0.36, 1). Progress fill width follows scroll progress continuously. Idle: dust specks drift slowly, pulse glow flickers subtly (noise, 5% intensity).
SECTIONS: 1) Tag + headline (static, always on top). 2) 3D stage filling the viewport behind. 3) Chapter steps: 01 One line of code (code card), 02 Into the machine (top plate), 03 Stages of cold (descent through plates with temperature labels), 04 On the chip (processor glow), 05 Back to your notebook (result appears in the code card). 4) Progress track with scroll hint. 5) A closing card after the pin: small pill 'Concept', centered headline and a one-line explanation, plus a pill link button.
IMPLEMENTATION: Three.js (or React Three Fiber) with every object built in code: CylinderGeometry for plates with a separate thin TorusGeometry rim for the emissive glow, instanced thin cylinders for coax bundles, TubeGeometry along CatmullRom curves for cables, a TubeGeometry helix for the coils, a beveled box for the chip package. MeshStandardMaterial with a small RoomEnvironment for metallic reflections, UnrealBloomPass (strength about 0.8, threshold 0.7) for the glowing parts. GSAP ScrollTrigger with pin and scrub to drive a single timeline that animates camera position, lookAt target, pulse position along the curve (getPointAt) and DOM labels; project 3D anchor points to screen each frame to place the temperature pill. Keep draw calls under ~80 with instancing, cap devicePixelRatio at 2, pause rendering when offscreen. prefers-reduced-motion: no pin or camera flight; show five static rendered stills with their step cards stacked vertically. Step cards and the final button are real DOM, readable by screen readers; keyboard scrolling works as normal.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts and card components; map the copper, gold and lilac accents to the closest existing tokens. Never copy logos, brand names, product names or copy from the original; use placeholder product text and your own technical story if the subject differs.
SUCCESS CHECK:
- Scrolling scrubs smoothly forward and backward through all five chapters with the camera, pulse, glowing plate, temperature label and step card always in sync.
- The scene holds 60fps on a mid-range laptop and stays under ~80 draw calls with bloom on.
- With prefers-reduced-motion enabled the section becomes a static stacked sequence with no pinning.
