02 / CANVAS 2D
“Show agents coordinating without another network diagram.”
Particle Current
A coherent field bends around the visitor and leaves a calm text-safe corridor.
Open full case ↗LIVE / POINTER ACTIVE
For Claude Code · Cursor · Codex
Give any website one unforgettable visual moment.
Translate “make this feel special” into a production-ready Canvas, Three.js, WebGL, or SVG system—chosen for the idea, integrated with the page.
CANVAS 2D
THREE.JS
WEBGL GLSL
SVG
ROUTER / 01
Users describe a feeling
The skill chooses the visual language and renderer.
INPUT
“The hero feels empty. Make it feel alive.”
VISUAL BRIEF
Hero focal · organic · breathing · pointer-aware
ROUTE
Living orb · Three.js + shader deformation
LIVE RECIPES / 02–05
Four engines.
Four kinds of memory.
Each case begins with a different page job. Move your pointer through the live frames, then open any case full-screen.
03 / THREE.JS
“The product is synthetic biology. Give it presence.”
Living Orb
A breathing membrane carries the brand palette through depth, topology, and restrained parallax.
Open full case ↗LIVE / DEPTH ACTIVE
04 / RAW WEBGL
“Make the infrastructure feel energetic at planetary scale.”
Radiance Field
A continuous shader field turns interference, noise, and light into a responsive material.
Open full case ↗LIVE / FIELD ACTIVE
05 / SVG
“Explain provenance like a precision instrument.”
Spatial Lineage
Crisp routes, semantic labels, and traveling signals turn system relationships into an artifact.
Open full case ↗LIVE / SYSTEM ACTIVE
PROGRESSIVE DISCLOSURE / 06
A small router with deep visual grammar behind it.
The core skill reads the project and routes the request. It loads one placement guide, one recipe family, one renderer guide, and the production contract needed for the job.
SKILL.mdintent · routing · workflow
routing.mdexperience → engine
placements.mdhero · field · artifact · system
recipes.mdeight composable visual grammars
families/Canvas · Three · WebGL · SVG
starters/lifecycle-aware reference code
quality-gates.mdconcept · craft · resilience
01Specific to the product
02Integrated with content
03Composed on mobile
04Reduced-motion aware
05Lifecycle complete
06Structurally varied
INSTALL / 07
Give the next page a signature.
Read the skill on GitHub ↗
MIT LICENSE · OPEN SOURCE