3 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Meniscus is a single-page product launch site for a physical object that is meant to be looked at. The default build sells Tide, an invented hand-blown glass room speaker from a small Portland studio, and walks a visitor from first impression to a refundable preorder deposit without leaving the page. It suits hardware founders running a first production batch, design-led device brands, crowdfunding campaigns that want their own page, and studios pitching a product concept to clients.
The look is built around glass that behaves like glass. Every panel, chip and pricing card sits on a warm off-white stage or over real product photography, blurs and slightly bends what is behind it, and carries a thin iridescent rim whose brightest point turns toward your cursor. In Chromium browsers the edges refract through an SVG displacement map generated for each panel's exact size; other browsers get a clean frosted version of the same surface. Headlines use Newsreader with one italic phrase per heading, body text uses Geist, and specs and labels use Geist Mono.
The page opens with a counting loader, then a full-bleed hero with a magnifying glass lens that follows the pointer. A pinned four-chapter story moves the product across the screen while glass cards explain the body, sound, light and controls. After that come a materials grid, a room photo with tappable glass hotspots, a twelve-row spec sheet beside a line drawing that draws itself, three editions, a preorder panel with live totals and an FAQ.
To adapt it, change the brand, product name, what the product is, the starting price and the shipping window, then swap the six product photos for your own. Layout, glass recipe, type and motion stay as written, and all copy lives in one content file.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Liquid Glass Product Page
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A single-page preorder site for [BRAND] [PRODUCT], a [PRODUCT_KIND] made in small batches. The page is a calm, warm off-white stage where every UI surface is liquid glass: blurred, slightly refracting panels with bright rims floating over large product photographs. It opens with a counting loader, shows the product full-bleed with a magnifying lens that follows the cursor, tells the product's story in four pinned scroll chapters, then covers materials, the product in a real room, a full spec sheet, three editions with prices, a preorder panel with a live total, an FAQ and a footer. It must feel like a real small hardware studio taking real reservations: concrete numbers, an invented address, invented press quotes and precise specs.
- Audience: People who buy design-led hardware for their home and are willing to reserve a first-batch product: they care about materials, how it looks in a room and exact specs, and they read the FAQ before paying a deposit.
- Goal: Get the visitor to reserve a unit with a refundable $50 deposit. Primary CTA everywhere: Preorder / Reserve (scrolls to #preorder). Secondary: Hear it in a room (#sound) and the spec sheet (#specs).
- Tone: Quiet, precise and tactile, like a maker's catalogue. Short sentences, real numbers, no hype words (no revolutionary, game-changing, next-level, unleash). One italic emphasis phrase per headline.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/newsreader (OFL-1.1), @fontsource-variable/geist (OFL-1.1), @fontsource-variable/geist-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with npm create vite@latest using the react-ts template. One page, index.html. Sections are reached by hash anchors: #top, #story, #design, #sound, #specs, #editions, #preorder, #faq.
- vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Do not copy src/ into dist/.
- Tailwind 3.4 through PostCSS (tailwindcss + postcss + autoprefixer). In tailwind.config.ts add every color under Design to theme.extend.colors (paper, paper-deep, ink, graphite, muted, line) and fontFamily display ['Newsreader Variable', 'Georgia', 'serif'], sans ['Geist Variable', 'system-ui', 'sans-serif'], mono ['Geist Mono Variable', 'ui-monospace', 'monospace'].
- In src/main.tsx import '@fontsource-variable/newsreader/opsz.css', '@fontsource-variable/newsreader/opsz-italic.css', '@fontsource-variable/geist' and '@fontsource-variable/geist-mono'.
- File layout: src/content.ts (all copy, prices, specs, FAQ, image paths and alt text), src/styles/glass.css (the .glass recipe, rim, specular and fallback), src/index.css (Tailwind layers, loader and pulse keyframes, reduced-motion overrides), src/lib/liquidMap.ts (displacement map generator), src/lib/pointer.ts (one shared pointer store), src/state/order.ts (selected edition, finish, quantity via a tiny React context).
- Components: Glass.tsx, LiquidFilter.tsx, Loader.tsx, Nav.tsx, Hero.tsx, Lens.tsx, Press.tsx, Story.tsx, Materials.tsx, Room.tsx, Specs.tsx, Elevation.tsx (the SVG drawing), Editions.tsx, Preorder.tsx, Faq.tsx, Footer.tsx, Cursor.tsx, Magnetic.tsx.
- Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
- public/favicon.svg as described in the Head section. <title>[BRAND] [PRODUCT] — [PRODUCT_KIND]</title> (capitalize the first letter of the kind), lang en, theme-color #f2f0eb.
- dist/ holds index.html, hashed JS/CSS, the woff2 fonts, favicon.svg and the nine images. Keep it under 8 MB.
## Variables
- [BRAND] — Brand name (default: "Nacre"). Studio name. Wordmark in nav, loader and footer, the title and the footer copyright ('[BRAND] Sound Studio' in the default copy).
- [PRODUCT] — Product name (default: "Tide"). Short product name, always shown after the brand ('Nacre Tide') in the hero eyebrow, preorder headline and edition names.
- [PRODUCT_KIND] — What the product is (default: "hand-blown glass room speaker"). Lowercase noun phrase. Drives every chapter, spec, FAQ answer and image. Choose a physical object with a visible material story.
- [PRICE] — Starting price (default: "$649"). Price of the base (Clear) edition. The other two editions and the totals are written relative to it in the default copy; recalculate them when this changes.
- [SHIP_WINDOW] — Shipping window (default: "Ships in early spring"). Short phrase shown in the hero chip, editions and preorder panel.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/liquid-glass-product-page 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: "Liquid Glass Product Page"
colors:
paper: "#f2f0eb"
paper_deep: "#e8e5de"
ink: "#141417"
graphite: "#2b2b31"
muted: "#6f6d69"
line: "rgba(20,20,23,0.14)"
glass_fill: "linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12))"
glass_rim: "rgba(255,255,255,0.62)"
iris_peach: "#ffb8a3"
iris_blue: "#b9c8ff"
iris_mint: "#c9f2dc"
typography:
display_headlines_wordmark_big_numerals_prices: { family: "Newsreader Variable (opsz axis, roman + italic)", weights: [300, 400] }
text_body_buttons_nav: { family: "Geist Variable", weights: [400, 500] }
mono_eyebrows_spec_labels_counters_chips: { family: "Geist Mono Variable", weights: [400] }
spacing: "8px base unit. Container max-width 1280px with side gutter clamp(16px, 3.2vw, 48px). Section vertical padding clamp(96px, 14vh, 168px). H1 clamp(56px, 8.2vw, 132px) Newsreader 300, line-height 0.92, letter-spacing -0.03em. H2 clamp(44px, 6vw, 104px) Newsreader 300, line-height 0.95, letter-spacing -0.025em. The italic phrase in every heading is Newsreader 300 italic. Body Geist 400 16px / 1.6 (15px under 768px). Eyebrows Geist Mono 400 11px, uppercase, letter-spacing 0.16em, Muted, preceded by a 28px × 1px currentColor hairline at 60% opacity with a 12px gap."
radius: "Large glass panels 32px, cards and photo tiles 24px, chips, buttons, segmented controls and the nav bar fully rounded (999px), the lens is a circle. Primary buttons are 44px tall pills, padding 0 22px, Geist 500 13px."
---
# Liquid Glass Product Page — 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
- **Paper** `#f2f0eb` — Page background, loader background, text on Ink buttons
- **Paper Deep** `#e8e5de` — Alternating section background (Press, FAQ), image placeholders while loading
- **Ink** `#141417` — Headlines, body text on glass, primary pill buttons, hairline fills, cursor dot
- **Graphite** `#2b2b31` — Primary button hover
- **Muted** `#6f6d69` — Body text on Paper, eyebrows, spec labels, captions
- **Line** `rgba(20,20,23,0.14)` — Hairlines, spec row borders, ghost button border, FAQ dividers
- **Glass Fill** `linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12))` — Background of every .glass surface
- **Glass Rim** `rgba(255,255,255,0.62)` — 1px border of glass surfaces and the inset top highlight
- **Iris Peach** `#ffb8a3` — Dispersion tint, only inside the conic rim gradient
- **Iris Blue** `#b9c8ff` — Dispersion tint, only inside the conic rim gradient
- **Iris Mint** `#c9f2dc` — Dispersion tint, only inside the conic rim gradient
## Typography
- **Display (headlines, wordmark, big numerals, prices)** — Newsreader Variable (opsz axis, roman + italic) (OFL), weights 300/400. Self-host the font files.
- **Text (body, buttons, nav)** — Geist Variable (OFL), weights 400/500. Self-host the font files.
- **Mono (eyebrows, spec labels, counters, chips)** — Geist Mono Variable (OFL), weights 400. Self-host the font files.
## Spacing & shape
- Spacing: 8px base unit. Container max-width 1280px with side gutter clamp(16px, 3.2vw, 48px). Section vertical padding clamp(96px, 14vh, 168px). H1 clamp(56px, 8.2vw, 132px) Newsreader 300, line-height 0.92, letter-spacing -0.03em. H2 clamp(44px, 6vw, 104px) Newsreader 300, line-height 0.95, letter-spacing -0.025em. The italic phrase in every heading is Newsreader 300 italic. Body Geist 400 16px / 1.6 (15px under 768px). Eyebrows Geist Mono 400 11px, uppercase, letter-spacing 0.16em, Muted, preceded by a 28px × 1px currentColor hairline at 60% opacity with a 12px gap.
- Radius: Large glass panels 32px, cards and photo tiles 24px, chips, buttons, segmented controls and the nav bar fully rounded (999px), the lens is a circle. Primary buttons are 44px tall pills, padding 0 22px, Geist 500 13px.
## Motion
- Easing: --ease-out cubic-bezier(0.16, 1, 0.3, 1) for reveals and springs back; --ease-io cubic-bezier(0.77, 0, 0.18, 1) for the loader exit and panel swaps.
- Rise-in: elements marked data-rise start at opacity 0 and translateY(24px) and animate to rest over 900ms --ease-out when 20% visible (Motion whileInView, once). Siblings stagger by 80ms via a CSS variable --i.
- Headline split: every H1/H2 is split into words, each word inside an overflow-hidden inline-block; words rise from translateY(105%) to 0 over 1000ms --ease-out with a 50ms stagger.
- Glass specular: one shared window pointermove listener (throttled with requestAnimationFrame) writes --mx and --my (pointer position relative to each visible .glass element, in percent) and --rim (angle in degrees from the element center to the pointer). The highlight and the brightest rim point therefore always face the cursor. Elements more than 600px from the pointer ease back to --mx 30%, --my 0%, --rim -45deg over 600ms.
- Magnetic buttons: elements with data-magnetic move up to 6px toward the pointer while it is within 24px of their box, using a Motion spring (stiffness 220, damping 18); they spring back on leave.
- Custom cursor (pointer: fine only): an 8px Ink dot that tracks exactly and a 40px ring (1px Ink at 35%) that follows with a spring (stiffness 300, damping 28). Over elements with data-cursor='Label' the ring grows to 92px, becomes a .glass circle and shows the label in Geist Mono 10px uppercase. The native cursor is hidden (cursor: none on html) except over inputs, where the text cursor shows and the custom cursor hides.
- Reduced motion (prefers-reduced-motion: reduce): no loader count (it fades out after 200ms), no headline split, rise-ins become 200ms fades, no parallax, no lens, no magnetic movement, no hotspot pulse, specular fixed at its rest position, the Story chapters switch with an opacity-only crossfade and the product image does not move.
## Imagery
Real photography of the product, its materials and the product in a room, warm and soft, always shown full-bleed or in 24px-radius tiles and never with drop shadows. Six product photos are made for this template and hosted by the template author; three CC0 photos (light through glass, a prism spectrum, window light on a white surface) add material context. All UI chrome over photos is glass. Everything else (favicon, the elevation drawing, icons, hotspot markers) is drawn in SVG or comes from lucide-react. No illustrations, gradients blobs or 3D scenes.
## Tone
Quiet, precise and tactile, like a maker's catalogue. Short sentences, real numbers, no hype words (no revolutionary, game-changing, next-level, unleash). One italic emphasis phrase per headline.
---
Inspired by Aether One — Liquid Glass (Opus 5.5 showcase by Miler) by @ohmiler — https://ohmiler.github.io/opus-5.5/liquid-glass-landing/
— Prompt by VibeFather · https://vibefather.ai/t/liquid-glass-product-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A small-batch coffee roaster: set PRODUCT to your cold brew tower, change PRODUCT_KIND to a glass brewing tower, swap the six photos and rewrite the four story chapters around extraction.
- A design-led audio startup: keep BRAND as your studio name, set PRICE and SHIP_WINDOW to your first batch, and replace the spec sheet rows with driver, enclosure and finish details.
- A lighting studio pitching a concept: set PRODUCT to your pendant lamp, change PRODUCT_KIND to a hand-blown glass pendant, and use the editions section for three sizes or finishes.
- A crowdfunding campaign that wants its own page: point the preorder panel at your refundable deposit, set SHIP_WINDOW to your delivery estimate and rewrite the FAQ for backer questions.
Liquid Glass Product Page: questions and answers
What is the Liquid Glass Product Page template and what does it include?
The Liquid Glass Product Page template is a single-page preorder site for a physical product, built around glass panels that blur and refract what sits behind them. The page includes a counting loader, a full-bleed hero with a cursor-following magnifying lens, a pinned four-chapter product story, a materials grid, a room photo with tappable glass hotspots, a twelve-row spec sheet beside a self-drawing line drawing, three editions, a preorder panel with live totals, an FAQ and a footer. All copy lives in one content file.
How do I change the product, brand and price in the Liquid Glass Product Page template?
Set BRAND, PRODUCT, PRODUCT_KIND, PRICE and SHIP_WINDOW in the template's content file, then rewrite every headline, paragraph, spec and FAQ answer for the new product. The default copy is written for a hand-blown glass room speaker starting at $649, and the other two edition prices and the preorder totals are calculated relative to that starting price, so recalculate them when PRICE changes. Swap the six product photos for your own and keep the glass recipe, type and motion as they are.
Can I use the Liquid Glass Product Page template for a client's product launch?
Yes, with Pro. The Liquid Glass Product Page is a Pro template: the brief, stack and variables are public, the full prompt is available to Pro members, and the source code of the demos comes with Pro. Free templates' prompts and every DESIGN.md are licensed for personal, non-commercial use only, so commercial and client work needs Pro. Once you have it, you can adapt the page for a client's hardware launch and ship it as a static site.
How does the glass effect work and what happens in browsers that don't support it?
Every panel, chip and pricing card in the Liquid Glass Product Page is a glass surface that blurs what is behind it and carries a thin iridescent rim whose brightest point turns toward your cursor. In Chromium browsers the edges refract through an SVG displacement map generated for each panel's exact size; other browsers get a clean frosted version of the same surface. Headlines use Newsreader with one italic phrase per heading, body text uses Geist, and specs and labels use Geist Mono.
What do I need to prepare before building the Liquid Glass Product Page?
Before building the Liquid Glass Product Page, decide the product, what it is, the starting price and the shipping window, because those five variables drive every chapter, spec, FAQ answer and image. Prepare six product photographs, a spec sheet of twelve rows, three edition names and prices, and the FAQ answers buyers read before paying a deposit. Choose a physical object with a visible material story, since the layout is built around large product photography and glass panels floating over it.
How do I build a liquid glass product page with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add liquid-glass-product-page, replace [BRAND], [PRICE], [PRODUCT] and [SHIP_WINDOW] 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 Liquid Glass Product Page demo?
The Glass room speaker case was built by Claude Opus 5.5 in Cursor; the Cold brew tower case was built by Claude Sonnet 5.5 in Cursor; the Glass room speaker case was built by Gemini 4 Carbon in Cursor. 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 Liquid Glass Product Page template use?
Liquid Glass Product Page is a single-page site built with Tailwind CSS, Motion and React, with scroll animation, cursor effects 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 Liquid Glass Product Page template free to use?
Liquid Glass Product Page 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 Liquid Glass Product Page template work on mobile?
Yes. Every Liquid Glass Product Page 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.