Animated backgrounds, built into the kit. Put one behind your hero, your footer, or any section. Reshape it with a prompt: colors, speed, mood. Pick an effect on the left and tell your AI where it goes.
Backgrounds · /04
Signal Grid
canvas-2dA fine grid of squares that quietly twinkle, dense at one edge and fading to empty.
Customize
Anchor
Ask your AI
You do not need to write any code. The kit ships an agent skill (agent-skills/apply-background.md) your AI coding tool follows on its own — tune the effect above, then just say what you want:
> Put Signal Grid (app/components/backgrounds/effects/signal-grid.tsx) behind the landing hero in our brand colors
> Add Signal Grid to the pricing band, calmer and slower
Usage
Prefer the code path? Mount the effect absolutely inside a relative section and lift the content above it — wire it by hand, or paste this exact snippet into your AI chat. It follows your Customize values; colors accept hex values or brand tokens like var(--color-accent).
import { SignalGrid } from '~/components/backgrounds/effects'
<section className="relative overflow-hidden">
<div className="absolute inset-0">
<SignalGrid color="#a9aeb6" background="#0f1013" speed={1} anchor="left" />
</div>
<div className="relative">{/* section content */}</div>
</section>