Laser Flow — 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.

A blue laser beam pouring down onto an app window, flooding it with glow, fog and drifting sparks

• Install: npx shadcn@latest add @react-bits/LaserFlow-JS-CSS
• Registry: react-bits · Framework: react · License: MIT + Commons Clause
• Docs and preview: https://reactbits.dev/animations/laser-flow
• Source: https://github.com/DavidHDev/react-bits/blob/main/src/content/Animations/LaserFlow/LaserFlow.jsx
• Example: https://skills.varg.ai/previews/lib-react-bits-laser-flow.mp4?v=21847 (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 Laser Flow from React Bits (https://reactbits.dev/animations/laser-flow, MIT + Commons Clause: OK in a video). Install with npx shadcn@latest add @react-bits/LaserFlow-JS-CSS and use it full-frame above a product card or UI screenshot: point surfaceRef at the element the beam lands on and set beamPosition to where it should hit. Set color, intensity, beamWidth, flare, fog, dust and pulse. The shader time adds the requestAnimationFrame delta. Set state.time = frame / fps * speed, fix seed, set mouseInteraction={false}, and play or skip the intro from the timeline.

Used in

• Lyric video
• Audio visualizer
• Logo sting
• Brand intro & bumper
• Stream overlay package
• News broadcast package
• Countdown & launch timer
• Shader loop

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