Glass Stack Reveal
Product & UIFrosted glass panes rise into a stack over a drifting light field, each with its own mass so the deck settles front-last
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 — 4 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.
- Headline *headline · string
Line above the stack. Two to five words.
now: Everything, in one pass
- Panels *panels · array
The panels, back to front. The LAST one is the hero and is drawn larger, so put the payoff there. Two to four; more than four and the stack stops reading.
now: 3 items
- Frostfrost · number
How frosted the glass is. 0 is clear glass over the light field; 1 is heavy frost that hides it.
now: 0.6
- Brandbrand · string
Brand token id — one of the keys of BRANDS.
now: signal
For developers — source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A vertical frame where frosted glass panels rise up and settle into a stack, with the front one larger as the hero. The glass has to be real: a barely tinted fill, a blur that samples the moving coloured light behind it, a bright one-pixel specular along the top edge and a shadow cast onto the pane behind. Give each panel a slightly different weight so the stack does not arrive as one block.
