Skip to content
GetUrUI

Keypop

NewTemplateLanding

A one-page site for Keypop, a fictional Mac menu bar app that shows keystrokes on screen: panels that scroll sideways on desktop, a live Mac desktop with a working menu bar menu, a type-to-try keyboard, an XY pad to tune the overlay, a draggable 3D dot globe and Pip, a mascot whose eyes follow the cursor.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$19

One-time payment in USD, plus tax where applicable.

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included with Lifetime ($149) — compare plans.

Live preview
Open

What is this?

Keypop is a landing page for a small Mac app, built as a design kit: a light-first theme with dark mode, named colour and type roles, and 23 reusable components, from a sculpted keycap, a full drawn keyboard and synthesized key sounds to an XY pad, a 3D dot globe, a mascot and a sideways-scrolling track. The product is shown working rather than described: visitors open the menu bar menu, type into a notes window, press keys on a keyboard and drag a knob, and the same overlay follows every change across the page.

Who is it for?

Indie Mac and desktop developers, menu bar utilities, browser extensions and small tools that sell with a one-time price and want a launch page with personality. Swap the copy in sections/data.ts, wire the buy buttons to your checkout and App Store listing, and point the feedback form at your inbox.

What you get

Everything needed to make it yours.

Sideways scrolling, done right

On screens 1024px and up, scrolling down moves the panels sideways. Phones and reduced motion get a normal stacked page, and keyboard focus brings off-screen panels into view.

A live Mac desktop

A laptop mockup with a working menu bar menu (checkboxes, styles and positions with arrow-key navigation), a notes window you can type into, click rings and a dock.

Type to try it

A full drawn keyboard that lights each key as you press it, shows the overlay above, counts keys and shortcuts, and offers one-click shortcut demos.

An XY pad to tune

Drag or arrow-key a knob between subtle and bold, small and large, then pick how long keys linger and where they sit. A preview screen keeps playing shortcuts.

A globe and a mascot

A dotted 3D globe drawn on a canvas that you can drag and that turns to ping a new city, and Pip, a mascot whose eyes follow the cursor and react when pressed.

Keycap feedback form

Bug, Feedback and Idea as keycaps in a radio group, a message with a character count, optional email, inline errors that take focus and a simulated send.

Sections

  • Header: keycap section links that light up for the current panel, a sound switch, a rolling 'keys shown' counter and Download
  • Hero: a typed headline, Pip the mascot and a laptop with a live Mac desktop that plays a short demo (menu bar menu, notes window, dock, click rings, overlay), then hands over
  • Features: ten cards with small looping animations
  • Try it: a full keyboard that lights up as you type, the overlay above it, key and shortcut counts
  • Tune: an XY pad for weight and size, linger and position, and a preview that keeps playing shortcuts
  • Live: a dotted 3D globe you can drag, turning to ping a new city every few seconds
  • Feedback: Bug / Feedback / Idea keycaps, a validated message and email, simulated send
  • Closing call to action with buy buttons, requirements and footer links

Stack

Next.jsReact 19Tailwind CSS 4Motion

39 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates