❍Phosphor Sweep Background
02 / 08background

Phosphor Sweep Background

Rotating beam sweeps a dot grid, leaving dots to fade with phosphor-persistence decay.

backgroundcanvasanimation

Rotating beam — phosphor persistence decay

Dots glow as the sweep passes, fade slowly

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/phosphor-sweep.json

▸ Or install manually

  1. Copy the source from the Code tab above.
  2. Place it at components/mellow/phosphor-sweep.tsx
  3. Import and use.

API Reference

PropTypeDefaultDescription
dotColorstring"rgba(var(--ink-rgb),0.07)"Base color of unlit dots.
dotSizenumber1.5Radius of each dot in pixels.
spacingnumber28Gap between dots in pixels.
speednumber0.12Beam rotations per second.
decaynumber2.5Phosphor fade duration in seconds.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content rendered above the canvas.