Dot Grid Parallax
BackgroundsThree dot fields drift at integer multiples of one grid cell, so the loop returns exactly home, with density falling off at the frame edges
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Densitydensity · number
Dots across the frame on the base layer. Higher is busier and slower to render.
now: 22
- Intensityintensity · number
Overall opacity of the field. Keep it low if type will sit on top.
now: 0.6
- Grid linesgridLines · boolean
Draw faint hairlines behind the dots.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A seamlessly looping background of dots on a faint grid, with three depth layers drifting at different rates and density falling off toward the frame edges so a headline stays readable on top.
