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

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the shape

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the shape in degrees

    Type
    number
    Default
    0

  • colorA

    Color of particles at rest

    Type
    string
    Default
    #8ec5ff

  • colorB

    Color particles shift toward when agitated — scattering from the cursor or catching up to a moving shape

    Type
    string
    Default
    #ff7ad9

  • count

    Number of simulated particles

    Type
    number
    Default
    4000

  • size

    Base particle size (each particle also varies slightly, and grows as it drifts toward the viewer)

    Type
    number
    Default
    1.5

  • particleShape

    What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff

    Type
    "dot" | "square" | "glow"
    Default
    dot

  • spread

    The pressure pushing particles apart — how strongly they insist on even spacing inside the shape

    Type
    number
    Default
    1

  • agitation

    Idle thermal motion of the swarm — 0 freezes it crystal-still once settled

    Type
    number
    Default
    0.12

  • damping

    How quickly disturbed particles calm back down and settle into place

    Type
    number
    Default
    0.4

  • gravity

    Downward pull on the swarm — negative floats the particles upward

    Type
    number
    Default
    0

  • mouseInfluence

    Strength of the cursor field. Positive scatters particles away; negative pulls the swarm toward the cursor

    Type
    number
    Default
    2

  • mouseRadius

    Reach of the cursor field, in shape-local units

    Type
    number
    Default
    0.2

  • exposure

    Brightness of the additive particle glow

    Type
    number
    Default
    1

  • softness

    Edge softness of each particle — 0 is a crisp disc, 1 a soft glow puff

    Type
    number
    Default
    0.1

  • depth

    Thickness of the particle volume behind flat shapes (3D shapes use their own true depth)

    Type
    number
    Default
    0.18

  • colorSpace

    Color space for the rest→excited color ramp

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • shape

    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.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    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.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Particles />
</Shader>