What you get
- One HTML file with fonts and images embedded, no network requests
- Hero with email capture, product preview with a live chart, offer picker, pricing, FAQ and a closing sign-up
- Working routes: sample issue with paywall, searchable archive, join with seats and gifts, sign-in, legal, 404
- A validator for links, routes, labels, the glass recipe and leftover sample text
- Optional stills, portraits, a hero loop and a social card from PopNow after a credit quote
Good for
- Newsletter and briefing sign-up pages
- Waitlists, private betas and launch campaigns
- Memberships, courses or events that sell seats
Not for
- Light, pastel or colourful brands: the page is black and white only
- Online stores with many products
- SaaS sites that need a long feature tour
How to use it
In Claude or ChatGPT
Use the PopNow skill "Glassmorphism Website Template" (glassmorphism-website-template) for this: Make the sign-up page for Tidewatch, a Friday email for small-boat sailors: one forecast chart, three harbour notes and a long read. Free, plus a $5/month crew tier.
In a coding agent
/popnow-glassmorphism-website-template Make the sign-up page for Tidewatch, a Friday email for small-boat sailors: one forecast chart, three harbour notes and a long read. Free, plus a $5/month crew tier.
Then try
Quote a hero still of dark water at night and a 5 second loop made from it before generating anything.
Port the page into my Astro site as components and real routes.
What to have ready
- The name, what signing up gets people and the one promise for the headline
- 3-4 facts you can stand behind, plans and prices, 4-6 FAQ answers
- Your DESIGN.md if the brand has one
- Optional: a PopNow API key or your own dark photos and footage
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.
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.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
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
What makes the glass look right instead of a blurry box?
Every raised surface uses one recipe: a barely tinted interior with backdrop blur, a soft top sheen and a rim drawn with a masked gradient ring so light catches the top and bottom edges. The validator fails a page that drops the recipe.
Can the hero move?
Yes. After you approve the hero still, PopNow can animate it into a 5 second clip, and the bundled loop script turns that into a seamless muted loop with a poster. Reduced motion and hidden tabs keep the still.
Is it only for newsletters?
No. The sample is an evening briefing, but the adapting guide maps the same sections to app waitlists, courses, events and podcasts: the product preview becomes the app screen, the archive becomes a changelog or session list.
Do I need a PopNow API key?
No. The page ships with neutral bundled stills and CSS fallbacks for every image slot. A key adds new stills, portraits, the loop and a social card, each quoted in credits before it runs.