A tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.

Source Download Demo npm/baffle
// Start baffle on any element(s).
let b = baffle('.someSelector').start();
// Take care of some other stuff.
someAsyncFunction(result => {
    // Swap in new text and reveal over 1500ms.
    b.text(currentText => result.text).reveal(1500);


To get baffle, either download the latest release and include it in your markup (window.baffle), or install with NPM.

$ npm install --save baffle

Basic Usage

With baffle installed, getting started is as simple as calling baffle() with some DOM elements. Those elements can be in the form of a CSS selector, a NodeList, or a single Node. You can also pass an options object.

baffle operates on node.textContent, so it will flatten any child elements. It's best used on elements without children.

// With a CSS selector
let b = baffle('.headline');

// With a Node
let b = baffle(document.querySelector('.headline'));

// With a NodeList
let b = baffle(document.querySelectorAll('a'));

// With options
let b = baffle('.headline', {
    characters: 'abcdefghijklmnopqrstuvwxyz',
    speed: 75

With baffle instantiated, you can start your instance with the start() method, stop it with stop(), or reveal it with reveal().

// Start obfuscating

// Stop obfuscating

// Reveal your text immediately

// Reveal your text over 1000ms

You can also call text() at any time to change the underlying text of your instance or set() to change options.

* Text takes a function which receives the current text as its
* only argument, then uses its return value as the new text.
b.text(currentText => currentText + '!');

// Set takes an options object.
    speed: 100,
    characters: '+-•~!=*'

// Just pass the options you want to overwrite.
    speed: 40


A baffle instance has six methods, all of them chainable.


An options object can be passed to baffle when instantiated or any time afterward using the set() method.

// On instantiation
baffle('.someSelector', {
    characters: 'supercalifragilisticexpialidocious',
    speed: 150

// After instantiation
        characters: 'supercalifragilisticexpialidocious',
        speed: 150

Available Options


The quick brown fox jumps over the lazy dog.

Browser Support

Please report any issues you come across.

License MIT
Made By Cam Wiegert
Inspired By Oak