The specimen cabinet
Nothing on this page is a screenshot. The field behind this headline is a fragment shader running right now. Everything below it is the same: live, inspectable, and copy-pastable.
Identity is data. Watch it change.
The card below never changes its markup. Only its token set changes. Colour, type, radius, and rhythm are all variables read from a JSON profile, which is why a brand can be swapped in one move instead of forty.
One component, four identities
Same markup, same spacing scale, same motion timings. The only thing that moved is the token file, and every surface downstream followed it without being touched.
loading…
Four surfaces, live.
Each tile is its own WebGL context running a fragment shader on a full-screen quad. No textures, no models, no video. Every pixel is computed per frame from a formula. Tap one to read its core.
tap a tile above
The tiles pause when they scroll out of view. Four simultaneous WebGL contexts is fine; forty is not, and threejs-fundamentals is the skill that tells an agent to gate them on an IntersectionObserver rather than letting them all run forever.
One subject. Four motion languages.
Same flower, same cream backdrop, same light, same palette. The only variable is how the camera and the subject move. Motion is a design axis you choose deliberately, exactly like a typeface, and holding everything else constant is what makes that legible.
select a clip
The same system, inverted.
A design system that only does one mood is a colour scheme. This chapter runs the identical token architecture in a bright register, with a product hero drawn entirely in SVG and animated on the timings from the motion-design tables.
Grown slowly, shipped cold.
Fourteen petals, staggered at 45 milliseconds, 900 milliseconds each on an emphasized-decelerate curve. Dramatic reveal territory on the duration table, which is the right call exactly once per page.
// petal reveal — motion-design: "dramatic reveal" 600-1200ms, standard stagger 50-100ms
gsap.fromTo(".petal",
{ opacity: 0, scale: 0.35, rotate: (i) => i * 25.7 - 18 },
{ opacity: 1, scale: 1, rotate: (i) => i * 25.7,
duration: 0.9, // dramatic reveal
ease: "power3.out", // decelerate: entrances ease OUT
stagger: 0.045, // micro cascade, under the 400ms budget
scrollTrigger: { trigger: ".bloom-art", start: "top 78%", once: true }
});
Duration is a lookup.
Five rows from the tables, driving the same four elements. The curve is drawn from the actual bezier coefficients rather than illustrated, so what you see is what the browser runs.
The skill that says no.
The other four make things possible. This one makes them defensible. It is a pipeline with gates and a written list of thoughts you are not allowed to have. The left card is what an unsupervised model reaches for. The right is the same content under an art direction.
Modern & Sleek
Rainbow gradient, gratuitous blur, centered everything, three competing accents, a drop shadow on the drop shadow.
Frostline
One ground. One signal colour. One accent, used once. Hairlines instead of shadows. Asymmetry earned by a grid rather than avoided by centering.
Never skip the brainstorm. Not even if the user says "just make it look good." Especially then.
One question at a time. The second question depends on the first answer.
Reject generic slop. No rainbow gradients, no gratuitous glassmorphism, no "modern and sleek."
Every token comes from the design system. No magic numbers, no rogue hex values.
Match complexity to scope. A hover effect does not justify a ScrollTrigger pipeline.
The audit is not optional. It runs even when the user seems happy.
What each one actually does.
design-dna
Extracts an identity into JSON across three dimensions: measurable tokens, qualitative style, and visual effects. Then generates from that profile.
threejs ×10
Ten slices of a very large API: fundamentals, geometry, materials, lighting, textures, animation, loaders, shaders, post-processing, interaction. Audited against r160+.
gsap ×8
Core, timeline, ScrollTrigger, plugins, React, other frameworks, utils, performance. Published by GreenSock themselves, so they update when GSAP does.
motion-design
Lookup tables instead of adjectives. Duration by element type, distance scaling, exits at 65–75% of entrance, easing by direction, springs, stagger budgets.
genjutsu
Process, not knowledge. Two commands over sixteen internal modules, with iron rules and a red-flags table. It refuses to skip the brainstorm even when told to.
It is genuinely five lines.
No runtime, no service, no API key. Each repository is a folder of markdown with a description that tells your agent when to reach for it.
git clone https://github.com/zanwei/design-dna git clone https://github.com/CloudAI-X/threejs-skills git clone https://github.com/greensock/gsap-skills git clone https://github.com/lottiefiles/motion-design-skill git clone https://github.com/AThevon/genjutsu
Or hand the whole job to your agent
Paste this into Claude Code, Cursor, or whatever you run. It is self-contained.
Install five agent-skill repositories for me and report what each one does.
1. Clone these into a temporary directory:
https://github.com/zanwei/design-dna
https://github.com/CloudAI-X/threejs-skills
https://github.com/greensock/gsap-skills
https://github.com/lottiefiles/motion-design-skill
https://github.com/AThevon/genjutsu
2. Find my agent's skills directory. Each skill is a folder containing a
SKILL.md with YAML frontmatter (name + description).
3. Install every skill folder, PRESERVING FOLDER STRUCTURE. Three of these
are multi-file and will break if you flatten them:
- design-dna has references/ (schema.md, generation-guide.md)
- motion-design has director/, patterns/, reference/ (16 files)
- genjutsu has skills/_jutsu/ (16 internal modules) plus its two
commands, paint and cast
If your installer only accepts a single SKILL.md, stage the reference
folders somewhere stable and rewrite the relative links inside SKILL.md
to absolute paths that resolve from where you actually put them.
4. Verify: list every installed skill name and confirm each SKILL.md's
frontmatter description is intact, since that description is what
triggers the skill later.
5. Then tell me, in one line each, what each skill does and when you would
reach for it. Flag any overlap between them so I can decide what to keep.
The one gotcha. Those three multi-file skills reference their companion files with relative paths. Install them flat and the deep-dive layer silently disappears: the agent still triggers the skill, still sounds confident, and no longer has the tables. Check that the reference folders came along.
The image and video layer is separate
Worth being precise, because it is a common confusion. The five skills above are design and code knowledge. They do not render a single pixel of imagery. Every still in the companion story was generated with GPT Image 2, and every clip in Specimen 03 with Seedance 2.0, both through the Higgsfield MCP. That is a different layer of the stack, and it is the one that actually makes the pictures.
One practical note that costs people money: GPT Image 2 has no 4:5 aspect ratio. For a 1080×1350 social card, render 3:4, instruct the prompt to hold all text and key elements inside the central 88% of the frame height, then center-crop. Do not quietly switch models to get the ratio.
Order of operations. Identity first, because everything downstream reads from it. Then the art direction gate, because it is cheaper to argue before the code exists. Then implementation, with motion timings taken from a table rather than invented. Then the audit, which runs whether or not anyone is happy.
That sequence is the actual lesson. The individual skills are replaceable. The order is not.