lll-animation

Fetch the LLL Animation Workshop spec from Notion

Specialised code reviewer for the LLL Animation Workshop's rolling cube implementation. Use proactively after completing Task 1.3 (CSS rolling in one direction) or Task 2.3 (Three.js rolling in one direction) — catch pivot and reset bugs before building direction selection on top of a broken foundation. Optionally run again after Task 1.5/2.4 (boundary enforcement) to check boundary handling. Checks pivot points, transform-origin, preserve-3d, reparenting, rotation axes, cumulative rotation, grid snapping, render loops, and boundary handling.

Helps workshop participants transition from Phase 1 (CSS + GSAP) to Phase 2 (Three.js + GSAP). Use proactively when a participant starts Phase 2 (Task 2.1). Reviews their Phase 1 code and creates concrete mappings of what carries over, what changes, and what to learn fresh.

DEPRECATED — Use `phase1-css-cube` instead. This skill covers the old Julia Miocene 2-div + pseudo-element technique. The workshop now uses the Desandro 6-div approach documented in the phase1-css-cube skill. This skill is retained for reference only.

This skill should be used when the user needs GSAP v3 API reference, animation patterns, timeline composition, easing functions, ticker integration, or plugin usage guidance.

This skill should be used when the user is working on rolling cube animation, edge-pivoting, isometric cube movement, transform-origin animation, Object3D reparenting for rotation, grid-based cube wandering, window boundary enforcement, direction selection logic, cursor following, or weighted random direction bias — even if they don't explicitly mention "rolling cube." Covers both CSS transform-origin and Three.js Object3D pivot approaches, GSAP animation chaining, cumulative rotation tracking, grid snapping, boundary checking, and cursor-biased direction selection.

This skill should be used when the user asks to "build a CSS 3D cube", "construct cube faces", "position faces with translateZ", "set up preserve-3d", "apply isometric projection", "work on task 1.1", "work on task 1.2", "create a 6-div cube", or "add face shading". Covers Tasks 1.1–1.2 only: the Desandro 6-div cube construction technique with rotate + translateZ face positioning, and isometric projection. For Tasks 1.3–1.6 (rolling, directions, boundaries, cursor), use the `isometric-rolling-cube` skill. Replaces the deprecated css-3d-cube skill (Julia Miocene 2-div approach).

This skill should be used when a participant asks how to use GSAP or Three.js inside a React component, how to target DOM elements with GSAP in React, how to set up a Three.js scene in a useEffect, or why their animation works in vanilla JS but not in their .tsx file.