Phosphor Sweep Background
Rotating beam sweeps a dot grid, leaving dots to fade with phosphor-persistence decay.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/phosphor-sweep.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/phosphor-sweep.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| dotColor | string | "rgba(var(--ink-rgb),0.07)" | Base color of unlit dots. |
| dotSize | number | 1.5 | Radius of each dot in pixels. |
| spacing | number | 28 | Gap between dots in pixels. |
| speed | number | 0.12 | Beam rotations per second. |
| decay | number | 2.5 | Phosphor fade duration in seconds. |
| className | string | — | Additional CSS classes. |
| children | React.ReactNode | — | Content rendered above the canvas. |