# Lightning — 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 single electric-blue lightning bolt crackling down the frame, flickering and re-branching

- **Install:** `npx shadcn@latest add @react-bits/Lightning-JS-CSS`
- **Registry:** react-bits · **Framework:** react · **License:** MIT + Commons Clause
- **Docs and preview:** https://reactbits.dev/backgrounds/lightning
- **Source:** https://github.com/DavidHDev/react-bits/blob/main/src/content/Backgrounds/Lightning/Lightning.jsx
- **Example:** https://skills.varg.ai/previews/lib-react-bits-lightning.mp4?v=157115 (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 Lightning from React Bits (https://reactbits.dev/backgrounds/lightning, MIT + Commons Clause: fine for video). Install with `npx shadcn@latest add @react-bits/Lightning-JS-CSS` and use it full-frame behind a reveal, or as an energy accent beside a product. It renders on transparency, so it can sit over footage with screen blending. Set color, bolts, branches, angle, xOffset and flicker. The bolt phase advances on requestAnimationFrame, and the extra strikes come from clicks. Compute the phase from frame / fps * speed, set clickStrike={false} and mouseInteraction={false} (or inject strikes at fixed frames), and set intro={false}.

## Used in

- [Lyric video](https://skills.varg.ai/video/lyric-video.md)
- [Audio visualizer](https://skills.varg.ai/video/visualizer.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Brand intro & bumper](https://skills.varg.ai/video/brand-intro.md)
- [Stream overlay package](https://skills.varg.ai/video/stream-overlay.md)
- [News broadcast package](https://skills.varg.ai/video/news-package.md)
- [Countdown & launch timer](https://skills.varg.ai/video/countdown.md)
- [Shader loop](https://skills.varg.ai/video/shader-loop.md)

## More shaders

- [Blob](https://skills.varg.ai/component/hf.blob.md) — `npx hyperframes add blob`
- [Chrome Orb](https://skills.varg.ai/component/hf.chrome-orb.md) — `npx hyperframes add chrome-orb`
- [Color Wheel](https://skills.varg.ai/component/hf.color-wheel.md) — `npx hyperframes add color-wheel`
- [Falling Lines](https://skills.varg.ai/component/hf.falling-lines.md) — `npx hyperframes add falling-lines`
- [Frost](https://skills.varg.ai/component/hf.frost.md) — `npx hyperframes add frost`
- [Godrays](https://skills.varg.ai/component/hf.godrays.md) — `npx hyperframes add godrays`