decorative

SheetMusic

Floating music notes and symbols.

npx chaos add sheet-music

PREVIEW

♪♫𝄞

USAGE

import { SheetMusic } from '@/components/chaos/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)[]-