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

Activity Ticker

An infinite-scrolling vertical feed of activity/transaction cards with status badges. Great for fintech, SaaS dashboards, and social proof sections.

KYC Submitted

Steven Kirk, London, UK

Completed

USD Deposit (ACH)

$500,000 from J. Kirk

Credited

+$500 PYUSD

from U80a...7D0a

Confirming

1,000,000 USDC

to External Wallet

Pending

KYC Submitted

Steven Kirk, London, UK

Completed

USD Deposit (ACH)

$500,000 from J. Kirk

Credited

+$500 PYUSD

from U80a...7D0a

Confirming

1,000,000 USDC

to External Wallet

Pending

KYC Submitted

Steven Kirk, London, UK

Completed

USD Deposit (ACH)

$500,000 from J. Kirk

Credited

+$500 PYUSD

from U80a...7D0a

Confirming

1,000,000 USDC

to External Wallet

Pending

Features

  • Infinite vertical scroll — Seamless upward loop using useAnimationFrame
  • Status badges — Completed, pending, confirming, credited variants
  • Edge fade — Gradient mask fades cards at top and bottom
  • Viewport-aware — Pauses animation when offscreen
  • Customizable speed — Configurable scroll speed and gap

API Reference

PropTypeDefaultDescription
itemsActivityItem[]-Array of activity items with id, icon, title, subtitle, status, statusVariant
speednumber30Scroll speed in pixels per second
gapnumber16Gap between cards in pixels
cardHeightnumber80Card height in pixels
classNamestring-Additional className