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


$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:
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 |
Usage Examples
Scroll Default
Fast Special Chars
Slow Numbers
Full Visibility Required