React text scramble effect

• React & TypeScript component
• Compatible with React 16.8+
• ESM and CJS support

Examples

• Local examples (required Bun)

  • React

    bun run example:react
    open http://localhost:5173/

  • Vanilla JS/TS

    bun run example:vanilla
    open http://localhost:3000/

• CodeSandbox

Setup

npm install @twistezo/react-text-scramble

Usage

React

import TextScramble from '@twistezo/react-text-scramble'
import type { ScrambleTexts } from '@twistezo/react-text-scramble'

const texts: ScrambleTexts = [
  'lorem ipsum',
  'dolor sit amet',
  'consectetur adipiscing elit'
]

<TextScramble texts={texts} />

Vanilla JS/TS

import { createTextScramble } from '@twistezo/react-text-scramble/vanilla'

const el = document.getElementById('scramble')

// using function API
const ts = createTextScramble(el, { texts: ['Hello', 'World'] })

// using class API
// const ts = new TextScrambleAnimator(el, { texts: ['Hello', 'World'] })

ts.play()
ts.pause()
ts.reset()
ts.setTexts(['Foo', 'Bar'])
ts.destroy()

Options

Defaults are defined in src/constants.ts

type TextScrambleProps = {
  className?: string
  letterSpeed?: number // Animation speed for each letter change [ms]
  nextLetterSpeed?: number // Speed to reveal each letter [ms]
  paused?: boolean // Pause/resume animation
  pauseTime?: number // Delay between text changes [ms]
  texts: ScrambleTexts
}

Development

bun run example:react
bun run example:vanilla

bun run build
bun run test
bun run lint
bun run typecheck

bunx npm login
bun publish