TITLE: AERO WATER — Gloss and Sky
PROMPT: Build a single self-contained HTML page reviving the Frutiger Aero aesthetic as a fictional mineral-water brand site. Full-viewport sky background built from layered radial gradients (mint #c8f0d8 blooming from the bottom, white bloom upper-left, lime #f2f7a0 glow upper-right) over a vertical sky gradient from #c9ecff through #7ec8f0 and #63b6e6 into deep water #1a6ea8. Floating glossy bubble clusters: each bubble is a div with border-radius 50%, a two-layer radial gradient (a white specular at a per-bubble position plus a rim-lit sphere body with mint and lime inner tints), inset white shadows and a rotated elliptical ::after highlight. A 12s lens-flare glint bar sweeps across with mix-blend-mode screen. Left: a frosted glass panel (158deg white-to-mint-to-sky translucent gradient, 1px white border, inset top highlight, deep blue drop shadow) containing a monospace eyebrow "MINERAL WATER / 0.5 L / STILL", a two-line glossy gradient-clipped display headline AERO / WATER in "Trebuchet MS" 700 at clamp(2.7rem, 8.6vw, 6.6rem) with a drop-shadow, a bold tagline, body copy in Verdana, and a pill CTA with a squishy hover. Three water droplets slide down the glass panel using a --dist custom property and a keyframe that squashes them flat at the end. Right: three glass spec chips (OXYGENATION 98%, MINERALITY 64mg/L, CLARITY 100NTU) with gradient bars that scaleX in on load. Below: a monospace marquee ticker and a 18vh reflective floor strip with a repeating vertical shimmer sliding via transform, a blurred mint light spill and a glowing horizon line. Palette: #7ec8f0 sky, #c8f0d8 mint, #ffffff gloss, #1a6ea8 deep water, #f2f7a0 lime pop.
DESCRIPTION: A bright, optimistic Y2K water-brand page where everything is wet, glossy and weightless. Bubble clusters drift and wobble over a graded sky, droplets creep down a frosted glass panel, and a lens flare glides across the whole scene while a reflective floor shimmers underneath. The composition is asymmetric — a large glossy headline panel balanced by three small spec chips — and every surface reads as glass or water rather than flat colour.
TECHNIQUES: Layered radial-gradient spheres with offset specular highlights and rim lighting; inset box-shadow gloss; gradient-clipped display type; mix-blend-mode screen lens flare sweeping on transform; per-bubble CSS custom properties for specular position, size and rotation; wobble via non-uniform scale in a rAF loop; droplet keyframes using a --dist variable; transform-driven floor shimmer; blurred light-spill reflection; monospace marquee on translate3d.
INTERACTION: A quick tap anywhere pops the nearest bubble into a spray of fourteen droplet particles that arc under gravity; press and drag pushes bubbles away from the pointer with a falloff force field; hovering the glass panel sweeps a diagonal gloss highlight across it; clicking the logo empties the field and re-inflates a fresh staggered bubble set; the spec bars fill on load and the ticker scrolls continuously. Reduced motion slows all drift, freezes the lens flare and marquee, and lengthens droplet cycles.