Phosphor Score

A falling score, not a piano roll. Two vertical staves, beamed runs, dynamics, and a scan line: notes dim on the way down, bloom in the phosphor color as they play, then flare out. Default theme="auto" follows the site — phosphor on black, forest ink on the page background. glow is 0–100 (default 50) and stays a tight halo on the note. Press d to toggle.

Installation

pnpm dlx shadcn@latest add @23rd/phosphor-score

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/phosphor-score

Usage

Give the parent a size. The canvas fills the parent.

"use client"

import { PhosphorScore } from "@/components/ui/phosphor-score"

export function HeroScore() {
  return (
    <div className="relative h-svh w-full bg-background">
      <PhosphorScore />
    </div>
  )
}

Lock a theme or push the bloom. Omit color to follow light / dark.

<PhosphorScore theme="light" glow={50} />
<PhosphorScore theme="dark" color="#4DFF6A" glow={50} />

prefers-reduced-motion: reduce freezes the scroll and the camera drift, and keeps a still frame of the score.

Props

Omit color and theme="auto" picks phosphor green on dark, forest ink on light. The canvas is transparent in light mode so the parent background shows through.