PianoKeys: Premium Component by Dulaj dilshan

A fully playable piano keyboard for Framer with recording capabilities, customizable scales, and responsive design.

About this Component

Update 1.0Initial release with multi-octave support and MP3/MIDI recording.

AboutPianoKeys brings an interactive melodic experience to your Framer projects. Drop it into a landing page, a creative portfolio, or a "playground" section to let visitors play music directly on your site. With support for multiple octaves and a fully responsive layout, it serves as both a fun "Easter egg" and a functional tool for music-related websites.

What it doesRenders a high-quality piano interface that handles mouse clicks and keyboard inputs. It features a built-in recording system allowing users to capture their melodies, play them back instantly, or download the file. The "Enable Scale" feature helps users stay in key, while the optional controls provide a clean or feature-rich UI depending on your needs.

What you can customize

Playability: Set the Octave Range to fit your layout, toggle Scale mode to guide musical play, and show/hide keyboard labels for better accessibility.
Key Aesthetics: Completely customize the colors of the White Keys, Black Keys, and the Active (pressed) state to match your brand’s color palette perfectly.
Interface Controls: Show or hide the control bar and individually style the Record, Play, and Download buttons with custom hex colors to ensure the UI feels native to your design.

Great for