page-transition-language

name	page-transition-language
description	Use when transitioning between pages or screens. Consistent transitions = brand polish. Inconsistent transitions = patched-together.

Page Transition Language

Pick ONE page transition language and apply consistently. Common: cross-fade, slide, modal-open. Don't mix.

Transition options

1. Cross-fade — old page fades out, new fades in (200-400ms)
2. Slide — slide horizontally between pages (left for back, right for forward)
3. Modal-open — new page slides up from bottom over old
4. Push — old page slides left, new slides in right
5. Instant — no transition (default web)

Implementation approaches

1. Native browser (no transition)
2. View transitions API (modern browsers)
3. JS framework (Astro, Next.js page transitions)
4. CSS transitions on framework-managed components

@view-transition { navigation: auto; }

Avoid

1. Different transitions per page
2. Long transitions (>500ms) — frustrating
3. Heavy motion (3D flip, etc.) — disorienting
4. Transitions that fight with back-button behavior

Where this fits in the X3 empire

Transition language for CardPrepAI inter-page navigation.