# Keypop

> 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.

- Category: Landing template for Next.js
- Price: $19 one-time, or included with Lifetime ($149)
- Page: https://geturui.com/templates/keypop
- Live preview: https://geturui.com/templates/keypop/live
- Stack: Next.js, React 19, Tailwind CSS 4, Motion

## 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

- **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

## Dependencies

`motion`, `lucide-react`, `clsx`, `tailwind-merge`