Particle Fluid Hero
A call to action sitting in a pit of two hundred and fifty shapes that behave like a coarse fluid. Each pair inside the spacing radius pushes apart, blends velocity toward their average, and raises a density count on both; that count then softens gravity, damping, and the separation correction for the frame, which is what keeps a settled pile from boiling. Neighbour lookups go through a spatial hash rebuilt every frame, so the pair test stays local rather than quadratic. Press and drag to inject pointer velocity into anything within range. Canvas 2D with no physics library.
npx shadcn@latest add https://ui.aryank.space/r/particle-fluid-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| particleCount / particleSize | number | 250 / 12 | Size also sets the interaction radius, which is twelve times the shape, so raising it thickens the fluid as well as the shapes. |
| background / particleColor | string | #1a2ffb / #ffffff | Field and shape colours. |
| eyebrow / headingLines / ctaLabel | string / string[] / string | BLANK copy | The call to action floating over the field. |
particleCounttextBodies in the pit.
backgroundcolorField colour, repainted every frame.