workshop-guide
LLL Animation Workshop Guide
A 3-hour workshop building a rolling 3D isometric cube in two phases.
Tech stack: Vite + React TypeScript, GSAP, Three.js
Participants receive a starter repo with a working Vite/React TypeScript app, an isometric diamond grid background, and all dependencies pre-installed (GSAP, Three.js).
End result: A mint/teal 3D cube in isometric view that continuously rolls across the grid — tumbling face-to-face in random directions, bouncing off window boundaries.
Starter Repository
Pre-configured: Vite + React TypeScript, isometric diamond grid background, OrthographicCamera and RAF render loop (Phase 2 boilerplate), all dependencies installed (GSAP, Three.js).
Do not modify: the camera, the grid, or the boilerplate render loop.
Component files: Cube.tsx (Phase 1 — write your CSS cube here), Cube3D.tsx (Phase 2 — write your Three.js cube here).