Hi, I'm Kisan Jena. I am a dedicated Full Stack Developer with a strong passion for engineering robust core backend systems and crafting tasteful, highly interactive user interfaces and reusable components. I strive to deliver professional, high-quality solutions across the entire application stack.

Scramble Text

A lightweight text scramble effect built into anime.js v4. Hover over any element on this page to see the scramble animation in action.

Features

• Named character sets and range syntax for the chars parameter
• Directional reveal with the from parameter
• Adjustable interval between each character
• Per-character settle duration control
• Deterministic output with seeded random
• Cursor pattern for sweep-style effects
• Perturbation to randomize timing and order
• Fill character for different-length transitions
• Works with any easing function

How It Works

The scrambleText helper returns a function-based tween value. Each target element gets its own closure that captures the original text content and computes a per-character reveal timeline. Characters transition through random values before settling on their final position.

The animation duration is automatically calculated from the text length and timing parameters, ensuring consistent visual pacing regardless of content size, or use the duration parameter to set an exact duration that overrides the computed value.