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
/
Text Shimmer

Text Shimmer

An animated shimmer effect that moves across text continuously.

Preview

Animate your ideas with motion-primitives

Installation

Copy and paste the component code into your project.

Examples

Basic

Generating code...

Custom Colors

Hi, how are you?

Different Durations

Fast shimmer (0.8s)

Default shimmer (2s)

Slow shimmer (4s)

Custom Spread

Narrow spread (1)

Default spread (2)

Wide spread (4)

Large Text

Motion Primitives

API Reference

PropTypeDefaultDescription
childrenstring-The text content to apply shimmer effect
asElementType"p"The HTML element to render
classNamestring-Additional CSS classes
durationnumber2Animation duration in seconds
spreadnumber2Width multiplier for the shimmer gradient

Custom Colors

Use CSS variables to customize colors:

  • --base-color - Base text color
  • --base-gradient-color - Shimmer gradient color

On This Page

  • Preview
  • Installation
  • Examples
  • 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.