Vertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare.
"use client"
import { PhosphorScore } from "@/components/ui/phosphor-score"
const settings = {
color: "#4DFF6A",
glow: 50,
speed: 1.35,
density: 1,
seed: 23,
sway: true,
}
export default function PhosphorScoreDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex min-h-[520px] w-full items-center justify-center bg-background p-4">
<div className="relative h-[480px] w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-background">
<PhosphorScore
// Left unset at the default so the ink follows the light/dark theme.
color={s.color.toUpperCase() === "#4DFF6A" ? undefined : s.color}
glow={s.glow}
speed={s.speed}
density={s.density}
seed={s.seed}
sway={s.sway}
theme="auto"
/>
</div>
</div>
)
}