FloatingParticles

Drifting, twinkling motes — thousands of real simulated particles floating in a shared heading with per-particle wander and variance, and a cursor that stirs the field with a gust that settles back into the drift

Props

particleColorstring

Default:#ffffff

Color of the particles

particleColor

stringDefault: #ffffff

Color of the particles

shape"dot" | "square" | "glow"

Default:dot

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

shape

"dot" | "square" | "glow"Default: dot

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

countnumber

Default:1200

Number of particles

count

numberDefault: 1200

Number of particles

particleSizenumber

Default:1.2

Size of the particles (each also varies slightly for depth)

particleSize

numberDefault: 1.2

Size of the particles (each also varies slightly for depth)

softnessnumber

Default:0.1

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

softness

numberDefault: 0.1

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

speednumber

Default:0.25

Speed of the shared drift

speed

numberDefault: 0.25

Speed of the shared drift

anglenumber

Default:90

Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward)

angle

numberDefault: 90

Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward)

speedVariancenumber

Default:0.3

Per-particle speed variance around the shared drift (0 = everything moves in lockstep)

speedVariance

numberDefault: 0.3

Per-particle speed variance around the shared drift (0 = everything moves in lockstep)

angleVariancenumber

Default:30

Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way)

angleVariance

numberDefault: 30

Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way)

randomnessnumber

Default:0.25

Orbital wander — each particle circles lazily around its drift path instead of gliding straight

randomness

numberDefault: 0.25

Orbital wander — each particle circles lazily around its drift path instead of gliding straight

twinklenumber

Default:0.5

Intensity of the twinkle (0 = steady, 1 = full shimmer)

twinkle

numberDefault: 0.5

Intensity of the twinkle (0 = steady, 1 = full shimmer)

cursorStrengthnumber

Default:0

How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed

cursorStrength

numberDefault: 0

How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed

Usage

<Shader>
  <FloatingParticles />
</Shader>

<Shader>
  <FloatingParticles />
</Shader>

<Shader>
  <FloatingParticles />
</Shader>

<Shader>
  <FloatingParticles />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'FloatingParticles', props: {} }
  ]
})

Flip

FlowField