Stagger Grid Ripple
Backgrounds · PasteMotion original
- Original
- GPU-friendly
- Vanilla JS
- Reduced-motion ready
Grid Glow Sweep
A subtle line grid with a glowing spotlight that wanders across it. Made for hero sections.
- Original
- No JS
- Reduced-motion ready
- Customisable
- 725 B gzip
An original by PasteMotion · MIT License
Code
<div class="grid-glow">
<span class="grid-glow__label">Built on a grid</span>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
- Adjust the custom properties (--accent, --speed) on .grid-glow to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Aurora Mesh Background
Backgrounds · PasteMotion original
- Original
- GPU-friendly
- No JS
- Reduced-motion ready
Morphing Gradient Blob
Backgrounds · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Blue Gradient Pattern
Backgrounds · @elijahgummer
- GPU-friendly
- No JS
- Reduced-motion ready
Blue Black Pattern
Backgrounds · @mobinkakei
- GPU-friendly
- No JS
- Reduced-motion ready
Dark Gradient Pattern
Backgrounds · @jeremyssocial
- No JS
- Reduced-motion ready