zero dependencies · images, video, webcam

Light, pulled into letters.

ascii-fx renders a picture as living type. Ordered dither, Floyd–Steinberg, halftone, and a cursor that the characters have to get out of the way of.

Open the playground

Move the cursor — the type scatters and springs back.

playground

Drop a picture. It never leaves this page.

Drop an image or clip

—

Samples: NASA public-domain Apollo photographs. Drag one onto the frame, or bring your own.

Charset Cell size 9

Color

Ink Paper

Dither

Contrast 1.35 Brightness 0 Invert

Pointer

Radius 160 Strength 1

Fit

Use webcam

Paste this anywhere

install

One import, or one tag.

JavaScript

import { createAsciiFx } from 'ascii-fx';

const fx = createAsciiFx(stage, {
  source: img,
  charset: 'classic',
  color: 'duotone',
  interaction: 'repel',
});

HTML

<script type="module">
  import 'ascii-fx/element';
</script>
<ascii-fx src="cover.jpg"
  charset="blocks" interaction="repel">
</ascii-fx>

React, Vue, and Svelte use the same <ascii-fx> tag. Examples are in the README.