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 · /07
Horizon Grid
canvas-2dAn endless floor grid scrolling toward the viewer, glowing at the horizon.
Customize
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 Horizon Grid (app/components/backgrounds/effects/horizon-grid.tsx) behind the landing hero in our brand colors
> Add Horizon 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 { HorizonGrid } from '~/components/backgrounds/effects'
<section className="relative overflow-hidden">
<div className="absolute inset-0">
<HorizonGrid color="#c0c5cd" background="#0f1013" speed={1} />
</div>
<div className="relative">{/* section content */}</div>
</section>