Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Animated Group

Animated Group

Animate a group of elements with staggered entrance animations using Framer Motion.

1
2
3
4

Installation

npx shadcn@latest add animated-group

Usage

1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { AnimatedGroup } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/animated-group"
2 
3600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {
4  600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return (
5    600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> 600 dark:text-blue-400">preset=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"blur-slide" 600 dark:text-blue-400">className=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"flex gap-4">
6      
Item 1
7      
Item 2
8      
Item 3
9    600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>
10  )
11}

Examples

Fade

Simple fade-in animation with stagger effect.

1
2
3
4

Slide

Slide up animation from below.

1
2
3
4

Blur Slide

Combined blur and slide animation for a smooth entrance effect.

1
2
3
4

Scale

Scale up animation from smaller size.

1
2
3
4

Zoom

Zoom in animation with spring physics.

1
2
3
4

Project Cards

Animate a grid of project cards with staggered entrance.

Sypher Studios

Edited 9 months ago

Design System

Edited 2 weeks ago

Portfolio Site

Edited 1 month ago

E-commerce App

Edited 3 days ago

Dashboard UI

Edited 1 week ago

Mobile App

Edited 5 months ago

Custom Variants

Define custom animation variants for complete control over the animation.

1
2
3
4

Hover Example

Animate elements on hover using Framer Motion.

1
2
3
4

API Reference

PropTypeDefaultDescription
presetPresetType-Animation preset: fade, slide, scale, blur, blur-slide, zoom, flip, bounce, rotate, swing
variantsobject-Custom Framer Motion variants for container and item
classNamestring-Additional CSS classes for the container
asElementType"div"HTML element type for the container
asChildElementType"div"HTML element type for child wrappers

On This Page

  • Installation
  • Usage
  • Examples
  • Fade
  • Slide
  • Blur Slide
  • Scale
  • Zoom
  • Project Cards
  • Custom Variants
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.