BUILD
- Build a complete Liquid Glass marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: Apple-style product UI and premium app surfaces first; developer tools reuse the frost on floating bars.
STYLE
- Liquid Glass: translucent panels with a 1px specular top edge, backdrop-filter blur(20px) saturate(180%), tinted frost
- Place frost over a vivid but soft background (a calm blue-to-violet gradient wallpaper) so each panel clearly refracts what is behind it
- Page ink #1C1C1E; accent blue #0A84FF; frost fill rgba(255, 255, 255, 0.42) light / rgba(28, 30, 34, 0.42) dark
- Border 1px solid rgba(255, 255, 255, 0.55) plus an inset 1px top highlight rgba(255, 255, 255, 0.7); radius 22px; shadow 0 12px 34px rgba(0, 0, 0, 0.18)
- Type: SF Pro / Inter for UI, a mono for code lines. No grunge, no neon
LAYOUT
- Container max-width 1120px. The hero sits on the gradient wallpaper; every block is a floating frosted panel, not a solid slab
- Top bar is floating chrome: wordmark left, three links, search field, primary CTA — all on glass, 12px off the top
- Nothing is a hard rectangle. Every surface shares the same blur and rim language
SECTIONS
1. Hero: a large frosted panel with headline "Glass that reacts.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit
2. Three frosted value cards on the wallpaper: Clarity, Motion, Depth — kicker, one line, Read more each
3. Feature band: two columns, left a frosted cover block, right a short list of four claims
4. Pricing strip: three frosted columns, the middle one tinted blue with a brighter rim
5. Closing CTA band: a wide frosted panel with one tinted CTA
6. Three-column frosted footer: Product / Company / Colophon
INTERACTION
- Hover lifts each panel 3px and tightens its frost; the specular rim brightens. Panels never snap or hard-drop
- Focus is a 2px solid #0A84FF outline, never a glow ring
- Content behind a panel should visibly blur and shift as the panel moves — that is the refraction read
MOTION
- Motion is soft and continuous: 200ms ease for lifts, a slow 6s drift on the wallpaper gradient
- Use ease-out, no steps, no hard stops. Panels settle, they do not bounce
- Entrance is a 10px rise with the frost fading in, staggered 60ms per card
- prefers-reduced-motion: no drift, no stagger, panels appear instantly
TECHNICAL
- React, Tailwind CSS, one .glass utility (backdrop-filter + rim highlight + shadow). One homepage route.
DON'Ts
- Do not call this glassmorphism: glassmorphism is a static frost, Liquid Glass has a lit rim and reacts to content behind it
- No true optical refraction claim — simulate with backdrop-filter; the web cannot bend light
- No neon, no gradient mesh inside panels, no pixel borders, no hard black shadows
- Do not output only a headline plus two empty cells. Do not make every panel fully opaque