← Back to system FER&REN Detailing

FER&REN Detailing / Changing pages without restarting the hero video.

Navigation and video

Astro’s ClientRouter intercepts the click and swaps in the already-generated HTML, so the hero video does not restart on every navigation; the native view-transition rule stays declared as a fallback. Stateful components reinitialize on astro:page-load and GSAP loads only on the home page, so the rest of the catalog reads without JavaScript.

01Input

Astro’s ClientRouter intercepts the click and swaps in the already-generated HTML.

02Process

The hero video continues instead of restarting on every navigation.

03Outcome

Stateful components reinitialize on astro:page-load.

How I built it

The native view-transition rule stays declared as a fallback for when the router is unavailable, and the content is still the static HTML the server already delivered. GSAP loads only on the home page: the nineteen service pages read without JavaScript, with a control to pause the video and tables turned into cards on small screens.