Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Particles

A swarm of simulated particles that settles into the shape, filling it evenly — flat, SVG or true 3D volumes — scattering from the cursor (or chasing it), tumbling when the shape moves, and always drifting back home

Props

originstring
Default:center
Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the shape
scalenumber
Default:1
Scale of the shape (1 = default size)
rotationnumber
Default:0
Rotation of the shape in degrees
colorAstring
Default:#8ec5ff
Color of particles at rest
colorBstring
Default:#ff7ad9
Color particles shift toward when agitated — scattering from the cursor or catching up to a moving shape
countnumber
Default:4000
Number of simulated particles
sizenumber
Default:1.5
Base particle size (each particle also varies slightly, and grows as it drifts toward the viewer)
spreadnumber
Default:1
The pressure pushing particles apart — how strongly they insist on even spacing inside the shape
agitationnumber
Default:0.12
Idle thermal motion of the swarm — 0 freezes it crystal-still once settled
dampingnumber
Default:0.4
How quickly disturbed particles calm back down and settle into place
gravitynumber
Default:0
Downward pull on the swarm — negative floats the particles upward
mouseInfluencenumber
Default:2
Strength of the cursor field. Positive scatters particles away; negative pulls the swarm toward the cursor
mouseRadiusnumber
Default:0.2
Reach of the cursor field, in shape-local units
exposurenumber
Default:1
Brightness of the additive particle glow
softnessnumber
Default:0.1
Edge softness of each particle — 0 is a crisp disc, 1 a soft glow puff
depthnumber
Default:0.18
Thickness of the particle volume behind flat shapes (3D shapes use their own true depth)
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklab
Color space for the rest→excited color ramp
shapeShapeConfig
Default:circleSDF
Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstring
Default:""
URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Particles />
</Shader>
Previous
Parallelogram
Next
PerlinNoise