REFERENCE
- Gallery page: https://magpui.com/en/i/research-lab-landing-with-code-fly-through-b328c8
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/research-lab-landing-with-code-fly-through-b328c8/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/research-lab-landing-with-code-fly-through-b328c8/clip.mp4
- Original post: https://x.com/stackedlol/status/2118198633602625690 by @stackedlol
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 one-page landing for an AI research lab where scrolling drives a camera through a 3D world. Hero: a large white rounded lattice logo (a four-lobed cross shape with holes) floats at the center of a black void; glowing gooey blobs in pink and mint drift around it like microscopic organisms, connected to the logo by thin dotted lines. Faint concentric orbit circles and dotted arcs fill the background, and the nav items (Home, Tests, Research, Labs, Contact) sit on a thin elliptical orbit around the logo. On scroll the logo shrinks into a corner wordmark with an italic tagline at the bottom-left, and the camera flies forward through floating translucent terminal panels, lines of green monospace code, small data labels and connector lines, passing a pink translucent triangular plane. Near the end the logo reappears small and glowing inside a HUD frame, then a huge pink wireframe version of the lattice fills the screen. It should feel like peeking inside a lab's machine: precise, mysterious, a bit sci-fi.
DESIGN SYSTEM: Background #050607. Logo #F2F2F2 with soft inner shadow. Accents: mint #6CFFB0, code green #43E07A, pink #E58BC9, magenta glow #FF5FA8. Typography: a clean neo-grotesk for the wordmark 'Lab name.' about 44px and an italic of the same family for the tagline 'Chasing the frontier.' about 40px, white, bottom-left at 32px padding; nav labels italic 15px placed on an ellipse 1px #FFFFFF40 at bottom-right after scroll. Data labels: monospace 9-10px #9BA3A0 with tiny bracket frames. Terminal panels: rectangles with #43E07A text at 60% opacity, 1px #43E07A33 borders, slight blur on far panels (depth of field). Wireframe finale: lattice drawn with many thin parallel contour lines in #E58BC9 to #FFFFFF.
MOTION: Hero idle: blobs move on noise paths, 8-12s loops, metaball merging; logo bobs 6px over 4s, ease-in-out. Scroll (pinned, about 600vh): 0-15% logo scales from 1 to 0.15 and moves to the wordmark spot, tagline fades in 400ms; 15-75% camera dolly along z through 20-30 panels, each panel fades from blur 8px to sharp as it nears, code lines type in at 30ms per character when they enter view; connector lines draw from 0 to full length via strokeDashoffset 600ms. 75-85% glowing small logo inside a HUD square with corner ticks and counters. 85-100% the wireframe lattice rotates in from 30 degrees to 0 and scales up to fill the frame. Use scrub 0.8 and easing cubic-bezier(0.33, 1, 0.68, 1) for snap segments.
SECTIONS: 1) Hero with logo, blobs, orbit nav. 2) Pinned fly-through of code panels and data callouts. 3) HUD logo moment. 4) Wireframe lattice finale with a short statement and contact link. Persistent: bottom-left wordmark + tagline, bottom-right orbit nav, thin scroll indicator on the right edge.
IMPLEMENTATION: Three.js (or React Three Fiber) with GSAP ScrollTrigger scrubbing the camera path. Blobs as a raymarched metaball shader or marching cubes with a fresnel pink-mint gradient. Panels as planes with CanvasTexture text; depth of field via a bokeh pass or per-panel blur based on distance. Wireframe lattice as an extruded SVG shape sliced into contour lines (LineSegments). Cap pixel ratio at 1.5; under 768px reduce panels to 10 and drop the DoF pass. prefers-reduced-motion: no scroll fly-through, show the hero and the finale as static sections with simple fades. Keyboard: the nav is real anchor links with a visible focus ring; page content is also in semantic HTML for screen readers.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, map colors to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use a placeholder lattice shape and a made-up lab name.
SUCCESS CHECK:
- The hero shows a white lattice logo with drifting glowing blobs and an orbit nav, and nothing jumps on first scroll.
- Scrolling moves the camera smoothly through floating code panels that sharpen as they approach, and scrolling back reverses it exactly.
- The page ends on a large pink line-drawn lattice, and with prefers-reduced-motion it becomes static sections.
