Liquid Glass Loop
BackgroundsFrosted liquid glass blobs drifting over a soft colour gradient, bending the colours at their edges, as a seamless 10 second loop
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 7 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Brandbrand · string
Brand palette id, one of the keys of BRANDS. The default 'beacon' is white with an electric blue. The glass, the gradient and the edge fade all follow the brand's ground, so a dark brand gives dark glass on a dark field.
now: beacon
- Colorscolors · array
Your own colours as hex strings; empty uses the brand's accent colours. Up to four, in this order: the main colour, a deep colour, a cool neighbour and a warm neighbour. Give only the first and the other three are worked out from it. Choose mid-tone colours: pastels disappear into a white ground and leave the glass nothing to bend.
now: 0 items
- Speedspeed · "slow" | "normal" | "fast"
How fast the glass drifts and the highlight laps each rim. Slow, normal and fast are exactly 1x, 2x and 3x the same motion, whole-number steps, which is what keeps the 10 second loop seamless. Slow suits a talking head, fast a short title card.
now: normal
- Graingrain · number
Film grain over the colour, 0 to 1. It stops the soft gradient from banding once the video is compressed for YouTube or social. 0.35 is a fine texture you feel more than see; 0 turns it off; above 0.7 it reads as a deliberate film look. The white ground stays clean at any setting.
now: 0.35
- Safe areasafeArea · "center" | "left" | "none"
Where your text will go. 'center' calms the middle of the frame and keeps the glass around it; 'left' calms the left side for a left-aligned title and gathers the glass on the right; 'none' lets the glass sit anywhere, for a background with nothing on top.
now: center
- Vignettevignette · number
How far the edges fade into the white ground, 0 to 1. The very edge always stays close to white; higher values pull the fade further in and soften the corners. 0 keeps the colour right up to a thin margin, 1 gives a wide white border like a printed page.
now: 0.5
- Blobsblobs · number
How many glass pebbles, 2 or 3. Three is a large, a medium and a small pebble. Two drops the small one for a calmer, more open frame.
now: 3
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A liquid glass background loop: two or three frosted glass blobs drifting slowly over a soft blue gradient on white, bending and brightening the colours at their edges, with a highlight gliding around each rim. It has to loop seamlessly, leave the middle calm for a title, and still look like real glass on a phone in 9:16.
