| name | product-launch |
| description | Product launch page with countdown, feature reveals, teaser video placeholder,
and early-access signup. Use for "launch", "product launch", "coming soon".
|
| triggers | ["product launch","launch page","coming soon","teaser","early access"] |
| df | {"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true}} |
Product Launch Skill
Produce a product launch / coming-soon page.
Sections
- Hero: massive product name, tagline, countdown timer (CSS animation).
- Teaser: gradient placeholder for video/screenshot with play button overlay.
- Feature reveals: 3 cards that fade in on scroll (CSS
animation-timeline).
- Early access: email signup form (styled input + button).
- Social proof: "Join X others" with avatar stack.
- Footer: minimal links, copyright.
Rules
- Countdown: CSS-only, updates via JS interval.
- Avatar stack: overlapping circles with colored initials.
- Accent used for CTA and countdown numbers only.
data-df-id on each section.
Output
Single index.html, inline CSS/JS.
