### Quick Start Code Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/INDEX.md

A basic code example to get started with React Exp View Transition. This snippet demonstrates the minimal setup required for a quick integration.

```javascript
import React from 'react';
import { ViewTransition } from 'react-exp-view-transition';

function App() {
  return (
    <ViewTransition>
      {/* Your content here */}
    </ViewTransition>
  );
}

export default App;
```

--------------------------------

### Usage Guide - First Implementation

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Guides users through their first implementation by suggesting reading 00_START_HERE.md and choosing an example from examples.md.

```markdown
For First Implementation:
  1. Read: 00_START_HERE.md (5 min)
  2. Choose example from examples.md (5 min)
  3. Copy code and customize
```

--------------------------------

### Usage Guide - TypeScript Setup

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Provides guidance for TypeScript setup, directing users to types.md and configuration.md.

```markdown
For TypeScript Setup:
  1. Read: types.md (10 min)
  2. Read: configuration.md - TypeScript section (5 min)
```

--------------------------------

### Complete Examples Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Contains 6 complete, working examples demonstrating real-world usage scenarios.

```markdown
examples.md ......................... 6 complete examples
```

--------------------------------

### Start Here Navigation Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

This file serves as the primary navigation guide for new users, directing them to the most relevant documentation sections based on their needs.

```markdown
00_START_HERE.md ..................... Navigation guide (START HERE)
```

--------------------------------

### Basic View Transition Setup

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/00_START_HERE.md

Demonstrates how to wrap content with the ViewTransition component and trigger transitions using startTransition. Ensure you have the experimental React packages installed.

```jsx
import { unstable_ViewTransition as ViewTransition, startTransition } from 'react';

<ViewTransition enter="fade-in">
  <div>Test animation</div>
</ViewTransition>

// Trigger with:
startTransition(() => setState(newValue));
```

--------------------------------

### Install Experimental React Packages

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/index.md

Install the experimental versions of React and ReactDOM to use the ViewTransition component.

```bash
npm install react@experimental react-dom@experimental
```

--------------------------------

### Quick Test Code Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/INDEX.md

A simple code example for quickly testing the ViewTransition component. This is useful for verifying installation and basic functionality.

```javascript
import React from 'react';
import { ViewTransition } from 'react-exp-view-transition';

function TestComponent() {
  return (
    <ViewTransition>
      <div>
        <h1>Test Content</h1>
      </div>
    </ViewTransition>
  );
}

export default TestComponent;
```

--------------------------------

### Overview and Usage Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

This file offers a general overview of the React ViewTransition API and guides users on its basic usage.

```markdown
README.md ........................... Overview & usage guide
```

--------------------------------

### Usage Guide - Fastest Answer

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Provides a quick guide for users seeking the fastest answer, recommending reading the QUICK_REFERENCE.md.

```markdown
USAGE GUIDE
===========

For Fastest Answer:
  1. Read: QUICK_REFERENCE.md (5 min)
  2. Copy pattern and adapt
```

--------------------------------

### Configuration Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Details the available props and configuration options for the ViewTransition API.

```markdown
configuration.md .................... Props & configuration
```

--------------------------------

### Install Experimental React Packages

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Use this command to install the experimental versions of React and ReactDOM. Avoid using these packages in production environments due to potential bugs and breaking changes.

```bash
# ✓ Correct installation method
npm install react@experimental react-dom@experimental

# ✗ Never use in production
# These packages contain bugs and breaking changes
```

--------------------------------

### Install Experimental React Packages

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/ReactsExpViewTransition.md

Install the experimental versions of React, ReactDOM, and eslint-plugin-react-hooks required for using the ViewTransition component. Use these only for development and testing.

```bash
npm install react@experimental react-dom@experimental eslint-plugin-react-hooks@experimental
```

--------------------------------

### Synchronous and Asynchronous startTransition Examples

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Demonstrates how to use `startTransition` for both synchronous state updates and asynchronous operations like data fetching.

```jsx
// Synchronous transition
startTransition(() => {
  setState(newValue);
});

// Asynchronous transition (useTransition only)
const [isPending, startTransition] = useTransition();

startTransition(async () => {
  const data = await fetch('/api/data');
  setState(await data.json());
});
```

--------------------------------

### Minimal ViewTransition Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/QUICK_REFERENCE.md

Demonstrates the basic usage of the ViewTransition component and startTransition for triggering updates.

```jsx
import { unstable_ViewTransition as ViewTransition, startTransition } from 'react';

<ViewTransition enter="fade-in" exit="fade-out">
  <div>Content</div>
</ViewTransition>

// In event handler:
startTransition(() => setVisible(!visible));
```

--------------------------------

### Type Definitions Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Provides definitions for all types used within the API, including TypeScript examples.

```markdown
types.md ............................ Type definitions
```

--------------------------------

### Integration Patterns Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Illustrates various integration patterns for using the API with different React patterns and libraries.

```markdown
integration-patterns.md ............. Integration patterns
```

--------------------------------

### Usage Guide - Complete Understanding

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Recommends a reading path for users seeking complete understanding, including README.md and API reference files.

```markdown
For Complete Understanding:
  1. Read: README.md (10 min)
  2. Read: api-reference/ViewTransition.md (15 min)
  3. Read: animation-types.md or integration-patterns.md (15 min)
```

--------------------------------

### Start a Transition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/QUICK_REFERENCE.md

Use startTransition to wrap state updates that should be deferred, allowing the UI to remain responsive.

```jsx
startTransition(() => {
  setState(newValue);
});
```

--------------------------------

### Quick Start: Basic View Transition Usage

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

Demonstrates how to use the `unstable_ViewTransition` component to animate content changes. Use `startTransition` to ensure smooth UI updates.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setShow(!show))}>
        Toggle
      </button>
      {show && (
        <ViewTransition enter="fade-in" exit="fade-out">
          <div>Animated content</div>
        </ViewTransition>
      )}
    </>
  );
}
```

--------------------------------

### NamePropertyValue Example Usage

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Illustrates deterministic naming for ViewTransition using a template literal with a video ID, and an example of omitting the name for auto-generation.

```jsx
// Deterministic naming
<ViewTransition name={`video-${videoId}`}>
  <Video />
</ViewTransition>

// Auto-generated (omitting name)
<ViewTransition>
  <Component />
</ViewTransition>
```

--------------------------------

### Router Integration Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Demonstrates how to register a 'navigation' transition type and use it within a React component for view transitions during route changes.

```jsx
import { unstable_addTransitionType, unstable_ViewTransition as ViewTransition } from 'react';

// During router setup
unstable_addTransitionType('navigation');

// In a route component
function Page() {
  return (
    <ViewTransition share="page-transition">
      <div>Page content</div>
    </ViewTransition>
  );
}
```

--------------------------------

### Animation Types Guide

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Explains different animation triggers and CSS patterns supported by the API.

```markdown
animation-types.md .................. Animation triggers & CSS
```

--------------------------------

### Strict Animation Configuration Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Demonstrates defining an animation configuration object with explicit types for enter, exit, update animations, and children.

```typescript
// Define animation configurations with explicit types
const animationConfig: ViewTransitionProps = {
  enter: 'fade-in',
  exit: 'fade-out',
  update: 'slide',
  children: <div>Content</div>
};
```

--------------------------------

### Transition Utilities Functions

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Reference for utility functions used to manage transitions, including starting transitions and accessing transition state.

```APIDOC
## Transition Utility Functions

### Description
This section details the utility functions provided by the API to programmatically control and interact with view transitions.

### Functions

#### startTransition

##### Description
Initiates a view transition, allowing React to batch state updates and apply animations.

##### Signature
`startTransition(callback: () => void, options?: { timeout?: number }) => void`

##### Parameters
- **callback** (function) - Required - The function containing the state updates to be batched.
- **options** (object) - Optional - Configuration options for the transition.
  - **timeout** (number) - Optional - The maximum duration for the transition in milliseconds.

##### Usage Example
```javascript
import { startTransition } from 'react-exp-view-transition';

startTransition(() => {
  // State updates to be batched
  setSearchQuery(query);
  setSearchResults(results);
});
```

#### useTransition

##### Description
A hook that provides access to the current transition state and related functions within functional components.

##### Signature
`useTransition(): { isTransitioning: boolean, transitionProgress: number }`

##### Return Value
- **isTransitioning** (boolean) - True if a transition is currently active, false otherwise.
- **transitionProgress** (number) - A value from 0 to 1 indicating the progress of the current transition.

##### Usage Example
```jsx
import { useTransition } from 'react-exp-view-transition';

function MyComponent() {
  const { isTransitioning, transitionProgress } = useTransition();

  return (
    <div>
      {isTransitioning ? `Transitioning... ${Math.round(transitionProgress * 100)}%` : 'Idle'}
    </div>
  );
}
```

#### unstable_addTransitionType

##### Description
Allows for the registration of custom transition types that can be used with the `ViewTransition` component.

##### Signature
`unstable_addTransitionType(name: string, animation: AnimationObject | AnimationObject[]) => void`

##### Parameters
- **name** (string) - Required - The name of the custom transition type.
- **animation** (AnimationObject | AnimationObject[]) - Required - The animation definition for the custom type.

##### Usage Example
```javascript
import { unstable_addTransitionType } from 'react-exp-view-transition';

unstable_addTransitionType('custom-fade', {
  duration: 500,
  effect: 'opacity',
  from: { opacity: 0 },
  to: { opacity: 1 },
});
```
```

--------------------------------

### Start Browser View Transition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

This is the low-level browser API that the `<ViewTransition>` component wraps. The component handles this automatically for React developers.

```javascript
const transition = document.startViewTransition(() => {
  // Update DOM here
});
```

--------------------------------

### Documentation Structure Overview

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Outlines the structure of the documentation, guiding users to find information quickly.

```markdown
CONTENT STRUCTURE
=================

Starting Points:
  → 00_START_HERE.md (navigation guide)
  → QUICK_REFERENCE.md (copy-paste patterns)
  → README.md (comprehensive overview)

For Quick Answers:
  → QUICK_REFERENCE.md (cheat sheet)
  → api-summary.md (API quick ref)

For Complete Understanding:
  → api-reference/ (full component/function docs)
  → animation-types.md (animation deep dive)
  → configuration.md (all options)
  → integration-patterns.md (real-world use)

For Code Examples:
  → examples.md (6 complete working examples)
  → QUICK_REFERENCE.md (common patterns)
  → integration-patterns.md (usage patterns)

For Constraints:
  → limitations.md (browser support & constraints)
  → types.md (type constraints)
```

--------------------------------

### Project File Dependencies

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/INDEX.md

This tree illustrates the hierarchical relationships and entry points for various documentation files within the project. It helps understand how different guides and references connect.

```text
00_START_HERE.md (entry point)
├── QUICK_REFERENCE.md (quick lookup)
├── README.md (navigation)
├── index.md (overview)
│
├── api-reference/
│   ├── ViewTransition.md (component)
│   └── TransitionUtilities.md (functions)
├── api-summary.md (quick ref)
│
├── animation-types.md (feature guide)
├── configuration.md (feature guide)
├── types.md (reference)
│
├── integration-patterns.md (real-world)
├── examples.md (complete code)
└── limitations.md (constraints)
```

--------------------------------

### Basic Usage of startTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Wrap state updates in startTransition to enable animations for view transitions. This example shows a simple counter increment.

```jsx
import { startTransition, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // Wrap state update in startTransition to enable animations
    startTransition(() => {
      setCount(prev => prev + 1);
    });
  };

  return <button onClick={handleClick}>Count: {count}</button>;
}
```

--------------------------------

### Basic ViewTransition Enter Animation Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/ViewTransition.md

Demonstrates how to animate a component entering the DOM using the `ViewTransition` component with a 'fade-in' animation. Includes the necessary React component structure and state management for triggering the animation.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

function Item() {
  return (
    <ViewTransition enter="fade-in">
      <div className="item">New item</div>
    </ViewTransition>
  );
}

export default function App() {
  const [showItem, setShowItem] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setShowItem(true))}>
        Show Item
      </button>
      {showItem && <Item />}
    </>
  );
}
```

--------------------------------

### Motion Preferences Handling Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/INDEX.md

Code snippet for handling user's motion preferences (e.g., 'reduce-motion'). This allows for a more accessible user experience.

```javascript
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReducedMotion) {
  // Apply animations
} else {
  // Disable animations or use simpler transitions
}
```

--------------------------------

### CSSPropertyValue Example Usage

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Demonstrates using CSSPropertyValue for animation configuration, including string and number types for duration and delay.

```typescript
const animationConfig: AnimationObject = {
  duration: '300ms',        // string
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',  // string
  delay: '50ms',            // string
  iterationCount: 1         // number
};
```

--------------------------------

### Basic Form Submission with useTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Example of using the useTransition hook for handling form submissions with a pending state indicator and view transitions.

```jsx
import { unstable_ViewTransition as ViewTransition, useTransition, useState } from 'react';

export default function SearchResults() {
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = async (query) => {
    startTransition(async () => {
      const data = await fetch(`/api/search?q=${query}`).then(r => r.json());
      setResults(data);
    });
  };

  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} />
      {isPending && <p>Loading...</p>}
      <ViewTransition update="fade">
        <ul>
          {results.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </ViewTransition>
    </div>
  );
}
```

--------------------------------

### Documentation Quality Metrics

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Summarizes the quality metrics of the documentation, including completeness, code example quality, and browser/type coverage.

```markdown
QUALITY METRICS
===============

Documentation Completeness:  100%
Code Examples:              All working, production-ready
Type Coverage:              Complete (13 types documented)
Browser Coverage:           Current (as of 2026)
Accessibility:              Addressed throughout
TypeScript Support:         Full definitions included
```

--------------------------------

### Feature Detection Code Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/INDEX.md

Code for detecting browser support for View Transitions API. This is useful for progressive enhancement or providing fallbacks.

```javascript
function supportsViewTransitions() {
  return 'document' in window && 'startViewTransition' in document;
}

if (supportsViewTransitions()) {
  // Use View Transitions API
} else {
  // Provide fallback behavior
}
```

--------------------------------

### Routers Supporting Navigation API

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Examples of routers that correctly integrate with the Navigation API, ensuring animations trigger properly with the browser back button.

```jsx
// TanStack Router (uses Navigation API)
// Browser back button: animations trigger correctly

// Next.js 13+ with App Router
// Navigation API integration built-in

// Remix
// Navigation API support available
```

--------------------------------

### Shared Element Transition with ViewTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/ViewTransition.md

Enable smooth transitions between different DOM locations for elements with the same `name` prop, using `share` for animation. This example transitions between a thumbnail and a fullscreen video.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

function Thumbnail({ video, onClick }) {
  return (
    <ViewTransition name={`video-${video.id}`} share="expand">
      <img src={video.thumb} onClick={onClick} />
    </ViewTransition>
  );
}

function FullscreenVideo({ video, onExit }) {
  return (
    <ViewTransition name={`video-${video.id}`} share="shrink">
      <video src={video.src} autoPlay />
    </ViewTransition>
  );
}

export default function App() {
  const [fullscreen, setFullscreen] = useState(false);
  const video = { id: 1, thumb: 'thumb.jpg', src: 'video.mp4' };

  if (fullscreen) {
    return (
      <FullscreenVideo 
        video={video} 
        onExit={() => startTransition(() => setFullscreen(false))} 
      />
    );
  }

  return (
    <Thumbnail 
      video={video} 
      onClick={() => startTransition(() => setFullscreen(true))} 
    />
  );
}
```

--------------------------------

### Custom Animation Timing and Keyframes

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/animation-types.md

Define custom animations for view transitions by specifying duration, easing, and keyframes. This example uses `moveOut` and `moveIn` keyframes for a slide effect.

```css
::view-transition-old(.custom-animation) {
  animation: moveOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(.custom-animation) {
  animation: moveIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes moveOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes moveIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
```

--------------------------------

### Registering a Custom Transition Type

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Use `unstable_addTransitionType` to register a new transition type. This is typically done during application setup, for example, when integrating with a router.

```typescript
unstable_addTransitionType('navigation');
```

--------------------------------

### Transition Utilities API Reference

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

API reference for transition utility functions, including startTransition and useTransition.

```markdown
api-reference/TransitionUtilities.md  Functions API reference
```

--------------------------------

### Router Upgrade Path Recommendations

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Guidance on migrating from older routers to modern solutions that support the Navigation API for better View Transitions integration.

```jsx
// Migrate to modern router
// ✓ TanStack Router
// ✓ Next.js 13+ App Router
// ✓ Remix
// ✗ React Router v6.x (use v7+ when stable)
```

--------------------------------

### useTransition Hook Signature

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

The signature of the useTransition hook, which returns a boolean indicating pending state and a function to start transitions.

```typescript
const [isPending, startTransition] = useTransition(): [boolean, (callback: () => void) => void]
```

--------------------------------

### TransitionTypeArray Example Usage

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Shows how TransitionTypeArray is used in the onEnter and onShare callbacks of a ViewTransition component to log the activated animation types.

```jsx
<ViewTransition
  onEnter={(el, types) => {
    console.log(types); // ['enter']
  }}
  onShare={(el, types) => {
    console.log(types); // ['share'] or ['share', 'update']
  }}>
  <div>Content</div>
</ViewTransition>
```

--------------------------------

### Quick Overview

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

A brief overview of the ViewTransition API's capabilities and purpose.

```markdown
index.md ............................ Quick overview
```

--------------------------------

### Basic ViewTransition with startTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/integration-patterns.md

Use startTransition to wrap state updates that should trigger animations. The callback passed to startTransition should contain only state updates.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

export function SimpleTransition() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => startTransition(() => setCount(c => c + 1))}>
        Increment
      </button>
      <ViewTransition update="fade">
        <p>Count: {count}</p>
      </ViewTransition>
    </>
  );
}
```

--------------------------------

### Basic ViewTransition Usage

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/index.md

Demonstrates toggling content visibility with smooth enter and exit animations using ViewTransition. Ensure state changes occur within a startTransition call.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

export default function App() {
  const [showContent, setShowContent] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setShowContent(!showContent))}>
        Toggle
      </button>
      {showContent && (
        <ViewTransition enter="fade-in" exit="fade-out">
          <div>Content</div>
        </ViewTransition>
      )}
    </>
  );
}
```

--------------------------------

### List Update Animation with ViewTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/ViewTransition.md

Animate list items when their order changes using the `update` prop. This example shuffles a list of items.

```jsx
import { unstable_ViewTransition as ViewTransition, useState, startTransition } from 'react';

export default function App() {
  const [items, setItems] = useState(['Item A', 'Item B', 'Item C']);

  const shuffle = () => {
    startTransition(() => {
      setItems(prev => [...prev].sort(() => Math.random() - 0.5));
    });
  };

  return (
    <>
      <button onClick={shuffle}>Shuffle</button>
      <ul>
        {items.map(item => (
          <ViewTransition key={item} update="slide">
            <li>{item}</li>
          </ViewTransition>
        ))}
      </ul>
    </>
  );
}
```

--------------------------------

### Manual 'prefers-reduced-motion' Implementation

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Demonstrates how to manually handle the 'prefers-reduced-motion' media query within a React component to ensure animations are skipped for users who prefer reduced motion.

```jsx
<ViewTransition enter="fade-in">
  <div>
    Animates even if user prefers reduced motion
  </div>
</ViewTransition>
```

```jsx
export function AccessibleAnimation({ children }) {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReducedMotion(mediaQuery.matches);

    const handler = (e) => setPrefersReducedMotion(e.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return (
    <ViewTransition
      enter={prefersReducedMotion ? undefined : 'fade-in'}
      exit={prefersReducedMotion ? undefined : 'fade-out'}
    >
      {children}
    </ViewTransition>
  );
}
```

--------------------------------

### Async Operations with startTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Demonstrates the correct way to handle async operations within `startTransition` to ensure state updates are part of the transition context. Avoid updating state directly after an `await` call outside the transition callback.

```jsx
// ✗ Problem: state updates outside callback
const handleAsync = async () => {
  startTransition(() => {
    // This works
    setLoading(true);
  });
  
  // This doesn't work well with transitions
  const data = await fetch('/api/data');
  const json = await data.json();
  
  // State update here won't have transition context
  setData(json);
};

// ✓ Better: Use useTransition for async
const [isPending, startTransition] = useTransition();

const handleAsync = () => {
  startTransition(async () => {
    const data = await fetch('/api/data');
    const json = await data.json();
    setData(json);
  });
};
```

--------------------------------

### Callback Type Safety Example

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Illustrates explicitly typing animation callback handlers to ensure correct usage and handling of animation completion events.

```typescript
// Explicitly type callback handlers
const handleAnimationComplete: AnimationCallbackHandler = (element, types) => {
  if (types.includes('enter')) {
    // Handle enter completion
  }
  if (types.includes('exit')) {
    // Handle exit completion
  }
};
```

--------------------------------

### CSS Complex Choreography Animation for View Transitions

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/animation-types.md

Combine multiple transforms and opacity for a more dynamic enter animation. This example uses the '.complex' class.

```css
@keyframes complexEnter {
  from {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

::view-transition-new(.complex) {
  animation: complexEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
```

--------------------------------

### GPU-Accelerated View Transition Animation

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/animation-types.md

This CSS demonstrates a performant view transition using transform and opacity, which are GPU-accelerated. Use this for smooth animations.

```css
/* ✓ Good: Uses GPU acceleration */
::view-transition-new(.performant) {
  animation: gpuFriendly 0.3s ease-out;
}

@keyframes gpuFriendly {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
```

--------------------------------

### CSS Slide Animations for View Transitions

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/animation-types.md

Implement slide-in and slide-out effects using translateX. This example animates elements with the '.slide-left' class from the left.

```css
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

::view-transition-new(.slide-left) { animation: slideInLeft 0.4s ease-out; }
::view-transition-old(.slide-left) { animation: slideOutRight 0.4s ease-in; }
```

--------------------------------

### Basic Logging with ViewTransition Callbacks

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/configuration.md

Log element and transition types on enter and exit events. Use this for simple debugging.

```jsx
<ViewTransition
  onEnter={(el, types) => {
    console.log('Element entered:', el, 'Types:', types);
  }}
  onExit={(el, types) => {
    console.log('Element exited:', el, 'Types:', types);
  }}
>
  <div>Content</div>
</ViewTransition>
```

--------------------------------

### Custom Modal Transition Implementation

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Shows how to register custom 'modal-open' and 'modal-close' transition types and apply them to a modal component using `ViewTransition` and `useTransition`.

```jsx
import { unstable_addTransitionType, unstable_ViewTransition as ViewTransition, useTransition } from 'react';

// Register custom type
unstable_addTransitionType('modal-open');
unstable_addTransitionType('modal-close');

function Modal({ isOpen, onClose }) {
  const [isPending, startTransition] = useTransition();

  return (
    <ViewTransition
      share={isOpen ? 'modal-open' : 'modal-close'}
      onShare={() => console.log('Modal animation complete')}
    >
      <dialog open={isOpen}>
        <button onClick={() => startTransition(() => onClose())}>Close</button>
      </dialog>
    </ViewTransition>
  );
}
```

--------------------------------

### Complete File Index

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Provides a comprehensive index of all generated documentation files for easy reference.

```markdown
INDEX.md ............................ Complete file index
```

--------------------------------

### DOM Manipulation After ViewTransition Animation

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/configuration.md

Modify the DOM or trigger side effects after an animation completes. Focuses on post-entry setup like element focus.

```jsx
function AnimatedCard() {
  const handleAnimationComplete = (element, types) => {
    // Add a class after animation
    element.classList.add('animation-complete');
    
    // Trigger side effects
    if (types.includes('enter')) {
      // Post-entry setup
      element.focus();
    }
  };

  return (
    <ViewTransition onEnter={handleAnimationComplete}>
      <div className="card">Content</div>
    </ViewTransition>
  );
}
```

--------------------------------

### startTransition with ViewTransition Component

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Demonstrates using startTransition to trigger animations on a <ViewTransition> component. The 'update="fade"' prop specifies the transition type.

```jsx
import { unstable_ViewTransition as ViewTransition, startTransition, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => startTransition(() => setCount(c => c + 1))}>
        Increment
      </button>
      <ViewTransition update="fade">
        <p>Count: {count}</p>
      </ViewTransition>
    </div>
  );
}
```

--------------------------------

### Start a Non-Blocking Transition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

Use startTransition to wrap state updates that should not block user input and can trigger view animations. This function is available in React 18+.

```typescript
function startTransition(callback: () => void | Promise<any>): void
```

```jsx
import { startTransition, useState } from 'react';

const [count, setCount] = useState(0);

startTransition(() => {
  setCount(c => c + 1);
});
```

--------------------------------

### Get Animation Class Based on AnimationType

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Maps an AnimationType to a corresponding CSS class name. Useful for applying specific animations based on the transition event.

```typescript
function getAnimationClass(type: AnimationType): string {
  const animationMap: Record<AnimationType, string> = {
    enter: 'fade-in',
    exit: 'fade-out',
    update: 'slide',
    share: 'expand',
    default: 'cross-fade'
  };
  
  return animationMap[type];
}
```

--------------------------------

### Animation Presets with Types

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Shows how to define animation presets using a Record type, mapping preset names to specific enter, exit, and update animation configurations.

```typescript
const animationPresets: Record<string, Pick<ViewTransitionProps, 'enter' | 'exit' | 'update' | 'share'>> = {
  fade: {
    enter: 'fade-in',
    exit: 'fade-out'
  },
  slide: {
    enter: 'slide-in-up',
    exit: 'slide-out-down',
    update: 'slide'
  }
};
```

--------------------------------

### Error Handling in Transitions

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Demonstrates how to wrap asynchronous operations within `startTransition` with a `try...catch` block to handle potential errors during state updates. This prevents unexpected behavior and ensures animations can still occur even if the update fails.

```jsx
import { useTransition, useState } from 'react';

export default function SafeTransition() {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);

  const handleUpdate = async () => {
    try {
      startTransition(async () => {
        const response = await fetch('/api/update', { method: 'POST' });
        if (!response.ok) throw new Error('Update failed');
        // state update
      });
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button onClick={handleUpdate} disabled={isPending}>
        Update
      </button>
    </div>
  );
}
```

--------------------------------

### Handling Loading State with Transitions

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

Shows a spinner with a fade-in transition while data is being fetched and state is updated.

```jsx
const [isPending, startTransition] = useTransition();

startTransition(async () => {
  const data = await fetch('/api/data');
  setState(await data.json());
});

{isPending && <ViewTransition enter="fade-in"><Spinner /></ViewTransition>}
```

--------------------------------

### Implement Animation Callback Handler

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/types.md

Example of implementing an AnimationCallbackHandler to log animation details and conditionally add a CSS class. This handler is useful for performing actions after an enter animation completes.

```jsx
const handleAnimationComplete: AnimationCallbackHandler = (element, types) => {
  console.log('Animation completed for:', element.id);
  console.log('Animation types:', types);
  
  if (types.includes('enter')) {
    element.classList.add('animation-complete');
  }
};

<ViewTransition
  enter="fade-in"
  onEnter={handleAnimationComplete}
>
  <div id="my-element">Content</div>
</ViewTransition>
```

--------------------------------

### Using ViewTransition with useState

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-reference/TransitionUtilities.md

Demonstrates how to use `unstable_ViewTransition` with the `useState` hook to manage the expanded/collapsed state of a panel. `startTransition` is used to ensure UI updates are non-blocking.

```jsx
import { unstable_ViewTransition as ViewTransition, startTransition, useState } from 'react';

export default function TogglePanel() {
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setExpanded(!expanded))}>
        Toggle
      </button>
      {expanded && (
        <ViewTransition enter="expand" exit="collapse">
          <div className="panel">Content</div>
        </ViewTransition>
      )}
    </>
  );
}
```

--------------------------------

### Basic Usage of unstable_ViewTransition

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

Demonstrates how to use the unstable_ViewTransition component to wrap content and apply enter and exit animations. It also shows how to use the onEnter callback.

```jsx
import { unstable_ViewTransition as ViewTransition, startTransition } from 'react';

<ViewTransition 
  enter="fade-in" 
  exit="fade-out"
  onEnter={(el, types) => console.log('Entered:', types)}>
  <div>Animated content</div>
</ViewTransition>
```

--------------------------------

### Use Transition Hook for State and Control

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/api-summary.md

The useTransition hook provides the pending state of a transition and a function to start transitions. It's useful for monitoring and controlling transition states, especially with asynchronous operations. Available in React 18+.

```jsx
import { useTransition, useState } from 'react';

const [isPending, startTransition] = useTransition();
const [data, setData] = useState(null);

const fetchData = () => {
  startTransition(async () => {
    const response = await fetch('/api/data');
    setData(await response.json());
  });
};

return (
  <button onClick={fetchData} disabled={isPending}>
    {isPending ? 'Loading...' : 'Fetch'}
  </button>
);
```

--------------------------------

### Optimizing View Transition Animations

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/limitations.md

Avoid high-frequency animations that can cause jank. Use simpler animations or conditionally apply them based on list size for better performance.

```jsx
// ⚠️ May cause jank with many simultaneous animations
{items.map(item => (
  <ViewTransition key={item.id} update="expensive-animation">
    <Item item={item} />
  </ViewTransition>
))}

// ✓ Better: Use simpler animations or conditional application
{items.map(item => (
  <ViewTransition 
    key={item.id} 
    update={isLargeList ? undefined : 'smooth-animation'}
  >
    <Item item={item} />
  </ViewTransition>
))}
```

--------------------------------

### Key Features Documented

Source: https://github.com/aidenestelle/react-exp-view-transition-document/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Highlights the key features of the React ViewTransition API, including animation triggers and integration points.

```markdown
KEY FEATURES DOCUMENTED
=======================

Animation Triggers:
  ✓ Enter animations (component mount)
  ✓ Exit animations (component unmount)
  ✓ Update animations (content change)
  ✓ Share animations (shared element transitions)

Integration Points:
  ✓ startTransition() function
  ✓ useTransition() hook
  ✓ React hooks (useState, useReducer, useContext)
  ✓ Suspense & async operations
  ✓ Error boundaries
  ✓ React Router, TanStack Router
  ✓ Data fetching (React Query, SWR)
  ✓ State machines (XState)
  ✓ Custom hooks

Browser Features:
  ✓ View Transitions API integration
  ✓ Feature detection code
  ✓ Fallback patterns
  ✓ Mobile & accessibility

CSS Customization:
  ✓ View Transition pseudo-elements
  ✓ Animation timing (duration, easing, delay)
  ✓ GPU-accelerated patterns
  ✓ Motion preference handling
```