It additionally has the power to create a textual content rotator the place a bunch of textual content is displayed in sequence, with a scrambling impact.

Must Read: Javascript Text Scrambler Effect In Vue Component | Glitched Writer

How to make use of it:

Installation:

npm i scrambling-text

Usages

// load 'scrambling-text' module.
import Scrambler from 'scrambling-text';

// create an instance of Scrambler.
const scrambler = new Scrambler();

// define a handler that is called whenever text is scrambled.
const handleScramble = (text) => {
  console.log(text);
}

// call scramble function with the text to be scrambled and handler.
scrambler.scramble('- Friedrich Nietzsche -', handleScramble);

// call scramble with the option to set the characters to use when scrambled.
scrambler.scramble(text, handleScramble, {
  characters: ['a', 'b', 'c'],
});

// Scrambler provides several characters.
console.log(Scrambler.CHARACTERS.DEFAULT);
console.log(Scrambler.CHARACTERS.ALPHABET);

import React, { useRef, useState, useEffect } from 'react';

// load 'scrambling-text' module.
import Scrambler from 'scrambling-text';

export default function ScramblingText() {
  // define the text to be scrambled as state.
  const [text, setText] = useState('- Friedrich Nietzsche -');
  // create an instance of Scrambler using useRef.
  const scramblerRef = useRef(new Scrambler());

  useEffect(() => {
    // call scramble function with the text to be scrambled and handler.
    scramblerRef.current.scramble(text, setText);
  }, []);

  return (
    <h1>
      {text}
    </h1>
  );
}

See Also –

JavaScript Library To Add Scrambling/Decoding Effect To Your Text | Scrambling Letters
[Bigtext] jQuery Plugin Dynamically Resize Text Size To Fit Container
Cyberpunk 2077 Style Glitch Transition Button In Pure CSS

See Demo And Download