LASCII

Lightweight ASCII animation effects for the web. Transform images and text into living character art.

Install · Usage · Effects

Live demo

How to install

npm install lascii

Usage

Add data-lascii-text or data-lascii-image attributes to your elements and import the module:

<script type="module">
  import "lascii";
</script>

<p data-lascii-text>Hello World</p>
<p data-lascii-text>First|:|Second|:|Third</p>

<div style="position: relative; aspect-ratio: 4/5; overflow: hidden;">
  <img data-lascii-image src="photo.jpg" alt="photo" />
</div>

The effect auto-initializes on DOM ready. No configuration needed.

Effects

Text effect

Feature	How
Single reveal	<p data-lascii-text>Hello</p>
Loop phrases	Separate with |:| — First|:|Second|:|Third

Image effect

Wrap an <img> with data-lascii-image inside a positioned container with overflow: hidden. The effect samples the image, renders an ASCII canvas animation, then fades to the original.

Configuration

By default, import "lascii" runs init() on DOM ready and uses built-in defaults. To customize behavior, import the effect classes, pass an options object to the constructor (merged over DEFAULTS), and wire elements yourself.

See the API reference for all options, exports, and TypeScript types.

Manual setup

import LasciiTextEffect from "lascii/core/text";
import LasciiImageEffect from "lascii/core/image";

document.querySelectorAll("[data-lascii-image]").forEach((img, index) => {
  new LasciiImageEffect(img, index, { SCRAMBLE_COUNT: 20 });
});

new LasciiTextEffect(document.querySelector(".headline"), {
  phraseDelay: 1200,
  revealOrigin: LasciiTextEffect.RevealOrigin.MIDDLE,
});

For auto-init without importing the main entry (side effects), use subpath imports from lascii/core/* and call LasciiTextEffect.init() / LasciiImageEffect.init() — details in API.

TypeScript

Declaration files ship with the package. No separate @types package required.

import { LasciiTextEffect, LasciiImageEffect } from "lascii";