Motion Variants

A collection of pre-built Framer Motion animation variants for consistent, performant animations across your app.

Preview

fadeInUp

staggerContainer + hoverLift

Installation

npx shadcn@latest add @shadszn/motion

Available Variants

fadeIn

Simple opacity fade. Duration: 0.4s.

import { fadeIn } from "@/lib/motion"

<motion.div variants={fadeIn} initial="hidden" animate="visible">
  Content fades in
</motion.div>

fadeInUp

Fade in with upward slide (16px). Duration: 0.5s.

import { fadeInUp } from "@/lib/motion"

<motion.div variants={fadeInUp} initial="hidden" animate="visible">
  Slides up and fades in
</motion.div>

fadeInDown

Fade in with downward slide (12px). Duration: 0.4s.

import { fadeInDown } from "@/lib/motion"

<motion.div variants={fadeInDown} initial="hidden" animate="visible">
  Slides down and fades in
</motion.div>

scaleIn

Fade in with scale from 0.95. Duration: 0.3s.

import { scaleIn } from "@/lib/motion"

<motion.div variants={scaleIn} initial="hidden" animate="visible">
  Scales up and fades in
</motion.div>

slideInFromRight / slideInFromLeft

Horizontal slide (24px) with fade. Duration: 0.4s.

import { slideInFromRight, slideInFromLeft } from "@/lib/motion"

<motion.div variants={slideInFromRight} initial="hidden" animate="visible">
  Slides in from right
</motion.div>

staggerContainer + staggerItem

Parent-child pattern for staggered list animations. 80ms between children.

import { staggerContainer, staggerItem } from "@/lib/motion"

<motion.ul variants={staggerContainer} initial="hidden" animate="visible">
  {items.map((item) => (
    <motion.li key={item.id} variants={staggerItem}>
      {item.label}
    </motion.li>
  ))}
</motion.ul>

pageTransition

Fade + slight vertical slide for page-level transitions. Duration: 0.35s.

import { pageTransition } from "@/lib/motion"

<motion.main variants={pageTransition} initial="hidden" animate="visible" exit="exit">
  {children}
</motion.main>

hoverLift / tapScale / hoverScale

Interaction presets for hover and tap states. Spread directly onto motion elements.

import { hoverLift, tapScale, hoverScale } from "@/lib/motion"

{/* Lifts up 4px on hover */}
<motion.div {...hoverLift}>Hover me</motion.div>

{/* Scales down to 0.97 on tap */}
<motion.button {...tapScale}>Click me</motion.button>

{/* Scales up on hover, down on tap */}
<motion.div {...hoverScale}>Interactive card</motion.div>