# Hushkey: prompts to build this page with any AI tool

Prompts that rebuild the Hushkey landing page, a product launch page with soft, pressable keys and scroll animations, in Lovable, Bolt, v0, Claude Code, Cursor or any other AI builder, without the HTML file. Expect the same style and the same scenes, adapted to your product, not a pixel copy. For the exact page, download `index.html` from the repository instead.

How to use:
1. Fill in "Your product" below.
2. Paste the base prompt first. Attach the screenshot of the first screen (`previews/desktop.png`) as a visual reference if your tool takes images.
3. Then paste the section prompts one by one, checking each section before the next. Tools follow short, concrete prompts better than one long one.
4. Last, paste the transitions prompt and go through the checklist.

If you want one paste only, use the quick prompt.

---

## Quick prompt (one paste)

```text
Build a one-page product launch website for <product name: what it is, who it is for, price, how to buy>.

Look: soft, tactile, monochrome grey, like pressing real rubber keys. Page background #e4e5e8, text #232427, highlights #fbfbfc, outlines #8d8e93, secondary text #55565b, dark sections #2c2d31. Headings in "Mozilla Headline" (Google Fonts) bold 700 at 75% width, very large (up to 116px), line-height 0.9, colour #55565b with an embossed text-shadow (0 2px 1px #fbfbfc, 0 -1px 1px rgba(35,36,39,.3)). Body text "Mozilla Text" 17px/1.55. Every button, toggle and key is a soft raised shape (light gradient, soft drop shadow, a light inner top edge) that sinks in when pressed (an inner shadow layer fades in, the cap scales to 0.965). Thin 1.5px #8d8e93 outlines around groups of keys. Photos sit in rounded frames (radius 34px) that look pressed into the page (inner shadow, 10px padding).

Sections: floating pill nav; hero with a 3-line headline and the product drawn in HTML/CSS from round keys (no image); a 4×2 grid of toggle keys that really toggle; a sticky scroll stage where a four-way pad switches between four photos; a photo that goes from grey to colour while a fader thumb climbs; a three-line statement; two keys that glide together and merge into one gooey outline; three material photos in pill, circle and square frames; two product versions (light and dark) with prices; FAQ on a dark background with native <details>; contact form; footer with a huge wordmark filling the width.

Motion: smooth scroll; headings settle into the page as they enter; most scenes are tied to scroll position (scrubbed), with sticky stages for the four-photo switcher (340vh) and the merging keys (250vh). With "reduce motion" on, show a complete static page. Use GSAP with ScrollTrigger (or the closest equivalent in your stack). Mobile first, breakpoint 900px, max content width 1280px.
```

---

## Your product

Fill this in and paste it above the base prompt:

```text
Product: <name>
What it is, in one line: <...>
Who it is for: <...>
Price and how to buy: <price, button label, checkout/waitlist URL>
Five to eight things it can do or settings it has (for the toggle grid): <...>
Four modes, use cases or screens (for the four-photo switcher): <...>
One gradual effect it has (for the grey-to-colour scene): <...>
Two things that combine into a third (for the merging keys): <...>
Three materials, principles or features (for the three photos): <...>
Two versions, plans or finishes, with prices: <...>
Six questions customers ask, with answers: <...>
Contact: <email, phone, address or "email only">
```

---

## Base prompt

```text
You are building a one-page product launch site. Build it in this stack: <pick one>
- A. One HTML file, inline CSS and JS, GSAP 3 with ScrollTrigger and SplitText and Lenis smooth scroll from a CDN, no build step. (Closest to the original.)
- B. React (Lovable, Bolt, v0): GSAP with @gsap/react (useGSAP) and ScrollTrigger; Lenis optional.
- C. React with Motion (Framer Motion): useScroll and useTransform for every scroll-tied scene, position: sticky for the pinned stages.
- D. HTML and CSS only: CSS scroll-driven animations (animation-timeline: view() / scroll()); browsers without them get the static page.

Design system (use exactly these values, as CSS variables):
Colours
- --page #e4e5e8: page background and light surfaces
- --ink #232427: main text, the base of all shadows
- --highlight #fbfbfc: the light top edge of raised shapes
- --outline #8d8e93: thin outlines (1.5px), icons on keys
- --muted #55565b: display headings and secondary text
- --haze #b4b5b9: top of the hero gradient
- --graphite #2c2d31: dark sections and the dark product version
- --on-dark #a9abb0: secondary text on dark
- --deep #121315: shadows on dark surfaces

Type (Google Fonts)
- Display: "Mozilla Headline", weight 700, font-stretch 75% (condensed). Section headings clamp(48px, 6.2vw, 92px), hero heading clamp(60px, 8vw, 116px), line-height 0.9, letter-spacing -0.005em, colour --muted, text-wrap: balance.
- Embossed heading shadow: text-shadow 0 2px 1px var(--highlight), 0 -1px 1px rgb(35 36 39 / .3). On dark: 0 2px 1px rgb(251 251 252 / .12), 0 -1px 1px var(--deep), colour --page.
- Body: "Mozilla Text", 17px, line-height 1.55, max 34em per paragraph. Lead paragraph 20px/1.45. Small text 15px/1.5 in --muted.
- Caption: 13px, weight 300, uppercase, letter-spacing 0.42em. Label: 13px, weight 600, uppercase, letter-spacing 0.08em.
- Card title: display font 34px, line-height 1.

Shapes
- Radii: pills 999px, keys and cards 26px, photo frames and surfaces 34px.
- Raised shape ("cap"): background linear-gradient(180deg, --highlight, --page 62%, a 6% darker page); box-shadow 0 .5em .9em -.3em rgb(35 36 39 / .34), 0 .1em .18em rgb(35 36 39 / .14), inset 0 .1em .08em --highlight, inset 0 -.14em .3em rgb(35 36 39 / .09).
- Pressed layer ("dent"), stacked on the cap, opacity 0 at rest and 1 when pressed: background linear-gradient(180deg, an 11% darker page, --page 52%, --highlight); box-shadow inset 0 .28em .5em rgb(35 36 39 / .26), inset 0 -.12em .16em --highlight. When pressed, the cap also scales to 0.965.
- Round key: a circle 4.6em wide with a cap, a dent and a centred icon or short label in --outline. Interactive keys show a 1.5px --outline ring 0.3em outside on hover.
- Well: a group of keys inside a 1.5px --outline pill, 0.6em padding and gap.
- Button: pill, min-height 54px, padding 0 30px, 16px weight 600, raised; hover: dent at 0.6 and label 1px down; active: dent 1 and label 2px down. Dark button: same on --graphite with light text.
- Text link: 16px weight 600 with a 1px underline drawn by a background gradient that grows to 3px on hover.
- Photo frame: 10px padding, background --page, radius 34px, box-shadow inset 0 .5em 1em rgb(35 36 39 / .2), inset 0 -.2em .3em --highlight; the image fills it with object-fit: cover and the same radius.
- Surface (nav bar, caption cards): background linear-gradient(180deg, --highlight, --page 46%), box-shadow 0 18px 40px -18px rgb(35 36 39 / .32), 0 2px 4px rgb(35 36 39 / .08), inset 0 1px 0 --highlight, radius 34px.
- Tick: a small uppercase label (13px, weight 500, letter-spacing .12em) above a 1.5px × 30px vertical line in --outline.

Layout
- Content container: max-width 1280px, side padding clamp(16px, 4vw, 48px).
- Section vertical padding: clamp(104px, 15vh, 176px).
- Most sections open with a head row: heading on the left (6fr) and one paragraph on the right (5fr), aligned to the bottom, gap 56px, 56–72px above the content.
- Breakpoint 900px: below it everything stacks to one column.

Motion rules
- Smooth scroll (Lenis: lerp 0.085, wheelMultiplier 0.9) wired to the scroll animations.
- Every animation runs only under prefers-reduced-motion: no-preference. With reduce motion, every section shows its final state, complete and readable.
- "Scrubbed" means tied to scroll position (scrolling back plays it backwards), no timed playback.
- Entrance effects, played once when an element reaches 88% of the viewport height:
  - Deboss, for every section heading: from 8px higher and with its text-shadow flipped (engraved, the y offsets negated) to its resting embossed shadow, 0.9s, power3.out.
  - Rise, for cards, photos, FAQ items, form fields: from scale 0.9 and 26px lower to rest, 1s, power3.out, 0.08s apart within a row of three.
  - Contour, for ticks and outlines: SVG strokes draw in over 1.1s (power2.inOut); tick lines grow from zero height in 0.7s.
- Pinned stages use a tall track (e.g. 340vh) with a sticky 100vh stage inside, not JS pinning, so the page stays readable without JS.

Accessibility: semantic sections with headings, real buttons for toggles (aria-pressed), native <details> for the FAQ, labelled form fields, alt text on every photo, decorative key art aria-hidden, visible focus outline (2px, offset 4px).

Build only the design system and an empty page skeleton with the sections listed next; I will send each section separately.
Sections in order: navigation, hero, toggle grid, four-mode stage, dimmer, statement, merging keys, materials, two versions, FAQ, contact, footer.
```

---

## Section prompts

### 1. Navigation

```text
Navigation: a floating pill bar fixed 14px from the top, inset by the page side padding, max-width 1184px, min-height 64px, padding 6px 6px 6px 26px, styled as a surface. Left: the wordmark in the display font, 26px, uppercase, letter-spacing .03em, --muted with the embossed shadow. Right: six text links (15px, gap 26px) to the sections, then the main button (pill, min-height 50px, 15px): "<buy label>".
Below 900px: the links move into a full-screen overlay (background --page) opened by a round menu key (46px) next to the button; in the overlay the links are display-font 44px, with the wordmark and a round close key at the top. Escape closes it, focus stays inside while open, the smooth scroll stops while it is open.
```

### 2. Hero

```text
Hero: full viewport height (100svh), padding-top 132px, background linear-gradient(180deg, --haze, --page 48%). Two columns: copy on the left, the product on the right.
Copy: a three-line heading, each line its own block ("<line 1>" / "<line 2>" / "<line 3>"), max-width 6.2em; a caption line ("<category in 3 words>"), a lead paragraph (20px), a button "<buy label> · <price>" and a text link "<explore label>", and a small note under them ("<shipping or availability note>").
Product art (decorative, aria-hidden, built only from round keys and outlines, no image): a 38em × 33em panel (font-size clamp(9px, 1.2vw, 16px) so it scales as one piece) holding four clusters:
- top left: a 17em four-way pad: five round keys (up, left, OK, right, down) inside a rounded square outline rotated 45° (radius 3.3em);
- top right: a pill well with two round keys (previous, next);
- bottom right: one big play key (10.8em) with a small pause key (5.4em) beside it, both wrapped by one smooth continuous outline like two drops merging;
- bottom left: a vertical well with a minus key and a pressed plus key.
On load: the three heading lines rise 0.34em into place over 0.8s (cubic-bezier(.2,.7,.2,1)), 0.06s apart; the four clusters grow from scale 0.9 and 1.2em lower over 0.9s, 0.08s apart.
Idle loop while the hero is on screen: a pressed dent travels around the pad (up, right, down, left; 7.2s per cycle), and another slides between the two well keys (5.4s), both with cubic-bezier(.65,0,.25,1). Pause both when the hero is off screen.
Below 900px: one column, heading clamp(50px, 15.6vw, 84px), the panel under the copy scaled to fit the width, the note hidden.
```

### 3. Toggle grid

```text
Toggle grid: two columns (5fr text, 7fr grid). Text: heading "<two short sentences, e.g. Up is ready. Down is on.>", a paragraph and a small note.
Grid: 4 × 2 square keys (gap 30px). Each key is a real <button aria-pressed>, radius 26px, a raised cap with a dent layer, inside an outline well (1.5px --outline, 11px outside the key, radius 37px). Label top-left (15px, weight 600), state bottom-left (12px, uppercase, letter-spacing .1em): "Ready" when up, "On" when pressed. Clicking toggles it: the dent fades in (0.3s) and the label moves 2px down. Some keys start pressed. The last key is "All off": it lifts every other key.
Labels: <your 7 features or settings>.
Scroll entrance (scrubbed, from when the section top enters the viewport bottom until it reaches 25%): the keys swell from scale 0.58 and 34px lower to full size in a diagonal wave (column index + row index), 0.09 apart, each over half the range, power2.out.
Below 900px: the grid becomes 2 columns and moves above the text.
```

### 4. Four-mode stage

```text
Four-mode stage: a head row ("<heading>", paragraph). Then a pinned scene: a 340vh track with a sticky 100vh stage (padding-top 100px) holding two columns (4fr, 7fr):
- Left: a big four-way pad (26em; font-size clamp(9px, .95vw, 13px)): five round keys (5em) inside a rotated rounded-square outline, and four uppercase labels placed outside the pad on each side: up "<mode 1>", right "<mode 2>", down "<mode 3>", left "<mode 4>". A small hint under it.
- Right: one photo frame, min(64vh, 560px) tall, with the four photos stacked in it. Each photo has a caption card (surface, radius 26px, bottom-left 22px, max 340px): a direction label, a title (34px), one line of text.
Scrubbed along the track: the up key is pressed at the start. For each next photo (at 0.55, 1.8, 3.05 of a 4-unit timeline): the previous key lifts (0.2), the matching key presses, and the photo wipes in from the side of that key (clip-path inset from that edge to fully open over 0.85, power2.inOut) while it zooms from 1.14 to 1 (power2.out). A short hold at the end.
Photos: <four photos for your four modes, 3:2, same light and colour family>.
Without motion: a 2 × 2 grid of photo cards (4:3) with the caption cards overlapping their bottom edge by 46px.
Below 900px: the photo stage goes on top (min(50svh, 420px)), the pad smaller below it, the hint hidden.
```

### 5. Dimmer

```text
Dimmer: a head row ("<heading>", paragraph). Then a row: a 16:9 photo frame and, to its right, a vertical fader: a tick "Level" on top, a groove 64px wide filling the photo's height (radius 999px, inset like the photo frame, 8px padding) with a raised pill thumb (92px tall, a short horizontal line in its centre), and under it a well with one round plus key.
Below: three notes in three columns, each with a 1.5px --outline top border, an uppercase label and a short text (<three ways to use it>).
Scrubbed while the row moves from 85% to 14% of the viewport: the photo goes from grayscale(1) brightness(0.34) to full colour (power1.in), the thumb climbs from the bottom of the groove to the top, and the plus key is pressed at the start and released at the very end.
Photo: <one photo that reads well in grey and in colour>.
Below 900px: the fader turns horizontal under the photo (groove 60px tall, thumb 84px wide, sliding from the left end to the right end), the tick hidden.
```

### 6. Statement

```text
Statement: three very large lines in the display font (clamp(54px, 9.4vw, 148px), line-height .92), each shifted right a little (0, 14%, 5% of the width): "<short line 1>", "<short line 2>", "<short line 3>". After each line, aligned to its baseline, a small group: a tick labelled "Off" above a pressed round key (3em). Then one paragraph, right-aligned, max 30em.
Motion: each line debosses as it enters; the ticks draw in.
Below 900px: smaller lines (clamp(46px, 13.4vw, 80px)), no offsets, the tick group beside the text without its line.
```

### 7. Merging keys

```text
Merging keys: a head row ("<heading>", paragraph). Then a pinned scene: a 250vh track with a sticky 100vh stage, centred. In it an art box 36em × 34em (font-size clamp(9px, min(1.26vw, (100vh - 240px) / 34), 17px)) with two pressed round keys labelled "<A>" (18em, at 11em/6em) and "<B>" (10em, at 7.35em/20.51em), and one SVG path, 1.5px --outline, no fill, drawn around both circles as a single metaball outline (radius 10.2em around A's centre, 6.1em around B's): two separate circles when they are far apart, a smooth curved bridge as they approach, one rounded shape when they overlap. Recompute the path on every frame from the keys' current positions.
Under the art: "<A> + <B> = <C>" in the 34px title style, <C> in --ink.
Scrubbed along the track: A starts half the spread to the right and 3em higher, B starts the full spread to the left and 9em higher (spread = min(17em, 30% of the viewport width)); both glide home over 72% of the scroll (power1.inOut and power2.inOut); at 78% both press (dent in, scale 0.965); at 82% the result line fades in from 22px lower.
Below: three items in a row: a 76px mini merged-outline icon (two circles with the bridge), a title (26px), an uppercase combination label and a line of text (<three combinations of your product>).
```

### 8. Materials

```text
Materials: a head row ("<heading>", paragraph). Then three items in columns of 0.8fr, 1.1fr and 1fr, gap 48px, each with a tick label on top ("<label>"), a photo frame, a title (34px) and a short text. The frames differ: a tall pill (aspect 1 / 1.7, radius 999px), a circle (aspect 1, pushed 120px down), a square (aspect 1, pushed 40px down).
Motion: the photos rise, the ticks draw in.
Photos: <three close-up texture or detail photos in one colour family>.
Below 900px: one column, the pill 78% wide and centred, the circle 86%.
```

### 9. Two versions

```text
Two versions: a head row ("<heading>", paragraph). Then two cards side by side, each: a product panel drawn with keys (24em × 34em, radius 3em: the four-way pad in a rotated outline, previous/next, a play key, then pause, plus, minus in a row) next to a body (title 34px, one line, the price in the display font 44px, a button "<buy label> <version>"). The first panel is light (--highlight to --page gradient, surface shadow); the second is dark (graphite gradient, dark keys with --on-dark icons and a dark shadow).
Below the cards: one centred line of terms (<bundle price, payment and return terms>). Then a centred big round key (8.4em) with a tick "<dark version name>" above it, and 22vh of empty space under it (the next section pours out of this key).
Scrubbed while each card moves from 94% to 40% of the viewport: its panel stands up from lying flat, rotateX 66° to 0, 60px lower to 0, scale 0.9 to 1 (perspective 900px on the card, transform-origin bottom centre).
Below 1100px each card stacks the panel above the body, centred.
```

### 10. FAQ

```text
FAQ on a dark background (--graphite, text --page). Two columns (5fr, 7fr): a heading in the dark display style ("<heading>") with a short line in --on-dark | six questions as native <details>: radius 26px, a dark raised background (graphite gradient, dark shadow), the summary 18px weight 500 with a small dark round key on the right showing a plus, which becomes a pressed key with a minus when open; the answer in --on-dark, padding 0 26px 24px. They open without JavaScript.
Motion: the items rise, 0.08s apart.
Questions: <your six questions and answers>.
```

### 11. Contact

```text
Contact on the same dark background, directly under the FAQ (no gap). Two columns (5fr, 6fr): a heading ("<heading>"), a paragraph and a list (Email, Phone, Address, each a small --on-dark label over a 19px value; email and phone are links) | a form in two columns: name, email, a topic select (full width), message (full width, textarea), a dark pill submit button and a status line (role="status").
Fields: dark inset pills (min-height 56px, padding 15px 22px, background --graphite, shadow inset 0 .28em .5em rgb(18 19 21 / .75), inset 0 -.1em .14em rgb(251 251 252 / .1), text --page); the textarea has radius 26px.
On submit: check the fields; show "<thank-you message>" or "<please fix message>" in the status line. Send to <Formspree / Netlify Forms / my endpoint / nowhere yet>.
Motion: the fields rise.
```

### 12. Footer

```text
Footer on the dark background: the wordmark in the dark display style filling the full content width on one line (use a container query: font-size min(38cqi, 100cqi / (N × 0.456)), where N is the number of letters; line-height 0.8). Under it, after a 1.5px line in --on-dark at 40%: the caption line, the section links and "© <year> <company>".
Scrubbed from the footer top at 85% of the viewport to the end of the page: the wordmark's letters press into the page one by one, 0.1 apart: each from 0.16em higher, colour --on-dark and the flipped (raised) shadow, to its resting colour and engraved shadow, power2.inOut.
```

---

## Transitions between sections

```text
Two pairs of neighbouring sections share one animation across their border. Keep each pair adjacent; if they are not adjacent, skip the transition and keep the separate entrances.

1. Hero → toggle grid. Scrubbed from when the hero's bottom is at the viewport bottom until it is at 25%: the product panel sinks down, to 18px above the outline of the first toggle key at most (max 26% of the viewport height), and shrinks to 0.82 (transform-origin bottom centre), while its eleven keys press one after another in this order: up, left, OK, right, down, the two well keys, play, pause, the unpressed step key. Over the same scroll the toggle keys swell up (section 3), so it reads as one press pushing the next keys up.

2. Two versions → FAQ. Scrubbed while the bottom of the two-versions section goes from the viewport bottom to 30%: the big round key presses (dent in, scale 0.965) and moves 8px down in the first 16%. Then, scrubbed while the FAQ top goes from the viewport bottom to 30%: the FAQ's dark background pours out of that key: a dark layer behind the FAQ, extended upward to the key's centre, revealed by clip-path: circle(r at x 0) with x the key's centre: from 42% of the key width to a circle as wide as the section (sine.in, the first 10–34% of the range, longer on wider screens), then to a circle covering the whole section (power2.out); remove the clip at the end.
```

---

## Checklist

- Every section works and reads well with "reduce motion" on: final states, nothing hidden.
- 375px phone: nothing overflows sideways; the hero heading stays in three lines; the nav button fits next to the menu key.
- Scrolling back plays every scrubbed scene backwards.
- The toggle keys and FAQ items work with a keyboard; focus is visible.
- No invented facts left from your notes: prices, dates, addresses, specs.
- Photos have alt text; decorative key art is aria-hidden.

The original page: https://8bsite.github.io/product-landing-page-template/ · the HTML file: https://github.com/8bsite/product-landing-page-template · free, MIT, by 8B (https://8b.com).