Back to the work
Web / Frontend · Builder

Rubik's Cube Timer & Visualizer.

A keyboard-first speedcubing app in vanilla JS: a Three.js 3D cube, WCA-style scrambles for 2x2 to 7x7, an inspection timer with +2/DNF, full session stats (Ao5/Ao12/Ao100), and a C++ solver compiled to WebAssembly, all offline-capable as a PWA.

Role
Builder
When
2026
Stack
JavaScript, Three.js, WebAssembly, Chart.js
Scale
25 modules vanilla-JS app
View live demo ↗GitHub ↗
25 modulesvanilla-JS app
2x2 to 7x7puzzle sizes
Ao5/12/100rolling averages
C++ to WASMscramble solver

The problem

A serious speedcubing tool has to do several things at once in the browser: render a cube in 3D, generate correct scrambles for every puzzle size, time solves with inspection and penalties, and keep the running averages cubers actually care about, all fast, keyboard-driven, and usable offline.

What it does

  1. A vanilla-JS app split into 25 ES modules (timer, 3D cube, scramble, stats, sessions, charts, storage, PWA, and more), with no framework, wired together through a small shared state and storage layer.
  2. A Three.js 3D cube with keyboard-driven face turns and rotations, a 2D flat view, and scramble generation for 2x2 through 7x7 in WCA-style notation, previewed on the cube before a solve.
  3. An inspection timer with +2 and DNF penalties and configurable precision, feeding a full stats workflow: best, worst, mean, and rolling Ao5/Ao12/Ao100 per cube and session, with a PB timeline and Chart.js trend and histogram charts.
  4. A C++ cube routine compiled to WebAssembly for scramble validation and hints, loaded lazily and degrading to a clear message when the WASM module is unavailable.

Impact

  • Runs entirely in the browser and offline: a service worker caches the app, a manifest makes it installable, and solves, sessions, and settings persist locally with JSON/CSV export and import for moving data across devices.
  • Covers the full speedcubing loop, scramble, inspect, solve, review, in one keyboard-first interface, with session management and a leaderboard view.
  • Documented with generated architecture, module, and data-flow diagrams, a CI workflow, and the usual issue/PR templates and contribution guides.