Skip to content
VibeFather
Join
↗

2 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.

Join Pro early access →

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