Shadcn Framer Motion: Creating Animated Components Easily in 5 Parts

Learn how to animate shadcn/ui components using Motion (Framer Motion) in Next.js. Includes real code for buttons, dialogs, scroll animations, drag interactions, variant orchestration, and more - written from production experience. By the end of this guide, you will be able to understand how the Shadcn Framer Motion combo can help in animating the components easily.

Part 1: Foundations of Shadcn Framer Motion Component

When you combine shadcn/ui with Framer Motion, you’re essentially blending structured UI primitives with fluid, production-grade animations.

The goal isn’t “adding animation everywhere.” It’s about making UI feel alive, responsive, and intentional.

Shadcn = Structure

• Accessible components (built on Radix primitives)

• Tailwind-first styling

• Composable and scalable

Framer Motion = Behavior

• Declarative animations

• Gesture handling (hover, tap, drag)

• Layout transitions

👉 Together: Structure + Motion = Polished UX

Introduction - Why Animation Still Matters (And Why Most Get It Wrong)

Let’s get something out of the way first: animation is not about making things look cool. It’s not about impressing your designer or showing off on Twitter. Animation, when done right, is a communication tool - it tells users what just happened, what’s about to happen, and where their attention should go.

Yet most developers either skip it entirely or go overboard with 600ms easing curves on every div. Both are wrong. And both hurt the user experience in different ways.

The UX Case for Animation

Think about the last time you clicked a button and nothing visually changed for half a second. Did you click it again? Probably. That’s a missing feedback animation causing a double-submission bug.

Or think about a modal that just pops into existence - no enter transition, no context - it feels jarring because your brain didn’t get the spatial cue that something new arrived on screen.

Animation solves real problems:

• Feedback - confirms that an action was registered (button press, form submit)

• Orientation - helps users understand where they are in a flow (page transitions, step indicators)

• Hierarchy - draws attention to what matters (toast notifications, error states)

• Continuity - makes UI feel connected rather than teleporting between states

The golden rule I’ve come to live by: if removing the animation makes the UI harder to understand, it was a good animation. If nothing changes, it was a decoration.

A 200ms spring on a button tap? Useful - it confirms the press. A 1.2s fade-in on your paragraph text? Annoying - it just delays reading.

Where shadcn/ui Ends and Motion Begins

shadcn/ui gives you beautifully structured, accessible, unstyled-but-styled components. It handles the hard stuff: keyboard navigation, ARIA roles, focus management, Radix UI primitives under the hood. What it intentionally doesn’t do is tell you how things should move.

That’s where Motion (formerly Framer Motion) comes in. Motion is a production-grade animation library for React that gives you declarative, physics-based animations with a remarkably clean API.

The two tools complement each other perfectly:

• shadcn/ui owns the structure, accessibility, and base styles

• Motion owns the entrance, exit, interaction, and transition behavior

The key insight - and something we’ll keep coming back to throughout this blog - is that you rarely replace shadcn components. You wrap or extend them with motion. The component still does its job; you’re just adding a layer of expressiveness on top.

What We’ll Build

By the end of this guide, you’ll have a solid, practical understanding of how to animate real shadcn/ui components in production Next.js apps.

We’ll go from the very basics of Motion’s API all the way to gesture-driven UIs, scroll-linked animations, and a satisfying animated Like Button that ties everything together.

Let’s build.

Setting Up Your Animated Stack

Before we write a single animation, let’s get the environment right. A messy setup leads to version conflicts, deprecated API warnings, and a lot of wasted time - so let’s do this properly.

Installing shadcn/ui + Motion in a Next.js Project

• Start with a fresh Next.js app if you don’t have one:

npx create-next-app@latest my-animated-app
cd my-animated-app

During setup, choose App Router, TypeScript, and Tailwind CSS - shadcn/ui requires all three.

• Next, initialize shadcn/ui:

npx shadcn@latest init

Follow the prompts. It’ll set up your components.json, configure path aliases, and add the base CSS variables. Now add the components we’ll use throughout this blog:

npx shadcn@latest add avatar button card dialog sheet accordion input label

• Now install Motion:

npm install motion

Note: The package is now simply motion, not framer-motion. If you’re on an older project using framer-motion, it still works - but new projects should use motion. The import paths have changed slightly, which we’ll cover next.

That’s it. No extra config, no providers to wrap your app in. Motion works out of the box.

Project Structure for Animation-Heavy Apps

As your animation logic grows, keeping it organized matters. Here’s the structure I’ve settled on after a few production projects:

src/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/              # shadcn generated components (don't touch these)
│   └── animated/        # your motion-wrapped components live here
│       ├── AnimatedButton.tsx
│       ├── AnimatedDialog.tsx
│       └── ...
├── lib/
│   └── animations.ts    # shared variants and transition configs

The lib/animations.ts file is one I swear by. Instead of writing inline animation objects everywhere, you define named variants once and import them:

// lib/animations.ts
import type { Transition, Variants } from "motion/react";

export const fadeIn: Variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 },
};

export const slideUp: Variants = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 20 },
};

export const springTransition: Transition = {
  type: "spring",
  stiffness: 300,
  damping: 25,
};

This keeps your components clean and your animation language consistent across the app.

Usage:

import { motion } from "motion/react";
import { slideUp, springTransition } from "@/lib/animations";

export function Hero() {
  return (
    <motion.h1 {...slideUp} transition={springTransition}>
      Welcome
    </motion.h1>
  );
}

The motion Component Mental Model - Thinking in Variants

Here’s the shift in thinking that makes Motion click: instead of imperatively saying “move this element from here to there”, you declare states and let Motion figure out the transition.

import { motion } from "motion/react";

// You're not saying "animate from opacity 0 to 1 over 300ms"
// You're saying "this element starts hidden, then becomes visible"
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
>
  Hello
</motion.div>

When animate changes, Motion automatically transitions between states. That’s the mental model: you describe what the element looks like in each state, and Motion handles the in-between.

Variants take this further by giving names to those states:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
>
  Hello
</motion.div>

This might look like an extra ceremony for simple cases, but variants become incredibly powerful when you have parent-child relationships - more on that in Part 4. For now, just get comfortable with the idea that animations are named states, not imperative commands.

The Motion Primitives You Actually Need

Motion has a large API surface, but honestly? You can build 90% of production animations with about 6 concepts. Let’s go through the ones that matter.

initial, animate, exit - The Animation Lifecycle

These three props define the three key moments of an element’s life on screen.

import { motion, AnimatePresence } from "motion/react";

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}  // how it starts (before entering)
      animate={{ opacity: 1, scale: 1 }}     // how it looks when mounted
      exit={{ opacity: 0, scale: 0.95 }}     // how it leaves (before unmounting)
    >
      I animate in and out
    </motion.div>
  )}
</AnimatePresence>

A few things worth noting here:

initial is the starting state before the element animates in. If you set initial={false}, Motion skips the entrance animation - useful when you don’t want elements animating in on first page load.

exit only works inside <AnimatePresence>. This is a wrapper component that keeps track of components that are being unmounted and lets them finish their exit animation before actually removing them from the DOM. Without it, React removes the element instantly, and the exit animation never plays.

animate can be dynamic. You can pass a variable to animate and whenever it changes, Motion will transition to the new state:

<motion.div animate={{ x: isOpen ? 0 : -100 }}>
  Slides based on state
</motion.div>

This is one of the most useful patterns - no useEffect, no manual transition management. Just change the state, and Motion handles the rest.

Usage:

"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Button } from "@/components/ui/button";

export function ToggleBox() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className="space-y-4">
      <Button onClick={() => setIsVisible(!isVisible)}>Toggle</Button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 24 }}
            className="p-4 rounded-lg border bg-card"
          >
            I animate in and out!
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

transition Deep Dive - Duration, Ease, Springs vs Tweens

The transition prop controls how Motion gets from one state to another. This is where a lot of developers either set it and forget it (bad) or obsess over it endlessly (also bad). Here’s what you actually need to know.

Tween transitions are time-based - you specify a duration and an easing curve:

<motion.div
  animate={{ opacity: 1 }}
  transition={{
    type: "tween",   // default, can be omitted
    duration: 0.3,
    ease: "easeOut", // "linear" | "easeIn" | "easeOut" | "easeInOut" | custom bezier
  }}
/>

Spring transitions are physics-based - instead of a fixed duration, the animation behaves like a physical spring:

<motion.div
  animate={{ scale: 1 }}
  transition={{
    type: "spring",
    stiffness: 300,  // how stiff the spring is (higher = snappier)
    damping: 20,     // how much the spring resists motion (lower = more bounce)
    mass: 1,         // weight of the element (higher = slower)
  }}
/>

When to use springs vs tweens?

Use springs for: element movement (x, y, scale, rotation), interactive elements like buttons and cards, and anything that responds to user gestures. Springs feel physical and alive - they’re what separates “animated” from “polished.”

Use tweens for: opacity, color, blur - properties where a physical bounce doesn’t make sense. A button fading in doesn’t need to bounce. A button popping into view does.

Here’s a practical cheat I use constantly:

// For UI movement - snappy spring
{ type: "spring", stiffness: 400, damping: 30 }

// For UI movement - bouncy spring
{ type: "spring", stiffness: 300, damping: 15 }

// For opacity / color fades
{ duration: 0.2, ease: "easeOut" }

whileHover, whileTap, whileFocus - these are shorthand props for defining animation states during interactions, without needing to manage any state yourself:

<motion.button
  whileHover={{ scale: 1.03 }}
  whileTap={{ scale: 0.97 }}
  whileFocus={{ boxShadow: "0 0 0 3px rgba(99,102,241,0.4)" }}
  transition={{ type: "spring", stiffness: 400, damping: 25 }}
  className="outline-none px-3 py-1.5 rounded-md bg-indigo-600 text-white"
>
  Click me
</motion.button>

When the user hovers, Motion transitions to the whileHover state. When they stop hovering, it transitions back to animate. No useState, no event handlers, no cleanup. It just works.

One gotcha here: don’t overdo the scale. scale: 1.05 On a button looks great. scale: 1.2 Looks broken. Keep hover scales between 1.02 and 1.06, tap scales between 0.94 and 0.98. Small numbers, big impact.

Putting It Together - Your First Animated shadcn Card

Let’s combine everything from Part 1 into a concrete example: an animated shadcn Card that fades in on mount and responds to hover.

// components/animated/AnimatedCard.tsx
"use client";

import { motion, type Variants } from "motion/react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0 },
};

export function AnimatedCard({
  title,
  children,
}: {
  title: string,
  children: React.ReactNode,
}) {
  return (
    <motion.div
      variants={cardVariants}
      initial="hidden"
      animate="visible"
      whileHover={{ y: -4, boxShadow: "0 12px 40px rgba(0,0,0,0.12)" }}
      transition={{ type: "spring", stiffness: 300, damping: 24 }}
      className="rounded-xl"
    >
      <Card className="h-full">
        <CardHeader>
          <CardTitle>{title}</CardTitle>
        </CardHeader>
        <CardContent>{children}</CardContent>
      </Card>
    </motion.div>
  );
}

Notice the pattern here - we’re not replacing Card with a motion component. We’re wrapping it with motion.div. The shadcn Card handles its own structure and styles; Motion handles how it moves. This wrapper pattern is the foundation for everything we’ll do in Part 2.

Usage:

import { AnimatedCard } from "@/components/animated/AnimatedCard";

export default function Page() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      <AnimatedCard title="Performance">
        <p className="text-sm text-muted-foreground">
          Optimized for 60fps animations.
        </p>
      </AnimatedCard>
      <AnimatedCard title="Accessible">
        <p className="text-sm text-muted-foreground">
          Respects reduced motion preferences.
        </p>
      </AnimatedCard>
      <AnimatedCard title="Simple API">
        <p className="text-sm text-muted-foreground">
          Declarative and intuitive to use.
        </p>
      </AnimatedCard>
    </div>
  );
}

Part 2: Animating Shadcn UI Components

Animating Shadcn components is all about enhancing user experience without overloading it. Since Shadcn gives you clean, unstyled building blocks, you get full control over motion—no fighting against pre-built animation systems.

The most common and powerful way to animate Shadcn components is by integrating Framer Motion.

Why Add Animation?

Animation isn’t just decoration—it improves usability:

• Guides attention (what changed, where to look)

• Makes interactions feel responsive

• Reduces perceived load time

• Adds personality to otherwise static UI

But overdoing it? That kills UX. Keep it purposeful.

Animating Shadcn Buttons - More Than Just Hover Effects

Buttons are the most interacted-with element in any UI. Yet most developers slap a hover:scale-105 Tailwind class on them and call it a day. There’s nothing wrong with that - but once you bring Motion into the picture, you can make Shadcn buttons feel genuinely satisfying to press, not just visually different on hover.

Wrapping shadcn Button with Motion

The shadcn Button component renders a native <button> element under the hood. To animate it with Motion, you have two options:

Option A — Wrap with motion.div (quick but not ideal):

<motion.div
  whileHover={{ scale: 1.03 }}
  whileTap={{ scale: 0.96 }}
  transition={{ type: "spring", stiffness: 400, damping: 25 }}
  className="inline-flex"
>
  <Button>Click me</Button>
</motion.div>

This works fine visually, but the animated element is a div, not the button itself — which means the click target and the animated element are different nodes in the DOM.

Option B — Animate motion.button directly, importing buttonVariants from shadcn (the right way):

// components/animated/AnimatedButton.tsx
"use client";

import { motion } from "motion/react";
import { VariantProps } from "class-variance-authority";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

// Native HTML button events that conflict with Motion's own event types
type ConflictingEvents =
  | "onDrag"
  | "onDragEnd"
  | "onDragStart"
  | "onAnimationStart"
  | "onAnimationEnd"
  | "onAnimationIteration";

interface AnimatedButtonProps
  extends Omit<
      React.ButtonHTMLAttributes<HTMLButtonElement>,
      ConflictingEvents
    >,
    VariantProps<typeof buttonVariants> {}

export function AnimatedButton({
  children,
  className,
  variant,
  size,
  ...props
}: AnimatedButtonProps) {
  return (
    <motion.button
      whileHover={{ scale: 1.03 }}
      whileTap={{ scale: 0.96 }}
      transition={{ type: "spring", stiffness: 400, damping: 25 }}
      className={cn(
        buttonVariants({ variant, size }),
        "transition-none",
        className
      )}
      {...props}
    >
      {children}
    </motion.button>
  );
}

One thing worth noting - "transition-none" The className prevents Tailwind’s default button transitions from conflicting with Motion, so Motion has full control over how the button animates.

Usage:

import { AnimatedButton } from "@/components/animated/AnimatedButton";

export default function Page() {
  return (
    <div className="flex gap-3">
      <AnimatedButton>Default</AnimatedButton>
      <AnimatedButton variant="outline">Outline</AnimatedButton>
      <AnimatedButton variant="destructive" size="sm">
        Delete
      </AnimatedButton>
    </div>
  );
}

“For link buttons: If you need the button to act as a link, wrap it in Next.js Link rather than using asChild”

import Link from "next/link";

<Link href="/dashboard">
  <AnimatedButton>Go to Dashboard</AnimatedButton>
</Link>

Animated Loading State with Icon Swap

A static spinner replacing button text is fine. An animated icon swap with a smooth transition? That’s the kind of detail that makes your UI feel expensive.

Here’s a button that transitions from an idle state to a loading state with a satisfying layout animation:

// components/animated/LoadingButton.tsx
"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Button } from "@/components/ui/button";
import { Loader2, Check } from "lucide-react";

type ButtonState = "idle" | "loading" | "success";

export function LoadingButton({ onClick }: { onClick: () => Promise<void> }) {
  const [state, setState] = useState<ButtonState>("idle");

  const handleClick = async () => {
    setState("loading");
    await onClick();
    setState("success");
    setTimeout(() => setState("idle"), 2000);
  };

  return (
    <Button
      onClick={handleClick}
      disabled={state !== "idle"}
      className="relative overflow-hidden min-w-35"
    >
      <AnimatePresence mode="wait">
        {state === "idle" && (
          <motion.span
            key="idle"
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.15 }}
          >
            Submit
          </motion.span>
        )}

        {state === "loading" && (
          <motion.span
            key="loading"
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.15 }}
            className="flex items-center gap-2"
          >
            <Loader2 className="h-4 w-4 animate-spin" />
            Submitting...
          </motion.span>
        )}

        {state === "success" && (
          <motion.span
            key="success"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.15 }}
            className="flex items-center gap-2"
          >
            <Check className="h-4 w-4" />
            Done!
          </motion.span>
        )}
      </AnimatePresence>
    </Button>
  );
}

A few things make this work well:

• mode="wait" on AnimatePresence ensures the current content fully exits before the next content enters, preventing both states from being visible at the same time.

• Each state has a unique key. This is required AnimatePresence to detect which child is entering and which is exiting.

• overflow-hidden on the button clips any content that slides outside the button boundary during transition.

• min-w-35 prevents the button from resizing as the label content changes width, a small detail that makes the whole thing feel stable.

Usage:

import { LoadingButton } from "@/components/animated/LoadingButton";

export default function Page() {
  const handleSubmit = async () => {
    await fetch("/api/submit", { method: "POST" });
  };

  return <LoadingButton onClick={handleSubmit} />;
}

Dialogs & Sheets That Feel Alive

Out of the box, Shadcn Dialog and Sheet use CSS-based transitions defined in globals.css. They work, but they’re basic fade/slide animations that you can’t customize from within React. The moment you want a spring-driven entrance or a custom exit, you’re stuck.

Here’s how to take full control.

Using forceMount + AnimatePresence to Own the Lifecycle

The key to animating Radix UI-based components (which shadcn Dialog and Sheet are built on) is understanding that Radix controls when components mount and unmount. By default, it unmounts them when closed — which means your exit animation never gets a chance to play.

The fix is forceMount. When you pass forceMount To a Radix component, it stays mounted in the DOM regardless of open state. Now you control the visibility entirely through Motion:

// components/animated/AnimatedDialog.tsx
"use client";

import { Dialog as DialogPrimitive } from "radix-ui";
import { motion, AnimatePresence, type Variants } from "motion/react";
import {
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

const overlayVariants: Variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

const contentVariants: Variants = {
  hidden: { opacity: 0, scale: 0.95, y: 8 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: { type: "spring", stiffness: 300, damping: 25 },
  },
  exit: {
    opacity: 0,
    scale: 0.95,
    y: 8,
    transition: { duration: 0.15, ease: "easeIn" },
  },
};

interface AnimatedDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description?: string;
  children: React.ReactNode;
}

export function AnimatedDialog({
  open,
  onOpenChange,
  title,
  description,
  children,
}: AnimatedDialogProps) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal forceMount>
        <AnimatePresence>
          {open && (
            <>
              {/* Animated Overlay */}
              <DialogPrimitive.Overlay asChild forceMount>
                <motion.div
                  key="overlay"
                  variants={overlayVariants}
                  initial="hidden"
                  animate="visible"
                  exit="hidden"
                  transition={{ duration: 0.2 }}
                  className="fixed inset-0 z-50 bg-black/80"
                />
              </DialogPrimitive.Overlay>

              {/* Animated Content */}
              <DialogPrimitive.Content asChild forceMount>
                <motion.div
                  key="content"
                  variants={contentVariants}
                  initial="hidden"
                  animate="visible"
                  exit="exit"
                  className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg rounded-lg bg-background p-6 shadow-lg focus:outline-none"
                >
                  <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    {description && (
                      <DialogDescription>{description}</DialogDescription>
                    )}
                  </DialogHeader>
                  {children}
                </motion.div>
              </DialogPrimitive.Content>
            </>
          )}
        </AnimatePresence>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

Notice the spring on enter (type: "spring") but a tween on exit (duration: 0.15, ease: "easeIn"). This is intentional; entrances should feel alive and physical, but exits should be quick and get out of the way. Users don’t watch things leave; they watch things arrive.

Usage:

import { useState } from "react";
import { AnimatedDialog } from "@/components/animated/AnimatedDialog";
import { Button } from "@/components/ui/button";

export default function Page() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <AnimatedDialog
        open={open}
        onOpenChange={setOpen}
        title="Confirm Action"
        description="Are you sure you want to continue?"
      >
        <p className="text-sm text-muted-foreground">This cannot be undone.</p>
      </AnimatedDialog>
    </>
  );
}

Animated Sheet with Directional Awareness

The Shadcn Sheet (drawer) component is a perfect candidate for directional animation — it should slide in from whatever side it’s coming from. Here’s a reusable animated Sheet that handles all four directions:

// components/animated/AnimatedSheet.tsx
"use client";

import { Dialog as SheetPrimitive } from "radix-ui";
import { motion, AnimatePresence } from "motion/react";
import { SheetHeader, SheetTitle } from "@/components/ui/sheet";
import type { Variants } from "motion";

type SheetSide = "top" | "bottom" | "left" | "right";

const getSideClasses = (side: SheetSide): string => {
  switch (side) {
    case "right":
      return "inset-y-0 right-0 w-3/4 max-w-sm";
    case "left":
      return "inset-y-0 left-0 w-3/4 max-w-sm";
    case "top":
      return "inset-x-0 top-0 h-auto";
    case "bottom":
      return "inset-x-0 bottom-0 h-auto";
  }
};

const getSlideVariants = (side: SheetSide): Variants => {
  const distance = "100%";
  const axis = side === "left" || side === "right" ? "x" : "y";
  const direction =
    side === "right" || side === "bottom" ? distance : `-${distance}`;

  return {
    hidden: { [axis]: direction, opacity: 0 },
    visible: {
      [axis]: 0,
      opacity: 1,
      transition: { type: "spring", stiffness: 300, damping: 30 },
    },
    exit: {
      [axis]: direction,
      opacity: 0,
      transition: { duration: 0.2, ease: "easeIn" },
    },
  } as Variants;
};

interface AnimatedSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  side?: SheetSide;
  title: string;
  children: React.ReactNode;
}

export function AnimatedSheet({
  open,
  onOpenChange,
  side = "right",
  title,
  children,
}: AnimatedSheetProps) {
  const variants = getSlideVariants(side);

  return (
    <SheetPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <SheetPrimitive.Portal forceMount>
        <AnimatePresence>
          {open && (
            <>
              {/* Animated Overlay */}
              <SheetPrimitive.Overlay asChild forceMount>
                <motion.div
                  key="overlay"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  className="fixed inset-0 z-50 bg-black/80"
                />
              </SheetPrimitive.Overlay>

              {/* Animated Sheet Panel */}
              <SheetPrimitive.Content asChild forceMount>
                <motion.div
                  key="sheet"
                  variants={variants}
                  initial="hidden"
                  animate="visible"
                  exit="exit"
                  className={`fixed z-50 bg-background p-6 shadow-xl focus:outline-none ${getSideClasses(side)}`}
                >
                  <SheetHeader>
                    <SheetTitle>{title}</SheetTitle>
                  </SheetHeader>
                  {children}
                </motion.div>
              </SheetPrimitive.Content>
            </>
          )}
        </AnimatePresence>
      </SheetPrimitive.Portal>
    </SheetPrimitive.Root>
  );
}

The getSlideVariants function dynamically computes which axis to slide on and which direction to slide from based on the side prop. This means one component handles all four cases cleanly — no copy-pasted variant objects.

Usage:

import { useState } from "react";
import { AnimatedSheet } from "@/components/animated/AnimatedSheet";
import { Button } from "@/components/ui/button";

export default function Page() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Sheet</Button>
      <AnimatedSheet open={open} onOpenChange={setOpen} side="right" title="Settings">
        <p className="text-sm text-muted-foreground mt-2">Your settings go here.</p>
      </AnimatedSheet>
    </>
  );
}

Animated Cards, Accordion & Collapsibles

Height Animation with the layout Prop

Animating height to auto is one of those things that sounds trivial and turns out to be genuinely hard. CSS transitions don’t support height: auto. JavaScript-based solutions require measuring DOM elements manually. It’s a mess.

Motion’s layout prop solves this elegantly. When you add layout to a motion element, Motion automatically detects size changes and animates between them — including changes to height caused by content being added or removed.

Here’s a collapsible card using layout:

// components/animated/CollapsibleCard.tsx
"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ChevronDown } from "lucide-react";

export function CollapsibleCard({
  title,
  preview,
  children,
}: {
  title: string,
  preview: string,
  children: React.ReactNode,
}) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div
      layout
      className="overflow-hidden rounded-lg border bg-card shadow-sm py-6 w-full"
    >
      <CardHeader className="cursor-pointer" onClick={() => setIsOpen(!isOpen)}>
        <div className="flex items-center justify-between">
          <CardTitle className="text-base">{title}</CardTitle>
          <motion.div
            animate={{ rotate: isOpen ? 180 : 0 }}
            transition={{ type: "spring", stiffness: 300, damping: 25 }}
          >
            <ChevronDown className="h-4 w-4 text-muted-foreground" />
          </motion.div>
        </div>
        {!isOpen && (
          <p className="text-sm text-muted-foreground mt-1">{preview}</p>
        )}
      </CardHeader>

      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.25, ease: "easeInOut" }}
            style={{ overflow: "hidden" }}
          >
            <CardContent>{children}</CardContent>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

Two things to pay attention to:

• initial={false} on AnimatePresence prevents the content from animating in on the initial render — it only animates when the user actually toggles it.

• style={{ overflow: "hidden" }} on the animated div is essential. Without it, the content will be visible outside the collapsing container during the animation.

The chevron rotation is a small touch but makes a big difference — it gives users a clear visual cue about the direction of the interaction.

Checkout the best Shadcn Cards & Shadcn Accordian Components.

Usage:

import { CollapsibleCard } from "@/components/animated/CollapsibleCard";

export default function Page() {
  return (
    <CollapsibleCard
      title="What is Motion?"
      preview="Click to learn more about Motion..."
    >
      <p className="text-sm text-muted-foreground">
        Motion is a production-grade animation library for React with a clean,
        declarative API built on top of physics-based animations.
      </p>
    </CollapsibleCard>
  );
}

Hover-Tilt Effect with useMotionValue + useTransform

This is one of those effects that makes people ask, “How did you do that?” — a card that tilts in 3D based on where the cursor is hovering. It feels premium without being distracting.

// components/animated/TiltCard.tsx
"use client";

import { useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function TiltCard({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  const cardRef = useRef<HTMLDivElement>(null);

  // Raw mouse position values
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  // Smooth out the raw values with a spring
  const springX = useSpring(mouseX, { stiffness: 150, damping: 20 });
  const springY = useSpring(mouseY, { stiffness: 150, damping: 20 });

  // Transform mouse position into rotation values
  const rotateX = useTransform(springY, [-0.5, 0.5], [8, -8]);
  const rotateY = useTransform(springX, [-0.5, 0.5], [-8, 8]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;

    const rect = cardRef.current.getBoundingClientRect();

    // Normalize cursor position between -0.5 and 0.5
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;

    mouseX.set(x);
    mouseY.set(y);
  };

  const handleMouseLeave = () => {
    mouseX.set(0);
    mouseY.set(0);
  };

  return (
    <motion.div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: "preserve-3d",
        perspective: 800,
      }}
      whileHover={{ scale: 1.02 }}
      transition={{ type: "spring", stiffness: 300, damping: 25 }}
    >
      <Card>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
        </CardHeader>
        <CardContent>{children}</CardContent>
      </Card>
    </motion.div>
  );
}

Here’s what’s happening under the hood:

• useMotionValue creates a reactive value that Motion can track — think of it like useState but optimized for animations (it doesn’t trigger re-renders).

• useSpring wraps that value in a spring physics simulation, so instead of the rotation snapping instantly to where your cursor is, it follows smoothly with a bit of lag, which is exactly what makes the tilt feel natural.

• useTransform maps one range of values to another. Here we’re saying: “when springY is at -0.5 (top of card), rotate 8 degrees forward; when it’s at 0.5 (bottom), rotate -8 degrees back.”

The combination gives you smooth, physics-driven 3D tilt that resets elegantly when the cursor leaves.

Usage:

import { TiltCard } from "@/components/animated/TiltCard";

export default function Page() {
  return (
    <TiltCard title="Spring Physics">
      <p className="text-sm text-muted-foreground">
        Hover over this card to see the 3D tilt effect in action.
      </p>
    </TiltCard>
  );
}

Toasts, Alerts & Feedback Components

Animating Shadcn Toasts with Custom Variants

shadcn ships with Sonner for toasts, which has its own built-in animations. But sometimes you want full control — your own toast system with custom enter/exit behavior. Here’s how to build one with Motion:

// components/animated/ToastContainer.tsx
"use client";

import { useState, useCallback } from "react";
import { motion, AnimatePresence, type Variants } from "motion/react";
import { X, CheckCircle, AlertCircle, Info } from "lucide-react";

type ToastType = "success" | "error" | "info";

interface Toast {
  id: string;
  message: string;
  type: ToastType;
}

const toastVariants: Variants = {
  hidden: {
    opacity: 0,
    x: 60,
    scale: 0.9,
  },
  visible: {
    opacity: 1,
    x: 0,
    scale: 1,
    transition: {
      type: "spring",
      stiffness: 350,
      damping: 25,
    },
  },
  exit: {
    opacity: 0,
    x: 60,
    scale: 0.9,
    transition: { duration: 0.2, ease: "easeIn" },
  },
};

const icons = {
  success: <CheckCircle className="h-4 w-4 text-green-500" />,
  error: <AlertCircle className="h-4 w-4 text-red-500" />,
  info: <Info className="h-4 w-4 text-blue-500" />,
};

const toastColors: Record<ToastType, string> = {
  success:
    "border-green-200 bg-green-50 dark:bg-green-950 dark:border-green-800",
  error: "border-red-200 bg-red-50 dark:bg-red-950 dark:border-red-800",
  info: "border-blue-200 bg-blue-50 dark:bg-blue-950 dark:border-blue-800",
};

export function useToast() {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = useCallback((message: string, type: ToastType = "info") => {
    const id = crypto.randomUUID();
    setToasts((prev) => [...prev, { id, message, type }]);
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 4000);
  }, []);

  const removeToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }, []);

  return { toasts, addToast, removeToast };
}

export function ToastContainer({
  toasts,
  onRemove,
}: {
  toasts: Toast[];
  onRemove: (id: string) => void;
}) {
  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 w-80">
      <AnimatePresence mode="popLayout">
        {toasts.map((toast) => (
          <motion.div
            key={toast.id}
            layout
            variants={toastVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
            className={`flex items-start gap-3 rounded-lg border p-4 shadow-md ${toastColors[toast.type]}`}
          >
            <span className="mt-0.5 shrink-0">{icons[toast.type]}</span>
            <p className="flex-1 text-sm font-medium">{toast.message}</p>
            <button
              onClick={() => onRemove(toast.id)}
              className="shrink-0 rounded-sm opacity-70 hover:opacity-100"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

Two Motion features worth highlighting here:

• mode="popLayout" on AnimatePresence is different from mode="wait". Instead of waiting for one element to exit before the next enters, popLayout immediately removes the exiting element from the layout flow and lets the remaining elements reflow smoothly. For a toast stack where items can be dismissed while others are animating in, this feels much more natural.

• layout on each toast item ensures that when one toast is removed, and the others shift up, that shift is animated rather than instant. Without it, toasts would teleport to their new positions. With it, they slide smoothly.

Usage:

"use client";

import { useToast, ToastContainer } from "@/components/animated/ToastContainer";
import { Button } from "@/components/ui/button";

export default function Page() {
  const { toasts, addToast, removeToast } = useToast();

  return (
    <>
      <div className="flex gap-2">
        <Button onClick={() => addToast("File saved successfully!", "success")}>
          Success
        </Button>
        <Button onClick={() => addToast("Something went wrong.", "error")} variant="destructive">
          Error
        </Button>
      </div>
      <ToastContainer toasts={toasts} onRemove={removeToast} />
    </>
  );
}

If you require catchy alerts, Shadcn Alert components are the best to use.

Shake Animation for Form Validation Errors

Nothing communicates “wrong input” more clearly than a quick shake animation. Here’s a reusable hook that triggers a shake on any element:

// components/animated/ShakeField.tsx
"use client";

import { useState } from "react";
import {
  AnimatePresence,
  motion,
  useAnimation,
  type Transition,
} from "motion/react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const shakeKeyframes = {
  x: [0, -8, 8, -8, 8, -4, 4, 0],
};

const shakeTransition: Transition = {
  duration: 0.5,
  ease: "easeInOut",
};

export function ValidatedInput({
  label,
  validate,
}: {
  label: string,
  validate: (value: string) => string | null,
}) {
  const [value, setValue] = useState("");
  const [error, setError] = useState<string | null>(null);
  const controls = useAnimation();

  const handleBlur = async () => {
    const errorMessage = validate(value);
    if (errorMessage) {
      setError(errorMessage);
      await controls.start(shakeKeyframes, shakeTransition);
    } else {
      setError(null);
    }
  };

  return (
    <div className="space-y-1.5">
      <Label htmlFor={label}>{label}</Label>
      <motion.div animate={controls}>
        <Input
          id={label}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onBlur={handleBlur}
          className={error ? "border-red-500 focus-visible:ring-red-500" : ""}
          aria-invalid={!!error}
          aria-describedby={error ? `${label}-error` : undefined}
        />
      </motion.div>
      <AnimatePresence>
        {error && (
          <motion.p
            id={`${label}-error`}
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -4 }}
            transition={{ duration: 0.15 }}
            className="text-xs text-red-500"
          >
            {error}
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  );
}

• useAnimation() returns an animation controls object that lets you trigger animations imperatively — perfect for cases like this where the animation is in response to an async event (validation) rather than a state change.

• The shakeKeyframes object uses an array of values instead of a start/end pair — Motion interpolates through each value in sequence, creating the back-and-forth shake effect. The values [0, -8, 8, -8, 8, -4, 4, 0] are intentionally asymmetric and decreasing — it mimics how a real physical shake loses energy over time.

And notice the error message itself gets an entrance animation - it slides down from above and fades in. That tiny detail makes error states feel considered rather than abrupt.

Usage:

import { ValidatedInput } from "@/components/animated/ShakeField";

export default function Page() {
  return (
    <ValidatedInput
      label="Email"
      validate={(value) => {
        if (!value.includes("@")) return "Please enter a valid email address.";
        return null;
      }}
    />
  );
}

Part 3: Intermediate Patterns

Page & Route Transitions in Next.js App Router

Route transitions are one of the most requested animation features in any React app. They’re also one of the trickiest to implement correctly — especially in Next.js App Router, which changed how layouts and pages work compared to the Pages Router.

Let’s talk about why it’s hard, and then build something that actually works.

Why Route Transitions Are Hard in App Router

In the old Pages Router, you had a single _app.tsx where every page rendered. Wrapping it in AnimatePresence was straightforward — the key change on every route, Motion detected the old component exiting and the new one entering, done.

App Router broke this pattern. Pages now render inside nested layouts that persist across routes. React doesn’t unmount and remount the layout on navigation — only the changed segment re-renders. This means:

• There’s no single place to put AnimatePresence That works for all routes

• The key trick doesn’t work the same way

• Exit animations are particularly difficult because Next.js starts rendering the new page before the old one has finished exiting

The honest truth: full exit animations between routes are still not cleanly solved in App Router as of early 2026. You can get entrance animations working reliably, and with some workarounds you can get a passable exit — but the seamless page-to-page transition you might be imagining requires either a third-party library like next-view-transitions or accepting some limitations.

Here’s what works well today.

Layout-Level AnimatePresence Setup

The most reliable approach is to add entrance animations at the layout level, using the pathname as a key to trigger re-animation on route change:

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// app/providers.tsx
"use client";

import { AnimatePresence } from "motion/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <AnimatePresence mode="wait">{children}</AnimatePresence>;
}

Now, create a reusable PageTransition wrapper that you use inside each page:

// components/animated/PageTransition.tsx
"use client";

import { motion, type Variants } from "motion/react";
import { usePathname } from "next/navigation";

const pageVariants: Variants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 24,
      staggerChildren: 0.05,
    },
  },
  exit: {
    opacity: 0,
    y: -8,
    transition: { duration: 0.15, ease: "easeIn" },
  },
};

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <motion.main
      key={pathname}
      variants={pageVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
      {children}
    </motion.main>
  );
}

Use it on each page like this:

// app/dashboard/page.tsx
import { PageTransition } from "@/components/animated/PageTransition";

export default function DashboardPage() {
  return (
    <PageTransition>
      <h1>Dashboard</h1>
      {/* page content */}
    </PageTransition>
  );
}

The key={pathname} is what makes this work — when the route changes, pathname changes, React sees a new component with a different key, and AnimatePresence handles the enter/exit sequence.

“Gotcha: App Router layouts are server components by default. AnimatePresence is a client component, which is why we isolate it inside providers.tsx with "use client". Never add "use client" to your root layout — it forces your entire app to be client-rendered and kills the performance benefits of RSC.”

Usage:

// app/about/page.tsx
import { PageTransition } from "@/components/animated/PageTransition";

export default function AboutPage() {
  return (
    <PageTransition>
      <h1>About</h1>
      {/* page content */}
    </PageTransition>
  );
}

Wrap every page the same way — the transition plays automatically on each route change.

Scroll-Driven Animations with whileInView

Scroll animations are everywhere — and when done well, they make content feel like it’s being revealed intentionally rather than just dumped on the screen. When done poorly, they’re just annoying delays between the user and the content they want.

The rule I follow: scroll animations should reveal, not obstruct. If the animation delays the user from reading something they’ve scrolled to see, it’s too slow or too aggressive.

Viewport-Triggered Entrance Animations

whileInView is Motion’s simplest scroll animation tool. It animates an element when it enters the viewport, and optionally reverses when it leaves:

// components/animated/RevealOnScroll.tsx
"use client";

import { motion } from "motion/react";

interface RevealProps {
  children: React.ReactNode;
  delay?: number;
  className?: string;
}

export function RevealOnScroll({
  children,
  delay = 0,
  className,
}: RevealProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 32 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{
        type: "spring",
        stiffness: 260,
        damping: 24,
        delay,
      }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

Two viewport options worth understanding:

• once: true — the animation only plays once. After it’s played, Motion stops observing the element. This is almost always what you want for entrance animations. Replaying the animation every time the user scrolls past is disorienting.

• margin: "-80px" — shrinks the viewport by 80px before triggering. This means the animation triggers when the element is 80px into the viewport rather than right at the edge — it feels more intentional and less like it fired too early.

Use it to stagger a list of cards on a landing page:

// app/page.tsx
import { RevealOnScroll } from "@/components/animated/RevealOnScroll";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const features = [
  { title: "Fast", description: "Optimized for performance" },
  { title: "Accessible", description: "Built with a11y in mind" },
  { title: "Beautiful", description: "Polished UI out of the box" },
];

export default function HomePage() {
  return (
    <section className="grid grid-cols-1 md:grid-cols-3 gap-6 py-24">
      {features.map((feature, i) => (
        <RevealOnScroll key={feature.title} delay={i * 0.1}>
          <Card>
            <CardHeader>
              <CardTitle>{feature.title}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">{feature.description}</p>
            </CardContent>
          </Card>
        </RevealOnScroll>
      ))}
    </section>
  );
}

The stagger here is manual — each card gets a delay of i * 0.1. This is different from using staggerChildren in variants (which we’ll cover in Part 4) because whileInView fires independently per element as it enters the viewport. If all three cards enter the viewport at once, they’ll stagger. If the user scrolls slowly and they enter one at a time, each just plays immediately — which is also fine.

useScroll + useTransform for Parallax and Scroll Progress

whileInView is great for triggered animations, but for animations that are continuously tied to scroll position — parallax effects, progress bars, sticky header transforms — you need useScroll and useTransform.

Scroll Progress Indicator:

// components/animated/ScrollProgress.tsx
"use client";

import { motion, useScroll, useSpring } from "motion/react";

export function ScrollProgress() {
  const { scrollYProgress } = useScroll();

  // Smooth out the scroll progress with a spring
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <motion.div
      style={{ scaleX, transformOrigin: "left" }}
      className="fixed top-0 left-0 right-0 h-1 bg-primary z-50"
    />
  );
}

useScroll returns scrollYProgress — a MotionValue that goes from 0 to 1 as the user scrolls from top to bottom. We pipe it through useSpring to smooth out any jank from rapid scroll events, then use it as the scaleX of a full-width bar. The transformOrigin: "left" makes it grow from the left edge rather than the center.

Usage:

// app/layout.tsx
import { ScrollProgress } from "@/components/animated/ScrollProgress";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ScrollProgress />
        {children}
      </body>
    </html>
  );
}

Parallax Hero Section:

// components/animated/ParallaxHero.tsx
"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";

export function ParallaxHero() {
  const ref = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });

  // As we scroll through the hero, move content up at half speed (parallax)
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);

  return (
    <div ref={ref} className="relative h-screen overflow-hidden">
      <motion.div
        style={{ y, opacity }}
        className="absolute inset-0 flex flex-col items-center justify-center text-center px-4"
      >
        <h1 className="text-6xl font-bold tracking-tight">
          Build beautiful UIs
        </h1>
        <p className="mt-4 text-xl text-muted-foreground max-w-lg">
          With shadcn/ui and Motion, animation is part of the design language.
        </p>
      </motion.div>
    </div>
  );
}

The offset: ["start start", "end start"] tells Motion which portion of the scroll to track:

• "start start" — begin tracking when the top of the element reaches the top of the viewport

• "end start" — stop tracking when the bottom of the element reaches the top of the viewport

In plain English: track the scroll while the hero is visible on screen.

• useTransform then maps that 0–1 scroll progress to specific values — content moves up 30% and fades out as you scroll past. The effect makes the hero feel like it has depth.

Animated Sticky Header:

// components/animated/AnimatedHeader.tsx
"use client";

import { motion, useScroll, useMotionValueEvent } from "motion/react";
import { useState } from "react";

export function AnimatedHeader() {
  const { scrollY } = useScroll();
  const [isScrolled, setIsScrolled] = useState(false);

  // Listen to scroll position changes
  useMotionValueEvent(scrollY, "change", (latest) => {
    setIsScrolled(latest > 60);
  });

  return (
    <motion.header
      animate={{
        backgroundColor: isScrolled ? "var(--background)" : "transparent",
        boxShadow: isScrolled ? "0 1px 3px rgba(0,0,0,0.1)" : "none",
        backdropFilter: isScrolled ? "blur(12px)" : "blur(0px)",
      }}
      transition={{ duration: 0.2, ease: "easeInOut" }}
      className="fixed top-0 left-0 right-0 z-40 px-6 py-4"
    >
      <nav className="flex items-center justify-between max-w-6xl mx-auto">
        <span className="font-semibold">Logo</span>
        <div className="flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">
            Features
          </a>
          <a href="#" className="text-sm hover:text-primary transition-colors">
            Pricing
          </a>
          <a href="#" className="text-sm hover:text-primary transition-colors">
            Docs
          </a>
        </div>
      </nav>
    </motion.header>
  );
}

useMotionValueEvent is the right way to react to MotionValue changes inside components — it’s like addEventListener for motion values, but cleaned up automatically when the component unmounts. We use it here to flip a boolean that drives the header’s background and shadow.

“Performance tip: Animating backgroundColor, boxShadow, and backdropFilter triggers paint — not just compositing. For most headers this is fine since it only changes once on scroll past the threshold. But for continuously scroll-linked properties, stick to transform and opacity which run entirely on the GPU.”

Usage:

// app/layout.tsx
import { AnimatedHeader } from "@/components/animated/AnimatedHeader";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AnimatedHeader />
        <main>{children}</main>
      </body>
    </html>
  );
}

Gesture-Driven UI: Drag, Pan & Swipe

Drag interactions are where Motion really shines compared to CSS animations. Building a drag interaction with raw pointer events is dozens of lines of error-prone code — with Motion, it’s a prop.

drag Constraints and Elastic Boundaries

The simplest draggable element:

<motion.div drag>
  Drag me anywhere
</motion.div>

That’s it. But unconstrained dragging is rarely what you want. You’ll usually want to limit where the element can go:

// Constrain to a bounding box
<motion.div
  drag
  dragConstraints={{ top: -50, left: -50, right: 50, bottom: 50 }}
  dragElastic={0.2}   // how much it can go past constraints (0 = rigid, 1 = fully elastic)
  dragTransition={{ bounceStiffness: 300, bounceDamping: 20 }}
>
  Constrained drag
</motion.div>

dragElastic is a subtle but important property. Setting it to 0 makes the constraint feel like a hard wall — jarring and unnatural. A value of 0.1 to 0.3 lets the element stretch slightly past the boundary before snapping back, which gives the interaction a satisfying physical feel.

You can also constrain to the bounds of a parent element using a ref:

const containerRef = useRef(null);

<div ref={containerRef} className="relative w-80 h-80 border rounded-lg">
  <motion.div
    drag
    dragConstraints={containerRef}
    className="absolute w-16 h-16 bg-primary rounded-lg cursor-grab active:cursor-grabbing"
  />
</div>

Building a Swipeable Card Stack

This is the kind of component people spend hours building from scratch. With Motion it’s surprisingly approachable. Here’s a Tinder-style swipeable card stack:

// components/animated/SwipeableCards.tsx
"use client";

import { useState } from "react";
import { motion, useMotionValue, useTransform, AnimatePresence } from "motion/react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface CardData {
  id: number;
  title: string;
  description: string;
  color: string;
}

const cards: CardData[] = [
  { id: 1, title: "Card One", description: "Swipe me left or right", color: "bg-blue-100" },
  { id: 2, title: "Card Two", description: "Keep going...", color: "bg-purple-100" },
  { id: 3, title: "Card Three", description: "Last one!", color: "bg-green-100" },
];

function SwipeCard({
  card,
  onSwipe,
  isTop,
}: {
  card: CardData;
  onSwipe: (id: number, direction: "left" | "right") => void;
  isTop: boolean;
}) {
  const x = useMotionValue(0);

  // Rotate card as it's dragged
  const rotate = useTransform(x, [-200, 200], [-25, 25]);

  // Show like/dislike indicators
  const likeOpacity = useTransform(x, [20, 100], [0, 1]);
  const dislikeOpacity = useTransform(x, [-100, -20], [1, 0]);

  const handleDragEnd = () => {
    const xValue = x.get();
    if (Math.abs(xValue) > 100) {
      onSwipe(card.id, xValue > 0 ? "right" : "left");
    }
  };

  return (
    <motion.div
      style={{ x, rotate, position: "absolute", width: "100%" }}
      drag={isTop ? "x" : false}
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={1}
      onDragEnd={handleDragEnd}
      animate={{ scale: isTop ? 1 : 0.95 }}
      exit={{
        x: x.get() > 0 ? 300 : -300,
        opacity: 0,
        transition: { duration: 0.3 },
      }}
      className="cursor-grab active:cursor-grabbing"
    >
      <Card className={`${card.color} border-none shadow-lg`}>
        {/* Like indicator */}
        <motion.div
          style={{ opacity: likeOpacity }}
          className="absolute top-4 left-4 -rotate-15 border-4 border-green-500 text-green-500 font-bold text-xl px-2 py-1 rounded"
        >
          LIKE
        </motion.div>

        {/* Dislike indicator */}
        <motion.div
          style={{ opacity: dislikeOpacity }}
          className="absolute top-4 right-4 rotate-15 border-4 border-red-500 text-red-500 font-bold text-xl px-2 py-1 rounded"
        >
          NOPE
        </motion.div>

        <CardHeader>
          <CardTitle>{card.title}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground">{card.description}</p>
        </CardContent>
      </Card>
    </motion.div>
  );
}

export function SwipeableCards() {
  const [remaining, setRemaining] = useState(cards);

  const handleSwipe = (id: number, direction: "left" | "right") => {
    console.log(`Swiped ${direction}:`, id);
    setRemaining((prev) => prev.filter((c) => c.id !== id));
  };

  return (
    <div className="relative w-80 h-64 mx-auto">
      <AnimatePresence>
        {remaining
          .slice()
          .reverse()
          .map((card, i) => (
            <SwipeCard
              key={card.id}
              card={card}
              onSwipe={handleSwipe}
              isTop={i === remaining.length - 1}
            />
          ))}
      </AnimatePresence>

      {remaining.length === 0 && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          className="absolute inset-0 flex items-center justify-center"
        >
          <p className="text-muted-foreground font-medium">All caught up! 🎉</p>
        </motion.div>
      )}
    </div>
  );
}