saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Text Shimmer

Text Shimmer

Shimmering text effect for loading states or emphasis.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/text-shimmer

Usage

import { TextShimmer } from "@/components/ui/text-shimmer"
<TextShimmer>Loading...</TextShimmer>

Examples

Custom Colors

Loading...
Custom color shimmer.

Durations

Loading...
Fast, default, slow.

Custom Spread

Loading...
Narrow, default, wide.

Large Text

Loading...
Large heading shimmer.

API Reference

PropTypeDefaultDescription
children*string—The text to shimmer.
durationnumber2Animation duration in seconds.

On This Page

  • Installation
  • Usage
  • Examples
  • Custom Colors
  • Durations
  • Custom Spread
  • Large Text
  • API Reference

Shimmering Text

A beautiful loading effect for headlines

Blue Shimmer

Purple Shimmer

Orange Shimmer

Fast (0.8s)

Quick shimmer effect

Default (2s)

Default shimmer speed

Slow (4s)

Slow and elegant shimmer

Narrow (spread: 1)

Narrow shimmer width

Default (spread: 2)

Default shimmer width

Wide (spread: 4)

Wide shimmer width

Big Bold Shimmer

A subtitle with matching shimmer effect