Gallery

ASCII Image Reveal Effect

by Vanguardia · motionprompts.dev

Editorial photo grid where each frame paints itself as live ASCII on a canvas as it scrolls into view: cells pop in in random order, the lit mid-tones flicker through dense glyphs before locking, and the settled ASCII holds a beat before cross-fading to the real photograph. The glyph grid is measured from the tile's own box, so it stays legible from a 250px desktop frame down to a 170px phone tile; tapping a frame scans it again.

Type: Web motion
Framework: Vanilla JS
Trigger: click
Duration: 0.2–10s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: canvas2d
Complexity: 1/5
Pinned: no
Reduced motion: handled

per-cell ASCII grid materializes in shuffled random order at a flat 2ms/cell; dark cells cycle 10 random dense glyphs at 100ms before locking to their final char; when all ~500 cells settle the canvas is hidden and the real photo appears with no crossfade. No easing curves at all — the physics is pure uniform timer spacing.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev29,335 chars

# ASCII Image Reveal Effect

## Goal
Build an editorial photo grid where **each frame paints itself as live ASCII art on a `<canvas>` the moment it scrolls into…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.