About this Component
Create an animated field of dots that reacts to expanding pulse patterns. Dot Pulse turns a simple grid into a dynamic background with rhythmic movement, subtle displacement, and organic variation.
Choose between Ripple, Wave, Spiral, and Breathe patterns to create anything from calm ambient motion to more expressive visual effects. It works especially well in hero sections, immersive backgrounds, loading states, and experimental layouts.
How to use
Drop the component into your layout and resize it to cover the desired area. Select a pulse pattern, then customize the background, dot, and pulse colors from the properties panel.
Fine-tune the motion using controls for spacing, dot size, speed, ring distance, pulse width, growth, displacement, and timing randomness.
Features
Four animation patterns: Ripple, Wave, Spiral, and Breathe
Animated pulse fronts across a responsive dot grid
Custom background, dot, and pulse colors
Adjustable spacing and dot size
Adjustable animation speed
Control the distance between pulse fronts
Fine-tune pulse width
Adjustable dot growth inside each pulse
Control how far dots are displaced
Per-dot timing randomness with jitter control
Works as a section, frame, or full-page background
Responsive across desktop, tablet, and mobile
No setup or coding required
