Component · page-transition

Page transition

Click a card: the next page opens as a circle growing from the exact spot you tapped. Native View Transitions where the browser has them, a light fallback everywhere else, and the same circle for a theme switch.

Vanilla JS1.9 KBView Transitions APIFallbackReduced motion

Case 01 · Concept

Harbour Rowing Club

Case 02 · Concept

Saltmarsh Ferries

Same circle, on one page: the new theme grows out of the button you pressed.

Use it

Copy the folder page-transition/ (the .js and .css files) into your project. No build step and no framework.

Behaviour

Chrome and Edge use native cross-document View Transitions: the old page stays on screen until the new one is ready, so there is no white flash.
Other browsers get a circle cover that grows, navigates, and shrinks away on the next page; the link is a normal link, so it always works.
Ignored for external links, new tabs, downloads, hash links and Ctrl/Cmd/Shift clicks.
Back/forward cache safe: a page you return to is never left covered.
prefers-reduced-motion: plain navigation and an instant theme change.

Credits

Spec from Sujon's Drive guide (MA 6.2 item 3: circular clip-path reveal from the click point, 650 ms, fallback = plain switch).
Seamless page changes are a hallmark of A24 by Ravi Klaassens (built with Barba.js) and Belgrade Arbor by Square43 (Awwwards SOTD Oct 2026). This one uses the browser's View Transitions API instead of a library.
Harbour Rowing Club and Saltmarsh Ferries are fictional.

<link rel="stylesheet" href="page-transition.css">   <!-- on BOTH pages -->
<a href="/work/rowing" data-pt data-pt-color="#E46C4A">Harbour Rowing Club</a>
<script type="module" src="page-transition.js"></script>       <!-- on BOTH pages -->

<!-- theme switch with the same circle -->
<script type="module">
  import { themeReveal } from './page-transition.js';
  themeReveal(document.querySelector('#theme'), () => document.documentElement.classList.toggle('night'));
</script>

Option	Default	What it does
data-pt		Animate this link (or put links inside [data-pt-scope]).
data-pt-color	accent	Colour of the fallback cover for that link.
themeReveal(btn, fn)		Run fn inside a view transition and grow the new state from the click point.