← DOCS
decorative

SheetMusic

Floating music notes and symbols.

npx chaos add sheet-music

PREVIEW

♪♫𝄞

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { SheetMusic } from '@oalacea/chaosui/decorative/sheet-music';

<SheetMusic />
<SheetMusic animation="falling" variant="gold" showStaff />
<SheetMusic count={15} density="dense" symbols={['quarterNote', 'eighthNote']} />

PROPS

PropTypeDefault
modePositioning mode
"overlay" | "inline""overlay"
animationAnimation style
"drift" | "falling" | "swirling" | "rising" | "none""drift"
variantColor variant
"ash" | "silver" | "gold" | "blood" | "ivory""ash"
densityNote density
"sparse" | "normal" | "dense""normal"
countNumber of random notes
number8
notesCustom note configurations
NoteConfig[]-
showStaffShow decorative staff lines
booleanfalse
symbolsSymbols to use for random generation
(keyof typeof MUSIC_SYMBOLS)[]-