Glass
Liquid glass — Apple-style materiál: frost blur + vibrancy (saturace) + průsvitná výplň + specular hrana + refrakce (lensing). Nejlíp vynikne nad gradientem / patternem, kde blur a refrakce reálně lámou pozadí.
blur
Frost
backdrop 10px
180%
Vibrancy
saturate backdrop
spec.
Specular hrana
světlý okraj + sheen
refr.
Refrakce
SVG displacement
Glass na gradientu
Signature kombinace — sklo nad cover gradientem + topografickým patternem. Vrstevnice za sklem se rozostří a lámou (refract).
Tělo, které tě poslouchá
Sklo nad gradientem — blur, vibrancy, refrakce.
.glass · refract
Síla blur
Frost se řídí přes blur prop: sm (6px) → md (10px) → lg (18px) → xl (30px). Větší blur na velké plochy / modaly, jemný na drobné chipy.
sm6px
md10px
lg18px
xl30px
Varianty
Světlé sklo na tmavém/gradientu, tmavé sklo na světlém, a refrakce on/off.
Light glass
Dark glass
+ refract
Na kategoriálních gradientech
Sklo nad gradientem každé kategorie — chip se jménem a piktogramem. Tady to spolu hraje nejvíc.
Adaptogen
Organic
Vitamins
Organs
Beauty
Props & implementace
<Glass>
components/shared/glass.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| tone | "light" | "dark" | "light" | Bílé sklo (na tmavém) / tmavé (na světlém) |
| blur | "sm" | "md" | "lg" | "xl" | md / 3px (refract) | Síla frostu — 6 / 10 / 18 / 30px |
| refract | boolean | false | Refrakce přes SVG displacement (Chromium) |
| as | "div" | "span" | "button" | "section" | "div" | Element |
| className | string | — | Radius, padding, text barva |
- Sklo musí ležet nad obsahem (gradient, pattern, foto) — backdrop-filter pracuje s tím, co je za ním.
<GlassFilters />je v root layoutu (jednou) →refractmůže resolvnouturl(#lg-distortion).- Refrakce je Chromium enhancement; base sklo (blur + specular + sheen) funguje všude.
- Přístupnost: honoruje
prefers-reduced-transparency(sklo → plná plocha). Drž dostatečný kontrast textu na skle.