About this skill
This skill teaches a macro shot as one function of pixel and time: the scene as a distance function with domain warps, glass and fibers from cheap approximations, and a parameter table you tune by name. It renders offline, so a frame can take seconds, and it tests grain and bitrate against a size cap, with measures for banding and blocking. The scene uses no image textures or 3D models. The bundle includes a tested template, a glass seed that opens, and that template rendered the clip on this page.
You say
Make a 12-second macro film of an imagined deep-sea organism that opens slowly. No image textures or models, only a fragment shader, with rich color and shallow depth of field, under 2 MB.
How it works
- Name one subject and one event, then write the scene as a distance function with polar folds and domain warps.
- Tune it from a table of named parameters, checking contact sheets of the whole film and full-size stills.
- Capture offline in headless Chrome: each frame averages many renders for anti-aliasing, depth of field and motion blur.
- Pipe 16-bit frames into a 10-bit master, then add grain and encode to your size cap, measuring banding as you go.
Getting a good result
- Most of the time goes into adjusting values, so give every number a name, a range and a note from the start.
- If a frame looks pale, cut the glow before you touch the exposure, and keep some dark space in every frame.
- Add grain at delivery and not in the master, so you can test several amounts without rendering again.
What you get
- A guide to SDF scenes, domain warps and polar folds
- Approximations for glass, subsurface light, fibers, caustics, soft shadows and AO
- A WebGL2 template with a params.json table and a tuning panel
- A capture script for headless Chrome and ffmpeg, with no npm install
- A delivery script that tests grain against a size cap and measures banding
Good fit
- Hero shots, title backgrounds and stop-scrolling clips
- Developers who want full control of every pixel
- Subjects that cannot be filmed
Not for
- Real people, real products or photoreal claims
- Fast turnaround without a tuning pass
- Interactive sites that must run in real time
How to install it
- Download the ZIP and unzip it.
- Move the folder holding
SKILL.mdinto your agent's skills folder, such as~/.claude/skills/for Claude Code. - Start a new session and ask for what you want to make.
Needs: An agent that reads skills, Node.js 22 or later, Chrome, ffmpeg.
Popular on X
Posts showing demand for this kind of video. Unless a post names this tool, it wasn't made with it.
- A procedural human eye in three.js: 7 days, about 400 parameters 222,668 views on X, measured 2 November 2026
FAQ
Is it really free?
Yes. Create a free AdAnt account to download the ZIP. There is no card and no trial timer.
Do I need a GPU?
It helps a lot. Without one, the capture script can use Chrome's software renderer, which is much slower. Since the film renders offline, it still finishes.
Did the eye in the linked post use this skill?
No. That post is by another creator and is linked as evidence of interest in procedural work. This skill was written independently, and its example clip is a different subject.
Why not three.js?
You could, and the linked eye post did. A single fragment shader leaves nothing between you and the pixel, and it keeps the template small enough for an agent to read in full.
Related skills
HyperFrames: HTML to Video
Have Claude write launch films, explainers and title cards as HTML, then render them to MP4.
Vertical Ad Motion Graphics
Direct and build a 9:16 motion graphics ad that works on mute, with no footage.
GSAP Animation Core
Give your agent GreenSock's official guidance for timing, easing and stagger.