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
Docs/Components/Text Effect

Text Effect

Animated text reveal effects.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/text-effect.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

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.
PreviousTabsNextText Shimmer

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