txt-fx

Customizable text effects!

Table of contents

• Installation
• Usage
• Effects
  • Scrambler
  • Shuffler
  • Replacer
  • ReverseCensor
  • Glitch
  • SlowReveal
• Contributing
• License

Installation

npm i txt-fx

Usage

Import the package and create an instance of any effect:

import TextFX from 'txt-fx'

const el = document.querySelector('#headline');

const fx = new TextFX.Scrambler();
fx.scramble(el);

Effects

Scrambler

Scrambles the text by swapping random characters with symbols, then optionally restores.

const { scramble } = new TextFX.Scrambler();
scramble(element, delay, count, restore, items);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 200 | Ms between each change | | count | number | 20 | Number of iterations | | restore | boolean | true | Restore original text when done | | items | string[] | ['@', '#', '$', ...] | Characters to scramble with |

Shuffler

Shuffles the characters of the text into a random order on each iteration.

const { shuffle } = new TextFX.Shuffler();
shuffle(element, delay, count, restore);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 200 | Ms between each shuffle | | count | number | 20 | Number of shuffles | | restore | boolean | true | Restore original text when done |

Replacer

Replaces each character sequentially with a censor character, left to right.

const { replace } = new TextFX.Replacer();
replace(element, delay, char, restore);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 200 | Ms between each replacement | | char | string | string[] | '█' | Replacement character(s) | | restore | boolean | false | Restore original text when done |

ReverseCensor

Starts with the text fully censored and reveals each character left to right.

const { reveal } = new TextFX.ReverseCensor();
reveal(element, delay, char);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 200 | Ms between each reveal | | char | string | '█' | Character used to mask text |

Glitch

Rapidly corrupts random characters with glitch symbols, then restores. intensity controls what fraction of characters are hit per frame.

const { glitch } = new TextFX.Glitch();
glitch(element, delay, count, restore, intensity, items);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 50 | Ms between each frame | | count | number | 10 | Number of glitch frames | | restore | boolean | true | Restore original text when done | | intensity | number | 0.5 | Fraction of chars corrupted per frame (0–1) | | items | string[] | ['▓', '░', ...] | Glitch characters to use |

SlowReveal

Reveals each character left to right. Before settling, each character slot-machine cycles through random symbols.

const { reveal } = new TextFX.SlowReveal();
reveal(element, delay, scramblePerChar, items);

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | element | HTMLElement | — | Target element | | delay | number | 200 | Ms between each step | | scramblePerChar | number | 3 | Random cycles shown before each character is revealed | | items | string[] | ['@', '#', '$', ...] | Characters to cycle through |

Running the tests

npm test

Contributing

1. Fork it
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

License

MIT License © Hamid Yuksel