Cubehill
A speedcubing algorithm visualizer with 3D cube rendering, algorithm browser, and command palette
CubeHill
A speedcubing algorithm visualizer — an interactive web app with a 3D Rubik's cube, algorithm browsing, command palette, and keyboard controls.
Features
- 3D Cube Visualization — Interactive Three.js Rubik's cube with smooth face-turn animations and orbit controls
- Algorithm Browser — Browse all 57 OLL and 21 PLL cases, grouped by shape/type with 2D pattern thumbnails
- Playback Controls — Step through algorithms move-by-move, play/pause auto-playback, or reset to the initial state
- Command Palette — Cmd+K / Ctrl+K to search and jump to any algorithm instantly
- Keyboard Shortcuts — Space to play/pause, arrow keys to step, R to reset
- Dark/Light Mode — Theme toggle with system preference detection and no flash of unstyled content
Tech Stack
Svelte 5 + SvelteKit | Three.js | ninja-keys | DaisyUI + Tailwind CSS | TypeScript
Hosted on GitHub Pages via adapter-static.
Getting Started
npm install
npm run dev # Start dev server at localhost:5173
npm run build # Build static site to build/
npm run preview # Preview production build
Documentation
Detailed documentation lives in docs/:
Technical (docs/technical/):
| Page | Description |
|---|---|
| architecture.md | Project structure and data flow |
| cube-engine.md | Cube state model, moves, notation parser |
| rendering.md | Three.js 3D rendering and animation |
| deployment.md | GitHub Pages deployment, CI pipeline strategy |
| algorithm-data-model.md | Algorithm TypeScript types and interfaces |
| components.md | Svelte components, stores, keyboard controls |
| linting.md | ESLint + Prettier setup and configuration |
| testing.md | Testing strategy, Vitest + Playwright |
| theme-integration.md | Theme store, FOUC prevention, Three.js sync |
Product (docs/product/):
| Page | Description |
|---|---|
| stack-decisions.md | Stack choices and reasoning |
| algorithms.md | OLL/PLL case inventory and learning priority |
| pages-and-layout.md | Pages, responsive layout, navigation |
| theming.md | DaisyUI theme system, theme-aware components |
| roadmap.md | 10-phase development roadmap and status |
Process (docs/process/):
| Page | Description |
|---|---|
| feature-development.md | 6-stage feature development loop |
| browser-tools.md | Playwright MCP browser tools for agents |
| figma-tools.md | Figma MCP tools for design creation and implementation |
| contributing.md | Best practices for contributing to the wiki |
| issue-tracking.md | Issue tracking standards |
Contributing
Read CLAUDE.md for project conventions, key architectural decisions, and team structure.
License
