GlassSurface

Composes with the classes `Box` computes instead of replacing them.

The element it paints.

The solid surface painted when the theme has `effects.glass.enabled` off. Not a nicety: on those themes it is the component's entire appearance, so pick the one that belongs where the pane sits rather than leaving the default to decide.

Which step of the theme's `effects.glass` to take: background, border tint and backdrop filter come as a set, so this is one dial and not three. It is read only while the theme keeps glass enabled — with it off, `fallbackSurface` decides everything instead.

Adds the grain layer over the pane. It also needs the theme's glass enabled — with glass off it paints nothing at all, rather than falling back to grain over the solid surface.

Animates the element in when it first scrolls into view. `true` takes the catalogue entrance; an object tunes it — `preset`, `distance`, `spring`, `duration`, `once`, `amount`, `rootMargin` and `index` for a stagger. It lives here rather than on each surface so that `Card`, `Paper`, `GradientBorder`, `Section` and anything else built on `Box` inherit one implementation. Without it `Box` stays a server component; with it the root swaps for a client shell and the children keep rendering on the server. The entrance is a CSS transition, not a JavaScript animation: it is the only motion in the catalogue that fires WHILE the user scrolls, and the compositor should own it.

Depth of the drop shadow under the pane.

Whether the hairline is drawn. Glass leans on its edge to read as a pane at all: without one it blurs into whatever it sits on, which is why this starts on and rarely wants turning off.