Skip to content
Brand Stack
Esc
↑↓navigate↵open⌘Jpreview
Sign up
On this page

Background Shaders

A free visual builder for animated WebGL backgrounds. Tune a style live in the browser, or export the same dependency-free snippet and agent prompt straight from the CLI.

Background Shaders is a free tool at brandstack.dev/tools/shaders. It lets you design animated backgrounds, the kind you see on Linear, Vercel, and Anthropic landing pages, without writing WebGL code yourself.

No login required.

npx @brandstack/cli shaders --list                # the five styles
npx @brandstack/cli shaders dither --params       # a style's tunable parameters
npx @brandstack/cli shaders dither --target react \
  --set accentColor=#d4ff3a --set animationSpeed=0.1 \
  --out shader-background.tsx
npx @brandstack/cli shaders aurora --prompt --theme dark   # agent prompt instead of code

Offline, no account. The CLI emits the identical snippet and agent prompt the website’s copy/download buttons produce — snippet generation is pure text work and runs anywhere. Only the live tuning preview needs a browser (it renders real WebGL); that part is browser-only by nature, so tune visually on the site when you want to see it move, then export from either surface.

What it does

Pick a shader style, adjust every visual parameter using live controls, and watch the result render in real time. When you’re happy with the output, export it three ways:

  • Copy prompt for agent: a structured prompt for Claude Code, Cursor, Codex, or any coding agent, containing your tuned parameters, the full snippet, and the integration contract
  • Copy snippet: the raw self-contained code on your clipboard
  • Download: the snippet as a file (.html for plain HTML, .tsx for React)

The exported code is vanilla WebGL with zero dependencies. No three.js, no npm install.

Shader styles

Each style has its own set of parameters:

  • Dither: a pixelated Bayer-dither pattern. This is the style used on the Brand Stack marketing hero
  • Aurora: a smooth mesh-gradient glow
  • Grain: animated film grain
  • Plasma: fluid, flowing color
  • Scanlines: a CRT-style effect

Common controls include colors, pixel size, animation speed, and mouse bloom, varying by style.

How to use it in the browser

  1. Go to brandstack.dev/tools/shaders
  2. Pick a shader style from the tabs
  3. Tune the parameters; the preview updates instantly
  4. Pick the target framework (plain HTML or React)
  5. Click Copy prompt for agent, Copy snippet, or Download

What the exports contain

The agent prompt names the framework target, lists every tuned parameter for review, inlines the full snippet, and spells out the integration contract: positioning, z-index, cleanup, reduced motion, and theme syncing. Paste it into your agent and the integration lands correctly on the first pass.

The snippet itself is production-minded by default: the canvas fills its host container and never blocks clicks, a ResizeObserver keeps it in sync with the container rather than the window, and the render loop pauses under prefers-reduced-motion. The destroy callback cancels the animation frame, removes window listeners, and deletes the WebGL program, buffers, and shaders. It deliberately does not call WEBGL_lose_context — permanently killing the context breaks remounting on the same canvas (e.g. during hot reload); releasing the program and buffers is what frees the GPU resources.

For AI agents

Prefer the CLI (above) — the exports are deterministic text, so there is nothing a browser adds. This page is also served as plain markdown at /tools/shaders.md, and the tool is listed with instructions in /llms.txt.

Tips

  • Use the Dither shader as a starting point for a premium landing-page feel; it reads as high-end without being distracting
  • Keep animation speed low for backgrounds that don’t compete with page content
  • The prompt export captures exactly what you tuned; there’s no drift between the preview and what the agent integrates

Was this page helpful?