# Hushkey, a free product landing page template > Product launch and pre-order page for a physical device. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page launch site for a palm-sized smart-home remote with eleven soft keys. Grey, tactile, monochrome; the keys are drawn in HTML and CSS and press, swell and melt into each other as you scroll. - Page: https://8b.com/templates/hushkey/ - Live demo: https://8bsite.github.io/product-landing-page-template/ - Repository (GitHub template): https://github.com/8bsite/product-landing-page-template - Download ZIP: https://github.com/8bsite/product-landing-page-template/archive/refs/heads/main.zip - Size: 115 KB, 8 photos (Unsplash), fonts: Mozilla Headline and Mozilla Text - Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/product-landing-page-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/product-landing-page-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/product-landing-page-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/product-landing-page-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a launch page for . Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, links and contacts, and recolour it through the CSS variables if needed. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/product-landing-page-template my-site`. To rebuild the design in another tool or stack (Lovable, Bolt, v0, React): https://8b.com/templates/hushkey/prompt.md ## Design Hushkey is a product landing page template for a device sold before it ships: a palm-sized smart-home remote with two finishes, a price and a ship date. It suits a gadget or IoT launch, a pre-launch page, or a waitlist once the pre-order buttons lead to a sign-up form. - Palette: #e4e5e8 (page background, key faces), #232427 (body text, shadows), #fbfbfc (highlights on keys and headings), #55565b (embossed headings), #8d8e93 (hairline outlines and contour lines), #b4b5b9 (top of the hero gradient), #2c2d31 (graphite FAQ, contact and footer bands), #a9abb0 (muted text on graphite) - Fonts: Mozilla Headline (headings: condensed, bold, very large, embossed), Mozilla Text (body and labels; small captions in spaced capitals) Soft monochrome neumorphism: keys, buttons and photo frames rise from or press into one cool grey surface, and headings look stamped into it. The device is drawn in HTML and CSS from round keys, a rotated diamond and contour lines. Material photos are cut as a pill, a circle and a square. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, section links, Pre-order button; phone menu overlay - **Eleven keys for the whole house.** (hero): first screen: headline, two buttons, the eleven-key product panel drawn in HTML/CSS. Motion: Smooth scrolling runs page-wide; headings press into the surface on arrival. Scrolling on sinks and shrinks the drawn panel while its keys press one by one. - **Up is ready. Down is on.** (states): keyboard of eight toggle keys (Up is ready / Down is on). Motion: Tied to scroll, the eight keys grow into place in a diagonal wave; each one toggles up or down on click. - **One pad. Four moods of the house.** (modes): sticky stage: D-pad drives four room photos (Morning, Desk, Evening, Away). Motion: Pinned while you scroll, the pad presses each direction in turn and that room's photo wipes in from the same side. - **Hold plus. The light arrives slowly.** (dimmer): fader + plus key over one room photo (grey to colour on scroll). Motion: Tied to scroll, the room photo brightens from dark greyscale to full colour as the fader thumb travels to full. - **No screen to wake.** (quiet): short statement: no screen, no app - **Press two at once. Get a third.** (chords): two keys meet and their outlines melt into one (chords). Motion: Pinned while you scroll, the Lamp and Lock keys drift together until their outline melts into one shape, then Goodnight fades up. - **Made to be found in the dark.** (material): three material cards with texture photos - **Two finishes. The same eleven keys.** (editions): two finishes (Chalk, Graphite) with pre-order buttons and a switch. Motion: Each finish panel tilts up from lying flat as it scrolls in; at the section's end a single key presses down. - **Before you press order.** (faq): questions and answers (native
). Motion: The graphite background floods out of that key in a widening circle, tied to scroll, and the questions rise in. - **Ask someone who has pressed every key.** (contact): email, phone and a contact form (placeholders) - **Footer** (footer): width-filling HUSHKEY wordmark, links, copyright and the Design: 8B credit. Motion: Tied to scroll, the width-filling HUSHKEY wordmark settles letter by letter, each brightening from muted grey as its shadow flips. ## Good for - hardware or gadget launch - pre-order or waitlist page - smart-home or IoT product - any product with a handful of features shown one per section ## Questions **Is the device a photo I must replace?** No. It is built from HTML elements and CSS shadows, so labels, icons and finish colours are editable code. It appears in the hero, modes, chords and finishes; swap those for your own product. **Do the pre-order buttons take payment?** No. They lead to the two finishes, whose buttons lead to the contact form. That form sends nothing until connected to a form service such as Formspree or Netlify Forms; or link the buttons to your checkout. ## Before publishing Replace: social preview image, favicon, email address, phone number and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.