REFERENCE
- Gallery page: https://magpui.com/en/i/six-3d-scroll-sites-reel-b0ee4a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/six-3d-scroll-sites-reel-b0ee4a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/six-3d-scroll-sites-reel-b0ee4a/clip.mp4
- Original post: https://x.com/viktoroddy/status/2117585451502719144 by @viktoroddy
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Glossy pink jellyfish: A glossy translucent pink jellyfish floating upright with long trailing tentacles, soft studio lighting, subtle iridescent rim light, isolated on a plain white background, 3:4 portrait, no text.
- Robotic white octopus: A white ceramic-and-chrome robotic octopus with a domed head, red glass eye ring and eight articulated segmented arms spread wide, studio lighting, isolated on a plain pale mint background, 1:1, no text.
BUILD: A 2x3 showcase grid that plays six scroll-driven landing-page hero scenes at the same time, each one a 3D or heavy-motion hero built around a single hero object. The six tiles: (1) a fashion lookbook with a centered model figure, blurred siblings on both sides and a vertical thumbnail rail on the right, cycling through looks with a "LOOK 15, 16, 17..." counter; (2) a black AI landing hero with the headline "Unlock collective wisdom." next to a rotating brain made of thousands of yellow and violet particles that disperses into dust on scroll; (3) a pastel sky-gradient hero with a glossy pink jellyfish floating in front of giant black condensed words that scroll past ("DESIGN", "DELIGHT", "INSPIRE", "AND ENGAGE"); (4) a solar-energy hero with a house at dusk, headline "$0 Electricity Bills for the next 7 Years" and a two-option toggle, where fog drifts across the photo; (5) a black portfolio hero with "CRAFT IN MOTION" split into two words that slide apart while a ribbon of small project cards sweeps diagonally between them; (6) a white-and-mint product dashboard with a robotic octopus whose arms rotate as the cursor and scroll move. It should feel like a premium, cinematic reel of what 3D web design can do.
DESIGN SYSTEM: Overall frame 1612x1374 (about 1.17:1), tiles in a 2-column by 3-row grid with 2px black gaps, each tile about 800x455 and rendered as a miniature browser viewport with a thin 11px top nav (logo left, 4-5 links centered, one filled pill CTA right, radius 999px). Typography: giant condensed grotesque for the jellyfish words (900 weight, uppercase, about 120px, #0A0A0A), clean geometric sans for the brain and solar headlines (64px/0.95, 600 weight, -0.02em tracking), small 9-10px uppercase captions for lookbook counters. Colors: black #050505 with particles #F2C230 and #7B5CFF; sky gradient #CFC9FF to #A9C8FF with jellyfish #FF4FA3; solar sky #1B2B52 to #E8A54B with CTA toggle #F4F0C8; dashboard #EAF6F3 with accents #FF5A3C and #1FB7A6; lookbook #F7F5F3. Surfaces are flat, shadows only as soft 0 20px 60px rgba(0,0,0,0.25) under 3D objects.
MOTION: Each tile is driven by scroll progress (0 to 1 across about 5.8s of the reel). Brain: slow Y-rotation 360 degrees over the full run, particles drift outward with noise displacement from 0 to 1.2 units after 60% progress, headline slides up 24px and fades at 70%. Jellyfish: gentle float of 12px amplitude over 3s sine, bell pulse scaling 1 to 1.06 over 1.4s, big words translate horizontally -120vw to 120vw with cubic-bezier(0.65,0,0.35,1) and swap every 700ms behind the jellyfish (word is masked by the jellyfish silhouette). Solar house: a fog layer at 80% opacity fades to 0 over 900ms ease-out on load and the toggle pill slides 60px on click over 250ms. Marquee: the two words translate 40vw apart over 800ms cubic-bezier(0.76,0,0.24,1) while a rotated (-18deg) strip of 8 project cards travels left to right in 1.2s. Lookbook: every 600ms the main figure cross-fades with a 24px blur-to-sharp transition while the counter increments. Octopus: arms rotate with a 2-axis ease following the pointer (lerp 0.08) and a vertical scroll tilt of up to 25 degrees; side stat bars animate width 0 to value in 500ms staggered 60ms.
SECTIONS: One hero per tile as described above, no body content. Reel order is simultaneous; after the last frame the grid loops from progress 0.
IMPLEMENTATION: Use React with React Three Fiber and drei for the brain (instanced points with a noise displacement shader) and the jellyfish and octopus (GLB models with a toon-like glossy material); GSAP ScrollTrigger with scrub: 0.6 on a master timeline for the headline and word motion; Lottie or plain CSS for the nav chrome. Render each tile in its own canvas at devicePixelRatio capped at 1.5 and pause canvases that are off screen with IntersectionObserver. prefers-reduced-motion: freeze the scenes on their first frame, replace scroll scrubbing with a static headline and keep the toggle working. Keyboard: tiles are focusable, Enter opens the full-size scene, visible 2px focus ring. Performance: keep under 6 simultaneous WebGL contexts, particle count under 40k per scene, textures under 1024px.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, map the hex colors above to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholders for the model figure, house photo, jellyfish and octopus models and for the headlines.
SUCCESS CHECK:
- All six tiles animate in sync from one scroll or timeline progress value and loop cleanly with no visible jump.
- Each tile keeps one dominant 3D or typographic hero object readable at 400px tile width.
- The page holds 60fps on a mid-range laptop and respects prefers-reduced-motion.
