How to add smooth page transitions to a Next.js website

This article is part of the series "Rebuilding a website with AI". Previous episode: Building a landing page with AI.

Why animations?

A website isn't just information. It's an experience. And transitions between pages are the moment when most sites break that experience. A white flash, an abrupt reload, and the user loses the thread.

I wanted browsing asuos.ch to feel smooth, almost tactile. Like flipping through a magazine rather than clicking on links.

The "Falling Paper" transition

The idea

When you leave a page, it doesn't disappear. It falls. Like a sheet of paper sliding off the table. While it falls, the new page is already visible underneath, ready to be read.

The implementation

Claude Code created a PageTransition.tsx component (over 150 lines) that captures the current page at the moment of the navigation click, animates the exit with a 3D rotation and a vertical translation, adds a torn edge effect via a dynamically generated SVG that simulates the jagged edge of a ripped sheet of paper, and handles the precise timing between the disappearance of the old page and the appearance of the new one.

The result is a transition that lasts around 400ms. Long enough to be perceived, short enough not to get in the way of navigation.

The CSS behind it

Over 170 lines of CSS were added to tailwind.css for the animations: keyframes, 3D transforms, cubic timing functions. The kind of CSS you write once and never touch again. Perfect for delegating to AI.

The ripple effect on the theme switch

The idea

When you toggle between light and dark themes, a circle ripples out from the button, like a wave in water. But with a subtle twist: the direction depends on the theme.

Toward the light theme (sun), the wave starts from the button and radiates outward, like the sun lighting up the world. Toward the dark theme (moon), the wave starts from the outside and converges toward the button, like the night falling.

The implementation

Claude Code modified the ThemeSwitch.tsx component to add a full-screen overlay with a circular clip-path animation. The circle expands (or shrinks) with a natural acceleration curve.

The trickiest technical part: avoiding race conditions between the CSS theme change and the transition animation. If the theme changes before the animation starts, the effect is ruined. Claude Code handled this with a precise timing system and sequential callbacks.

The animated infinite scroll

On listing pages, the blog and tag pages now load articles progressively. An IntersectionObserver detects when the user is approaching the bottom of the list and triggers the loading of the next batch. Each new article appears with a slight staggered delay: the first appears, then the second 50ms later, then the third, and so on. It creates a very natural "cascade" effect. No "Load more" button, it's automatic and transparent.

The scroll-to-top and scroll-to-comments buttons have also been reworked with smooth animations and smart behavior: they only appear when relevant and fade out when no longer needed.

Hardening: accessibility and robustness

After the initial implementation, a full hardening pass was done. It's the least glamorous part, but the most important one.

Accessibility

Support for prefers-reduced-motion was added: if the user has enabled this setting in their OS, all animations are disabled. Not reduced, disabled. Because for some people, animations are not a matter of taste but of visual comfort.

Race conditions

What happens if you click on a link during a page transition? If you change the theme during a navigation? If you scroll during a load? Each of these scenarios was identified and handled with proper guards and cancellations.

Memory leaks

All event listeners (IntersectionObserver, scroll, transitionend) are properly cleaned up when components unmount. No zombies in memory.

AI and creativity

This is the episode in this series I enjoyed the most, and it perfectly illustrates the human/AI dynamic.

The idea of the page falling like a sheet of paper? It came from a conversation, from a creative impulse. The implementation, the CSS, the keyframes, the 3D transforms, the SVG of the torn edge, the timing management? That was Claude Code. The iteration, "it's too slow", "the edge isn't jagged enough", "reverse the direction for the dark theme"? That was me guiding, Claude Code executing.

You couldn't have one without the other. AI alone would never have come up with the idea of the falling sheet. And I alone would have spent two days implementing these animations instead of two hours.

Tomorrow, we move on to the less visible but equally crucial side: SEO. Structured data, multilingual sitemap, RSS feeds, robots.txt. A full audit that revealed some surprises. And not good ones.