Motion+
DocsReact

ScrambleText

A scramble text animation component for React, with stagger and renderless control.

ScrambleText is a 1kb React component for creating scramble text animations.

>Live exampleOpen

Unlike most scramble text implementations, ScrambleText uses Motion for React's motion value rendering to avoid React re-renders.

<ScrambleText>{text}</ScrambleText>

ScrambleText is exclusive to Motion+ members. Motion+ is a one-time payment, lifetime membership that unlocks exclusive components, premium examples and access to a private Discord community.

Features

  • Stagger: Use Motion's stagger function for both delay and duration to create letter-by-letter reveal effects.

  • Performant: Renders via Motion's high-performance animation loop, skipping React re-renders.

  • Playback control: Toggle the active prop to start/stop scrambling, perfect for hover effects or scroll-triggered animations.

  • Customisable characters: Use the default alphanumeric set, or provide custom characters (including emoji).

Install

First, add the motion-plus package to your project using your private token. You need to be a Motion+ member to generate a private token.

npm install "https://api.motion.dev/registry.tgz?package=motion-plus&version=2.6.1&token=YOUR_AUTH_TOKEN"

Usage

By passing a string as the ScrambleText child, it will animate that text in character by character.

<ScrambleText>Hello world!</ScrambleText>
>Live exampleOpen

Stagger

Use Motion's stagger() function to reveal characters one by one:

import { stagger } from "motion"
import { StaggerText } from "motion-plus/react"

// Start scrambling at the same time, reveal after 1
// second, with a 0.05 delay between each character/
<ScrambleText duration={stagger(0.05, { startDelay: 1 })} >
  Hello world!
</ScrambleText>

Delay

Stagger when each character starts scrambling by passing stagger to delay:

// Chars start scrambling one-by-one, all reveal after 1s of scrambling
<ScrambleText delay={stagger(0.1)} duration={1}>
  Hello world!
</ScrambleText>

Direction

Use stagger's from option for controlling the direction of stagger:

<ScrambleText
  delay={stagger(0.05, { from: "center" })}
  duration={0.5}
>
  Hello world!
</ScrambleText>
>Live exampleOpen