Skip to content

Entrances

Build real UI in front of the viewer: each entrance reads the page's own parts and plays them in, ending on the real thing.

An entrance plays over UI that's already rendered. It reads the parts on the page, orders them from the outside in, and builds them up in its own style. When it ends, the page is exactly the real UI: nothing moves, nothing is left behind, and it skips itself under reduced motion. Every entrance shares the same options for duration, speed and phases, and can be cancelled at any moment.

Blueprint
Drafted in pencil with its measurements, then inked, toned and set into the real UI.
Generate
Built in part by part: regions dragged out, text typed, controls popped.
Prism
Each part locks in from its color channels.
Trace
A signal runs the layout and lights each part as it arrives.
Inspector
Each part shows its box model first, then hands off to the real one.
Layers
An exploded stack of layers collapses flat into the UI.
Render passes
Layout, paint and composite, sweeping through the parts.

On this site only

Code (experimental) types out a demo's source beside it, and each line becomes its part as it's typed. It needs the demo's source as text, which a running app doesn't have, so it isn't in the library yet. Try it from the Entrance menu on any preview in these docs, where every demo's source is published.