REFERENCE
- Gallery page: https://magpui.com/en/i/particle-koi-morphs-into-a-sake-bottle-ffb541
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/particle-koi-morphs-into-a-sake-bottle-ffb541/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/particle-koi-morphs-into-a-sake-bottle-ffb541/clip.mp4
- Original post: https://x.com/DaraTo7/status/2117075909115084862 by @DaraTo7
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 complete scroll-told landing site for a small-batch sake brewery, in deep indigo and silver only. The hero shows a huge thin serif wordmark over a dark indigo field while a koi fish made of thousands of glowing silver-white particles swims slowly across and behind the type, tail and fins rippling, with stray particles drifting off like bubbles. As the user scrolls, the scene is pinned and the particles flow out of the fish shape and re-form into a sake bottle (tokkuri), later into a small cup, and the koi returns near the end. It should feel calm, quiet and premium, like still water at night.
DESIGN SYSTEM: Background #0B0B2A to #121238 with a very faint grid of thin lines (#FFFFFF at 4%). Particles #EAF0FF core with a soft bloom halo #9FB2FF. Text #F2F2F7, secondary #A6A8C8. Display font: an elegant high-contrast serif, hero wordmark about 16vw, section titles 44-56px with an italic second line ("Then the tanks rest."); body and labels in a small clean sans, 13-15px, small caps eyebrow labels with letterspacing 0.12em. Pill buttons: 1px border #FFFFFF at 30%, radius 999px, 12px uppercase label with arrow. Product cards: dark panels #16163E, 1px border #FFFFFF at 10%, radius 4px. 12-column grid, 80px side margins, generous vertical spacing (160px between sections). A thin vertical Japanese label column on the right edge of the hero.
MOTION: Koi swim: body particles sampled from a fish silhouette, displaced by a travelling sine wave along the spine (amplitude about 4% of length, period 2.4s), whole fish drifts across the hero over 20s on a gentle curve; individual particles twinkle (opacity 0.6-1, random 1-3s). Morph on scroll: in a pinned section of about 200vh, each particle interpolates from its fish position to a target point sampled on the bottle silhouette, progress tied to scroll with easing cubic-bezier(0.65,0,0.35,1), with a small curl-noise offset mid-transition so the particles swirl instead of sliding straight; a few hundred leftover particles settle as a mist at the base. Same technique for the cup. Section text: fade and rise 24px, 700ms, cubic-bezier(0.22,1,0.36,1), stagger 80ms per line. Stats count up over 1200ms when they enter. Hover on product cards: bottle image lifts 6px, 300ms.
SECTIONS: 1) Fixed top nav: small logo left, 4 links center, outlined "Reserve a seat" pill right. 2) Hero: giant serif wordmark bottom left, tagline in italic below, primary pill and text link, small meta block right ("Autumn release"), swimming particle koi. 3) Story statement: large two-line serif sentence with italic words, revealed line by line. 4) Pinned morph: koi becomes a particle sake bottle on the right while the left shows a title, a short paragraph and a small spec table. 5) Brewery stats: photo of the brewhouse plus 4 large numbers with small labels. 6) Three bottle cards (photo, name, short notes, small spec rows). 7) "Nine degrees, all year round": spring-water section with two particle koi circling and 4 stats in a row. 8) Tasting counter: an eight-seat evening timeline on the left, warm amber counter photo on the right that changes per step. 9) Reservation: date picker as a row of square day tiles, seat selector of 8 small cup icons, name and email inputs, big white submit pill, illustrated mountain card on the side. 10) Newsletter: "Four letters a year, when the water changes." with inline email field, the koi swimming back in the corner. 11) Minimal footer.
IMPLEMENTATION: Three.js with a single Points mesh (20-40k particles) and a custom ShaderMaterial: store start and target positions as attributes and morph in the vertex shader with a uniform progress, add curl noise there; additive blending plus a light UnrealBloom pass for the glow. Sample silhouettes from SVG paths or a low-poly model with MeshSurfaceSampler. Drive progress with GSAP ScrollTrigger (pin + scrub). Cap devicePixelRatio at 1.5-2, lower the particle count on mobile, pause the render loop when the canvas is offscreen. prefers-reduced-motion: show the fish and bottle as static particle images and switch the pinned section to simple crossfades. All buttons, day tiles and seat icons keyboard focusable with visible focus rings; the reservation form uses real inputs and labels.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts, buttons and form components; map the colors above to the closest existing tokens. Never copy the original logo, brand name, photos or illustrations; use placeholder product shots and imagery.
SUCCESS CHECK:
- The hero koi is clearly made of particles, swims smoothly at 60fps on a laptop, and glows softly behind the wordmark.
- Scrolling the pinned section turns the koi into a recognizable bottle (and later a cup) with a swirling transition that reverses when scrolling back up.
- Every section from the list is present, readable on mobile, and reduced motion removes the morph without breaking layout.
CREDIT: Original work by Dara To (@DaraTo7), https://x.com/DaraTo7/status/2117075909115084862
