Animated Beam — component for backgrounds & gradients (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Indigo backdrop with faint diagonal lines and thin light beams streaking down them at different speeds

Prompt that renders it frame-exact

Use Animated Beam from Animata (https://animata.design/docs/background/animated-beam, MIT) as a full-frame hero background with a title or quote on top. Each beam is a clipped strip running a CSS keyframe with its own --duration and --delay; those come from a seeded pseudo-random per index, so the layout is already repeatable and only the clock needs fixing. HyperFrames' CSS adapter can seek the keyframes once the iteration count is finite; in Remotion pause them and set animation-delay to (delay - frame / fps) seconds. Change the background gradient, beam colour and count, and keep text in the centre where the beams are sparse.

Used in

More backgrounds & gradients