PianoKeys

About PianoKeys brings an interactive melodic experience to your Framer projects.

About PianoKeys 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 does Renders 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 build If 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

Interactive musical engagement