2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Product Launch Keynote Slides is a 14-slide presentation site that runs in a browser tab and paces a launch the way a big-stage event does: an opening tease, the reveal, three feature beats, the numbers, price and date, then a single closing word. Every slide sits on true black with one idea, oversized type and a spotlit product. It suits founders, product marketers and small teams who are announcing something tangible and want to present from a link instead of exporting a deck from a slide tool.
The main design feature is continuity. The product image, the product name, a stat card and the price are shared elements, so they glide, scale and reposition from one slide to the next rather than cutting. Product shots rise out of darkness in front of an ultraviolet glow, the coral product and that glow give the deck its color, and numbers count up in huge tabular figures. Inside a slide, each key press reveals the next line before the deck moves on.
Presenter controls are built in: arrow keys, click zones, swipe on touch screens, a hairline progress bar, an overview grid, fullscreen, optional timed playback and a deep link for every slide. On a phone held upright, the stage switches from 16:9 to 9:16 and each shared element has its own position, so the morphs still read. Visitors who ask for reduced motion get plain crossfades and final values.
To adapt it, change the six variables for brand, product, category, price, ship date and closing word, rewrite the copy in the single content file, and replace the six product images at the same paths with your own shots on black. The default is an invented portable home battery; the second example, a whole-room air purifier, shows the same stage with a different product.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Product Launch Keynote Slides
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A cinematic 14-slide product launch keynote that runs as a static website. [BRAND] announces [PRODUCT], its new [PRODUCT_CATEGORY], from a browser tab. Pure black stage, one idea per slide, oversized type, one spotlit product. The visible craft is shared-element morphing: the same product image, the product name, a stat card and the price glide, scale and reposition from one slide to the next instead of cutting. Pacing: opening tease, the reveal, three feature beats, the numbers, price and date, then a one-word closing slide. The default product is an invented portable home battery: a free-standing coral column with one glowing seam.
- Audience: Founders, product marketers and small teams announcing something tangible, who want to present a launch from a link and full screen in a browser rather than from a slide tool's export.
- Goal: Hold a room for ten minutes: build tension, reveal the product, make three claims stick, land the price and the date, and end on one word. Every slide must also work on its own through its deep link.
- Tone: Confident, unhurried, spare. Short declarative lines, one thought at a time, concrete numbers instead of adjectives. No exclamation marks, no marketing superlatives.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react, react-dom 18 (MIT), vite 5, @vitejs/plugin-react (MIT), typescript (Apache-2.0), tailwindcss 3.4, postcss, autoprefixer (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), @fontsource-variable/bricolage-grotesque (OFL-1.1), @fontsource-variable/inter-tight (OFL-1.1), @fontsource-variable/jetbrains-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with Vite's react-ts template; package.json scripts: dev = vite, build = tsc -b && vite build, preview = vite preview.
- vite.config.ts: base './', build.sourcemap false, build.outDir 'dist'.
- tailwind.config.ts: content ['./index.html', './src/**/*.{ts,tsx}'], extend colors black #000000, coral #FF4B2B, ultraviolet #5B2EFF, white #FFFFFF, ash #A6A6B3, graphite #14141C, hairline #2A2A36, and fontFamily display 'Bricolage Grotesque Variable', sans 'Inter Tight Variable', mono 'JetBrains Mono Variable'.
- Import the three Fontsource packages once in src/main.tsx.
- src/styles/globals.css: html, body and #root are 100% tall, background #000000, color #FFFFFF, overflow hidden, overscroll-behavior none, user-select none. Define the sizing unit there: :root { --u: 1cqw; --min: 11px } and @media (max-aspect-ratio: 1/1) { :root { --u: 2.1cqw } }. Overview tiles set --min: 0px.
- All type, gaps and offsets inside a slide are multiples of --u through a helper u(n) that returns 'calc(var(--u) * n)'. Any text smaller than 1.7u uses max(var(--min), u(n)). Unregistered custom properties resolve at the point of use, so the same slide component scales correctly inside the stage and inside a small overview tile.
- Stage sizing, not scaling: the stage element gets its real size through CSS, landscape width min(100vw, 100dvh * 16 / 9) with aspect-ratio 16 / 9, portrait (max-aspect-ratio: 1/1) width min(100vw, 100dvh * 9 / 16) with aspect-ratio 9 / 16, container-type: size, overflow hidden, position relative, centered in the viewport with flex. Never fit the stage with CSS transform: scale(), because shared-element measurements would then be wrong.
- src/content/deck.ts holds all copy, variable values and image paths; src/content/poses.ts holds the actor pose table for both orientations. Components only read from these two files. Slide count and builds per slide live in deck.ts as an array of 14 entries { id, builds }.
- Folder layout: src/slides/Slide01.tsx to Slide14.tsx (copy layer only), src/components (Stage, ActorLayer, ProductActor, TextActor, CountUp, Build, Hud, ProgressBar, ClickZones, Overview), src/lib (useDeck.ts for slide, build, hash and input handling; usePose.ts reading the orientation with matchMedia).
- Every slide component and ActorLayer take { slide, build, isStatic }: isStatic renders the final state with all builds visible, no layoutId and no animation. It is used by overview tiles and by reduced motion.
- Read prefers-reduced-motion with Motion's useReducedMotion. When true: actors render without layoutId, slide changes are a plain 300ms opacity crossfade, CountUp shows the final value, builds appear with opacity only, no slow image drift.
- CountUp uses Motion's animate() to tween from the previous value (0 on slide entry) to the target, keeps prefix, suffix, commas and decimals from the source string ('$1,490', '2.4'), and sets font-variant-numeric: tabular-nums on Inter Tight so the digits do not jitter.
- Preload all six images on mount with new Image() so morphs never flash an empty frame.
- Add public/favicon.svg: a black rounded square with one horizontal coral line. Page title is '[BRAND] [PRODUCT] launch keynote'.
- Create ASSETS.md at the project root listing each image, font and icon set: path or package, source URL, author and license.
## Variables
- [BRAND] — Company name (default: "Norvane")
- [PRODUCT] — Product name, one short word that works set huge (default: "Cinder"). Keep it under 10 characters.
- [PRODUCT_CATEGORY] — What the product is, in lowercase (default: "home battery")
- [PRICE] — Launch price (default: "$1,490"). Currency symbol plus number; it is counted up on the price slide.
- [SHIP_DATE] — Date the product ships or goes on sale (default: "March 18")
- [CLOSING_WORD] — The single word on the last slide, with its period (default: "Charged."). Keep it under 10 characters.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/product-launch-keynote-slides in the footer (default: yes; delete this line to remove it)
The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Product Launch Keynote Slides"
colors:
stage_black: "#000000"
signal_coral: "#FF4B2B"
ultraviolet: "#5B2EFF"
white: "#FFFFFF"
ash: "#A6A6B3"
graphite: "#14141C"
hairline: "#2A2A36"
typography:
display_headlines_product_name_closing_word_dates: { family: "Bricolage Grotesque Variable", weights: [600, 700] }
figures_and_text_stats_price_captions_tabular_nums_on_all_figures: { family: "Inter Tight Variable", weights: [400, 500, 600] }
mono_eyebrows_slide_counter_spec_lines_uppercase_letter_spacing_0_14em: { family: "JetBrains Mono Variable", weights: [400, 500] }
spacing: "All sizes are multiples of --u (1% of stage width in landscape, 2.1% in portrait). Side margin is 6% of stage width in landscape, 8% in portrait. Display line-height 0.98, letter-spacing -0.03em. Large empty black areas are intentional: never fill a slide to its edges with copy, and never put more than one idea on a slide."
radius: "Stat cards 1.2u. HUD buttons 8px. Overview tiles 8px. Nothing else on the stage is rounded; there are no pills and no chips."
---
# Product Launch Keynote Slides — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Stage Black** `#000000` — Page and stage background. True black, so the letterbox around the stage is invisible.
- **Signal Coral** `#FF4B2B` — The one accent and the product's own color: progress bar, build markers, the underline actor, active states, the lower end of the hero stat gradient.
- **Ultraviolet** `#5B2EFF` — Spotlight falloff behind the product only, never text or buttons. Coral against ultraviolet on black is the deck's color identity and is visible from slide 1.
- **White** `#FFFFFF` — Headlines and figures.
- **Ash** `#A6A6B3` — Captions, secondary lines and HUD icons. Passes AA on black.
- **Graphite** `#14141C` — Stat card and HUD button surface.
- **Hairline** `#2A2A36` — 1px card and overview tile borders.
## Typography
- **Display (headlines, product name, closing word, dates)** — Bricolage Grotesque Variable (OFL), weights 600/700. Self-host the font files.
- **Figures and text (stats, price, captions, tabular-nums on all figures)** — Inter Tight Variable (OFL), weights 400/500/600. Self-host the font files.
- **Mono (eyebrows, slide counter, spec lines; uppercase, letter-spacing 0.14em)** — JetBrains Mono Variable (OFL), weights 400/500. Self-host the font files.
## Spacing & shape
- Spacing: All sizes are multiples of --u (1% of stage width in landscape, 2.1% in portrait). Side margin is 6% of stage width in landscape, 8% in portrait. Display line-height 0.98, letter-spacing -0.03em. Large empty black areas are intentional: never fill a slide to its edges with copy, and never put more than one idea on a slide.
- Radius: Stat cards 1.2u. HUD buttons 8px. Overview tiles 8px. Nothing else on the stage is rounded; there are no pills and no chips.
## Motion
- Morph: every actor uses one transition, a 1.1s tween with ease [0.65, 0, 0.2, 1]. New key presses interrupt and retarget it; navigation is never locked.
- Copy change: outgoing slide copy fades out in 0.25s, incoming fades in over 0.6s after a 0.35s delay with no slide or scale, so the actors are the only things that travel.
- Product fade-up: on the reveal slide the image goes from brightness 0.25 to 1 and scale 0.96 to 1 over 2.4s with ease [0.16, 1, 0.3, 1], while its ultraviolet spotlight goes from opacity 0 to 1 over 1.6s.
- Slow drift: on any slide the product image inside its actor scales from 1 to 1.03 over 12s, linear, restarted on slide change.
- Image swap inside the product actor: AnimatePresence crossfade over 0.6s, keyed on the image path, while the actor box keeps moving.
- Count-up: 1.4s with ease [0.16, 1, 0.3, 1], starting 0.3s after slide entry; on multi-card slides each figure starts 0.15s after the previous one.
- Build reveal: opacity 0 to 1 and y from 1.2u to 0 over 0.5s with ease [0.16, 1, 0.3, 1]. Unrevealed builds keep their space (visibility hidden) so nothing shifts.
- prefers-reduced-motion: morphs and count-ups are replaced by plain crossfades and final values, as described in Setup.
## Imagery
One invented hero object: a free-standing coral anodized column with softly rounded edges and a single glowing horizontal seam, shot on seamless black with an ultraviolet haze behind it. The six images read as one studio shoot. They carry a feathered radial mask so they melt into the stage with no visible rectangle. Everything else on the stage is type and code-drawn light.
## Tone
Confident, unhurried, spare. Short declarative lines, one thought at a time, concrete numbers instead of adjectives. No exclamation marks, no marketing superlatives.
---
— Prompt by VibeFather · https://vibefather.ai/t/product-launch-keynote-slides · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A hardware startup launching a wearable: set BRAND and PRODUCT to your device, rewrite the three feature beats for your claims, and swap the six product shots for renders on black.
- An agency presenting a rebrand: use PRODUCT_CATEGORY for the service, replace the price slide with a retainer figure, and set CLOSING_WORD to the new tagline.
- A founder pitching at a demo day: keep the reveal, numbers and price slides, cut the feature beats to your two strongest, and set SHIP_DATE to your pilot date.
- A product marketer briefing a sales team: change BRAND to the internal team name, retitle the stat card for pipeline figures, and deep link each slide in the agenda.
Product Launch Keynote Slides: questions and answers
How do I change the product, price and ship date in the Product Launch Keynote Slides template?
The Product Launch Keynote Slides template keeps every value in one content file. Set the six variables for brand, product, category, price, ship date and closing word, then rewrite the headlines, labels and paragraphs so they match the new product. The price is counted up from its string, so keep the currency symbol and number in the same shape, and keep the product name and closing word under ten characters so they set huge without breaking.
What do I need to replace to put my own product on the stage?
Replace the six product images at the same paths with your own shots on black. The template preloads all six on mount so the shared-element morphs never flash an empty frame, and the product image is one of the elements that glides between slides. Shoot the product free-standing against true black so it rises out of the ultraviolet glow, and keep the framing consistent across the six shots so the scale changes read as one continuous move.
How do I present the Product Launch Keynote Slides from a link?
Open the published site in a browser tab and press the fullscreen control. Arrow keys, click zones and swipe on touch screens move the deck forward, a hairline progress bar shows position, and each of the 14 slides has its own deep link so you can jump straight to the reveal, the numbers or the price. Inside a slide, each key press reveals the next line before the deck moves on, which lets you pace the build.
Can I use the Product Launch Keynote Slides for a client launch?
Commercial and client use of the Product Launch Keynote Slides template needs Pro. Pro templates show the brief, stack and variables publicly and the full prompt to Pro members, and the source code of the demos comes with Pro. The prompts and DESIGN.md files of free templates are licensed for personal, non-commercial use only.
What happens to the animations if someone prefers reduced motion?
Visitors who ask for reduced motion get plain crossfades and final values. The shared product image, product name, stat card and price stop morphing between slides, the slide change becomes a short opacity crossfade, the counting numbers show their final value immediately, and the build lines appear with opacity only. The slow image drift also stops, so the deck stays readable without motion.
How do I build a product launch keynote slides with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add product-launch-keynote-slides, replace [BRAND], [PRICE], [PRODUCT] and [SHIP_DATE] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Product Launch Keynote Slides demo?
The Portable home battery case was built by Claude Opus 5.5 in Claude Code; the Whole-room air purifier case was built by Claude Sonnet 5.5 in Claude Code. Each build used the published prompt with nothing added, so you can compare the models side by side.
What tech stack and pages does the Product Launch Keynote Slides template use?
Product Launch Keynote Slides is a single-page site built with Tailwind CSS, Motion and React, with text animation, page transitions and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Is the Product Launch Keynote Slides template free to use?
Product Launch Keynote Slides is a Pro template: the brief, stack and variables are public, and the full prompt, the source code of the live demo and a commercial license come with VibeFather Pro. Its DESIGN.md is free for personal projects.
Does the Product Launch Keynote Slides template work on mobile?
Yes. Every Product Launch Keynote Slides build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.