Keyboard Hero Home
The hero invites you to press any key; each keystroke fires its own animation — letters popping, ripples, musical notes.
Install
npx shadcn@latest add "https://webberui.com/r/keyboard-hero-home.json?t=<install token>"The whole page lands in app/templates/keyboard-hero-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Navbar and Keyboard Hero
A full-screen hero under the brand navbar — press any key or tap the on-screen keyboard to fire letter pops, canvas ripples and an equaliser animation.
hero - 2
Feature Grid of Six
Six core features across three columns, from the soundscape engine to timbre packs and rhythm analysis.
features - 3
Studio Track View
A CSS mock-up of the recording window, splitting every keystroke onto separate melody, bass and drum tracks.
product - 4
Key Figures Row
Gradient numerals for four metrics: daily keystrokes, countries reached, latency and rating.
stats - 5
User Voices
Three five-star endorsements from a musician, a sound designer and an engineer.
testimonial - 6
Subscription Plans
Free, Creator and Studio side by side, with the middle plan flagged as most popular.
pricing - 7
Closing Download Call to Action
A closing conversion block: a gradient glow behind a large headline and a free-download button.
cta - 8
Footer Links
A full footer with a brand blurb, social links and three nav columns for product, resources and company.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →