[scrambling-text-js] How to Text Scramble/Shuffle Effect in JavaScript

Javascript Text Scramble Effect is a very simple javascript library written in vanilla js for scrambling text. Just one other JavaScript library is used to create a refined scrambling/shuffling/decoding impact for any textual content you present.

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:


npm i scrambling-text


// 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) => {

// 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.
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 (

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


Official Website(sogoagain): Click Here

This superior jQuery/javascript plugin is developed by sogoagain. For extra Advanced Usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…

Leave a Reply

Your email address will not be published. Required fields are marked *