baffle-ts

A dependency-free TypeScript text obfuscation effect for ESM, CommonJS, and browser scripts. Driven by requestAnimationFrame and respectful of prefers-reduced-motion.

Quick start

Install

npm install baffle-ts

ESM

import { baffle } from "baffle-ts";

const title = baffle(".headline", {
  characters: "#%&*+-=?@",
  speed: 45,
});

title.start();
await title.reveal(900);

baffle() is the convenience factory. Import Baffle and use new Baffle(target, options) when direct construction fits your code better.

Browser

<script src="https://unpkg.com/baffle-ts@latest/dist/index.umd.min.js"></script>
<script>
  const title = Baffle.baffle(".headline");
  title.start();
  title.reveal(900);
</script>

API

start(): Starts repeatedly obfuscating the selected text.
reveal(ms): Reveals the managed text over a duration and resolves once it finishes or is stopped.
stop(): Stops any active animation without revealing.
once(): Obfuscates the managed text once.
set(options): Updates options, including while an animation is running.
text(value): Replaces the text managed by the instance.
refresh(): Uses the element's current DOM text as the managed text.
destroy(): Stops animation and restores the original text.

Framework use

Works with React, Vue, Angular, Svelte, and other browser frameworks. Create an instance after its target mounts, then call destroy() when the owning component unmounts.

For server-rendered apps, initialize on the client. Baffle updates textContent directly, so avoid rendering competing text into the animated element until the effect is finished or destroyed.

Accessibility

With prefers-reduced-motion: reduce, baffle-ts leaves text readable and resolves reveals immediately. Pass respectReducedMotion: false only when that behavior is intentionally needed.