ascii horse
overview
this piece is a looping ascii-art horse. each frame is plain text (spaces and symbols); the browser shows it as monospace art and javascript advances frames fast enough to read as motion.
pieces on disk
ascii-animation-nobg.txt— one file containing every frame, separated by long runs of blank lines so the parser can tell where one frame ends and the next begins.ascii-animation.js— loads that file, builds an in-memory array of frame strings, writes the active frame into the page, and drives the loop on a timer.
runtime flow
- the page includes a single target element with
id="ascii-container"and monospace-friendly css (white-space: pre) so line breaks and spacing in each frame render exactly as stored. - when the script runs, it requests
/ascii-animation-nobg.txtfrom the site root (root-relative so it works from any route). - after the response arrives, the parser walks the file line by line, accumulating lines into the current frame until it sees a long enough stretch of empty lines; that boundary flushes one finished frame string and starts the next.
- each frame is then trimmed of trailing blank lines only (leading lines stay as in the source so the horse stays vertically aligned frame-to-frame); then every frame is padded at the bottom to the same line count so the container height stays steady while looping.
- the first frame is written immediately via
textContent; a short interval then advances an index, modulo the number of frames, so the last frame connects back to the first. - each tick replaces the container’s text with the next frame string only—no canvas or images—so the whole thing stays lightweight and easy to edit by changing the text file.
where it appears
this project page runs the same script and markup as the original implementation. the home page now uses a different ascii background; this horse lives here as a standalone demo.