Background Beams With Collision — component for particles & physics (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.

Thin glowing beams fall from the top and burst into small sparks when they hit the floor

Prompt that renders it frame-exact

Add Background Beams With Collision from Aceternity UI (https://ui.aceternity.com/components/background-beams-with-collision; free under the Aceternity License, fine in commercial video, source not redistributable) behind a centered headline, filling the frame. Install with npx shadcn@latest add @aceternity/background-beams-with-collision. The beams are Motion tweens on repeat with random delays, and the bursts come from a collision check on a timer, so for a render compute each beam's y from frame / fps, place the explosion at the frame where a beam reaches the floor, and seed the random spark directions. In HyperFrames, build the same beams on the paused timeline. Tune the beamOptions list (initialX, duration, delay, repeatDelay, className) for density and color.

Used in

More particles & physics