Animated Tabs

A physical stack of photo cards shuffled to the front by clipped tabs, with a tight image inset and copy in the footer.

cinematic interactionsanimatedtabsframer motion

Overview

Animated Tabs is a React and Tailwind CSS tabs component where each tab shuffles a physical stack of photo cards to bring its card to the front, in Next.js or any React app, built on Framer Motion. Clipped tab labels sit above a deck with a tight image inset and the title and description in the footer. It follows the ARIA tabs pattern with arrow keys, Home, and End, works controlled or uncontrolled, and reduced motion swaps cards without the shuffle. Each tab needs a label, title, description, and a landscape image, since the inset crops to landscape.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add animated-tabs

Usage

Import AnimatedTabs from @/components/wensity/animated-tabs and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { useState } from "react";
 3import {
 4  AnimatedTabs,
 5  type AnimatedTabItem,
 6} from "@/components/wensity/animated-tabs";
 7
 8const tabs: AnimatedTabItem[] = [
 9  {
10    id: "paris",
11    label: "Paris",
12    title: "Iron lace at golden hour",
13    description: "The tower holds the last light while the city softens into blue.",
14    image: "https://assets.wensity.com/photos/landscape/eiffel-tower-sunset.webp",
15  },
16  {
17    id: "kyoto",
18    label: "Kyoto",
19    title: "Shrine path through cedar",
20    description: "Moss and timber lead the eye forward through soft fog.",
21    image: "https://assets.wensity.com/photos/landscape/forest-shrine-path.webp",
22  },
23  {
24    id: "sahara",
25    label: "Sahara",
26    title: "Dunes catching fire",
27    description: "Wind-carved ridges glow amber, then drop into cool shadow.",
28    image: "https://assets.wensity.com/photos/landscape/dune-sunset.webp",
29  },
30];
31
32export function AnimatedTabsDemo() {
33  const [value, setValue] = useState(tabs[0]!.id);
34  return <AnimatedTabs tabs={tabs} value={value} onValueChange={setValue} />;
35}

Props

Prop	Type	Default	Description
`tabs`	AnimatedTabItem[]	-	Tab definitions with label, title, description, and landscape image.
`value`	string	-	Controlled active tab id.
`defaultValue`	string	first tab	Uncontrolled initial tab id.
`onValueChange`	(value: string) => void	-	Fires whenever the active tab changes.

Featured in React carousel components.