ASCII ANIMA

by creativetech.wtf

Interactive Ascii.
Light AF.

I like making interactive things, and I love sites with images and good content instead of walls of text. The problem is, the more content we put in, the slower a site loads, and the Lighthouse scores tank. This project was born out of that need: a kind of media that is interactive and light AF, so my site's SEO doesn't tank more than it already has thanks to the .wtf domain.

The ascii mapper lets you upload your media, tweak the settings and bake it into a tiny .asciimap file. A small JS player plays that file back on any website you use.

Then compression takes another bite. An .asciimap is plain text, and text squeezes well. This 6.4 KB map gzips to 1.2 KB on its way to the browser, while the 40 KB JPEG barely shrinks at all.

Read the full process and learnings over at creativetech.wtf ↗

The mapper: a live ASCII preview of a person in a horse mask on the left, settings for source, columns, gamma, image data and tones on the right.
The mapper's colour set to gradient and the tone bar: the characters over a dark red to pink gradient.
The mapper's source block with the clip picked, ping-pong on, and the clip framerate.
The mapper's lens presets and sliders: radius 0.28, magnify 1.10, char boost 0, repel 1.50.
The mapper's motion curve: a drawn burst that rises fast, holds, then settles, with duration, throw, blast radius and swirl sliders.

Play it on your site

Add the player script and point it at the file. One script, no dependencies.

Try it! GitHub ↗ 
<script src="ascii-player.js"></script>
<div id="art"></div>
<script>
  const host = document.getElementById('art');
  AsciiPlayer.load('mountain.asciimap')
    .then((map) => AsciiPlayer.mount(host, map));
</script>

result