A zero-dependency bytecode virtual machine with a motion-heavy playground UI.
Track F — Open / Wildcard. STACKVM is an interpreter (a stack-based bytecode VM) and a visualizer (live stack/bytecode debugging with animated motion). Both are explicitly listed under Track F, and the project is built with zero runtime dependencies — satisfying the track's requirement to explain how zero dependencies were achieved.
- Interpreter: a from-scratch stack machine (18 opcodes) with a two-pass assembler, labels, constants, calls, and recursion.
- Visualizer: an animated playground that steps through every instruction, rendering the stack and bytecode tape in real time.
- Zero dependencies: no runtime npm packages are shipped to the browser. The entire VM, assembler, parser, and animation layer are hand-written.
- Core (VM / assembler / parser): implemented by hand in TypeScript
(
src/vm/). No parsing, animation, or utility libraries — just the standard runtime. - Animation: the motion-heavy UI was originally built on GSAP, but GSAP is
a runtime dependency. It has been fully replaced by a small, hand-written
engine (
src/ui/tween.ts) built on the browser-native Web Animations API plus CSS transitions/keyframes. The visual result is identical, with no third-party animation library. - Build tooling only: the only dependencies are
typescriptandvite, both devDependencies used to compile/bundle. Nothing reaches the shipped bundle.
npm install
npm run devTo produce a static build:
npm run build
npm run preview- VM (
src/vm/vm.ts) — stack machine with 18 opcodes - Assembler (
src/vm/assembler.ts) — labels, constants, two-pass assembly - Playground (
src/ui/*) — 5 categories, each with a distinct visual system - Step debugger — animate stack + bytecode tape
| # | Name | Visual |
|---|---|---|
| 01 | Primitives | Mechanical grid |
| 02 | Control Flow | Hazard stripes |
| 03 | Memory | Terminal scanlines |
| 04 | Calls | Layered depth |
| 05 | Recursion | Mirror split |
push 2
push 3
add
print
halt
@my_fn:
load 0
ret