The art of illusion.
A creative-coding skill for Claude Code and claude.ai. It takes the interface you are already building and gives it a look and a way of moving, written in your framework with your animation library.
- 15 modules
- Web, Apple, Android
- MIT
scroll to paint
Everything here is drawn in code.
No image file ships with this site. The ink you have been scrolling through is painted on a canvas, stroke by stroke, at the pace of your own scroll. Three more techniques below, running live, each one named.
flow field
canvas 2d · curl noise
A grid of noise-derived angles steers a fixed particle pool. Trails come from fading the previous frame rather than clearing it.
verlet chain
canvas 2d · physics
Position-based dynamics with distance constraints, relaxed over several iterations per frame. Hover to pull it out of rest.
scroll-driven
css only · animation-timeline
No JavaScript at all. A view-progress timeline drives the stroke, behind a @supports guard with a static fallback.
Two arts, one hand.
In Claude Code they are slash commands. On claude.ai you ask. Both read your project before they touch it, and both audit their own work before they call it finished.
/genjutsu:cast
The Illusionist
Gives an interface motion.
- scanDetects your framework, your CSS layer and your animation library, or the deliberate absence of one.
- discoverAsks about mood, references and constraints. One question at a time, and only when the request is genuinely open-ended.
- thesisStates in one sentence what will move, how fast, with which easing, and what it refuses to do. Then waits for your yes.
- implementWrites the motion with your stack's own APIs. Proposes two or three variants once the scope is a section or larger.
- auditFrame budget, reduced motion, exit animations, focus visibility, contrast, four breakpoints.
/genjutsu:paint
The Master Painter
Builds a visual universe from nothing.
- brainstormNever skipped, least of all when you say just make it look good. Product, audience, mood, references, stack.
- two thesesA visual thesis naming color, typography, spacing and component style. An interaction thesis naming timing, hover, scroll and forbidden patterns.
- design systemWrites MASTER.md into your project, plus the token files your stack expects: CSS custom properties, Theme.kt, or Color+App.swift.
- implementPage by page, validated page by page. Every value traces back to the system. No magic numbers, no rogue hex.
- auditThe full design audit, every time, even when you already look happy.
cast adapts to what already exists. paint replaces the visual layer entirely. Same sub-skills underneath, opposite entry points.
Fifteen jutsu, loaded on demand.
genjutsu does not empty fifteen manuals into the context window. The skills detect your stack first, so a Compose project never pays for Metal shaders and a static site never pays for Three.js.
Foundations
motion-principles
The foundation, loaded every single time. Duration by context, easing by direction, the five things motion must never do, and reduced-motion handling for web, SwiftUI and Compose.
Foundations
design-audit
Ten greps run before delivery: missing exit animations, hover with no transition, animated layout properties, focus rings stripped and not replaced. Every finding comes with file:line.
Foundations
ui-ux-pro-max
A searchable dataset with a CLI: 84 styles, 192 palettes, 74 font pairings, 25 chart types and 99 UX guidelines across 22 stacks. cast and paint read it; you never call it.
Foundations
mobile-principles
44pt on iOS, 48dp on Android, 24px minimum on the web. Thumb zones, safe areas, gesture conflicts, and the rule that anything reachable only by hover is gone on a phone.
Foundations
desktop-principles
Hover states, pointer precision, keyboard shortcuts, multi-window state and focus management, across macOS, Windows, Linux and desktop web.
Web
css-native
Zero-dependency motion: scroll-driven animation timelines, the View Transitions API, @starting-style with allow-discrete, anchor positioning, container queries, clip-path reveals.
Web
gsap
GSAP core, timelines, ScrollTrigger and the full plugin set, all free since 3.13. Loaded only when GSAP is already in package.json.
Web
framer-motion
AnimatePresence, layout animations, shared layout transitions, gestures and motion values. Two package names, one library: motion and framer-motion publish the same v13.
Web
threejs-r3f
Three.js r185 and R3F 9, React 19 only. Scene composition, custom shader materials, postprocessing, and the budget you have to hit: 100 draw calls, 1M triangles, 60fps.
Web
canvas-generative
Algorithmic art in Canvas 2D: noise families, particle pools with no allocation in the hot loop, flow fields, L-systems, attractors, double buffering for trails.
Apple
swiftui-motion
withAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, spring configuration and gesture-driven animation.
Apple
swiftui-graphics
Metal shaders through colorEffect, layerEffect and distortionEffect, plus visualEffect, Liquid Glass on iOS 26, Canvas, and holographic or CRT treatments.
Android
compose-motion
The Compose animation foundations: animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout and gesture handling.
Android
compose-graphics
Material 3 Expressive motion physics, AGSL runtime shaders on Android 13 and up, generative DrawScope work, and graphicsLayer effects.
Android
compose-multiplatform
KMP patterns: expect/actual composables, platform-specific code paths, density and font handling across targets, and iOS interop.
Every surface, native.
No wrapper, no lowest common denominator. What lands in your project is what that platform actually wants.
Web
GSAP and its plugins, Motion for React, native CSS scroll-driven animation and View Transitions, Three.js and React Three Fiber, generative Canvas 2D.
Apple
SwiftUI animation and transitions, Metal shaders through colorEffect, layerEffect and distortionEffect, Liquid Glass, Canvas. iOS and macOS, told apart before anything is written.
Android
Jetpack Compose animation, AGSL runtime shaders, Material 3 Expressive motion physics, generative DrawScope, and Compose Multiplatform with expect/actual composables.
Against the default.
AI already writes interfaces that are clean, correct and forgettable. The gap is not capability, it is the absence of a position. genjutsu gives Claude one, and holds it to it.
Principles before code.
Motion foundations load before a single line is written. Duration chosen by context, easing chosen by direction, and the more often an interaction fires the shorter it gets.
A thesis before motion.
One sentence, stated out loud and validated, naming what moves and what deliberately does not. No thesis, no code.
An audit before it ships.
Reduced motion, frame budget, exit animations, focus rings, contrast at every frame of a transition. Run every time, not when it is convenient.
Your stack, not ours.
No dependency is installed without asking first. If your project already chose GSAP, that choice is respected instead of argued with.
Two doors in.
Same skill, same brush. The terminal, or the browser.
Claude Code
Two slash commands, typed inside a Claude Code session. The first adds the marketplace, the second installs the plugin. Then run /genjutsu:cast or /genjutsu:paint.
claude.ai · web and apps
One file, the whole skill.
- Download the zip below.
- In claude.ai settings, open Customize, then Skills. Upload it and switch it on.
- Type /genjutsu in any chat, or just say what you want.
The link always serves the newest release from GitHub. Needs the code execution feature: Pro, Max, Team and Enterprise.