Design v4 — liquid glass in HTML

5 directions · pure HTML/CSS No images · no mascot
visionOS techniques applied

After "I want real HTML code" + "I don't care about the mascot, it's the glass-liquid quality": these are 5 pure HTML/CSS hero variants demonstrating different liquid-glass treatments. Techniques: 6-layer painterly gradient bg, SVG turbulence + displacement filter for actual refraction (variant 03), edge specular highlights (top bright + bottom dark inset), layered drop shadows (warm + cool), iridescent conic overlay, perspective-stacked slabs, GlassEffectContainer-equivalent isolation context (variant 05). Compare against Codex's parallel attempt at /design-codex/.

01 Glass slab — single liquid surface Open
Painterly cream/sage bg + one large glass slab as the entire hero. Edge specular + iridescent conic overlay + layered drop shadows. The H1 lives INSIDE the glass.
02 Stacked depth — 3 slabs in perspective Open
Three glass slabs layered with 3D perspective and translateZ (-160 / -80 / 0). Spatial depth in the visionOS sense. Each slab has its own blur intensity.
03 Real refraction — SVG turbulence Open
backdrop-filter: url(#liquid-refract) blur(28px) — SVG feTurbulence + feDisplacementMap actually distorts the bg through the slab. The closest HTML can get to true visionOS refraction.
04 Dark mint refraction Open
Forest-deep #0a1410 + mint atmospheric glow. Glass with mint hairline edge-glow + diagonal mint sheen. Italic h1 phrase carries a mint→cyan gradient.
05 GlassEffectContainer — multi-slab Open
Per Apple SKILL.md GlassEffectContainer pattern: isolation: isolate context groups multiple glass children so they share backdrop sample + blend properly. Hero slab + 6 capsule chips (one tinted) all in one container.