useScramble

A lightweight (<1KB), high performance, react-hook for text animations.

The hook receives a set of parameteres that allows you to customize the pace, and style of the animation.

Development

  yarn dev

Will start the playground minisite at http://localhost:1234 and build the library on watch mode

Usage

Install to your react application

  npm install use-scramble

Import and call the useScramble hook

The hook returns a ref object, that you must apply to the target node, for the animation to take over.

import { useScramble } from 'use-scramble';

export const App = () => {
  const { ref } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 0,
  });

  return <p ref={ref} />;
};

Props

Return Values

Along with the ref the return value, contains a replay function, that you can invoke to restart the animation.

const { ref, replay } = useScramble({ text: 'your_text' });

return <p ref={ref} onclick={replay} />;

Reduced Motion

If the user has requested to minimize non-essential motion with prefers-reduced-motion:reduce, the animation is entirely disabled.

Alternative recipes to tone down the animation are possible and currently considered. It's difficult to determine at what degree motion is essential.

Unicode Values