About this component

The card is a continuous piano roll, slowly scrolling upwards. Content is punched as holes in the paper which play as notes when they pass a glowing reader bar. Hovering over a hole previews its musical note. Clicking creates a new punch hole as a bookmark or reaction. Tempo adjusts based on interaction.

Difficulty

Advanced

Style

Piano Roll

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/player-piano-roll-card.