Author: | thetarnav |
---|---|
Views Total: | 649 views |
Official Page: | Go to website |
Last Update: | June 3, 2021 |
License: | MIT |
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' )