Terminal

Diff Viewer

A unified git diff viewer that streams a code review in line by line: a file header with +12/-4 counts, a hunk header, then context/addition/deletion lines revealed one at a time with old and new line-number gutters, colored green for additions and red for deletions, before resetting and looping calmly.

csslight complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Developer-tool landing pages, code-review or CI dashboards, terminal-aesthetic hero sections, or ambient "code is changing" backdrops for engineering products.

When not to

Non-technical audiences (the diff content is meaningless without dev context), or light-background UIs — the background is hardcoded dark GitHub navy (#0d1117).

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Replace the diff array with a real hunk from your own file, update the file header path and the +12/-4 counts, and slow the per-line reveal from 260ms to 400ms for a calmer stream.

Safe to edit

diff line data (diff array: t/o/n/c per row)
file header path and +/- counts (.dvw-file markup)
hunk header text (.dvw-hunk)
per-line reveal + reset timings (260/2600/420ms in step())
add/del colors (.dvw-r-add / .dvw-r-del CSS)

Keep intact

IIFE "use strict" wrapper
visibilitychange stop/play guard with running flag
prefers-reduced-motion static full-diff fallback (renders all rows, returns early)
role="img" + aria-label on the diff container
aria-hidden corner caption

Known limitations

Background and syntax colors are hardcoded dark — must edit CSS to re-theme
Diff content is a fixed invented hunk; no real syntax highlighting of the code text
Purely ambient — no click/scroll interaction and no exposed pause control

terminaldiffgitmonospacecodedark-modetypewriter

More Terminal components

Shell SessionSimulates a looping shell session: commands type out character-by-character with a blinking cursor, then output lines appear, then the next command begins.
Resource MonitorRetro BBS-style system monitor showing 6 CPU core bars and 3 memory rows with ASCII block characters; values drift randomly every 420ms.
Log StreamSimulates a live server log tail — new entries slide in every 650ms with color-coded INFO/WARN/ERROR/DEBUG levels and real-time timestamps.
Build RunnerSimulates npm install + build pipeline in a scrolling terminal; packages, lint/compile steps, and file-change events stream in sequence and loop endlessly.
Network TraceSimulates a live traceroute — hops appear one by one with color-coded latency (green/orange/red); ms values fluctuate after trace completes, then loop.
Git GraphAn ASCII git commit graph in a green monospace CRT terminal: box-drawing branch rails (│ ├ └ ╲ ╱ ●) run down the left as commits stream in top-to-bottom,…