Surfaces studio

Glass is only judgeable over something, so change the backdrop as well as the tokens. The sliders write real inline custom properties, and the snippet at the bottom is the code you would paste.

Frosted

Blur 16px, tint 12%, saturate 1.6

Backdrop

blur

16px

tint

12%

saturate

1.6

radius

16px

grain

0.06

dark glass

<div class="an-glass an-noise" style="
  --an-glass-blur: 16px;
  --an-glass-alpha: 12%;
  --an-glass-sat: 1.6;
  --an-glass-radius: 16px;
  --an-noise-opacity: 0.06;
">
  …
</div>

The rest of the surface layer

Grain, sheen, borders and dividers — materials rather than animations, so they apply on render. Organised the same way as the gallery.

20 shown, 11.9 KB if you used every one

Effects

Surfaces, text, borders, loaders. Always on.

Surfaces & materials

Borders & dividers

Utilities

Timing, easing, origins and fill modes. Nothing to look at: they configure the effect they sit beside.

• an-3d
• an-depth-stack
• an-img-compare
• an-img-grain
• an-img-parallax
• an-layered-parallax
• an-text-split-chars

Child hooks

Selector targets the parent effect styles. Inert on their own.

• an-arrow
• an-compare-top
• an-face
• an-label
• an-peek
• an-zone

Scroll

Needs a scrollbar. Run these in the scroll lab.

• an-reveal-iris
• an-reveal-mask-sweep