REFERENCE
- Gallery page: https://magpui.com/en/i/crawling-robot-spider-product-page-4da87a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crawling-robot-spider-product-page-4da87a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crawling-robot-spider-product-page-4da87a/clip.mp4
- Original post: https://x.com/designsbychirag/status/2117101614431695128 by @designsbychirag
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 dark, full-viewport product hero for an eight-legged inspection robot. A chrome and graphite spider-like robot with two glowing red eyes walks over an uneven dark floor using procedural inverse kinematics: feet plant and stay in contact, the body bobs and tilts with the terrain. The visitor can switch modes (Walk, Stop, Obstacle Course, Grab Mode, Fall) and in grab mode can click and drag any leg; the robot rebalances, and if pushed over it falls and stands back up. A telemetry panel shows live per-leg numbers. It should feel heavy, precise and slightly creepy, like a real hardware demo.
DESIGN SYSTEM
- Background: #0E0E0F with a subtle radial vignette and a faint circular floor guide line #2A2A2A.
- Header: small logotype top left (uppercase 12px, letter-spacing .15em, placeholder name "UNIT / 02"), small uppercase pill buttons top right (11px, 1px border #3A3A3A, radius 4px, active fill #F28C28).
- Headline centered at top: condensed bold uppercase 44px, line-height 1, white with one key word in orange #F28C28; 13px gray #9A9A9A paragraph below, max 520px.
- Telemetry panel: right side, 220px wide, background rgba(20,20,22,.85), 1px border #2C2C2C, radius 6px; monospace 11px rows (label gray #8A8A8A, value white), a small row of 8 leg indicators that light orange when the leg is in contact.
- Mode bar: bottom center, segmented control of 5 options, 11px uppercase, active option white background with black text.
- Robot material: dark brushed metal #2B2B2E, chrome highlights, small orange LED points on joints, emissive red eyes #FF2A2A with bloom.
MOTION
- Gait: alternating tetrapod gait, each step 420ms, foot lift arc 6-8% of leg length, body height smoothed with a critically damped spring; body pitch and roll follow the average foot heights.
- Camera: slow idle orbit 0.05 rad/s; on grab mode it dollies in 20% over 800ms cubic-bezier(.22,1,.36,1).
- Grab: dragging a leg moves its IK target under the pointer; the other legs rebalance within 200ms; releasing snaps the foot back down with a spring.
- Fall and recover: the body tips over with physics-like rotation over 600ms, legs flail, then the robot pushes off and stands up in about 1.6s, eyes flicker twice.
- X-ray toggle: materials crossfade to translucent glass (opacity .35) over 400ms and inner parts glow orange.
- Telemetry numbers update at 10Hz with tabular numerals; contact indicators blink per footfall.
SECTIONS
1. Header with logotype and quick-action pills.
2. Hero headline and paragraph.
3. 3D stage with the robot and floor.
4. Telemetry panel (right).
5. Mode bar (bottom).
States: walking, stopped, obstacle course (random bumps on the floor), grab mode, fallen, recovering, x-ray.
IMPLEMENTATION
React Three Fiber (or Three.js) with a procedurally built robot from primitives (capsules, cylinders, spheres) so no model is required; a two-bone IK solver per leg, raycasts against a noise heightfield for foot placement, and postprocessing bloom for the eyes and LEDs. Drive telemetry from the simulation state, not fake numbers. Pointer dragging uses raycasting on a plane at foot height. prefers-reduced-motion: robot stands idle with a gentle breathing motion and the camera is static. Mode bar is a keyboard-navigable radiogroup. Cap DPR at 1.75, pause rendering when off-screen.
ADAPT TO THE PROJECT
Reuse the project's existing fonts, color tokens and button styles; map orange and red to the nearest accent tokens. Use a placeholder product name and copy. Do not copy logos, brand names, photos or 3D models from the original.
SUCCESS CHECK
- The robot walks with feet that stay planted on uneven ground and the body tilts with the terrain.
- In grab mode a leg can be dragged and the robot rebalances, and after a fall it stands back up on its own.
- Telemetry values and leg contact indicators change in sync with the simulation.
