风格 · 04
玻璃拟态 玻璃拟态 = 半透明、背景模糊、顶部亮边，并且背后必须有鲜艳底色支撑。
半透明、模糊、亮边。没有鲜活背景就只是一张白卡片。
标本 North Listen Library Account Search tracks Open See through the surface. Frosted overlays on a vivid mesh. Music first, chrome second.
Listen now
Album
Night glass Blur 18px, bright edge. A side that stays translucent.
Apr 2026 · 12 tracks · Read more
Album
Sand drift Float the overlay. Never fill the viewport with milk-white.
Mar 2026 · 9 tracks · Read more
Mix
Sky / mint / sand The mesh is the ground. Without it this is a white card.
Feb 2026 · Live · Read more 整页 整体 整页 复制 Prompt
配方保持英文，便于直接贴进工具。
BUILD
- Build a complete Glassmorphism overlay marketing homepage for a music / atmosphere product. Not a card, not an isolated navbar, not a full-page login, not tabs.
- Domain from Use on: overlays and music. Login is a Join strip, never the whole page.
STYLE
- Glassmorphism: translucent, blur, light edge, layered surfaces
- Ground MUST be a vivid mesh: sky #9FD4FF, mint #B8FFF3, sand #EAD7C4 on #D7E4EE. Without it this is a white page
- Glass plates: rgba(255,255,255,0.42), backdrop-filter blur(18px), light edge rgba(255,255,255,0.72), 20px radius
- Type #1D1D1F, mute #6E6E73, CTA #0071E3 pill white type. Plus Jakarta Sans. No Inter
LAYOUT
- Page chrome: frosted North bar with separate Listen / Library / Account links, search, and Open — part of the page, sitting on the mesh
- Centered container max-width 1120px. Icarus-like density: main column of album cards (cover bar, title, excerpt, Read more) plus a widget sidebar (profile, playlists, recents)
- Glass panels float over the mesh; they do not fill the viewport as a solid white sheet
SECTIONS
1. Overlay hero: "See through the surface." Dek: "Frosted overlays on a vivid mesh. Music first, chrome second." CTA Listen now
2. Main column: three album/story cards with cover bars, titles, excerpts, Read more
3. Sidebar widgets: listener profile, playlists, recents
4. Join overlay strip: frosted email field + Continue. This is the Login use-on, not a sign-in page
5. Three-column glass footer
INTERACTION
- Hover lifts glass tiles 2px. Blur and the bright edge stay. No purple glow
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Do not skip the mesh. Charcoal is not the ground. Do not output only a hero strip with two empty cells
- Do not make the whole homepage a login form
MOTION
- Glass panels move at 200ms ease-out. Never animate the blur value — animate opacity instead.
- Hover: 2px lift that keeps the light edge intact. No purple glow.
- One animated element at a time; stacked blur is expensive enough already.
- prefers-reduced-motion: fade only, no lift.
标本 标本
Glassmorphism Translucency, blur, light edge. Without a vivid background it is just a…
Continue 卡片 卡片 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a single Glassmorphism card. Not a page, not a dashboard.
STYLE
- Glassmorphism: translucency, blur, light edge, layered surfaces
- Card fill rgba(255,255,255,0.42) on a vivid backdrop (sky #9FD4FF, mint #B8FFF3, sand #EAD7C4 on #D7E4EE). Without that backdrop it is just a white card
- backdrop-filter blur(18px); 1px light edge rgba(255,255,255,0.72); 20px radius; 22px padding
- Title #1D1D1F, body #6E6E73, one Continue button #0071E3 white type, pill radius
LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one primary button
- Do not add a navbar, sidebar, or extra tiles
INTERACTION
- Hover lifts the card 2px; keep the blur and light edge. Do not use drop-shadow purple glow
CONSTRAINTS
- No purple, violet, indigo, or fuchsia glass
- Keep text readable over the blur (do not drop type below #6E6E73 on this card)
- No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to this glass - not default shadcn
按钮 按钮 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Glassmorphism button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- Same glass tokens: blur(18px), fill rgba(255,255,255,0.42), 1px light edge rgba(255,255,255,0.72) on vivid #9FD4FF / #B8FFF3 / #EAD7C4 backdrop
- Continue: solid #0071E3, white type, pill radius
- Save: translucent white fill rgba(255,255,255,0.28) with light edge, type #1D1D1F, pill
- Skip: ghost, type #6E6E73, no fill
LAYOUT
- One horizontal row, 10px gap, centered. No card chrome, no navbar
INTERACTION
- Hover lifts each button 2px and keeps blur on glass fills. Do not purple-glow
CONSTRAINTS
- No purple / indigo. Without the vivid backdrop these are just white shadcn buttons
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look
标本 North Overview Billing Open
顶栏 顶栏 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Glassmorphism site navbar only. Not a tabs component, not a page.
STYLE
- Translucent bar: rgba(255,255,255,0.42), backdrop-filter blur(18px), 1px light edge rgba(255,255,255,0.72), 14px radius
- Sit the bar on the vivid sky #9FD4FF / mint #B8FFF3 / sand #EAD7C4 mesh on #D7E4EE
- Wordmark North in #1D1D1F; links Overview and Billing in #6E6E73; Open is a pill #0071E3 with white type
LAYOUT
- Single horizontal chrome: wordmark left, two text links, Open action right. No tab panel, no hero
INTERACTION
- Hover on Open lifts 2px and keeps the glass edge. Links shift type #6E6E73 to #1D1D1F. Bar itself does not float as a card
CONSTRAINTS
- No purple / indigo / fuchsia glass. Not a content Tabs strip
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn
标本 Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
标签 标签 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Glassmorphism Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Same glass tokens as the card: blur(18px), fill rgba(255,255,255,0.42), 1px light edge rgba(255,255,255,0.72) on the vivid #9FD4FF / #B8FFF3 / #EAD7C4 backdrop
- Selected tab: more opaque glass pill (rgba(255,255,255,0.62)) + light edge; unselected: quieter type #6E6E73
- Panel below the tablist: 16px padding, readable #1D1D1F on translucent glass, 20px radius to match the card
LAYOUT
- Horizontal tablist + one panel. No site wordmark, no Open button, no extra cards
INTERACTION
- Hover on an unselected tab lifts that chip 2px and keeps blur. Selected tab does not use purple underline
CONSTRAINTS
- No purple / indigo tabs. Without the vivid backdrop this is just a white shadcn Tabs
- No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look
玻璃拟态是什么？ 叠玻璃的感觉：你能透过表面看见后面。写明模糊、透明度百分比和亮边。
复制 Prompt BUILD
- Build a complete Glassmorphism overlay marketing homepage for a music / atmosphere product. Not a card, not an isolated navbar, not a full-page login, not tabs.
- Domain from Use on: overlays and music. Login is a Join strip, never the whole page.
STYLE
- Glassmorphism: translucent, blur, light edge, layered surfaces
- Ground MUST be a vivid mesh: sky #9FD4FF, mint #B8FFF3, sand #EAD7C4 on #D7E4EE. Without it this is a white page
- Glass plates: rgba(255,255,255,0.42), backdrop-filter blur(18px), light edge rgba(255,255,255,0.72), 20px radius
- Type #1D1D1F, mute #6E6E73, CTA #0071E3 pill white type. Plus Jakarta Sans. No Inter
LAYOUT
- Page chrome: frosted North bar with separate Listen / Library / Account links, search, and Open — part of the page, sitting on the mesh
- Centered container max-width 1120px. Icarus-like density: main column of album cards (cover bar, title, excerpt, Read more) plus a widget sidebar (profile, playlists, recents)
- Glass panels float over the mesh; they do not fill the viewport as a solid white sheet
SECTIONS
1. Overlay hero: "See through the surface." Dek: "Frosted overlays on a vivid mesh. Music first, chrome second." CTA Listen now
2. Main column: three album/story cards with cover bars, titles, excerpts, Read more
3. Sidebar widgets: listener profile, playlists, recents
4. Join overlay strip: frosted email field + Continue. This is the Login use-on, not a sign-in page
5. Three-column glass footer
INTERACTION
- Hover lifts glass tiles 2px. Blur and the bright edge stay. No purple glow
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Do not skip the mesh. Charcoal is not the ground. Do not output only a hero strip with two empty cells
- Do not make the whole homepage a login form
MOTION
- Glass panels move at 200ms ease-out. Never animate the blur value — animate opacity instead.
- Hover: 2px lift that keeps the light edge intact. No purple glow.
- One animated element at a time; stacked blur is expensive enough already.
- prefers-reduced-motion: fade only, no lift.