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
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
Dulaj dilshan
