Basic animation
One element, two ranges and a seed. Its own CSS transform, a scale and a skew, is kept: PerlinDOM only adds a translate.
Examples
Twelve ways to drift
Every demo on this page is live and runs the code beside it. Copy a snippet and you get the same motion.
Horizontal-only movement
Set an axis to null and it stays put: this one only slides sideways along its track.
Multiple elements, different seeds
The same options in a loop, with a seed per element, give five paths that never move in step.
A background effect
Large blurred shapes at a very low speed add depth behind real content without pulling the eye.
Subtle background motion
Depth for any surface, at almost no cost.
Smooth pause and play with mouse events
Hover the stage to play, leave it to pause. The motion eases out and back in; lerpSpeed sets how softly.
Interactive controls
Ranges and speed are writable properties, so they change while it runs. The snippet follows the sliders.
Animated button with circles on hover
Four glow circles start drifting on hover or keyboard focus and ease to a stop when you leave.
Clip-path triangle with an animated vertex
With element: null an instance only computes lastX and lastY. Here they move one vertex of an SVG clip path.
Pixel vs percentage values
Pixels keep the same distance at any size. Percentages are a share of the parent, so resize the window and only the right one adapts.
px · fixed
% · responsive
Resizable container with percentages
Drag the corner, or use the slider: the range is ±25% of the box and follows it on the very next frame.
Mixed pixel and percentage values
Each axis picks its own unit: one adapts to the parent, the other keeps a fixed distance.
x % · y px
x px · y %
Amplitude and target
Every dot has a target on a ring. Slide amplitude to 0 and the drift settles into the shape.