Decoding, Decrypting, Scrambling Spelling Out Text | Glitched Writer

How to make use of 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 may also load the Glitched Writer JavaScript within the doc.

<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 choices.

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: '',
        // 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 strategies.

// add text
Writer.add(text);

// remove text
Writer.remove(number);

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

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

7. It additionally comes with 9 presets:

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

Text Glitch (Scramble) Animation, Glitched Writer Plugin/Github

See Demo And Download