By simon-tanna
Workshop toolkit for the LLL Animation workshop — rolling 3D isometric cube with CSS + GSAP (Phase 1) and Three.js + GSAP (Phase 2). Includes rolling cube technique, CSS 3D cube construction, task-by-task guidance, GSAP and Three.js reference skills, and specialised review agents.
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.
External network access
Connects to servers outside your machine
Claude Code plugin for the Long Lunch Lab — Animations workshop. Provides skills, subagents, and domain knowledge for building a rolling 3D isometric cube in two phases: CSS + GSAP, then Three.js + GSAP.
claude /plugin marketplace add simon-tanna/lll-animation-plugin
claude /plugin install lll-animation@lll-animation-dev
Then restart Claude Code.
All skills are dual-mode: Claude auto-invokes them when the conversation topic matches, and participants can also invoke them directly as slash commands. Several skills include detailed reference files (GSAP API docs, Desandro technique walkthrough, external resource links) that load on demand — keeping context lean while providing deep documentation when needed.
| Skill | Slash Command | Description |
|---|---|---|
workshop-guide | /workshop-guide [task-id] | Task navigator with acceptance criteria, gotcha warnings, and phase transition help. e.g. /workshop-guide 1.3 |
isometric-rolling-cube | /isometric-rolling-cube [topic] | Rolling technique for both CSS and Three.js — pivot positioning, direction mappings, reparenting cycle, grid snapping, boundary enforcement, cursor-following logic. |
phase1-css-cube | /phase1-css-cube [topic] | Desandro 6-div CSS cube construction, face positioning with rotate + translateZ, preserve-3d, color-mix() shading, isometric projection. |
gsap-expert | /gsap-expert [topic] | Comprehensive GSAP v3 reference with 636KB of API documentation in references/. |
threejs-fundamentals | /threejs-fundamentals [topic] | Scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. |
threejs-animation | /threejs-animation [topic] | Keyframe animation, skeletal animation, morph targets, animation mixing. |
threejs-materials | /threejs-materials [topic] | PBR materials, Phong, shader materials, material properties and optimisation. |
react-integration | /react-integration [topic] | GSAP and Three.js integration patterns for React — useRef, useEffect, cleanup, and JSX differences from HTML. |
| Agent | Trigger | Description |
|---|---|---|
animation-reviewer | After Task 1.3 or 2.3 | Reviews rolling animation code against 8 failure modes: pivot points, reparenting, rotation axes, cumulative state, grid snapping, render loops, boundaries, chaining. |
phase-transition-helper | Starting Task 2.1 | Maps Phase 1 CSS implementation to Phase 2 Three.js equivalents. Identifies reusable code and flags conceptual shifts. |
Phase 1 — CSS + GSAP (~1.5 hours)
1.1 Construct the 3D Cube (HTML + CSS)
1.2 Apply Isometric Projection
1.3 Implement Rolling Animation with GSAP
1.4 Random Direction Selection
1.5 Window Boundary Enforcement
1.6 OPTIONAL: Cursor Following
Phase 2 — Three.js + GSAP (~1.5 hours)
2.1 Create the Cube (Geometry + Material)
2.2 Understand the Isometric Camera (read-only)
2.3 Implement Rolling Animation with GSAP
2.4 Window Boundary Enforcement
2.5 OPTIONAL: Cursor Following
Once installed, participants can:
/workshop-guide 1.3, /gsap-expert timeline, /phase1-css-cube preserve-3danimation-reviewer agent can be invoked to check for common bugs. When starting Phase 2, the phase-transition-helper agent maps Phase 1 code to Three.js equivalentsThe companion plugin lll-animation-mcp adds a Notion MCP server and /fetch-spec command for pulling the canonical workshop spec directly into your session.
claude /plugin install lll-animation-mcp@lll-animation-mcp-dev
This adds:
/fetch-spec [task-or-section] — Fetches the workshop spec from Notion. Use /fetch-spec 1.3 for a specific task or /fetch-spec for the full overview.To test locally after making changes:
claude /plugin uninstall lll-animation@lll-animation-dev
claude /plugin install lll-animation@lll-animation-dev
Then restart Claude Code.
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub simon-tanna/lll-animation-plugin --plugin lll-animationComprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.
Create beautiful, performant web animations for React and TypeScript applications. Includes background effects, text animations, 3D transforms, creative visual effects, Framer Motion, GSAP, and more.
Comprehensive Three.js skills for building 3D web experiences
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
Production-grade vibe coding suite. Structured workflows from discovery to deployment: start, build, ship, fix, refactor.
Comprehensive startup business analysis with market sizing (TAM/SAM/SOM), financial modeling, team planning, and strategic research
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claim