Scramble

A scramble text UI component for react.

The animation maintains an internal ticking clock, that runs up to 60 times per second, or once per animation frame. The animation starts from the beginning of the text, and scrambles until the end of the input, given a set of parameters that allow you to control how many characters are added and over how many ticks, and how many times each character is randomized.

Live demo at https://scramble.vercel.app/

Props

Property	type	default	description
as	string	-	polymorphic tag
play	boolean	true	start/stop animation
text	string	-	text to scramble.
speed	number	0.4	0-1 range that determines the ticking speed. 1 means 1 tick per frame
scramble	number	8	how many times each character will randomize
step	number	1	how many characters are added to the scramble on each tick
stepInterval	number	1	how many ticks it requires to increment the step index
seed	number	3	adds random characters to the scramble, ahead of the ticking loop
seedInterval	number	10	ticks required to seed more random characters
onComplete	function	-	callback invoked on completion

Installation

  yarn add @a7sc11u/scramble
  //or
  npm install @a7sc11u/scramble

Usage

import { TextScramble } from '@a7sc11u/scramble';

export const App = () => {

  const elRef = React.useRef<HTMLDivElement>(null);

  const handleComplete = () => {
    console.log('scramble is done');
  }

  return (
    <TextScramble 
      ref={elRef}
      as="div"
      play={true}
      speed={0.4}
      scramble={8}
      step={1}
      stepInterval={1}
      seed={3}
      seedInterval={10}
      onComplete={handleComplete}
      text="Fugiat ullamco non magna dolor excepteur." 
    />
  );
};

Recommend Projects