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

Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

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:

PropertyTypeDefaultDescription
childrenReactNode-The text content to animate
asElementType"p"The HTML element to render
classNamestring""Additional CSS classes
durationnumber0.8Total duration of the animation (seconds)
speednumber0.04Speed of each animation frame
characterSetstring"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"Character set for scrambling
thresholdnumber0.1Intersection threshold (0.0 to 1.0) for triggering animation
onScrambleComplete() => void-Callback executed when animation completes

Usage Examples

Scroll Default

Fast Special Chars

Slow Numbers

Full Visibility Required