REFERENCE
- Gallery page: https://magpui.com/en/i/matcha-packet-bursts-into-words-9b3771
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/matcha-packet-bursts-into-words-9b3771/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/matcha-packet-bursts-into-words-9b3771/clip.mp4
- Original post: https://x.com/andreaskruszaki/status/2115308820687950002 by @andreaskruszaki
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 short looping product-reveal animation for a hero or loader: a square green foil sachet tumbles into frame, lands upright in the center with a soft shadow, its top strip tears off, and the packet bursts into a cloud of fine green powder. The powder billows up, then drifts down and settles into a single line of text beneath where the packet was. Then the scene clears and loops. It should feel tactile, calm and a little playful, like a premium food brand ad made in code.
DESIGN SYSTEM
- Stage: full-bleed, flat off-white #EDEEEA with a very faint pale green radial glow #E3ECDD behind the center; no other UI.
- Packet: square sachet about 22% of the stage width, matte-satin green #1E8A3A to #146B2C with a slightly darker crimped top band and a thin line-art illustration and small spec text printed in lighter green #6FC27A; bold condensed uppercase label near the bottom (placeholder word, white-ish #E8F3E6). Soft contact shadow ellipse rgba(0,0,0,.12) blurred 18px.
- Powder: thousands of tiny particles, 1-3px, colors sampled between #9CC36B, #B7D58A and #6E9E45, some darker specks #4F6B34; larger soft puffs as blurred sprites at 30-50% opacity.
- Tagline: small bold condensed sans, about 18-22px, deep green #1F6B2E, lowercase sentence with a period.
MOTION
- Enter (0-900ms): packet drops from above-left, rotating from -25deg to 0deg on Z and about 30deg to 0 on Y, translateY from -60% to 0, cubic-bezier(.2,.9,.25,1.15) for a small settle bounce; shadow scales in with it.
- Idle (900-1600ms): subtle breathing, scale 1 to 1.02, ease-in-out.
- Tear (1600-2000ms): the top strip lifts and flies off up-right, rotating 20deg, opacity to 0, cubic-bezier(.4,0,.2,1); a few specks spill out.
- Burst (2000-2600ms): the packet mesh dissolves into particles from top to bottom (dissolve noise threshold 0 to 1 over 500ms); particles get an outward and upward impulse (speed 0.6-1.4 units, random spread 70deg cone up) plus curl-noise turbulence.
- Settle (2600-5200ms): gravity and drag take over (drag 0.92 per frame); particles are attracted to sample points inside the tagline glyphs, easing in with cubic-bezier(.16,1,.3,1); soft puffs fade out over 1200ms; the tagline text fades in to full opacity as the last particles arrive.
- Clear (5800-7000ms): text and residual dust fade to 0 over 700ms, loop.
SECTIONS
- Stage with the packet (states: entering, idle, torn, dissolved).
- Powder cloud (burst, drifting, settled into text).
- Tagline line under the center.
IMPLEMENTATION
Three.js: the sachet as a lightly rounded box or a pillow-shaped plane with a baked label texture; a GPU particle system (Points with a custom shader or a GPGPU position texture) for 20k-40k powder grains; target positions sampled from the tagline drawn on an offscreen canvas. Use simplex/curl noise in the vertex shader for drift. If 3D is overkill, a 2D canvas version with a pre-rendered packet sprite and 8k particles works. prefers-reduced-motion: show the packet and the tagline statically, crossfade only. Pause the loop when off-screen (IntersectionObserver) and cap devicePixelRatio at 2; keep the frame under 4ms on mid laptops.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, fonts and color variables; map the greens to the closest brand tokens. Never copy the original brand name, label artwork or logo: use a placeholder product name and a simple line icon on the packet.
SUCCESS CHECK
- The packet lands, tears and bursts in one continuous motion with no visible pop between mesh and particles.
- Particles visibly settle into the tagline letters and the text is readable at the end of each loop.
- With reduced motion enabled there is no particle animation and the page still shows packet and tagline.
