Liquid Glass Interface

About this style

Liquid glass interfaces treat UI panels as thick, curved glass: content behind them is frosted in the middle and bent at the edges, highlights respond to a light source, and shapes can merge like droplets. The look needs a vivid, structured background, because refraction only shows when there is something to bend. Interface and operating-system design has moved toward this material to add depth while keeping content in view.

Make a 10-second liquid-glass film: refractive panels float over a vivid background, bending it at their edges.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Aurelle
- Tagline: "Light passes through."
- Background colors: #FF6A13, #E8237E, #2D4BFF, #B6F03C
- Track: "Low Tide" by Mara Vale
- Length: 10 seconds
</inputs>

<direction>
- Background: redraw every frame into an offscreen 2D canvas: four large soft color fields drifting, crossed by bold diagonal stripes (white 18%, 60px) and the product name, huge and outlined ("AURELLE"), 520px tall. Refraction only reads with structure behind the glass.
- Glass: one full-screen WebGL fragment shader samples that canvas. Each panel is a rounded-rectangle SDF uniform (center, size, radius). Inside:
  - lensing: displace samples along the SDF normal, strongest in the outer 36px (up to 30px), like a convex rim;
  - frost: average 12 samples from a seeded 10px disc;
  - dispersion: red and blue offset ±1.5px near the edge;
  - body: 8% white tint, saturation × 1.15;
  - specular: a 1.5px rim, bright where the normal faces the light (top-left), plus a soft bottom inner shade.
  Outside, a 10% black, 40px soft shadow. Join panel SDFs with a smooth minimum (k ≈ 28px) so meeting shapes fuse like liquid.
- Content is HTML on top: Manrope 600, white at 92%; track title 40px, artist 26px, weather "18° Clear" 72px; SVG controls; a 10% dark tint wherever contrast drops.
- Motion: springs (stiffness 180, damping 20); fusing 0.5–0.7 s; the light swings 40° once. The background drifts ~30px/s, panels faster, so lensing visibly slides.
- Premium is refraction visible at the rims, highlights that answer the light, and heavy, calm motion. Generic is a blurred translucent box.
Banned: plain backdrop blur posing as glass, white panels above 25% opacity, grey backgrounds, thick or neon outlines, text under 4.5:1 contrast, emoji, real OS or brand names.
</direction>

<structure>
- 0.0–1.2: The background flows; stripes and word drift.
- 1.2–2.6: A 760×420 player panel springs up from below; stripes bend through its rim.
- 2.6–3.8: A weather panel slides in from the left, a notification pill from the right.
- 3.8–5.4: Two 96px round buttons drift together and fuse into a pill that stretches into a scrubber.
- 5.4–7.0: All panels glide 80px left as the light swings; highlights travel the rims.
- 7.0–8.4: Panels gather and merge into one 360px round lens as content fades.
- 8.4–10.0: The lens settles over the background word, which fills solid white under it; the tagline appears below. Hold.
For other lengths, scale beats; keep the fuse and a 1.5 s minimum final hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS) with a fixed 1920×1080 (16:9) stage scaled to fit the window; design for 60fps.
- window.seek(t), t in seconds, sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames. Randomness comes from a seeded PRNG; springs are closed-form functions of time.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
- Google Fonts via <link> are fine. Redraw the canvas and run the shader in every seek (preserveDrawingBuffer: true); position HTML from the same panel values. No three.js.
</build>

<check>
Before showing me, screenshot seek(0) through seek(10), one frame per second, and look at each. Fix overlaps, clipped or cramped text, and anything generic. Stripes must bend only at the rims, and panel text must stay readable over bright colors. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…

Fluid Spring Interface

Made by us

One black pill on a phone screen morphs into a notification, a live card and a music player on closed-form springs that…