saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor

Animate On Scroll

Motion-powered scroll reveal wrapper with fade, slide, and scale variants. Includes stagger support for lists.

Fade Up (default)

This element fades in from below

Fade In

This element fades in with no movement

Fade Left

Fade Right

Scale In

This element scales up from 95%

Stagger One

Stagger Two

Stagger Three

Features

  • 5 animation variants — fadeUp, fadeIn, fadeLeft, fadeRight, scaleIn
  • Stagger support — StaggerOnScroll + StaggerItem for list animations
  • Reduced motion — Respects prefers-reduced-motion
  • Configurable delay — Sequence multiple elements

API Reference

PropTypeDefaultDescription
variant"fadeUp" | "fadeIn" | "fadeLeft" | "fadeRight" | "scaleIn""fadeUp"Animation direction/style
delaynumber0Delay before animation starts (seconds)
oncebooleantrueOnly animate once when scrolled into view
classNamestring-Additional className