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.
genjutsu
The art of illusion.
A creative-coding skill for Claude Code and claude.ai. It takes the interface you are building, in a repo or a claude.ai artifact, and gives it motion, identity and intention, written as production code on your own stack.
- 15 modules
- Web, Apple, Android
- MIT
scroll to paint
proof
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, by the same kind of code genjutsu writes into a project. Here are three more techniques, running live, each named.
the two arts
Two arts, one hand.
Everything routes through two skills. In Claude Code they are slash commands. On claude.ai you simply 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 modules
Fifteen jutsu, loaded on demand.
genjutsu does not empty fifteen manuals into the context window. The two skills detect your stack and load only the modules that apply, so a Compose project never pays for Metal shaders and a static site never pays for Three.js.
Foundations
Loaded on every invocation, or whenever the context calls for them.
- motion-principlesThe 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.
- design-auditThe final checkpoint. Greps the codebase for missing exit animations, hover states without transitions, layout-property animation, absent reduced-motion handling and focus rings removed without replacement.
- ui-ux-pro-maxA searchable design-system dataset with a CLI: 84 styles, 192 palettes, 74 font pairings, 25 chart types and 99 UX guidelines across 22 stacks. Internal, loaded by the two skills rather than invoked.
- mobile-principlesTouch targets, the hover-less doctrine, thumb zones, safe areas, gesture conflicts and mobile performance budgets. Applies to mobile web as well as native iOS and Android.
- desktop-principlesHover states, pointer precision, keyboard shortcuts, multi-window state and focus management, across macOS, Windows, Linux and desktop web.
Web
Loaded from what your package.json actually contains.
- css-nativeZero-dependency motion: scroll-driven animation timelines, the View Transitions API, @starting-style with allow-discrete, anchor positioning, container queries, clip-path reveals.
- gsapGSAP core, timelines, ScrollTrigger and the plugin set. Loaded only when GSAP is already a dependency, because an existing choice is respected rather than replaced.
- framer-motionMotion for React: AnimatePresence, layout animations, shared layout transitions, gestures and motion values.
- threejs-r3fThree.js and React Three Fiber: scene composition, custom shader materials, postprocessing, and the performance envelope of running 3D on the web.
- canvas-generativeAlgorithmic 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
Detected from Package.swift or an xcodeproj, iOS and macOS distinguished.
- swiftui-motionwithAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, spring configuration and gesture-driven animation.
- swiftui-graphicsMetal shaders through colorEffect, layerEffect and distortionEffect, plus visualEffect, Liquid Glass on iOS 26, Canvas, and holographic or CRT treatments.
Android
Detected from your Gradle files, including Compose Multiplatform.
- compose-motionThe Compose animation foundations: animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout and gesture handling.
- compose-graphicsMaterial 3 Expressive motion physics, AGSL runtime shaders on Android 13 and up, generative DrawScope work, and graphicsLayer effects.
- compose-multiplatformKMP patterns: expect/actual composables, platform-specific code paths, density and font handling across targets, and iOS interop.
surfaces
Every surface, native.
One craft, three runtimes. No wrapper and no lowest common denominator: what lands in your project is what that platform actually wants.
- WebGSAP and its plugins, Motion for React, native CSS scroll-driven animation and View Transitions, Three.js and React Three Fiber, generative Canvas 2D.
- AppleSwiftUI animation and transitions, Metal shaders through colorEffect, layerEffect and distortionEffect, Liquid Glass, Canvas. iOS and macOS, told apart before anything is written.
- AndroidJetpack Compose animation, AGSL runtime shaders, Material 3 Expressive motion physics, generative DrawScope, and Compose Multiplatform with expect/actual composables.
why
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.
install
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. Upload it in your claude.ai settings under Customize, then Skills, and enable it. Invoke /genjutsu in any chat, or simply describe what you want. That link always serves the newest release straight from GitHub. Requires the code execution feature, available on Pro, Max, Team and Enterprise plans.