REFERENCE
- Gallery page: https://magpui.com/en/i/earth-history-scrubber-fde523
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/earth-history-scrubber-fde523/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/earth-history-scrubber-fde523/clip.mp4
- Original post: https://x.com/quantapar/status/2113562786265756046 by @quantapar
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: Build a compact interactive geological-time scrubber: a floating 3D globe above a date label, a short era description and a horizontal tick-mark slider. Dragging time changes the globe between present-day Earth, dark rocky states, glowing magma, cloudy oceans and green-blue early life. Keep the surrounding surface white and almost empty.
DESIGN SYSTEM: Center a 440px-wide component with a 260px globe, a soft elliptical ground shadow and about 36px between globe and date. Use a neutral sans-serif, 14px semibold dates, 11px secondary descriptions in #858581, and tiny 9px endpoint labels. Background #ffffff, primary text #252624, quiet ticks #dcded9, selected tick #202622. Use ocean #165678, land #899969, charcoal rock #302a24 and magma #ff801d as approximate material colors. The slider is roughly 350px wide with fine ticks every 7px and taller marks near the active position.
MOTION: On pointer drag or keyboard input, update the selected time immediately; blend surface palettes, emissive fissures and cloud opacity over a proposed 450ms transition with cubic-bezier(0.22,1,0.36,1). Smooth the globe orientation toward the next state over 650ms with the same easing. Grow nearby ticks from 4px to 20px over 120ms, cubic-bezier(0.2,0.8,0.2,1), without a stagger. Fade era text over 160ms. These are implementation targets, not measured source timings.
SECTIONS: Globe and its ground shadow; centered date such as Today or 4.5 billion years ago; one short line describing the selected era; fine horizontal time ruler from 13.8 billion years ago to Today, with a dark selected marker. States: idle, hovered tick, dragging, keyboard-focused slider and selected era. Treat pre-Earth stages as explicitly illustrative rather than scientific Earth reconstructions.
IMPLEMENTATION: Use Three.js for one sphere with shader-driven rock, emissive magma and ocean/cloud material layers; synchronize a native accessible range input to a small set of era keyframes. Generate procedural surfaces or use licensed placeholder maps; do not fetch source textures. Keep geometry below 40k triangles, cap device pixel ratio at 1.5 and render on demand outside transitions. Supply arrow keys, Home/End, a visible focus outline and aria-valuetext with the era. For prefers-reduced-motion, swap material states without rotation or crossfade; supply a static globe fallback if WebGL is unavailable.
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, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Scrubbing and arrow keys update the globe, date and description together.
- The globe remains the visual focus while the ruler stays readable at mobile widths.
- Reduced-motion and WebGL fallback modes retain the full timeline controls.
