Animate In

Versatile viewport-triggered entrance animation wrapper. 7 variants: fade, slide-up/down/left/right, scale, rotate.

fade

slide-up

scale

rotate

Code

import { AnimateIn } from "@/components/ui/animate-in"

export default function Example() {
  return (
    <AnimateIn variant="slide-up" delay={200}>
      <div className="rounded-xl border border-border bg-surface-1 p-8">
        <h2 className="text-2xl font-bold">Animated entrance</h2>
        <p className="text-text-2 mt-2">Slides up and fades in when it enters the viewport.</p>
      </div>
    </AnimateIn>
  )
}

Installation

$npx particleui-cli add animate-in

Usage

TSX

import { AnimateIn } from "@/components/ui/animate-in"

export default function Example() {
  return (
    <AnimateIn variant="slide-up" delay={200}>
      <div className="rounded-xl border border-border bg-surface-1 p-8">
        <h2 className="text-2xl font-bold">Animated entrance</h2>
        <p className="text-text-2 mt-2">Slides up and fades in when it enters the viewport.</p>
      </div>
    </AnimateIn>
  )
}

Examples

Variants

Choose the entrance animation with the variant prop.

TSX

import { AnimateIn } from "@/components/ui/animate-in"

export default function Example() {
  return (
    <div className="space-y-3">
      <AnimateIn variant="fade">
        <div className="rounded-lg border border-border bg-surface-1 px-4 py-3 text-sm">fade</div>
      </AnimateIn>
      <AnimateIn variant="slide-up" delay={100}>
        <div className="rounded-lg border border-border bg-surface-1 px-4 py-3 text-sm">slide-up</div>
      </AnimateIn>
      <AnimateIn variant="slide-right" delay={200}>
        <div className="rounded-lg border border-border bg-surface-1 px-4 py-3 text-sm">slide-right</div>
      </AnimateIn>
      <AnimateIn variant="scale" delay={300}>
        <div className="rounded-lg border border-border bg-surface-1 px-4 py-3 text-sm">scale</div>
      </AnimateIn>
    </div>
  )
}

Staggered delay

Use the delay prop (ms) to stagger multiple AnimateIn elements.

TSX

import { AnimateIn } from "@/components/ui/animate-in"

export default function Example() {
  const items = ["First", "Second", "Third", "Fourth"]
  return (
    <div className="space-y-2">
      {items.map((item, i) => (
        <AnimateIn key={item} variant="slide-up" delay={i * 80}>
          <div className="rounded-lg border border-border bg-surface-1 px-4 py-3 text-sm">{item}</div>
        </AnimateIn>
      ))}
    </div>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
variant	AnimateInVariant	`"fade"`	no
delay	number	`0`	no
duration	number	`500`	no
className	string	—	no

Details

Source filecomponents/ui/animate-in.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—