What you get
- One HTML file with fonts and images embedded that also runs in a sandboxed preview
- Eleven sections: title-card hero, manifesto, tabbed product moments, night film, specs, app panel, showroom booking, journal, reservation
- Working booking, reservation, contact and newsletter forms with inline validation and receipts
- A validator for offline use, wiring, accessibility and leftover sample names
- Optional PopNow product stills, a background loop and a social card after a credit quote
Good for
- Preorder, waitlist or reservation pages for premium hardware
- Launching a watch, headphone, camera, car, fragrance or furniture piece
- A first product page for a design-led brand
Not for
- Stores with many products or a cart
- Light, pastel or brightly colored brands
- SaaS pricing pages and long editorial sites
How to use it
In Claude or ChatGPT
Use the PopNow skill "Cinematic Product Launch Page" (product-launch-landing-page) for this: Launch page for Halden One, a hand-wound mechanical watch from a small Swiss-Danish workshop. Reservations open with a $250 deposit, first 300 pieces, showroom visits in Geneva and Copenhagen.
In a coding agent
/popnow-product-launch-landing-page Launch page for Halden One, a hand-wound mechanical watch from a small Swiss-Danish workshop. Reservations open with a $250 deposit, first 300 pieces, showroom visits in Geneva and Copenhagen.
Then try
Quote four product close-ups and a night-scene loop before you generate anything.
Make a lite version with just the hero, the moments and the reservation.
What to have ready
- Product name, price or availability line and where it is made
- How people try and buy it, plus deposit, warranty and shipping terms
- Product photos, or the materials and one signature detail if it is not made yet
- Optional: a PopNow API key and the project's DESIGN.md
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Is the hero a video?
No. The hero is a centered headline over a slow canvas animation drawn in code, so it costs nothing and stays sharp. PopNow video goes into the letterboxed night scene further down: a short loop animated from the approved still and cut so the repeat is invisible.
What does PopNow generate here?
Optional product close-ups, scene images and a flat lay in one shared light, a background loop for the night scene, and a social preview card. The skill quotes the whole plan in credits and runs nothing until you agree.
Can I use it without an API key?
Yes. Photo stages fall back to dark canvas scenes or your own photos, journal cards can be text-only, the social card is rendered from HTML, and the delivery note lists the slots that still want a real photo.
Do the reservation and booking forms take payments?
No. They validate, show a receipt and a reference number, and send nothing until you connect them to your own endpoint or checkout. The delivery note says so plainly.