ASCII fluid

The subject, full frame

Move the pointer over it: the ink is laid down, spreads to its four neighbours and evaporates. The ASCII panel opens the settings — it is a <details>, so it opens with the keyboard too.

A photograph as the subject

The same engine, with a subject that is no longer two-valued. A logo is either solid or empty: the grid only ever has two characters to pick from. A contrasted photograph gives it a real range of values, and the ASCII starts drawing the modelling of the face. The engine only reads luminance — hence data-fill="1", which gives the mask back its full range, and a far softer contrast than above: at 3, everything that is lit would turn solid white.

Text as the subject

Here the subject is a paragraph. The engine reads its face, its size, its letter spacing and its line height back from the stylesheet: changing font-family changes the ASCII rendering.

Thirty styles

Every style has its own character ramp and its own way of moving the cells. All of these drift on their own, with no pointer — data-motion="drift".

Tuned from the stylesheet

One single variable rescales everything: --af-glyph-size. The glyph, the cell, the panel and its typography all derive from it. Here the glyph goes up to 26 px, the subject takes 80 % of the frame, and the colours are inverted.

What it does without being asked

• Off screen, the loop stops: the component costs nothing below the fold.
• Under prefers-reduced-motion, it draws one frame and stops — the trail no longer lights up.
• In forced colours, the rendering takes Canvas and CanvasText: the probe resolves them, the engine paints with them.
• Under a finger, the page still scrolls: touch-action: pan-y. Set data-touch="lock" to capture the gesture.