23rd logo23rd

Phosphor Score

CRT-style sheet music that scrolls down a grand staff and glows at the playhead.

Preview

Installation

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

Or from the public GitHub registry:

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

Usage

Give the parent a size; the transparent canvas fills it.

"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 set the glow:

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

Tilt the plane in perspective, like CSS rotations:

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

Props

PropTypeDefault
colorstringtheme phosphor / forest ink
glownumber50, 0–100
speednumber1.35, beats per second
densitynumber1, 0.35–1.85
swaybooleantrue, slow camera drift
seednumber23, new seed crossfades
rotateXnumber0, degrees, -70–70
rotateYnumber0, degrees, -70–70
rotateZnumber0, degrees
theme"light" | "dark" | "auto""auto"
classNamestringReact only
classstringSvelte only