Whimsical Particles
Field manuals.
Long-form, bilingual, diagram-first guides to how software actually works — one subject at a time.
The manuals.
Interfaces & motion
The web’s moving parts — animation, anchoring, and a headless component library — with live playgrounds.
- 01Whimsical Animations奇趣動畫實戰手冊Lush web animation from first principles — easing, polar motion, dispersion, then SVG shapes, paths, masks and self-drawing lines.
- 02Floating UIFloating UI・讓浮動元素永遠落在對的位置・實戰手冊The anchoring engine behind every tooltip and popover — placements, middleware, autoUpdate and the React hooks — one playground at a time.
- 03Mini Floating UI迷你 Floating UI・從零打造浮動定位引擎・實戰手冊Build the same positioning engine by hand — coordinate spaces, placement algebra, the middleware loop, clipping and a mini React layer.
- 04Mini Base UI迷你 Base UI・從零打造無頭元件庫的內部機制・實戰手冊A headless component library from scratch — store, render delegation, portals, hover intent, focus trapping and the full component set.
Databases, from the ground up
Read in order — each manual continues the last, from first data structures to a working SQL engine.
- 05Data Structures Before the Database打造資料庫之前・Rust 資料結構暖身手冊The beginner bridge — values, vectors, search cost, recursion, trees, invariants, B+ trees, bytes and pages, with a Rust lab in every chapter.
- 06A Database from Scratch用 Rust 從零打造資料庫・實戰手冊The classic db_tutorial in safe Rust — a tiny REPL, durable 4 KiB pages, linked leaves, recursive search and multi-level B+ tree splits.
- 07SQL from Scratch用 Rust 從零打造 SQL 引擎Above the B+ tree — tokenize SQL, build an AST, resolve a schema, plan scans and lookups, execute typed rows and persist the result.
Browser engineering
Read in order — one browser built across three manuals, then the real engines read alongside it.
- 08Browser Engineering in Rust用 Rust 從零打造瀏覽器・實戰手冊From response bytes to DOM and style trees, layout, raster, navigation, forms, security, compositing and incremental rendering.
- 09Advanced Browser Engineering in Rust進階瀏覽器工程・以 Rust 實作The same browser through caching, complex selectors, text runs, flex and grid, a typed VM, microtasks, IPC, tiled compositing and DevTools.
- 10Browser Runtime Engineering in RustEnglish-first draft · 繁中翻譯將於英文定稿後進行Around the finished renderer — deterministic scheduling, streaming services, transactional navigation, crash recovery, BFCache and causal traces.
- 11Reading the Real Browser讀懂真正的瀏覽器・實戰手冊No crate, just the source — Chromium/Blink, cc, V8 and Servo/Stylo, read against the boundary each crate-scale chapter replaces.
Language models & agents
The model stack, then the harness that turns a model into a coding agent.
- 12LLM SystemsLLM 系統・實戰手冊Start with no AI or math background. Build a tiny language model through interactive foundations, six runnable Python checkpoints, and guided practice; then explore larger systems.
- 13A Coding Agent from Scratch解剖 Pi・用 TypeScript 從零打造 Coding Agent・實戰手冊Read the Pi harness (v1.1.0), then build mini-pi one subsystem at a time: streaming, providers, the agent loop, coding tools, tree sessions, compaction, a differential TUI, modes and extensions.
Systems from scratch
Two engines rebuilt byte by byte and read against their real counterparts.
- 14CRDTs from Scratch從零打造 CRDT 同步引擎・實戰手冊A local-first sync engine the way Mini-Instant does it — hybrid logical clocks, op-logs, replicas and convergence.
- 15OXC from Scratch解剖 OXC・用 Rust 從零打造 JavaScript 工具鏈・實戰手冊The Oxidation Compiler one pass at a time — arena, hand-written lexer, Pratt parser, linter, transformer and codegen.
Software design
Modelling a domain — every building block runs as PHP in the page.