Animated backgrounds

The kit ships 8 original animated background effects — silky light ribbons, volumetric rays, terminal glyph fields, halftone and dither textures, and more. They are built into the kit as React components (canvas-2D plus raw WebGL, no three.js, no third-party licenses), so you can use them in anything you ship without licensing worries.

Browse them live at /backgrounds: every effect renders behind a mock hero so you see exactly how it will look on a landing page, and the Customize panel lets you try colors and speed before you commit.

What's included

Click any effect name to open it live, behind the mock hero, with the Customize panel ready.

Each effect is its own file under app/components/backgrounds/effects/, exported from one barrel — unused effects are tree-shaken out of production builds, so shipping only one costs you nothing.

The no-code way (recommended)

You do not need to touch the code. The kit includes an agent skill (agent-skills/apply-background.md) that your AI coding tool reads on its own. Name the effect and the spot on the site; pointing at the effect's file makes the ask unambiguous. Ready-to-paste examples, one per effect:

• "Put Silk Flow (app/components/backgrounds/effects/silk-flow.tsx) behind the landing hero, in our brand colors from DESIGN.md"
• "Add Veil Rays (app/components/backgrounds/effects/veil-rays.tsx) to the closing CTA band, like a launch spotlight, calm and slow"
• "Lay Light Strands (app/components/backgrounds/effects/light-strands.tsx) behind the features band, subtle"
• "Use Glyph Tide (app/components/backgrounds/effects/glyph-tide.tsx) behind the AI features section and keep the text readable"
• "Put Signal Grid (app/components/backgrounds/effects/signal-grid.tsx) behind the pricing section, anchored to the right edge"
• "Give the testimonials band an Ink Halftone texture (app/components/backgrounds/effects/ink-halftone.tsx)"
• "Put Dither Drift (app/components/backgrounds/effects/dither-drift.tsx) behind the newsletter strip, very quiet"
• "Put Horizon Grid (app/components/backgrounds/effects/horizon-grid.tsx) under the footer CTA, glowing at the horizon"

Your AI will mount the effect, wire the colors to your DESIGN.md tokens, and keep the section content readable. Changed your mind? "Swap the hero background to Ink Halftone, same colors" or "Remove the background effect from the hero" both work.

The code way

Every effect follows the same pattern: mount it absolutely inside a relative section, and lift the content above it.

import { SilkFlow } from '~/components/backgrounds/effects'

<section className="relative overflow-hidden">
  <div className="absolute inset-0">
    <SilkFlow colors={['var(--color-accent)', '#a6abb4', '#f2f4f8']} speed={0.6} />
  </div>
  <div className="relative">{/* your section content */}</div>
</section>

Props are small on purpose:

• color (or colors — a 3-stop palette on Silk Flow and Light Strands): hex values or brand tokens like var(--color-accent). Prefer tokens so effects follow a re-theme automatically.
• background: the canvas fill behind the effect.
• speed: animation speed multiplier (default 1).
• Effect extras: Glyph Tide takes characters (the glyph ramp), Signal Grid takes anchor ('left' | 'right').

Good-taste rules

• One effect per viewport. They are moods, not wallpaper — never stack two in the same band.
• Legibility first. Behind text, keep it quiet: lower speed, darker palette stops, or an opacity-60 wrapper.
• Reduced motion, offscreen pausing, and device-pixel scaling are handled by the shared engines — you never need to think about them.
• At most one WebGL effect (Silk Flow, Veil Rays) mounted per page; canvas effects have no such limit.

Removing an effect

Delete its wrapper div from the section to stop using it, or delete its file plus its line in app/components/backgrounds/effects/index.ts to remove it from the kit entirely.