https://youtu.be/9fQ3Sv1CQfk
Everything in that 30-second video comes from code: the night sky, the crystal, the character walking across the ridge, the crystal's face, and every note and hit on the soundtrack. There's no stock art, no sound samples and no video editor.
It was built by Claude using four skills I've been writing and refining: svg-graphics, cartoon-figure, svg-character-animator and game-audio-synth. This post covers what a skill is, what each of these four does, and how they fit together to make the video. There are real snippets from the source along the way.
If you've never written a Claude skill, start at the next section. If you just want the code, jump to How the film was put together.
First: what is a "skill"?
A skill is a folder of instructions (and optionally scripts or reference files) that Claude can load when a task calls for it. At its core is one file, SKILL.md. It starts with a short YAML header, then continues in ordinary markdown:
---
name: svg-graphics
description: Creative craft and SVG technique for authored graphics that are
NOT characters — icons, logos, badges, scenes, patterns ... AUTO-TRIGGER on
"make an icon/logo/emblem/badge/background/pattern/illustration/SVG art".
---
# SVG Graphics — design the picture, then build it natively
...
The clever part is progressive disclosure. According to Anthropic's write-up on skills, Claude initially sees only each skill's name and description, about 50 tokens. It reads the full SKILL.md only when it decides the skill is relevant, and pulls in extra reference files only when they're actually needed. You can keep dozens of skills installed without flooding the context window. That same post says Anthropic publishes Agent Skills as an open standard, so skills are meant to work across tools.
Two practical consequences:
- The description is the router. If it doesn't say when to use the skill, the skill doesn't get used. Mine all end with explicit trigger phrases.
- The body is where hard-won lessons go. My skills aren't generic advice. Almost every rule is there because something broke. Each skill ends with a table of regression cases: the input that caused a failure, the wrong output, and the required output.
The four skills in the video
1. svg-graphics — pictures that aren't characters
Owns: icons, logos, emblems, badges, scenes, backgrounds, patterns and generative art. It covers both how the picture should look and how to build that look as clean SVG.
Doesn't own: characters, charts, diagrams or video. Each of those belongs to a different skill, and the skill says so in a routing table at the top.
The rule that does the most work is declare the look before the first path. Every graphic starts with a small block covering subject, job, size of use, style, palette with a role for each colour, light direction, line policy and background. Without that, generated art drifts toward the same defaults everyone recognises: a centred badge with a glow, a purple-to-blue gradient, sparkles filling the empty space. The skill has a whole table of those "generated-graphic tells" and what to do instead.
It also ships with a small checker script, svgcheck.py. The script flags the SVG bugs that fail silently. One example: a gradient in default units, applied to a perfectly horizontal line, doesn't render at all, because the line's bounding box has zero height. I confirmed that in a test render: 96 inked pixels became 0. The script also builds a contact sheet at 16, 32, 64 and 256 px, on light and dark backgrounds, with silhouette and grayscale versions.
In the video (4–10s): four mountain ridgelines generated from seeded noise, each moving at its own parallax speed. A seeded starfield. Then the crystal cluster is built facet by facet, and a four-point glint lands on it. The glint is the film's one "signature" move, and it comes back at the bass drop and on the end card.
// seeded, deterministic ridgeline: same seed → same mountains every render
let y = P.base - P.amp * (0.65 * vnoise(x * P.freq + k * 37)
+ 0.35 * vnoise(x * P.freq * 2.7 + k * 91));
Owns: how a drawn 2D character is built, rigged, posed, lit and staged. The skeleton is pelvis › waist › chest › neck › head, plus two three-bone arms and two three-bone legs. It also covers draw order, cel shading and camera direction.
The walk is the best example of why this is a skill and not a one-off prompt. The obvious way to animate walking is to swing the legs with a sine wave. It looks fine for a second, and then the feet slide across the floor. A two-bone leg swept by a sine traces an arc, and an arc isn't a floor. The skill's rule is to drive the foot, not the hip. Author the foot's path along the ground, then solve the joint angles with inverse kinematics:
function ik(tx, ty) { // foot position relative to hip → [thigh angle, knee angle]
const d = Math.min(Math.hypot(tx, ty), LEG - 0.01), a = Math.atan2(tx, ty);
const b = Math.acos(clamp((d * d + T * T - S * S) / (2 * d * T), -1, 1));
const th1 = a + b, kx = T * Math.sin(th1), ky = T * Math.cos(th1);
return [th1, Math.atan2(tx - kx, ty - ky) - th1];
}
While a foot is planted, it moves backwards relative to the hip at exactly the speed the body moves forwards, so its position in the world never changes. The skill also says to derive hip height from the planted foot rather than hand-tune a bob. A hand-tuned bob makes the knees stay bent, and the walk reads as a shuffle.
Other rules visible in the video: blinks are drawn as a lid closing over the eye, not a squashed eye, because scaling an eye also shifts its position. Arms go in front of the torso and the head in front of the arms, so a raised arm never covers the face. My first snapshot of the wave broke that last rule, with the arm hidden behind the head. That's exactly why the rule exists.
In the video (10–16s): the character walks in, settles into a standing pose, waves with an open-palm hand shape (hand poses swap by visibility, because a shape can't be tweened), and blinks.
3. svg-character-animator — state machines and morphs
Owns: characters that change between states such as emotions or poses. It handles path morphing, idle motion (breathing, blinking), state transitions, and exporting to React or SwiftUI.
Its central idea: most "morph" tasks aren't morph tasks. If two shapes have the same path command structure, you don't need a morphing library that resamples the curve into polygons. You interpolate the control points directly and the curves stay perfect. So the crystal's mouth is one path with an identical structure in every state:
const MOUTH = { // [Lx,Ly, c1x,c1y, c2x,c2y, Rx,Ry, c3x,c3y, c4x,c4y]
neutral: [-13, 0, -6, -2, 6, -2, 13, 0, 6, 4, -6, 4],
happy: [-20, -4, -8, 0, 8, 0, 20, -4, 12, 24, -12, 24],
surprised: [-10, 0, -10, -16, 10, -16, 10, 0, 10, 16, -10, 16],
wink: [-15, 2, -6, 2, 6, -2, 17, -7, 12, 12, -8, 12],
};
// transition = lerp every number, eased with a small overshoot
Idle breathing scales the crystal from its base (bottom-centre pivot, because things stand on the ground). Eyelids close by sliding a clipped lid down over the eye, so the pupils never jump.
In the video (16–21s): the crystal opens its eyes, cycles through neutral, happy, surprised (with a burst of sparkles), wink and happy, and glances over at the character.
4. game-audio-synth — sound with no audio files
Owns: sound effects and music synthesized from oscillators, noise and envelopes, originally for browser games that generate audio live in the page. The core insight is about why synthesized audio usually sounds cheap: bare oscillators with no envelope, no sense of space, identical pitch on every hit, and square waves everywhere. The fix is to put an envelope on every voice, add a generated reverb, vary pitch and volume slightly on each trigger, and choose waveforms by role.
A video is a fixed file, not a live game, so the score was rendered once in Python using the same recipes:
def env(n, a, d, sus=0.0, curve=6.0): # every voice gets an envelope
t = np.arange(n) / SR
e = np.minimum(1.0, t / max(a, 1e-4)) # attack
dec = np.exp(-curve * np.maximum(0, t - a) / max(d, 1e-4))
return e * (sus + (1 - sus) * dec) # decay → sustain
The music is 120 BPM synthwave over a Dm9 · B♭maj7 · Fmaj7 · Cmaj7 loop. Layers come in as the film builds: pads and bells, then bass and hats, then a sixteenth-note arpeggio, then full drums. Every sound effect starts three frames before the visual it belongs to. That comes from the video skill: a sound that arrives early feels in sync, one exactly on the frame feels late.
In the video (21–26s): the landscape becomes the equalizer. The bars are driven by a per-frame spectrum of the actual soundtrack, rings pulse on each beat, and a riser builds into a bass drop, flash and star burst at 24.5s.
How the film was put together
Two more skills ran the production: ad-creative-direction (what each beat must achieve) and hyperframes (how the film is authored, rendered and verified).
HyperFrames is HeyGen's open-source framework (Apache 2.0) that renders HTML into video. You write a normal HTML page whose elements carry timing attributes (data-start, data-duration) and register one paused GSAP timeline. The renderer runs headless Chrome, seeks through every frame, and encodes the result with FFmpeg:
npx hyperframes init my-video
npx hyperframes check # lint + runtime + layout + contrast gate
npx hyperframes render # → MP4
The build went in this order:
- Beat list first. Seven beats, each with an intent and an exit condition. For example, beat 5's intent is to show that the crystal has a state machine; its exit condition is that the viewer believes it. The cuts sit on the music's bar lines.
- Look declaration. Ground
#0F172A, heather #C4B5FD reserved for the crystal, sky blue for props, pink only for the glint, a matte two-tone cel style with one light from the top-left, and one signature move.
- Audio before visuals. The synth script also writes a cue sheet: every visual event with its exact time. The HTML animates from that same data, so picture and sound can't drift apart.
- One stage, one camera. Beats 3–7 are a single SVG world with a camera wrapper. A cut is an instant jump of the camera; a camera move is an eased tween.
- Every frame is a pure function of time. There's no
Math.random() at render time (all randomness is seeded) and no requestAnimationFrame. The renderer can seek to any frame and always get the same picture.
The composition is one HTML file of about 520 lines, plus a 217-line synth script.
How I know it works (not just "it rendered")
A render exiting cleanly doesn't prove much. A broken timeline renders a full-length static video and still reports success. So everything was checked against the finished MP4:
hyperframes check: 0 errors, and 12 of 12 text contrast checks pass WCAG AA.- Looked at the frames. A contact sheet of 12 frames pulled from the MP4 at exact timestamps. Checking snapshots frame by frame during the build is also how the hidden-arm wave was caught.
- Cuts vs camera drift. Across the cut at 10s the picture changes by a mean pixel difference of about 10.4; the same 0.2s span inside a shot measures about 0.44. The cuts read as cuts, not as one long zoom.
- The crystal actually changes. A state change measures about 8.8 in the face region; a held expression measures about 1.4.
- The audio is the real score. The MP4's audio correlates at 0.995 with the synthesized file, with zero delay, and both the video and audio streams are exactly 30.000s.
- The opening moves right away. The first render's opening frame was blank because the line drawing eased in too slowly. I changed the easing so the stroke shows from the start and re-rendered.
Rendering took about 2 minutes 15 seconds on a 2-core machine with no GPU.
Honest limitations
- Fonts (Orbitron, Inter, Share Tech Mono) are open-licence Google Fonts. The end card originally said "0 stock assets"; I changed it to "0 stock art, 0 samples" because that's the precise claim.
- The soundtrack is rendered offline, not generated live in a browser. The recipes are the game skill's; the delivery is a normal audio track.
- No voiceover. This is a 30-second showcase, not a tutorial.
- Taste still needs a human. The checks prove the frames and audio are correct and in sync. They can't prove the mix sounds good. A person watching it does that.
Want to try this yourself?
- Write a skill: create a folder with a
SKILL.md, give it a name and a description that says when to use it, and put your lessons in the body. Anthropic's post above covers the format. Start small: one workflow you keep re-explaining.
- Make an HTML video:
npx hyperframes init my-video, then open index.html. If you use an AI agent, the project ships its own skills (npx skills add heygen-com/hyperframes).
- Steal the ideas, not the files: seeded randomness, driving feet with IK, morphing between shapes with identical path structure, putting an envelope on every oscillator, and sound effects that land slightly early. Each one is a few lines of code and makes a visible difference.
I build browser tools, games and automation under DHSeaDev — more at dhseadev.online./ If you have questions about any of the skills, ask in the comments.
