PRO

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.

Component

Is your big idea ready to go wild?

Let's work
together!

Install
npx shadcn@latest add https://ui.aryank.space/r/particle-fluid-hero.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
particleCount / particleSizenumber250 / 12Size also sets the interaction radius, which is twelve times the shape, so raising it thickens the fluid as well as the shapes.
background / particleColorstring#1a2ffb / #ffffffField and shape colours.
eyebrow / headingLines / ctaLabelstring / string[] / stringBLANK copyThe call to action floating over the field.
Customize
particleCounttext

Bodies in the pit.

backgroundcolor

Field colour, repainted every frame.

Dependencies
None.