REFERENCE
- Gallery page: https://magpui.com/en/i/cursor-tracking-3d-robot-hero-baefba
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cursor-tracking-3d-robot-hero-baefba/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cursor-tracking-3d-robot-hero-baefba/clip.mp4
- Original post: https://dribbble.com/shots/27835842-AI-SaaS-Website-Design-3D-Animation by Perevoz Design
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 landing hero with a friendly 3D robot head as the centerpiece. The head is a white glossy sphere with a black rounded visor and two white oval eyes; the visor rim glows in a violet-to-cyan gradient. The head turns smoothly to look at the cursor. Next to it, a small floating card cycles through tiny stats (a gradient swatch, a ring gauge, a bar chart). It should feel cute, calm and a little curious.
DESIGN SYSTEM
- Layout: 12-column grid, copy in columns 1-4 vertically centered, robot centered at ~45% width, stat card bottom right of the robot.
- Background: #EDEDEF with a faint hexagon pattern in #E4E4E8, outer frame radius 28px.
- Type: geometric sans; headline 44px/1.1, three lines, the middle line in a violet-to-cyan gradient (#A855F7 -> #60A5FA); body 15px #6B7280.
- Nav: pill links 13px, active link outlined 1px #D1D5DB; primary button black #0A0A0A, white text, radius 999px, 40px tall.
- Robot: sphere white #F5F5F7 with soft studio lighting, visor #0B0B12, eyes #FFFFFF, rim gradient #8B5CF6 -> #38BDF8; soft contact shadow below.
- Stat card: 180x150px, white, radius 16px, shadow 0 12px 30px rgba(0,0,0,0.08), label 11px under it, 3-dot pager.
MOTION
- Head look-at: on pointermove, rotate the head toward the cursor, yaw max 35deg, pitch max 20deg; follow with a spring (stiffness 120, damping 14) so it lags slightly and settles.
- Idle: when the pointer is still for 2s, gentle float translateY 0 -> -6px -> 0 over 3200ms ease-in-out, loop; eyes blink (scaleY 1 -> 0.1 -> 1, 160ms) every 4-6s.
- Stat card: every 2500ms crossfade to the next stat, 400ms cubic-bezier(0.22, 1, 0.36, 1), content slides up 8px; pager dot widens 6px -> 16px.
- Bars in the chart card grow from 0 height with 60ms stagger, 500ms cubic-bezier(0.34, 1.56, 0.64, 1).
SECTIONS
- Top nav: logo left, 4 pill links center, primary button right.
- Hero copy: 3-line headline, 2-line body, primary button with arrow icon.
- Robot head in the center with contact shadow.
- Floating stat card with label and pager.
IMPLEMENTATION
- React Three Fiber: a sphere plus a rounded box for the visor (or a Spline scene exported to R3F); MeshPhysicalMaterial with clearcoat for the gloss, emissive gradient texture on the rim.
- Compute the look-at from normalized pointer coords; lerp/spring rotation in useFrame, never set it directly.
- prefers-reduced-motion: no cursor tracking, no float, card changes without slide.
- Cap devicePixelRatio at 2, pause rendering when the hero is off screen, lazy-load the canvas after first paint with a static poster.
- Keyboard: the stat card pager is focusable buttons; the canvas is aria-hidden.
ADAPT TO THE PROJECT
- Reuse the project's existing design tokens, components and fonts; map the colors to the closest existing tokens.
- Never copy logos, brand names, photos or illustrations from the reference. Use neutral placeholders.
SUCCESS CHECK
- Moving the mouse to each corner turns the head toward it without snapping.
- The stat card cycles through 3 states and the pager matches.
- With reduced motion the head stays still and the page is fully usable.
