saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography

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