Metallic Paint — component for logo stings (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.

A logo filled with liquid chrome that ripples and throws rainbow fringes along its edges

• Install: npx shadcn@latest add @react-bits/MetallicPaint-JS-CSS
• Registry: react-bits · Framework: react · License: MIT + Commons Clause
• Docs and preview: https://reactbits.dev/animations/metallic-paint
• Source: https://github.com/DavidHDev/react-bits/blob/main/src/content/Animations/MetallicPaint/MetallicPaint.jsx
• Example: https://skills.varg.ai/previews/lib-react-bits-metallic-paint.mp4?v=78803 (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 Metallic Paint from React Bits (https://reactbits.dev/animations/metallic-paint, MIT + Commons Clause: fine in a video). Install with npx shadcn@latest add @react-bits/MetallicPaint-JS-CSS and use it for a logo sting or end card: pass the brand mark as imageSrc (a high-contrast PNG or SVG works best) or a short word as text, centred on a dark plate. Set color, density, dispersion, distortion, angle, speed and scale. Its u_time is stepped on requestAnimationFrame. Set it to frame / fps * speed, turn mouseTilt to 0, and drive or disable the intro reveal from the timeline.

Used in

• Product launch film
• Meme format
• Channel intro & end screen
• Audio visualizer
• Podcast clip & audiogram
• Logo sting
• Brand intro & bumper
• Kinetic manifesto

More logo stings

• Liquid Thorn Logo — git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/liquid-thorn-logo && bun render.ts --text "WORD"
• Extruded Logo — npx hyperframes add extruded-logo
• Frost Sequence Camera Orbit — npx hyperframes add frost-sequence-camera-orbit
• Gooey Split — npx hyperframes add gooey-split
• Logo Brand Close — npx hyperframes add logo-brand-close
• Logo Sting — npx hyperframes add logo-sting