Animated Backgrounds
Put one behind your hero, your footer or any section. Pick an effect, set its colors and speed, then copy the code — or a prompt that tells your AI coding assistant where it goes.
- No dependencies
- Plain HTML + JS
- Respects reduced motion
- Pauses off screen
- Free
1. Place it
Paste the snippet inside the section and give the section position: relative. The background fills it and sits behind.
2. Keep content on top
Give your content position: relative; z-index: 1. Check text contrast on the brightest part of the effect.
3. Or let your agent do it
Use “Copy prompt for your AI agent” and paste it into Claude Code, Cursor or Codex — it includes the code and where it goes.