A simple and lightweight animation component that animates children elements into view with CSS transitions, customizable directions, timing, blur effects, and intersection observer support.
Overview
The AnimateIn component provides a lightweight solution for animating content into view using CSS animations and React state management. It supports multiple animation directions (up, left, right, fade) with customizable delays, optional blur effects, and intersection observer functionality for scroll-triggered animations.
The component uses CSS transforms and filters for smooth, hardware-accelerated animations and provides both time-based (delay) and viewport-based (intersection observer) triggering options, making it perfect for landing pages, feature sections, and any content that needs elegant entrance animations.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/animate-in.json
Usage
Basic Usage with Delay
1import AnimateIn from "@/registry/animations/animate-in"23export function Component() {4 return (5 <AnimateIn direction="up" delay={200}>6 <h1 className="text-4xl font-bold">Hello World</h1>7 <p className="text-muted-foreground">8 This content fades in from bottom with a delay9 </p>10 </AnimateIn>11 )12}
Intersection Observer
1import AnimateIn from "@/registry/animations/animate-in"23export function Component() {4 return (5 <AnimateIn direction="up" useIntersectionObserver threshold={0.2}>6 <h1 className="text-4xl font-bold">Hello World</h1>7 <p className="text-muted-foreground">8 This content animates when it comes into view9 </p>10 </AnimateIn>11 )12}
Blur Animation
1import AnimateIn from "@/registry/animations/animate-in"23export function Component() {4 return (5 <AnimateIn direction="up" delay={200} enableBlur={true} blurAmount={10}>6 <h1 className="text-4xl font-bold">Blurred Entrance</h1>7 <p className="text-muted-foreground">8 This content animates with a blur-to-focus effect9 </p>10 </AnimateIn>11 )12}
Fade-in Only
1import AnimateIn from "@/registry/animations/animate-in"23export function Component() {4 return (5 <AnimateIn direction="fade" useIntersectionObserver threshold={0.1}>6 <div className="p-4 border rounded-lg">7 <h2 className="text-xl font-semibold">Fade In</h2>8 <p className="text-muted-foreground">9 This content fades in smoothly using only opacity10 </p>11 </div>12 </AnimateIn>13 )14}
API Reference
Name | Type | Description | Default |
---|---|---|---|
children | React.ReactNode | Content to animate | - |
direction | "up" | "left" | "right" | "fade" | Direction of the animation. Use "fade" for opacity-only animation | "up" |
delay | number | Delay before animation starts in milliseconds (ignored if using intersection observer) | 0 |
className | string | Additional CSS classes | "" |
useIntersectionObserver | boolean | Enable intersection observer for scroll-triggered animations | false |
threshold | number | Intersection observer threshold (0.0 to 1.0) | 0.1 |
triggerOnce | boolean | Whether animation should only trigger once | true |
duration | number | Animation duration in seconds | 0.6 |
enableBlur | boolean | Enable blur animation effect that transitions from blurred to clear | false |
blurAmount | number | Initial blur amount in pixels (used when enableBlur is true) | 8 |
Examples
Directions
Showcase content animating in from different directions.
Intersection Observer
Scroll-triggered animations using the Intersection Observer API. Elements animate into view as you scroll.
Staggered Animation
Animate multiple children with staggered timing for a cascading effect.
Fade Animation
Cards that fade in smoothly using only opacity changes, perfect for component showcases and grids.
Simple Delays
Multiple elements with different delays for smooth sequential animations.