PianoKeys

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

• Music producer & artist portfolios

• Audio software landing pages

• Creative "playground" or 404 sections

• Educational music blogs

• Interactive landing pages for events

Share your buildIf you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help?Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb