REFERENCE
- Gallery page: https://magpui.com/en/i/cloud-cube-hero-that-opens-on-scroll-5dd176
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cloud-cube-hero-that-opens-on-scroll-5dd176/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/cloud-cube-hero-that-opens-on-scroll-5dd176/clip.mp4
- Original post: https://x.com/asliaay/status/2116875118056177783 by @asliaay
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 scroll-driven product hero for a cloud machine shown as a soft white cube. It starts as a clean, bright page; as the user scrolls the cube opens and explodes into stacked internal layers with specs, then 'the lights go off': the whole page turns dark, the cube turns graphite and a mint status band glows around its seam, answering a question in huge type. It ends on a pricing line with call-to-action buttons. Quiet, premium, product-launch feel.
DESIGN SYSTEM
- Light phase: background #F4F4F5 with a very subtle radial highlight; cube faces #FFFFFF, #EDEDED, #E2E2E4 with soft ambient occlusion at the base, radius 18px on edges.
- Dark phase: background #0A0A0A, cube faces #8E8E90 / #6E6E70 / #545456, seam band mint #7CF5C4 with bloom.
- Type: neutral grotesk sans. Hero title 72px weight 600 tracking -0.03em #111; subtitle 15px #6B6B6B; section headline 32px weight 600 two lines; answer word 'Yes.' 140px weight 700 in #D9FFE9 tinted; specs as stacked numbers 28px weight 600 with 11px grey labels.
- Nav: small logo left, two text links and a black pill button right (dark phase: white pill).
- Buttons: primary black pill 36px tall with white text; secondary text link with a chevron.
MOTION
- Pin the hero for about 400vh with scroll progress 0-1.
- 0-0.15: title and buttons fade up out (y -30px, opacity 0); cube moves from center-bottom to right of center and rotates from 35deg to 25deg Y, cubic-bezier(.22,1,.36,1).
- 0.15-0.4: lid lifts 80px; three thin internal boards (green circuit texture, dark chip, heatsink) separate vertically with 24px gaps, 60ms stagger, cubic-bezier(.34,1.56,.64,1); headline 'A powerful dev box in the cloud' fades in left; specs (cores, GB RAM, GB disk) count up from 0 to their value over the same range.
- 0.4-0.5: layers collapse back, lid closes, cube slides back to center.
- 0.5-0.6: lights off: background interpolates #F4F4F5 to #0A0A0A, cube materials darken, mint seam band fades in with a 600ms breathing glow loop (opacity .6 to 1, ease-in-out) once dark.
- 0.6-0.8: question 'Do my agents keep running when I close my laptop?' and huge 'Yes.' rise 40px with 80ms stagger.
- 0.8-1: copy fades, cube centers and scales 0.9; pricing line 'Cloud computers from $X/month' and buttons fade in below.
SECTIONS
- Hero: nav, title, one-line subtitle, two buttons, closed cube.
- Inside: exploded cube with specs list.
- Lights off: dark mode with glowing seam, question and big answer with a small paragraph.
- Pricing close: centered cube, price line, primary and secondary buttons.
IMPLEMENTATION
- React Three Fiber (or Three.js) for the cube with RoundedBox geometry, MeshStandardMaterial and a soft environment light; a bloom pass only for the seam. Drive everything from one GSAP ScrollTrigger timeline (scrub 0.8). A CSS-only fallback is possible with stacked PNG renders, but the 3D version reads much better.
- Theme switch: animate CSS custom properties on the root so nav, text and buttons flip with the scene.
- prefers-reduced-motion: no pinning; show the four states as static stacked panels with a simple crossfade.
- Cap devicePixelRatio at 2, pause rendering when the hero is offscreen, keep the scene under 50k triangles.
- Buttons and links keep visible focus rings in both themes.
ADAPT TO THE PROJECT
Reuse the project's existing tokens, fonts and button components, mapping the colors above to the closest tokens. Never copy logos, brand names, product names or renders from the original; use a placeholder product name and placeholder specs and price.
SUCCESS CHECK
- Scrolling plays open, explode, close, lights off and pricing in order and reverses smoothly.
- The background, text and buttons switch to the dark theme in sync with the cube.
- With reduced motion enabled there is no pinning and all content stays readable.
