Skip to content

transition-api.md

Latest commit

 

History

History
232 lines (189 loc) · 9.24 KB

transition-api.md

File metadata and controls

232 lines (189 loc) · 9.24 KB

💠‍🌐 Alright dave, let’s transmogrify your Node.js event-loop prompt into a laser-guided brief for the View Transitions API—same Terminal-Neon vibe, Alpine.js brain, single-file deliverables, and real pedagogy instead of vibes. I’m keeping your structure, upgrading the examples, and baking in feature-detection, A11y (motion reduction), and SPA/MPA routing angles. Also referencing your existing page’s design DNA so the new one snaps right in.

View Transitions API — Creation Prompt

Purpose: Generate an interactive, step-by-step tutorial page that visualizes how the View Transitions API works (SPA and MPA), with code playback, queues/states, and live transitions—using the same Terminal Neon design system + Alpine.js interaction model as our Event Loop tutorial.

🎯 Prompt for Claude Code

I want to create an interactive "View Transitions API" tutorial and playground
in a single HTML file, using the same Terminal Neon design system and Alpine.js
interaction style as my Event Loop page. Include Tailwind via:
  <script src="https://cdn.tailwindcss.com"></script>
and use Fira Code for code blocks.

Deliverables:
- A step-by-step visualization explaining the View Transitions API:
  - SPA route changes with view transitions
  - Declarative Shared Element Transitions
  - Cross-document/MPA navigation with transitions (if supported)
  - Opt-in feature detection and safe fallbacks
  - Reduced-motion accessibility (prefers-reduced-motion)
  - Performance notes (paint phases, DOM snapshots, pseudo-elements)
- Live, runnable mini-demos with "Play/Next/Prev/Reset/Auto" controls
- Code-highlighting that tracks the current step
- Clear diagrams for the render pipeline: snapshot -> render -> animate
- Explanations of key objects: document.startViewTransition, transition.updateCallback,
  finished/promise flow, pseudo-elements ::view-transition, names, and shared elements
- Single file, no build tools. Use Alpine.js and Tailwind (CDNs).
- Design must match my existing Terminal Neon vibe (cards, glow, headings, Fira Code).

Content Requirements (novice-friendly, but technically precise):
1) What is the View Transitions API? When to use it vs CSS/JS animations
2) Core primitives:
   - document.startViewTransition(cb)
   - transition.updateCallback(cb) pattern
   - transition.ready / transition.finished promises
   - ::view-transition pseudo-elements (old/new) and naming
   - Shared element naming via view-transition-name
3) SPA workflow demo:
   - Change "route" (Alpine state) -> mutate DOM in updateCallback
   - Animate old->new with CSS on pseudo-elements
   - Step-by-step visualization: snapshot, DOM swap, animation
4) Shared Element demo:
   - Grid of cards -> details view with a named shared element
   - Show the minimal CSS needed with view-transition-name
   - Explain cloning, transform/opacity interpolation, clipping
5) Timelines & States:
   - Timeline diagram and labeled phases (snapshot -> update -> animate -> settle)
   - Show promises resolving (ready, finished) as timeline ticks
6) Cross-document navigation:
   - Demonstrate the declarative navigation pattern (if supported), with feature-detection
   - Provide graceful fallback when not supported
7) Accessibility & UX:
   - Respect prefers-reduced-motion (disable or soften transitions)
   - Avoid “teleport” artifacts (layout continuity tips)
8) Performance & gotchas:
   - Large DOM snapshots, rasterization costs, heavy filters
   - Stacking contexts and transform containment
   - Handling dynamic content/late images
9) Debug Tips:
   - Visualize which elements are participating (outline named elements)
   - Toggle transition names on/off for inspection
10) API “recipe cards”:
   - Quick snippets: fade route, slide panel, shared thumbnail->detail, list reorder

Page Layout & Interactions:
- Header: title + short explainer
- Controls: Reset / Prev / Next / Auto Play
- Three main panes (like the Event Loop page):
  (A) Step Description (what & why)
  (B) Code block (highlight current line)
  (C) Live Demo + Console (logs: ready/finished timing)
- Visualization area:
  - "Pipeline" strip: Snapshot -> Update -> Animate -> Finish (with active phase glow)
  - "Shared Elements" board: shows which nodes are “old” vs “new”
  - "Pseudo-elements" panel illustrating ::view-transition-* layers

Implementation specifics:
- Alpine.js state machine for steps; minimum 12–15 steps in the core demo
- Use Tailwind for spacing/typography; match Terminal Neon colors and glow shadows
- Fira Code for code blocks
- Feature detection:
    const supported = 'startViewTransition' in document;
    if (!supported) show a friendly fallback message and disable demo buttons
- Motion reduction:
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    If reduced, skip animations and directly swap DOM; still log states
- CSS:
    - Provide minimal CSS for view-transition pseudo-elements:
      @keyframes …
      ::view-transition-old(root), ::view-transition-new(root) { animation: … }
    - Show example of shared element naming:
      [data-card] { view-transition-name: card-<id>; }
- Demos to include:
  1) SPA Route Fade:
     - startViewTransition(() => swap a section content in Alpine state)
     - CSS: fade old/new
     - Log ready / finished times to console
  2) Shared Element (Grid -> Detail):
     - Cards with unique view-transition-name per id
     - Detail view reuses same name to link old/new
     - Animate position/scale; demonstrate clipping fix if needed
  3) Cross-Doc (Optional/Fallback Demo):
     - Show pattern or explain fallback if unsupported in current browser
  4) Reduced Motion:
     - Toggle to simulate prefers-reduced-motion and show alternate behavior

Folder Target (for my repo):
  03-visual-effects/view-transitions/index.html

Checklist (must satisfy before finishing):
- [ ] Tailwind via CDN and Alpine via CDN
- [ ] Fira Code font
- [ ] Terminal Neon card design & glow accents
- [ ] Step-by-step (>= 12 steps) with autoplay
- [ ] Code highlighting tied to current step
- [ ] Pipeline phases visualized with an active indicator
- [ ] Shared element example with clear naming
- [ ] Feature detection + graceful fallback UI
- [ ] prefers-reduced-motion handling
- [ ] Console logs for ready/finished + timestamps
- [ ] Notes on performance and common gotchas
- [ ] Responsive layout (desktop first, readable on mobile)
- [ ] README.md explaining concepts, support, and limitations

Please implement now as a single HTML file. Keep the code clean, commented,
and faithful to the design system and interaction model from my Event Loop page.

📚 Background: What to Emphasize (for the tutor tone)

Why View Transitions? Visual continuity during DOM changes: the browser snapshots “old” vs “new” states and animates between them with minimal ceremony.

Mental Model:

  1. Snapshot current visual state
  2. Update DOM (your code mutates structure) inside startViewTransition(cb)
  3. Browser generates pseudo-elements (::view-transition-old(root), ::view-transition-new(root) and named shared elements)
  4. Animate according to your CSS; resolve transition.ready and then transition.finished.

Core Primitives:

  • document.startViewTransition(() => { /* change DOM */ })
  • transition.updateCallback(cb) (pattern for staged DOM changes)
  • transition.finished (await to know when animation is done)
  • view-transition-name (link old/new elements)
  • Pseudo-elements for styling: ::view-transition-group(<name>), ::view-transition-image-pair(<name>), etc. (show what maps where)

A11y/Perf Essentials:

  • Respect prefers-reduced-motion
  • Avoid massive snapshot areas; constrain with shared elements when possible
  • Beware filters/blurs; they’re pretty but can be spendy
  • Keep layout shifts sane (contain transforms)

🧪 Example Snippets (to include in the tutorial)

Feature Detection & Fallback

const supported = 'startViewTransition' in document;
if (!supported) {
  // Disable demo buttons and show a message with a CSS-only fallback
}

SPA Route Change (Fade)

document.startViewTransition(() => {
  app.route = 'about'; // Alpine state swap
});

Shared Element

<div :data-id="card.id" class="card" :style="`view-transition-name: card-${card.id}`"></div>
<!-- Detail view reuses the same name -->
<div class="detail" :style="`view-transition-name: card-${activeId}`"></div>

Motion Reduction

const prefersReduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReduced) {
  // Skip animations; still do DOM swap and log the phases for learning
}

📂 Suggested Folder Structure

03-visual-effects/
└── view-transitions/
    ├── README.md
    └── index.html

🎓 Resources Section (placeholders)

List MDN/API docs, Chrome dev articles, and links to shared element specs. (The page should present them but run without network.)

🚀 “Run It” Command (for your generator)

Using the design guide and the "View Transitions API — Creation Prompt",
generate 03-visual-effects/view-transitions/index.html as a single-file
Alpine.js + Tailwind page with the demos, explanations, and visuals described.
Match the Terminal Neon aesthetic from my Event Loop tutorial.