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 glassSVG refraction

Refraction is off here. backdrop-filter: url() is not merely unsupported in WebKit, it parses and renders nothing, so @supports would return true and switch a broken path on. It is gated behind data-an-refract="on" that you set after your own render probe.

<div class="an-glass an-glass-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

Shadows, grain, borders and dividers. These are effects rather than animations, so they apply on render.

299 shown, 121.3 KB if you used every one

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-magnetic-zones
• an-text-split-chars
• an-text-split-lines
• an-text-split-words

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