Saturation UI - Component Library

Components

Text Effect

Animate text with various effects and timing controls.

Preview

Animate your ideas with motion-primitives

Installation

Copy and paste the following code into your project.

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

Usage

import { TextEffect } from '@/components/ui/text-effect'

export function Example() {
  return (
    <TextEffect per="char" preset="fade">
      Animate your ideas
    </TextEffect>
  )
}

Examples

Blur

Text appears with blur effect

Fade In Blur

Text fades in with blur and slide

Scale

Text scales up from zero

Slide

Text slides up from below

Per Character

Character by character

Per Word

Word by word animation

Per Line

First lineSecond lineThird line

API Reference

Prop	Type	Default	Description
children	string	-	The text content to animate
per	'char' \| 'word' \| 'line'	'word'	Animation granularity
preset	'blur' \| 'fade-in-blur' \| 'scale' \| 'fade' \| 'slide'	'fade'	Animation preset type
delay	number	0	Delay before animation starts (seconds)
speedReveal	number	1	Speed multiplier for stagger timing
speedSegment	number	1	Speed multiplier for segment animation
trigger	boolean	true	Controls animation trigger
as	keyof JSX.IntrinsicElements	'p'	HTML element to render as
className	string	-	Additional CSS classes
variants	object	-	Custom Framer Motion variants

On This Page

Preview
Installation
Usage
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.