ASCII Motion

ASCII Motion

Original luminous media sampled into a regular glyph grid. Lumen layers source-colored glyphs over a violet, emerald, cyan and rose gallery of space scenes, night landscapes and abstract light. Terminal renders a ceramic composition entirely in typography.

import { AsciiMotion } from './ascii-motion/src/react';
<AsciiMotion height={480} />

Use the Arclen UI Tweaks panel to configure the effect. The optional embedded controls are hidden by default; set showControls={true} to include a collapsed panel with an accessible “Toggle controls” button in your own page. Their primary order is Upload, Preset, Charset, Coverage, Cell Size, Opacity, Blur, Color, Motion and Speed. Speed is hidden while Motion is None and retains its value. Upload remains local to the browser. A selected file shows its filename and a Clear button. Clear restores the media source and URLs from before local selection while retaining the current effect settings; repeated uploads retain that same return point. Explicit source or media-URL updates replace the local selection and become the new durable media configuration. Set showControls={false} for passive media, and allowUpload={false} to disable local file selection. Direction, media source/URLs, description, pause and layout settings remain available through props/core and the host inspector.

import { mount } from './ascii-motion/src/core';
import './ascii-motion/src/styles.css';
const scene = mount(document.querySelector('#scene')!, { preset: 'bloom' });
scene.update({ source: 'video', videoUrl: './my-loop.mp4', imageUrl: './my-still.webp' });
scene.pause();
scene.resume();
scene.destroy();

The framework-neutral core exports defaults, resolveSettings, render and mount. Updates merge settings and retain phase. Choosing a preset applies its control baseline. Manual edits preserve that preset label. Selecting a preset again restores its baseline; Custom retains the current control and media values and uses the neutral glyph treatment. All media URLs and direction remain intact when switching treatments. React delegates to this same core and patches only parent props that changed. Local menu choices survive unrelated parent renders and changes to other props. Removing a previously supplied prop restores that field’s manifest default; changing a preset still applies its baseline. The initial HTML object stays stable across renders. Each mount owns its host's children, media, observers, listboxes and object URLs.

The packaged default is a silent 30-second gallery loop of six original AI-generated images: a violet nebula, an emerald aurora, moonlit mountains, a cyan planet, a dark ocean and rose light. Each scene spans five seconds with a half-second linear crossfade into the next image, including the return to the first scene. The glyph field samples the blended video frames continuously, so its characters change with the incoming image. The H.264 video is1280×720 at30fps. Six1600×900 WebP stills are included for gallery and image-source use. The nebula still supports loading, media failure and server-rendered/no-JS output. The procedural light-wave fallback remains available without video; Terminal has its own procedural composition. Standard new URL(..., import.meta.url) media addressing and the bundled static image import work with the portable export build. Relative user URLs resolve against the embedding document.

The 18 character sets are authored luminance ramps: Standard, Detailed, Signal, Code, Minimal, Math, Hex, Binary, Digits, Letters, Greek, Katakana, Dots, Braille, Stars, Geometric, Arrows and Blocks. Unicode glyph appearance depends on the host's system fonts. Coverage targets Highlights, Midtones, Shadows or Full; shadows invert the ranking so dark source structure remains visible. Color is White, Source or Custom. The custom color picker appears in its row.

Nine preset entries include Custom plus Bloom, Truecolor, Ink, Ghost, Blur, Neon, Datastream and Editorial. All eight named presets set Standard characters,7px cells,35% opacity,0 source blur, Source color, Shimmer and1x speed. Their coverage is Highlights for Bloom/Neon, Full for Truecolor/Ghost/Blur, Shadows for Ink/Editorial and Midtones for Datastream. Manual changes retain the selected preset label.

Lumen displays the active image or video directly beneath a transparent additive glyph canvas. The same media element supplies pixel sampling; video playback has one decoder per instance. A normal canvas supplies the blurred background only when Blur is above zero. Procedural sources use their authored canvas as the background. Source color uses sampled RGB without a white offset. Preset controls set coverage while glyph ranking, weight and intensity remain part of the selected treatment. In Lumen, Blur smooths only the background; glyph ranks and source colors use the unblurred sampled field. Terminal retains its sampled-field blur and typography-only composition.

Motion changes glyph intensity while preserving the source-to-character relationship: None keeps glyph modulation steady; Shimmer oscillates with a stable phase for each cell; Pulse breathes uniformly; Wave travels diagonally across the grid; Scan sends a light band downward; Rain sends column bands downward with fading tails; Sparkle adds brief bright events; Flicker briefly dims individual cells. In Lumen, Speed changes glyph animation while video continues at its normal cadence. Video can continue under None, with characters still responding to changing image tones. Pause, zero speed, reduced motion, hidden documents and offscreen state stop both automatic media and glyph animation.

Glyph opacity remains independent of background blur. Lumen preserves the source underlay and adds sharp glyph ink with a cached soft halo. Text and Braille use a font size of1.25 times the cell-size setting; compact Stars, Geometric, Arrows and Blocks use0.75, while Dots uses1.4. Menlo is preferred when installed, followed by system monospace fallbacks. A stable per-cell tonal offset adds variation without changing with frame time. Zero opacity shows the source alone. Cell size spans7–28px, blur0–30px, opacity0–1 and speed0–3x. Zero opacity and speed extend the useful stopped/clear states.

Paint cadence is capped at30Hz. Output is capped at1600×1200 with device pixel ratio limited to2; source width is at most960px. Text and Braille use nominal row spacing of1.6 times the cell size. Dots, Stars, Geometric, Arrows and Blocks use compact spacing equal to the cell size. Whole columns and rows fit the host. The regular grid is bounded at224 columns and20,000 text cells or32,000 compact cells; unusually large hosts increase effective spacing. Glyph masks and halos are cached. Lumen presents a WebGL2 glyph canvas directly with one ordered triangle batch. The float atlas uses native bilinear filtering where supported, with a four-tap interpolation fallback otherwise. It falls back to Canvas2D on creation, compilation or context failure. Context restoration rebuilds graphics resources. GPU and CPU source-colour rounding can differ slightly. These limits are implementation bounds, not measured performance claims.

Listboxes support arrow keys, Home/End, typeahead, Enter/Space selection, Escape and outside dismissal. Selection updates existing nodes to preserve focus. Keyboard focus has a visible outline; pointer hover keeps the option’s resting colors. Tab closes a menu and continues through the controls. Escape also collapses the panel. Every range has a label and live value readout. Compact Opacity edits range from 5% to 100% in 5% steps; Speed edits range from 0.2× to 3× in 0.1× steps. The props/core API and inspector still accept zero opacity and zero speed. Their zero readouts remain visible until a range is adjusted. The visual has the configured alt description; canvas is decorative to assistive technology.

Remote media requires anonymous CORS permission for pixel sampling. Failed, aborted, timed-out or tainted media uses an image/procedural fallback. Local uploads create browser-only blob URLs; replacement, Clear, external media updates and destroy revoke owned URLs. Filename identity stays inside the mounted UI and is not a serialized setting. Blob URLs cannot be reused in another browser session, so use a durable media URL for exports. Asynchronous completion after destroy cannot restart playback. fill makes both the React receiving wrapper and effect fill a parent with a definite height. Explicit style.height values on React, including0, take precedence and other style properties are preserved. fixed uses the component height setting without imposing a height on the receiving wrapper. Without JavaScript or Canvas, the bundled still remains useful.

Terminal video playback uses a minimum positive rate of 0.0625× for browser compatibility. Procedural animation and glyph phase retain the requested speed. Zero pauses playback.

Local workers handle video pixel conversion when transferable video frames are available, and glyph rendering when OffscreenCanvas and WebGL2 are available. This keeps pixel conversion and rendered-frame readback off the main thread. A Content Security Policy that permits worker-src data: enables these paths; unsupported or blocked workers fall back to the existing canvas renderers. Destroying the component terminates its workers. All media stays in the browser.