View transitions in a Phlo SPA

Every link here is an async Phlo navigation, and every navigation runs a view transition. This app leaves the engine phlo.js out of its bundles and builds its own runtime from runtime.phlo into runtime.js, so the next phlo.js can grow here without touching the engine.

Gallery The 19 CSS transitions of the engine, forward and back. Click point Spotlight and a circle that start where you click: CSS variables, no JavaScript inside the transition. JavaScript Element.animate on a pseudo-element, skipTransition, a staggered shuffle and document.activeViewTransition. Shared element A card that becomes the page, and the trap of inline names in the history. Lab Two transitions in a row, streams, a late answer, duplicate names, a hook that throws, a hidden tab.

What runtime.js does differently

Back plays the transition of the page you leave, mirrored, also back to the first page. The engine plays a plain crossfade there.
A transition that starts while another one runs keeps its classes on html.
A skipped transition leaves no unhandled rejection in the console.
After a swipe back that the browser animated itself (hasUAVisualTransition) the page swaps without a second animation.
Only the words forward and back count as a direction, so a class like background does not.
app.trans: a hook per transition class, called with the view transition and the commands before the old state is captured.

The panel at the bottom right logs every transition: when the update ran, when the animation started, and when it finished or why it was skipped. Slow motion plays every transition at a fifth of its speed.