Phosphor Score

A falling score, not a piano roll. A grand staff of beamed runs, chords, slurs and dynamics scrolls down to a playhead: each note brightens as it arrives, blooms and flares as it plays, then fades with a phosphor afterglow. Default theme="auto" follows the site — phosphor green in dark, forest ink in light, both on the page background. glow is 0–100 (default 50) and stays a tight halo on the note. Change Seed to crossfade to a new score. Press d to toggle the theme.

Preview

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 and fades out at its top and bottom edges on its own.

"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} />

Change the viewing angle. The plane turns about the playhead in perspective, like CSS rotateX() rotateY() rotateZ(), and fades out as it recedes.

<PhosphorScore rotateX={50} />
<PhosphorScore rotateX={35} rotateY={-20} rotateZ={8} />

prefers-reduced-motion: reduce holds a still frame of the score and stops drawing. The animation also pauses while the canvas is off-screen or the tab is hidden.

Props

Omit color and theme="auto" picks phosphor green on dark, forest ink on light. The canvas is transparent in both themes, so it sits on whatever background the parent paints.