PerlinDOM

01 / 06

speed

How fast time flows through the noise. Same kind of path, a different tempo.

new PerlinDOM({ element, speed: 0.016 })

02 / 06

seed

The seed picks the path. Same seed, same path, every time. A new seed, a new path.

new PerlinDOM({ element, seed: 7 })

03 / 06

x / y

Ranges set how far an element may wander, in px or %. It never leaves the box.

new PerlinDOM({
  element,
  x: { min: -140, max: 140 },
  y: { min: -70, max: 70 },
})

04 / 06

pause, play, lerpSpeed

Motion never snaps. lerpSpeed sets how softly it eases out on pause and back in on play.

new PerlinDOM({ element, lerpSpeed: 0.03 })
inst.pause()

Pause

05 / 06

amplitude

One number from chaos to order: 1 drifts freely, 0 rests on its spot. Tween it, or scrub it like this.

inst.amplitude = 1.00

06 / 06

target

The point amplitude pulls toward. Move it and the elements follow, still breathing.

inst.amplitude = 0.28
inst.setTarget({ x: 0, y: 0 })