Iridescence — component for shaders (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.

Pastel holographic sheen in cyan, pink and violet, flowing like oil on water

Install: npx shadcn@latest add @react-bits/Iridescence-JS-CSS
Registry: react-bits · Framework: react · License: MIT + Commons Clause
Docs and preview: https://reactbits.dev/backgrounds/iridescence
Source: https://github.com/DavidHDev/react-bits/blob/main/src/content/Backgrounds/Iridescence/Iridescence.jsx
Example: https://skills.varg.ai/previews/lib-react-bits-iridescence.mp4?v=73408 (Captured from the library’s own demo page (React Bits))
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 Iridescence from React Bits (https://reactbits.dev/backgrounds/iridescence, MIT + Commons Clause: OK in videos, no reselling the code). Install with npx shadcn@latest add @react-bits/Iridescence-JS-CSS and run it full-frame as a holographic backdrop for beauty, fashion or tech titles. Set color (an RGB tint in 0–1), speed 0.5–1, amplitude, warp and hueShift to pull the palette toward the brand. Its requestAnimationFrame loop adds dt to a private clock: patch it to use frame / fps, set mouseReact={false} and clickSwirl={false}, and draw once per frame.

Used in

More shaders

Blob — npx hyperframes add blob
Chrome Orb — npx hyperframes add chrome-orb
Color Wheel — npx hyperframes add color-wheel
Falling Lines — npx hyperframes add falling-lines
Frost — npx hyperframes add frost
Godrays — npx hyperframes add godrays