React text scramble effect

React & TypeScript text scramble effect.

View Demo View Github
  • React & TypeScript component
  • lightweight package ~7kB

Setup

npm install @twistezo/react-text-scramble
or
yarn add @twistezo/react-text-scramble

Usage

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

<TextScramble texts={texts} />

Types and props

type ScrambleText = string

type ScrambleTexts = ScrambleText[]

type TextScrambleProps = {
  texts: ScrambleTexts
  className?: string
  letterSpeed?: number // [ms]
  nextLetterSpeed?: number // [ms]
  paused?: boolean
  pauseTime?: number // [ms]
}

Defaults

letterSpeed = 5
nextLetterSpeed = 100
paused = false
pauseTime = 1500

GitHub