Web Playground
Browser experiments: animation, rendering, interaction, and the front-end techniques worth understanding by building them.
- Animated Code Editor — Shiki Magic Move — A progressive browser experiment showing how animated, syntax-highlighted code can present an engineering journey like a living VS Code or terminal story.
- Build Pipeline Terminal — A release replayed as live terminal output in xterm.js — the emulator VS Code uses — including the check that refuses to let it through, because a pipeline that is always green is not telling you anything.
- CSS Single-Div Circuit — Place and route drawn on one element — components scattered, nets routed as Manhattan paths, then optimised, compacted or scattered — with every trace, via and package a single entry in one box-shadow.
- Single-Div Schematic — A logic schematic — AND, OR, XOR, NAND, NOR and inverters, wired with curved connections — drawn on one element as a stack of background layers, because the box-shadow technique next door cannot draw a curve.