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 Effect

Text Effect

Animated text reveal effects.

Loading...

Installation

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

Usage

import { TextEffect } from "@/components/ui/text-effect"
<TextEffect preset="fade">Hello World</TextEffect>

Examples

Blur

Loading...
Blur preset.

Fade In Blur

Loading...
Fade with blur and slide.

Scale

Loading...
Scale up from zero.

Slide

Loading...
Slide up animation.

Per Character

Loading...
Character by character.

Per Line

Loading...
Line by line animation.

API Reference

PropTypeDefaultDescription
preset"fade" | "blur" | "slide"—Animation preset.
per"char" | "word" | "line""word"Animate per character, word, or line.

On This Page

  • Installation
  • Usage
  • Examples
  • Blur
  • Fade In Blur
  • Scale
  • Slide
  • Per Character
  • Per Line
  • API Reference

Blur Preset

Animated TextAnimated Text

Fade-in Blur

Words animate one by one with blurWords animate one by one with blur

Slide Preset

Smooth sliding animation effectSmooth sliding animation effect

Text reveals through blurText reveals through blur

Words fade in with blur and slide up smoothlyWords fade in with blur and slide up smoothly

Scale UpScale Up

Each word slides up into viewEach word slides up into view

Character by characterCharacter by character

First line animates inSecond line follows afterThird line completes the reveal