Piano
Interactive Piano Keyboard lets you add a playable piano directly to your Framer canvas. Users can click or tap keys to trigger real sound generated with the Web Audio API, while visual feedback shows active and pressed states for both white and black keys.
You can define the exact key range using musical notes like C3 to C5, making it easy to create compact keyboards or wider octave layouts. Each key responds instantly with smooth press animations and realistic shading for better tactile feedback.
The component supports external control through active notes and callbacks, allowing it to be connected to other interactions, tutorials, or learning experiences. Labels can be shown or hidden, and both natural and accidental key colors can be fully customized to match your design system.
Key Features
Playable piano with real audio outputCustom note range using musical notationSupports sharps and flatsVisual pressed and active key statesSmooth key press animationsCustom colors for white and black keysOptional note labels on keysMouse and touch input supportExternal control with play and stop callbacks
Use Cases
Music learning interfacesInteractive landing pagesSound-based demos and experimentsEducational tools and tutorialsPlayful product experiences
Best Practices / Tips
Keep ranges short for mobile layoutsHide labels for cleaner visual designsUse active note callbacks to sync with other animationsAvoid very wide ranges in small containersUse brighter active colors for better feedback
What’s Included
One interactive piano keyboard componentConfigurable note range controlsBuilt-in sound generationVisual active and pressed statesCustom color and label options
Who It’s For
Designers building interactive demosEducators creating music toolsCreative developers experimenting with soundNo-code builders adding playful interactions
Plaiter
