Three.js / GSAP
Sample Project
This detail page is the cross-document View Transition demo target. Navigate back to /work to see the shared-element morph reverse: the full-width hero above animates back into the card thumbnail position. The browser interpolates position, size, and geometry with no JS.
How the transition works: both pages opt in with
@view-transition { navigation: auto; } in globals.css. The card thumbnail on /work carries view-transition-name: work-hero-sample. This hero carries the same name. Plain <a href> (not next/link) triggers a real cross-document navigation so the API fires. Timing: expo.out 0.5s, old/new cross-fade suppressed so the element morphs cleanly without a ghost double-image. Source: 03-reverse-engineering.md + 02-research-motion.md 4.2.