Customisable text shuffling animations.

npm install txt-shuffle

const { shuffle } = require('txt-shuffle');

shuffle({ text: 'Hello world', fps: 5, onUpdate: (output) => {
  console.log(output);
} });

Output:

kE}3 7
Hep|> |dJ 
Hello UAo_
Hello worlz
Hello world

• Demo: Animations
• Demo: Multiline (Canvas)

Starts a text shuffle animation in two tiers. First shuffling through random characters and then resolving into the target text.

• options
  • text (default '') text string
  • duration (default 1) duration of shuffle/resolve animation in seconds
  • delay (default 0) delay to start shuffling
  • delayResolve (default 0.2) delay to start resolving
  • fps (default 60) framerate
  • glyphs (see below) glyphs to use in the shuffle animation
  • animation (default show) possible values: show, hide, stay
  • direction (default right) possible values: left, right, random
  • onUpdate callback function, returns the output string
  • onComplete callback function, returns the output string

glyphs default

 !#$&%()*+0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuüvwxyz{|}~

MIT, see LICENSE for details.