Beams
newGlowing light pulses racing along the lines of a faded grid — the “background beams” look with deterministic placement and no JavaScript.
csszero-jsrsc2 files · 89 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/beams.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs beamsUsage
import { Beams } from "@/components/opus/backgrounds/beams";
<Beams className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Beam colours (cycled). |
| lineColor / background | string | — | Grid and backdrop. |
| cell / count / duration | number | 64 / 14 / 5 | Grid pitch, number of beams, average crossing time. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion.