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.

This skill should be used when animating Three.js objects, playing GLTF animations, creating procedural motion, or blending animations. Covers keyframe tracks, AnimationMixer, skeletal animation, and morph targets.

This skill should be used when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms. Covers scene setup, cameras, renderer, Object3D hierarchy, and coordinate systems.

This skill should be used when styling meshes, working with textures, creating custom shaders, or optimizing material performance. Covers PBR materials, Phong, shader materials, and material properties.

This skill should be used when a participant asks "what do I do next?", "I'm stuck", "what should I work on?", asks about a specific task number (e.g. "help with 1.3"), wants to check if their work is done, or needs to understand the workshop structure, or mentions Phase 1, Phase 2, or any task by number. Provides task-by-task guidance, acceptance criteria, gotcha warnings, and phase transition help for the 3-hour rolling cube workshop.