← KolofonTeknologiReact 19.3

View Transitions mellom sider

Når du klikker et kort, flyr bildet og tittelen over til artikkelen i stedet for å forsvinne og dukke opp igjen.

React 19.3 har komponenten <ViewTransition>, som kobler seg på nettleserens View Transitions API. Next.js behandler navigasjon som en transition, så animasjonene aktiveres automatisk.

Kortet og artikkelen gir bildet og tittelen samme navn. Nettleseren tar et øyeblikksbilde før og etter, og morfer mellom posisjonene. Vi legger på et lite blur-blaff midt i overgangen for å skjule interpolasjonsartefakter.

Nettlesere uten støtte navigerer som før, bare uten animasjon.

<ViewTransition name={`tittel-${slug}`}>
  <h1>{title}</h1>
</ViewTransition>

I koden: components/PostCard.tsx · app/[...slug]/page.tsx

Neste bit

Kolofon · Designelement06

CSS grid · @property

Bento-grid med levende kanter

Innleggene ligger i et asymmetrisk rutenett der hvert kort har sin egen størrelse, sin egen generative farge og en kant som roterer.

Kolofon · Designelement07

Pointer events

Egen markør og magnetiske knapper

Markøren er en sirkel i blandingsmodus «difference» som vokser over lenker. Knappene trekkes mot pekeren som magneter.

Kolofon · Designelement08

Tastatur først

Kommandopalett ⌘K

Trykk ⌘K, Ctrl+K eller / hvor som helst for å hoppe til et innlegg, en side, en kategori eller en kolofon-artikkel.