Skip to content
SloplessTry the picker

Signature look · transition

Page transitions

Navigating between pages cross-fades and morphs shared elements (logo, page title, hero image) with the View Transitions API instead of a hard cut.

Id
page-transitions
Cost
about 1 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Use the native View Transitions API: for multi-page sites add @view-transition { navigation: auto; } (zero JS); in Astro use <ClientRouter />; in SvelteKit wrap navigation in document.startViewTransition inside onNavigate; in Next.js use React's ViewTransition support.
  • Give at most three shared elements a view-transition-name (logo, page title, hero media); everything else uses the default cross-fade.
  • Keep transitions under 400 ms with the style's motion easing; never delay navigation waiting for an animation.
  • Under prefers-reduced-motion, disable the transitions (::view-transition-group(*) { animation: none; }).
  • Feature-detect: browsers without the API navigate normally with no polyfill.

Required skills (the agent asks before installing, per project)

view-transitions
View Transitions API for animated page and state transitions with progressive enhancement. Source: PatternsDev/skills, reviewed 2026-10-24 at 04c0576e00ee.
npx skills add PatternsDev/skills#04c0576e00eebfdbdf11b99806c3b4e4bfd9310b --skill view-transitions

Running demo, in Art Deco

The preview renderer's stand-in for this look on the hero of a Art Deco design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop, prefers-reduced-motion: reduce
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone, reduced motion

Styles it suits

Art DecoAthletic SportBauhausBroadsheet NewspaperClassical BookishConstructivistEditorial MagazineFrosted GlassJapanese MinimalLuxury FashionMemphisMid-Century ModernNeo-BrutalismNeo-grotesk MinimalOrganic EarthScandinavian SoftSwiss InternationalTerminal Mono