ASCII fluid

What's included

An ASCII rendering engine, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

The component takes whatever is in its markup — an image, or a line of text — and redraws it every frame in ASCII glyphs on a canvas. The pointer leaves a trail of ink there that spreads to its neighbours and evaporates, lighting up the characters it crosses. Thirty styles change the character ramp and the way the cells move: falling type, terminal blocks, contour tracing, Matrix rain, radar sweep, vortex.

Features

• Works without JavaScript — the subject is a real <img> in the page, framed by the same variable as the rendering. Without the script, you see the image itself, in the right place and at the right size.
• One variable for the scale — --af-glyph-size commands the glyph, the cell, the settings panel and its typography. Everything follows together.
• Thirty styles — each with its own character ramp, its per-cell displacement and its glyph size. One data-mode attribute is enough to switch.
• Optional settings panel — placed over the canvas with data-controls="show". It's a <details> and native controls: it opens and can be adjusted entirely from the keyboard.
• The subject can be text — the engine reads its font, size, letter spacing and line height back from the stylesheet. Changing the typography changes the rendering.
• It goes quiet when it should — the loop stops off screen, freezes under prefers-reduced-motion, and follows Canvas / CanvasText in forced colours.

Dropping it into a page

Two files to load, then the usual markup:

<link rel="stylesheet" href="ascii-fluid.css">
<script src="ascii-fluid.js" defer></script>
<figure class="ascii-fluid" data-mode="normal" data-density="10">
  <div class="ascii-fluid__source">
    <img src="logo.svg" alt="Our logo" width="320" height="320">
  </div>
</figure>

The class is enough, the component installs itself on load — including on a block inserted later. The settings that are numbers are data-* (density, contrast, trail, fill, pointer); anything that is a colour, a length or a duration is a CSS variable, to be set in your own stylesheet.

What you should know

• The composition depends on the device. The engine gives itself a cell budget — smaller on a modest or touch device — and enlarges the grid to stay within it. So two visitors don't see exactly the same grid. That's the reference's behaviour; data-max-cells pins it down if reproducibility matters more than comfort.
• The trail comes from movement, not from presence. A cursor sitting still over the component lights nothing up. That's deliberate: the browser emits a pointer move of its own accord when content appears under the cursor, and a trail was springing up in the corner of pages nobody had touched.
• The hand comes before the drift. With data-motion="drift", the ink wanders on its own — but as soon as you move the pointer, it follows. The drift resumes after --af-drift-resume, a second and a half by default. The reference rewrites the pointer position every frame: the mouse makes no difference there.
• By finger, the page still scrolls. The reference blocks scrolling over the whole height of the effect; here the vertical gesture stays with the page. data-touch="lock" restores the original behaviour.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML: the settings panel is built node by node.
• The design comes from elsewhere. The proportions and the algorithm follow those of a Framer component published by 1042 Studio, measured frame by frame on the live site. The rendering is identical to the pixel at five widths; the code itself is rewritten — without React, without inline styles, with the fallback, the keyboard support and the system preferences the original lacks.