REFERENCE
- Gallery page: https://magpui.com/en/i/two-arm-drawing-machine-in-3d-ecf187
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/two-arm-drawing-machine-in-3d-ecf187/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/two-arm-drawing-machine-in-3d-ecf187/clip.mp4
- Original post: https://x.com/tutao0123/status/2117287840698831256 by @tutao0123
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 hero page for a 'kinetic study': a 3D drawing machine on a round platter. Two rigid arms linked end to end rotate around a central spindle at different speeds, and a pen at the tip of the second arm draws one continuous red curve (a rose / spirograph pattern) on the platter. Next to it, a large editorial headline and a four-step sequence (Form, Anatomy, Motion, Trace) that moves the camera and the machine through each idea. It should feel like a precise museum instrument: quiet, warm, tactile and slightly playful.
DESIGN SYSTEM
- Background #EEECE7 (warm porcelain), hairlines 1px #D9D6CF; top bar 64px tall with a small round logo + two-line uppercase label, centered nav (Showcase active with a 2px vermilion underline, Playground), a mono label 'INDEX 001 / ORBIT SCRIBE' with the number in vermilion, material swatches on the right (three 12px dots with names: Porcelain, Obsidian, Blueprint) and an About link.
- Layout: 12-column grid, 64px side margins; left 5 columns hold the copy, right 7 columns the 3D canvas; bottom strip 80px with the sequence tabs.
- Typography: headline in a neutral grotesk 88-104px, weight 400, letter-spacing -0.03em, line-height 0.95, color #1E1E1C, with the last word 'visible.' set in an italic serif; body 16px #6E6B66; tiny mono labels 10-11px uppercase, letter-spacing 0.14em, #8A867F; small red dot bullets #D9472B.
- Primary button: 48px tall, 220px wide, flat vermilion #D9472B, white 14px label and an up-right arrow, radius 2px; secondary 'Watch the sequence' with a 24px outlined circular play icon.
- 3D machine: platter is a white disc (#F7F6F3) with faint concentric guide circles #E6E3DD, a stepped bezel ring with a brass line #B89B5E, tick marks and small black studs around the rim; arms are dark graphite #2A2B2E with brass pins, a chunky stacked spindle at center with a glowing orange core #FF6A3D; the curve is a 1.5px line #D9472B; soft contact shadow under the platter.
- Right-side controls: segmented 'Perspective | Top' toggle (active text vermilion), an 'Assembly' row with 'Explode' and a thin slider (0-100%) with a vermilion knob.
MOTION
- Idle: arm 1 rotates at w1 = 0.6 rad/s, arm 2 at w2 = -1.9 rad/s (ratio about 1 : -3.2) so the pen draws a looping rose; the trail is a persistent polyline (up to 6000 points) that slowly fades its oldest 20% to 40% opacity. Camera drifts +-3deg around Y on a 12s sine loop.
- Step change (click a tab or scroll): camera tween 1200ms cubic-bezier(0.65,0,0.35,1); tab label turns vermilion and a progress line under the tabs fills over the step.
- Form: 3/4 perspective view, gentle drift.
- Anatomy: exploded view, arm 2 lifts +120px, arm 1 +70px, spindle parts separate along Y (900ms, stagger 80ms, cubic-bezier(0.22,1,0.36,1)); thin leader lines with mono callouts fade in (300ms after parts settle).
- Motion: camera lowers to show the arms sweeping; speed briefly x1.5.
- Trace: camera rises to a top-down orthographic-like view (1400ms) revealing the full symmetric curve.
- Material swatch: crossfade materials 500ms (Porcelain light, Obsidian dark platter with light curve, Blueprint navy platter #1E3A8A with white curve).
- Drag on the canvas orbits the camera (damping 0.08); 'Explode' slider maps directly to separation.
SECTIONS
1. Top bar (logo, nav, index label, swatches, About).
2. Hero copy: red-dot eyebrow 'STUDY 001 / PRECISION IN MOTION', headline 'Motion, made visible.', two-line description, primary and secondary buttons, a mono caption with the study name and series number.
3. 3D canvas with the view toggle, assembly controls, and a hint 'DRAG TO ORBIT / SCROLL TO EXPLORE' bottom right.
4. Sequence strip: 'A CLOSER LOOK' + current step title and one-line caption on the left, four numbered tabs (01 Form, 02 Anatomy, 03 Motion, 04 Trace) and a 'Play sequence' control with a progress line.
IMPLEMENTATION
- Three.js (or React Three Fiber) with MeshStandardMaterial / MeshPhysicalMaterial, one hemisphere + one directional light with soft shadows, and a contact shadow plane; arms as a simple hierarchy (arm 2 parented to the tip of arm 1) so the pen position is just the world position of a child. Draw the trail with a Line2 (fat line) buffer updated in place. Use GSAP for camera and explode tweens.
- Steps are driven by both tab clicks and a scroll progress value; keep the copy in real HTML outside the canvas.
- prefers-reduced-motion: no camera drift, arms rotate at 25% speed, step changes are 200ms crossfades.
- Keyboard: tabs are a tablist with arrow-key navigation, the slider is a native range input, visible 2px vermilion focus ring.
- Cap DPR at 2, pause rendering off-screen, limit trail points and reuse geometry.
ADAPT TO THE PROJECT
Reuse the project's fonts, spacing scale, buttons, tabs and color tokens (map the vermilion to the accent token and the porcelain to the background). Do not copy the study name, logo or copy text; use placeholder labels.
SUCCESS CHECK
- The pen continuously draws a closed, symmetric rose curve on the platter while the arms rotate at different speeds.
- Clicking Anatomy explodes the arms and spindle upward with callouts; Trace moves the camera to a top view showing the full curve.
- Switching the three material swatches recolors platter, arms and curve without reloading the scene.
