REFERENCE
- Gallery page: https://magpui.com/en/i/writhing-particle-cloud-creature-1e3817
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/writhing-particle-cloud-creature-1e3817/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/writhing-particle-cloud-creature-1e3817/clip.mp4
- Original post: https://x.com/_pwd_/status/2117953731564126384 by @_pwd_
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-screen real-time particle creature: a dense cloud of hundreds of thousands to a few million tiny particles that clumps into a ruffled, petal-like mass about a third of the viewport tall. The outer layers are pale grey-white and fold over themselves like torn fabric or smoke, while the inside glows a deep, hot red. The mass never sits still: it churns, twists and breathes, opening dark vortex holes that slowly close again, and sometimes shoots a thin tail of particles out to the side before pulling it back. It hovers inside a dark, theatrical room lit in red with a few softly glowing square window panels behind it. A small text block in the top-left corner gives the piece name and short controls; the pointer gently pushes and stirs the cloud. It should feel ominous, alive and hypnotic.
DESIGN SYSTEM: Full-bleed 16:9 canvas. Background near-black #07070A with deep red room light #3A0608 to #6A0A0E falling from the sides, red curtain-like vertical folds barely visible, and a grid of 6-9 square window panes in desaturated slate blue #5E6A80 at 20-35% brightness high up behind the creature, slightly blurred. Particles: 1-2px points, outer color #E6E1DC, inner color #E0141E to #8C0A10, additive-ish blending with depth fade so dense areas glow. Thin fog in the room that catches the red light. Overlay text: top-left, 24px from the edges, a tiny uppercase eyebrow (8px, tracking 0.1em, #9A9A9A), a condensed bold title about 16px in #F2F2F2, then two short lines of 8px uppercase body; bottom-left two tiny links with a square bullet. Everything else is the canvas.
MOTION: Particle simulation on the GPU: each frame, velocity += curl noise (3D, frequency about 0.8, amplitude 0.6, time scroll 0.15 per second) + a soft spring toward a deforming target shape (a sphere of radius R displaced by low-frequency noise so it looks ruffled) + light damping 0.96. Every 4-7 seconds a vortex event: pick a point on the surface and add a swirling force for 1.5s that carves a hole, eased in and out with cubic-bezier(0.45, 0, 0.55, 1). Occasionally (every 8-12s) a tail event: a subset of particles is pulled along a curve out of the mass for 2s and then released back. The whole mass rotates slowly around Y (about 6deg per second) and bobs 2% of its size on a 5s sine. Color: blend outer to inner by distance from center, so holes reveal the red core. Pointer: a repulsion force with radius 15% of the mass and falloff squared; dragging orbits the camera with damping 0.08. Intro: the cloud starts as a dim, blurred sphere and resolves into particles over 1.8s, cubic-bezier(0.22, 1, 0.36, 1).
SECTIONS: Parts: room backdrop (gradient walls, window panes, fog), particle creature, red core glow, overlay text block, bottom links. States: intro forming, idle churn, vortex event, tail event, pointer interaction.
IMPLEMENTATION: Three.js with the WebGPU renderer and TSL compute nodes for the particle update (storage buffers for position and velocity), falling back to WebGL2 with GPGPU ping-pong textures and a smaller particle count (about 250k). Render particles as points with size attenuation; add a subtle bloom on the red core only and a light vignette. Respect prefers-reduced-motion: freeze the simulation on a nicely shaped frame and keep only a very slow rotation. Pause the loop when the tab is hidden; cap devicePixelRatio at 1.5; scale particle count by GPU tier. Overlay text is real HTML, selectable and readable by screen readers.
ADAPT TO THE PROJECT: Reuse the project's existing fonts, colors and layout tokens for the overlay text and map the palette to the closest existing tokens. Do not copy names, logos or text from the original; use placeholder copy.
SUCCESS CHECK:
- The cloud keeps moving organically for minutes without collapsing into a ball or flying apart.
- Holes open and close revealing the red inner glow, and the pointer visibly pushes particles away.
- It runs at 60fps on a recent laptop and falls back to WebGL2 with fewer particles when WebGPU is missing.
