Text Glitch (Scramble) Animation In JavaScript – Glitched Writer

Preview:

Description:

Glitched Writer is a JavaScript library for creating pretty cool text glitch (also called scramble, decode, encode, distort) animations.

How to use it:

1. Install and import the Glitched Writer.

# NPM
$ npm i glitched-writer --save

import GlitchedWriter from 'glitched-writer'

2. Create a new instance of the Glitched Writer.

const myWriter = new GlitchedWriter(
      '#container', 
      {
        // options here
      }, function(string, writerData){
        // finish callback
      }
)

3. You can also load the Glitched Writer JavaScript in the document.

<script src="https://cdn.jsdelivr.net/npm/glitched-writer/lib/index.min.js"></script>

const myWriter = GlitchedWriter.create(
      '#container', 
      {
        // options here
      }, function(string, writerData){
        // finish callback
      }
)

4. Write your text with a Glitch effect.

// plain text
myWriter.write('Any Text');

// HTML content
Writer.write('<b>HTML Content</b>');

// queue writing
const phrases = ['First String', 'Second String', 'Last String']
// or from HTML elements
<div id="phrases" style="display: none;">
<p>Welcome!</p>
<p>to my site.</p>
</div>
// writer.queueWrite(phrases, queueInterval, loop)
writer.queueWrite(phrases, 3000, true);

// with await
const res = await Writer.write('Welcome');
console.log(`Finished writing: ${res.string}`);
console.log('All the writer data:', res);
await wait(1200);
await Writer.write('...to Glitch City!');

5. Available options.

const myWriter = new GlitchedWriter(
      '#container', 
      {
        // step size
        steps: [1, 8],
        // interval
        interval: [60, 170],
        // delay
        delay: [0, 2000],
        // chance of letter being replaced by a glitched character
        changeChance: 0.6,
        // chance for ghost letter to appear
        ghostChance: 0.2
        // maximal number of ghosts to occur
        maxGhosts: '0.2'
        // boolean | number | 'word'
        oneAtATime: 0,
        // custom glyphs
        glyphs: 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư',
        // add letters from written text to the glyph charset
        glyphsFromText: false,
        // fill space or not
        fillSpace: true,
        // 'normal' | 'matching' | 'erase' | 'clear'
        mode: 'matching',
        // allows HTML
        html: false,
        // appends every letter of that text as a child span element
        letterize: false,
        // make the animation endless
        endless: false,
        // fps
        fps: 60,
      }
)

6. More API methods.

// add text
Writer.add(text);

// remove text
Writer.remove(number);

// add callback
writer.addCallback('start', startCB);

// remove callback
writer.removeCallback('start', startCB);

7. It also comes with 9 presets:

• default
• nier
• typewriter
• terminal
• zalgo
• neo
• encrypted
• bitbybit
• cosmic

const myWriter = new GlitchedWriter(
      '#container', 
      'terminal'
)