Animated Gradient With SVG — 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.

Blurred orange and red colour blobs drifting and pulsing inside a card, like a soft lava gradient

• Install: npx shadcn add @fancy/animated-gradient-with-svg
• Registry: fancy · Framework: react · License: MIT
• Docs and preview: https://www.fancycomponents.dev/docs/components/background/animated-gradient-svg
• Source: https://github.com/danielpetho/fancy/blob/main/src/fancy/components/background/animated-gradient-with-svg.tsx
• Example: https://skills.varg.ai/previews/lib-fancy-animated-gradient-with-svg.mp4?v=22732 (Captured from the library’s own demo page (Fancy Components))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Animated Gradient With SVG from Fancy Components (https://www.fancycomponents.dev/docs/components/background/animated-gradient-with-svg, MIT). Install with npx shadcn add @fancy/animated-gradient-with-svg after adding the @fancy registry to components.json, and copy the background-gradient keyframes from the docs into your CSS. Use it as a soft full-frame or card background behind titles or bento tiles. Set colors (3–6 brand tones), speed and blur ('light', 'medium' or 'heavy'). Blob sizes and positions come from Math.random on each mount, so replace them with seeded values. The motion is a CSS keyframe animation: pause it and set each animation's currentTime from frame / fps (HyperFrames' CSS adapter can do this for you).

Used in

• Year in review / Wrapped
• Lyric video
• Karaoke video
• Logo sting
• Title sequence
• Brand guidelines film
• Stream overlay package
• Shader loop

More backgrounds & gradients

• Aurora — npx hyperframes add aurora
• Aurora Drift — npx hyperframes add aurora-drift
• Flowing Gradient — npx hyperframes add flowing-gradient
• Mesh Gradient — npx hyperframes add mesh-gradient
• Mesh Gradient Background — npx hyperframes add mesh-gradient-bg
• Minimal Gradient Background — npx hyperframes add mk-background