View Transition API Demo

This project was part of my TampereJS presentation held at 2025-05-22.

This project demonstrates a slide deck built with React, showcasing the use of the View Transition API available in modern browsers. The application highlights how to integrate this API into a React-based project for seamless and visually appealing transitions between slides.

Features

• Each slide has its own route using TanStack Router.
• Keyboard navigation: Move between slides using arrow keys.
• View Transition API: Smooth transitions between slides and UI elements.
• Tailwind CSS: All styling is handled with Tailwind for rapid and consistent UI development.
• Component-based structure: Each component resides in its own folder for maintainability.

Technical Stack

• React 19 Experimental
• TanStack Router
• Tailwind CSS
• Vite

Folder Structure

• src/components/ – Reusable UI components (e.g., SlideHeader, SlideList, CodeExample)
• src/hooks/ – Custom React hooks (e.g., useSlideNavigation for keyboard navigation)
• src/routes/ – Each slide and route as a separate file/component
• src/assets/ – Static assets (e.g., images)

Routing

• Routing is handled by TanStack Router.
• Each slide is a route (see src/routes/).
• routeTree.gen.ts is auto-generated by TanStack Router and should not be edited manually.

Styling

• Tailwind CSS is used for all styling.
• Utility classes are applied directly in JSX for rapid development and easy maintenance.

Running the Project

Warning! This project uses experimental version of React 19 and npm i will probably fail. If this happens, run:

npm uninstall react react-dom
npm i react@18 react-dom@18
npm i
npm i react@experimental react-dom@experimental

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser: Visit http://localhost:5173 to view the app.

Useful Links

• React Labs: View Transitions, Activity, and more The blog post that inspired this presentation
• React Documentation: <ViewTransition> A comprehensive guide to the View Transition API in React
• MDN: Using the View Transition API Lengthy post about the View Transition API
• MDN: View Transition API The API documentation

---

© 2025 Jurkka Lemmetti. TampereJS Demo.