Text Scramble On Scroll

MAX

A scramble text effect triggered when element comes into view

Demo

Scroll down to see the effect

Text scrambles when visible

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 scramble effect on scroll
<TextScrambleOnScroll duration={0.8} speed={0.04}>
  This text scrambles when it comes into view
</TextScrambleOnScroll>
 
// Fast scramble with custom threshold
<TextScrambleOnScroll 
  duration={0.5}
  speed={0.02}
  threshold={0.5}
  characterSet="!@#$%^&*()_+-=[]{}|;:,.<>?"
  as="h1"
  className="text-4xl font-bold text-red-400"
>
  Fast Special Characters on Scroll
</TextScrambleOnScroll>
 
// Slow scramble with numbers only
<TextScrambleOnScroll 
  duration={1.2}
  speed={0.06}
  threshold={0.3}
  characterSet="0123456789"
  className="text-2xl"
>
  Slow Numbers Scroll Effect
</TextScrambleOnScroll>
 
// With completion callback
<TextScrambleOnScroll 
  duration={1}
  speed={0.03}
  threshold={0.8}
  onScrambleComplete={() => console.log("Scroll scramble completed!")}
>
  Scroll scramble with callback
</TextScrambleOnScroll>

Properties

The TextScrambleOnScroll component accepts the following props:

Property	Type	Default	Description
`children`	`ReactNode`	-	The text content to animate
`as`	`ElementType`	`"p"`	The HTML element to render
`className`	`string`	`""`	Additional CSS classes
`duration`	`number`	`0.8`	Total duration of the animation (seconds)
`speed`	`number`	`0.04`	Speed of each animation frame
`characterSet`	`string`	`"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"`	Character set for scrambling
`threshold`	`number`	`0.1`	Intersection threshold (0.0 to 1.0) for triggering animation
`onScrambleComplete`	`() => void`	-	Callback executed when animation completes

How It Works

🔍 Intersection Observer: Uses the Intersection Observer API to detect when the element comes into view
🎯 Threshold Control: Configure how much of the element needs to be visible before triggering (0.0 = any part visible, 1.0 = fully visible)
🔒 One-time Trigger: Animation only triggers once per element to prevent repeated animations
📦 Container Wrapper: Wraps the element in a div with a ref for observation
♻️ Auto Cleanup: Automatically disconnects the observer when component unmounts

Differences with Other TextScramble Components

Feature	TextScramble	TextScrambleHover	TextScrambleOnScroll
Trigger	Manual (`trigger` prop)	Mouse hover	Scroll into view
Reusable	✅ Yes	✅ Yes	❌ One-time only
Threshold	❌ No	❌ No	✅ Configurable
Observer	❌ No	❌ No	✅ Intersection Observer
Wrapper	❌ No	❌ No	✅ Container div

Usage Examples

Scroll Default

Fast Special Chars

Slow Numbers

Full Visibility Required

Performance Notes

✅ Efficient: Uses native Intersection Observer API
✅ Memory Safe: Automatically cleans up observers
✅ One-time Only: Prevents performance issues from repeated animations
⚠️ Browser Support: Intersection Observer is supported in all modern browsers

Documentation

Animations