REFERENCE
- Gallery page: https://magpui.com/en/i/interactive-3d-physics-textbook-5aa896
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/interactive-3d-physics-textbook-5aa896/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/interactive-3d-physics-textbook-5aa896/clip.mp4
- Original post: https://x.com/techartist_/status/2117659337057517831 by @techartist_
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: An interactive 3D textbook. A hardback book lies open on a dark walnut desk under soft lamp light, seen from a slightly raised three-quarter angle. Each spread is one lesson (for example: charge and current, voltage, resistance, static, power and the bill, mains and the plug). The left page is printed text: lesson title, one formula, two or three short paragraphs, a small multiple-choice question and a 'Lift the flap to see the answer' box. The right page holds a small 3D diorama that rises out of the paper like a pop-up: line-drawn apparatus (cells, switch, bulb, ammeter dials, coil, a charged dome, a wall socket and plug) that starts as a flat ink sketch and fills in to a white clay model. Glowing blue particles stream along the wires to show current. The reader interacts with the diorama (flip a switch, drag a slider contact, rub a balloon, plug in a kettle) and the page reacts live. It should feel calm, tactile and precise, like a museum exhibit inside a book.
DESIGN SYSTEM: Full-viewport WebGL canvas. Desk: dark wood texture #3A2418 to #5A3A26 with soft vignette. Paper: warm cream #F1E7D3 with faint grain, page curvature toward the spine and a soft shadow in the gutter. Print typography: a bookish serif for titles (about 28px equivalent, bold, #2A2420) and body (13px equivalent, #3A332C); formulas in italic serif. Diorama models: off-white clay #EDEAE3 with thin dark ink outlines (#2B2B2B, 1-1.5px look), small numbered callout circles. Current: electric blue #3B82F6 core with #9CC8FF glow. Bulb glow #FFB36B. UI chrome on top: a small rounded pill top-left with the lesson name (white 85% opacity, 12px sans, radius 999px) and round icon buttons top-right (prev, next, menu, 32px, white 80% opacity, subtle blur). Hint tooltips appear as small white cards with a soft shadow and radius 10px.
MOTION: Page turn between lessons: the right page lifts and curls over the spine (bend deformation on a subdivided plane), 900ms cubic-bezier(0.45, 0, 0.2, 1); the camera eases slightly closer then back, 1200ms. Diorama build-in on each new spread: ink outline draws on (stroke reveal) 500ms, then clay fill fades and the parts rise out of the paper with a small overshoot, staggered 70ms, 600ms cubic-bezier(0.34, 1.56, 0.64, 1). Current flow: particles move along a spline per wire at a speed proportional to the current value, with a soft trail; when the circuit opens they slow to a stop over 300ms and fade. Bulb brightness tracks current with a 150ms ease. Interactions: dragging a slider contact updates the meter needle with a spring (stiffness 180, damping 18). Lift-the-flap: the flap hinges up 120 degrees, 450ms ease-out. Intro: camera dolly from a desk lamp toward the book, 2.5s cubic-bezier(0.65, 0, 0.35, 1).
SECTIONS: Parts: desk scene and lamp, book with spine and stacked page edges, left text page, right diorama page, chrome (lesson pill, nav buttons), hint tooltips. States per diorama: idle (sketch), built (clay), live (current on), interacted (values changing), answer revealed. Lesson list is data-driven: each lesson has title, formula, copy, question, answer and a diorama module.
IMPLEMENTATION: Three.js (or React Three Fiber) with one scene: the page text rendered to a CanvasTexture so it stays crisp and editable, the dioramas as small glTF models modelled in Blender or built from primitives, outlines via an inverted-hull or edge-detection post pass, current as instanced points following CatmullRom curves. Raycasting for clicks and drags on parts; mirror every interactive control in an accessible HTML overlay (buttons and sliders with labels) so keyboard users can operate it, plus arrow keys for page turns and visible focus rings. prefers-reduced-motion: no camera moves or page curl, cross-fade between spreads, current shown as a static highlighted path. Keep it to one diorama mounted at a time, cap devicePixelRatio at 2, pause rendering when the tab is hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, the original lesson text or models from the original; write your own copy and use placeholder apparatus.
SUCCESS CHECK:
- Turning pages plays a believable curl and each new diorama draws itself from sketch to clay.
- Flipping a switch stops and restarts the blue current flow and changes bulb brightness and meter readings live.
- With prefers-reduced-motion on, spreads cross-fade and all controls still work from the keyboard.
