Scroll Text Effect

MAX

A scroll text effect for elements

Demo

Animate your ideas with CSS

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates

All animations

No subscriptions

No hidden fees

$19.99

Payment once and get lifetime access

Usage Example

// Basic usage with word-by-word animation
<ScrollTextEffect effect="slide" splitBy="word" speed={1.5}>
  Animate your ideas with CSS
</ScrollTextEffect>
 
// Character-by-character with custom threshold
<ScrollTextEffect 
  effect="scale" 
  splitBy="char" 
  staggerDelay={0.1}
  threshold={0.3}
>
  Each character appears individually
</ScrollTextEffect>
 
// Line-by-line animation
<ScrollTextEffect 
  effect="fade" 
  splitBy="line" 
  staggerDelay={0.4}
  as="h1"
  className="text-4xl font-bold"
>
  First line appears
  Second line follows
  Third line completes
</ScrollTextEffect>

Properties

The ScrollTextEffect component accepts the following props:

Property	Type	Default	Description
`children`	`ReactNode`	-	The text content to animate
`as`	`ElementType`	`"p"`	The HTML element to render
`effect`	`"fade" \| "blur" \| "slide" \| "scale"`	`"fade"`	The type of animation
`splitBy`	`"char" \| "word" \| "line"`	`"word"`	How to split the text for animation
`className`	`string`	`""`	Additional CSS classes
`threshold`	`number`	`0.1`	Intersection observer threshold (0-1)
`staggerDelay`	`number`	`0.05`	Delay between each element animation (seconds)
`speed`	`number`	`1`	Speed multiplier for the animation

Usage Examples

Scale Characters

Blur Words

Slide Fast

Fade LinesOne by One

Scale Words

Super Fast Blur

Documentation

Animations