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 · /10
Glyph Tide
canvas-2dA terminal glyph ramp breathing as a wave field. Pure text, pure canvas.
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 Glyph Tide (app/components/backgrounds/effects/glyph-tide.tsx) behind the landing hero in our brand colors
> Add Glyph Tide 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 { GlyphTide } from '~/components/backgrounds/effects'
<section className="relative overflow-hidden">
<div className="absolute inset-0">
<GlyphTide color="#b8bdc6" background="#0f1013" speed={1} characters=" .:-+*=%@#" />
</div>
<div className="relative">{/* section content */}</div>
</section>