An open source library of page transitions and theme toggles for the modern web.
Pure CSS animations for the View Transitions API that run over your live, fully interactive interface.

transition-kit.space · Templates · Components · Theme toggles · Page transitions

What makes it different

Transition Kit is CSS-first. Every template injects a small animation into the ::view-transition-old(root) and ::view-transition-new(root) pseudo-elements, then flips the theme or swaps the page through document.startViewTransition(). No heavy animation libraries, no wrapper components around your content — the page stays live and interactive while the effect plays.

Where the View Transitions API is not supported, components fall back to an instant, dependency-free swap, so every visitor gets a working page.

	32 transitions and counting: Circle Reveal, Cube, Glitch, Page Curl, and more
	Framework agnostic: every template ships for React, Next.js, Vue, Svelte, and vanilla
	Copy, do not install: components land in your repo via a shadcn-compatible registry
	Zero config: self-contained CSS with no dependencies and sensible defaults
	Customize: tune duration, easing, and direction on any template

Quick start

Add the registry to your components.json, then install a component with the shadcn CLI:

{
  "registries": {
    "@transitions": "https://transition-kit.space/r/{name}.json"
  }
}

npx shadcn@latest add @transitions/theme-toggle-button

Swap theme-toggle-button for animated-theme-toggler, theme-toggle-switch, or theme-switcher. Source lands in components/ui/, yours to edit.

import { ThemeToggleButton } from "@/components/ui/theme-toggle-button";

export default function Page() {
  return <ThemeToggleButton transition="circle-reveal" />;
}

Each component is self-contained — the transition CSS is bundled inside it. See the installation guide for manual setup.

Templates

Browse all templates in the gallery, preview them live, and copy the code for your framework.

Mask reveals: theme toggles driven by expanding masks

Component	What it does	Component	What it does
Circle Reveal	Expanding circular mask from the center	Circle Blur	Soft, diffused circular reveal
Polygon Reveal	Clip-path polygon wipe	GIF Frog	A dancing frog reveals the new theme
GIF Penguin	Mask reveal with a penguin	GIF Cat	Mask reveal with a cat
Star Reveal	Expanding star-shaped mask	Heart Reveal	Expanding heart-shaped mask
Checkerboard	Checkerboard tiles expand	Ripple Reveal	Concentric rings from the click point
Spiral Reveal	Spiral-shaped mask	Iris Wipe	Film-style iris that closes and opens

Simple: page transitions built on transform and opacity

Component	What it does	Component	What it does
Fade	Cross-fade between pages	Slide	Pages slide past each other
Scale	New page scales in	Rotate	New page rotates in from the center
Zoom	Zoom transition between pages

3D: perspective-driven page turns

Component	What it does	Component	What it does
Flip	3D flip around an axis	Cube	Pages rotate around a cube axis
Skew Slide	Skewed, energetic slide	Page Curl	Old page curls up like a book page
Accordion	Folds shut in vertical pleats	Doorway	Page swings away like a door
Book Flip	Flips like a page on a spine	Fold	Folds inward along its center

Composite: layered clip-path and transform effects

Component	What it does	Component	What it does
Blur	Blur dissolve between pages	Diagonal Wipe	Diagonal band sweeps across the screen
Venetian Blinds	Slats clip open one by one	Wave Reveal	Wavy edge sweeps across the screen
Curtain	Old page splits apart like curtains	Roll	Page rolls away like a scroll
Glitch	RGB-split slices before the new page

Browser support

Browser	Full effect	Fallback
Chrome 111+ / Edge 111+ / Opera 111+	✅	—
Firefox / Safari	⚠️	Instant swap, still fully functional

The View Transitions API is available in Chrome 111+, Edge 111+, and Opera 111+. All templates include a graceful fallback that swaps the theme or page instantly, so the site works everywhere.

Development

This repo holds the library source, the docs site (TanStack Start, Tailwind v4, on Cloudflare Workers), and the registry build.

pnpm install
pnpm dev             # starts the dev server on port 3001
pnpm test            # runs the Vitest suite
pnpm build           # generates the sitemap, then production build
pnpm build-registry  # regenerates public/r/* for the shadcn CLI
pnpm deploy          # build and deploy to Cloudflare

Path	What lives here
src/data/transitions.ts	Single source of truth: CSS, JS, and snippets for all 32 templates
src/components/transitions/	Live previews, transition cards, and the playground
scripts/templates/ + src/registry/	shadcn-compatible components (React, Vue, Svelte, vanilla)
scripts/build-registry.ts	Generates public/r/*.json for the shadcn CLI
content/docs/ + content/templates/	Documentation site content

Contributing

Issues and pull requests welcome. Open an issue or submit a PR on the GitHub repo.

_{Built by Abdullah Mukadam · transition-kit.space}

transition-kit.space