Skip to content
Aristeia
Motion & InteractionCircepattern

Route View Transitions

Asymmetric enter/leave choreography for same-origin navigation, with named chrome that never cross-fades against itself.

Built here · no external address

Circe: Transformation patterns. One thing convincingly becoming another.

Why it matters

Hard cuts make an archive feel like slides. Weighted view transitions make it feel like rooms.

Key techniques

  • defaultViewTransition: true on the router.
  • Faster leave, slower enter on asymmetric curves.
  • Named transitions for header and film grain.

What to steal

The transferable part.

Name persistent chrome. A header that cross-fades with itself flickers.

What not to copy

Context-specific or costly.

Do not animate every element. Name only what must survive.

Inclusion rationale

Charon's crossing expressed as Hermes craft — continuity without scroll-jacking.

Technical register

Performance

Reduced motion collapses VT durations to an instant swap.

Mobile

Same choreography; shorter distances on small viewports via clamp.

Accessibility

Respect prefers-reduced-motion globally; never rely on motion to convey route identity.

Study next

Related entries

HermesContinuity SwapOne persistent marker interpolated between two authored positions, with a cut mode beside it that shows exactly what continuity buys.CharonThreshold CrossingThe first three seconds and every route change — a threshold that never mounts under reduced motion and never scroll-jacks.HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.HermesEasing ComparatorSix curves, one scrubbable timeline — see the same motion under different laws instead of arguing about feel.