REFERENCE
- Gallery page: https://magpui.com/en/i/dripping-particle-terrain-with-falling-figure-97cce6
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dripping-particle-terrain-with-falling-figure-97cce6/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dripping-particle-terrain-with-falling-figure-97cce6/clip.mp4
- Original post: https://x.com/cemhah/status/2111916410746052795 by @cemhah
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 full-width generative scene: a wide band of layered, wavy terrain made of thousands of small dots in hot pink, orange, amber and violet, floating in the upper third of a black canvas. From the underside of the terrain, thin vertical streaks of dots drip down to the bottom edge like paint running. A small white line-drawn human figure falls and tumbles through the terrain, drops below it, then lands and sits on a ridge. It should feel like a living, slightly unsettling painting.
DESIGN SYSTEM: Canvas 16:9, full bleed, background #05040A. Terrain occupies roughly y 5% to 45% of the height, made of 4-6 overlapping ridge layers. Palette per layer: hot pink #E8338F, orange #F2622E, amber #F2A23A, violet #4B3A7A, dusty mauve #8A6A8F. Dots 1.5-3px, density higher on ridge crests, sparser in valleys so dark gaps show. Drips: 1-2px wide columns, 40-80 of them, lengths from 20% to 100% of the remaining height, color sampled from the terrain point above, opacity fading from 0.9 at the top to 0.2 at the bottom. Figure: white #FFFFFF stroke 2px, rounded caps, about 48px tall, no fill.
MOTION: Terrain: ridge heights driven by 2D simplex noise, x offset scrolling slowly (about 0.02 noise units per second) so ridges drift and undulate; each layer at a different speed for parallax. Drips: each column grows downward at 20-60px per second, then resets with a 600-1500ms random delay; head of each drip slightly brighter. Figure: a looping 6-8s sequence of poses (flailing, tumbling horizontal, lying flat, sitting) swapped every 400-600ms, position follows a falling arc with ease-in cubic-bezier(0.55, 0, 1, 0.45) through the terrain, then rises back with cubic-bezier(0.22, 1, 0.36, 1) to land on a crest. Whole loop repeats seamlessly.
SECTIONS: Parts: black background, layered dot terrain, drip columns, falling outline figure. States: drift (terrain only), fall (figure crosses the terrain), below (figure in the black void), landing (figure sits on a ridge), loop back.
IMPLEMENTATION: WebGL with OGL or Three.js points: one buffer of up to 60k points, positions and colors computed in the vertex shader from noise, so the CPU does nothing per frame; drips as a second points buffer with per-column offsets in attributes. The figure as inline SVG poses (or a small Lottie) positioned over the canvas. prefers-reduced-motion: render one static frame with drips at full length and the figure sitting. Cap devicePixelRatio at 2, pause the loop when the canvas is off-screen (IntersectionObserver) or the tab is hidden. The canvas is decorative: aria-hidden, and any hero text over it keeps 4.5:1 contrast.
ADAPT TO THE PROJECT: Reuse the project's existing tokens, fonts and layout for any text over the scene; map the palette to the closest existing tokens or keep it as a local scene palette. Do not copy logos, brand names or the original figure; draw your own simple outline poses.
SUCCESS CHECK:
- The terrain visibly drifts and the drips grow and reset without any frame drops on a mid-range laptop (60fps).
- The figure completes a fall, land and sit loop that repeats with no visible jump.
- With reduced motion on, a single still frame is shown and nothing animates.
