Loop visualizer · single file · zero deps

See your loops
actually run.

Loopscape turns any program loop into a living instrument panel — glowing flow rings, rotating 3D helixes, control-flow graphs and more. Watch iterations tick, phases light up, and variables pulse in real time.

Try it live Download

Dark · monospace · honours prefers-reduced-motion. Runs entirely in your browser.

00
iterations
live · 60fps canvas
0
Visual styles
0
Color themes
0
Export formats
0
Self-contained file
0
Dependencies
01 — Styles

One loop, six ways to see it.

Every representation is driven by the same iteration state, so you can read a loop as motion, as depth, or as structure — whichever makes it click.

Flow style: a glowing particle ring with iterations traveling around a tilted torus S1
Flow

Glowing particle ring

Iterations orbit a tilted torus, the active step burning brightest.

Helix style: a rotating depth-projected 3D coil S2
Helix 3D

Rotating coil

Depth-projected spiral that turns iteration into physical space.

Flowchart style: a control-flow graph with a travelling token S3
Flowchart

Control-flow graph

A token walks the branches — condition, body, back-edge.

Timeline style: iterations laid out as a horizontal sequence S4
Timeline

Sequential lane

Every pass laid end to end — see the whole run at a glance.

Array style: values drawn as animated vertical bars S5
Array bars

Value bars

Watch data mutate — perfect for sorts and accumulators.

Spiral style: iterations winding outward along a spiral S6
Spiral

Winding path

Iterations coil outward, mapping progress to radius.

02 — Themes

Six palettes, tuned for the dark.

Each theme is a hand-picked gradient ramp that colors every particle, edge and bar. Hover a palette to preview it — or click the logo up top to cycle the hero.

PlasmaFlow ring rendered in the Plasma theme — deep blue through magenta to gold
IridescentFlow ring in the Iridescent theme — cyan, violet and pink
CyberpunkFlow ring in the Cyberpunk theme — electric teal and hot magenta
03 — Exports

Ship it anywhere.

Grab a still, a scalable vector, a smooth video, or a loopable GIF — all rendered right in the browser, no server round-trip.

PNG

.png · raster still

A crisp frozen frame at native resolution — drop it in a slide or a doc.

SVG

.svg · vector

Infinitely scalable geometry — perfect for print or crisp retina embeds.

WebM

.webm · video

Buttery full-motion capture of a complete run, encoded live in-tab.

GIF

.gif · animated

A themed-palette animated loop, quantized and encoded to GIF89a inline.

04 — Your terminal

Visualize your own loops.

Install the Loopscape skill and your coding agent will render your real code. Point it at a file and it generates a visualization — and exports a GIF of every loop.

1 · Install the skill

npx skills add max-hester/loopscape@loopscape -g -y

or drop the skill folder into ~/.claude/skills/loopscape manually.

2 · Ask it to visualize

Ready-to-run prompt

Use the loopscape skill to visualize the loops in @path/to/file and export a GIF of each.

This runs on your own machine. The command hands the job to your local coding agent — this page never connects to your computer or sees your code.
05 — Live

The whole tool, right here.

Switch styles, spin themes, scrub the loop and fire an export. This is the real Loopscape, embedded.

loopscape.html Open fullscreen
06 — Get it

One file. Yours to keep.

Download Loopscape and open it anywhere — no install, no build, no account. It works offline the moment it lands in your downloads folder.

Download loopscape.html Open in browser
~58 KB · single self-contained HTML · zero dependencies