t3knobox/klik-anim-skill-creation/klik-anim

klik-anim — Element Animation Craft

MANDATORY. Read this before writing or editing ANY animation, in any project.

No motion code ships without passing the Pre-flight checklist at the end.

This is the craft layer, not the mechanics layer. Remotion's official

skills own scaffolding, APIs, and rendering (Part B says exactly how to lean

on them). Camera movement is its own craft and lives in the companion

skill `klik-cam` (the C0 camera dial and camera grammar) — this document

governs everything that moves within the shot. Its base laws (determinism,

easing, pacing) still apply to every animated parameter, camera included.

This document owns what the mechanics leave open: how motion should feel

and how frames should read — the difference between "a video was produced"

and "this was designed." It holds only the laws that are true for every

motion-graphics look. Anything that changes with the aesthetic — pacing,

transition vocabulary, visual motifs, palette — is **deferred to a per-style

bible or an explicit project decision** (Part C lists exactly which). When a

style choice and a craft law (determinism, thin-peak easing, no cheap

fades) disagree, the craft law wins — always.

How to use this document

1. Every project starts here. Skim the Craft Laws (Part A) before the first line of code.
2. Defer all API mechanics to the official Remotion skills (Part B) — never guess a signature.
3. Lock the style with the user before any code (Part C — the C2 interview, then the dials; the camera dial lives in klik-cam) — never default silently.
4. Building treated/textured elements? Load references/effects.md from this skill folder first (A13).
5. Building to music? Load references/music-motion.md — the A16 mapping implemented as verified code recipes.
6. Setting type in motion? Load references/kinetic-type.md — the reveal taxonomy with verified numbers; and take motion.ts from references/motion-library.md (measured springs + the curve kit).
7. Copy spanning a sequence — where it sits, not just how it appears? Load references/layout.md — the five composition models (fixed anchor · accretion artboard · growing line · world-space · annotation layer), picked and recorded like a dial. Only fixed anchor matches this skill's default enter → hold → exit assumption; the other four carry their own resolutions of A10/A12/A15.
8. Any camera movement? Load klik-cam — its dial and grammar govern the camera; this skill's base laws still bind it.
9. Gate every render on the Pre-flight checklist (Part D).

The house north-star, regardless of style: premium, intentional, physical, never stale. If a move feels like a default template, it's wrong.

PART A — THE CRAFT LAWS (style-agnostic, non-negotiable)

A0. Determinism — the render contract

Break this and parallel renders flicker; nothing else matters if this is wrong.

• All motion is a pure function of the frame. Derive everything from useCurrentFrame(). Same frame → same pixels, always.
• Never call Date.now(), new Date(), or Math.random() in composition code. For controlled randomness use Remotion's seeded random("seed").
• Add "life" with frame-based noise, not wall-clock: Math.sin(frame / 7) * 2, or @remotion/noise seeded so renders are reproducible.
• Components are pure functions of their props — no side effects, no internal timers. This is what lets Studio scrub instantly and lets --concurrency renders stay artifact-free.

A1. Easing & timing law

• Thin-peak velocity is the house default. Every move: slow anticipatory wind-up → fast burst through the middle → soft decelerated settle. A good default curve is cubic-bezier(0.83, 0, 0.17, 1). Never Easing.linear, never the CSS-default ease, never a single uniform speed across a scene.
• The one licensed exception: the PRECISION device. Constant-velocity,

grid-aligned motion as a semantic voice — only when the subject IS mechanical/technical/data (specs, terminals, counters). It is scoped like typewriter: ledger-recorded (A14), dead stops with zero settle (a driven machine absorbs its own momentum — linear travel with a bouncy arrival is physically incoherent), distances and durations quantized to the grid/beat, never in the same shot as inertia devices, never a lazy default. Grammar in references/kinetic-type.md; semantic license is A17's.

• Define curves once, in `src/motion.ts`, and import them everywhere. Never redefine inline. Standard set: EASE (thin-peak in-out, most moves) · EASE_OUT (strong settle — entrances) · EASE_IN (anticipation and exits only).
• Springs are for physics moments (land, pop, gather, arrival). Easing is for travel. Keep a small preset set (snap / bounce / smooth / heavy) in motion.ts — the measured preset values and the full curve kit (WHIP, GLIDE) live in `references/motion-library.md`; copy its canonical motion.ts.
• Always `clamp` on interpolate unless you deliberately want overshoot:

``ts interpolate(frame, [10, 22], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) ``

• Duration is weight, measured in frames. Convert these ms bands to frames for your fps (frames = ms / 1000 * fps):

• When in doubt: −20% duration, +settle. Snappier reads more premium than slow.
• Never single-speed. Every scene alternates fast hits against slow holds. If the velocity graph is flat, it's wrong.
• Enter ≠ exit. Exits run ~60–70% of the entry duration and use EASE_IN.
• Overshoot is small on UI (2–4%), larger only on hero/stat moments. Outgoing objects compress/accelerate quickly; incoming objects take longer to settle.

A2. The 12 principles → frame code

1. Squash & stretch — inverse scaleX/scaleY on impact/launch (scaleY:1.06, scaleX:0.96 on lift); volume conserved: `scaleX × scaleY ≈ 1`, always compensate the other axis — a squash that loses area reads as shrinking, not impact (a real shipped defect: a 0.86 land-squash with no x-compensation lost ~9% of the letter). Deformation ≤15–20% along the motion axis; recovery 8–12f. Even rigid UI uses it as micro-overshoot.
2. Anticipation — wind up opposite the motion first (dip 2–4px before rising, pull back before a slide). EASE_IN for the wind-up. An element that just starts moving reads robotic.
3. Staging — one focal element per moment. Scale, contrast, glow, and (if the style allows) camera all point the eye at it. If two things demand attention, restage. (The frame laws A10–A12 give the mechanics.)
4. Straight-ahead vs pose-to-pose — keyframe poses (interpolate between states); add straight-ahead flavor with layered seeded noise/wiggle.
5. Follow-through & overlapping action — nothing stops dead. Settle with a spring tail; children lag parents by 1–3 frames; text lags its card; glow lags both.
6. Slow in / slow out — the thin-peak profile from A1.
7. Arcs — long travel moves on a subtle curve; add a small perpendicular sine component. Straight-line travel reads mechanical.
8. Secondary action — the main move carries garnish: a shine sweep on entrance, particles displaced by a landing card, a caret blink during typing.
9. Timing — vary tempo across a sequence; uniform timing is dead timing.
10. Exaggeration — push 10–20% past real, then settle precisely. Overshoot 1.03–1.12; brief blur on fast entries; scale hero moments up.
11. Solid drawing / depth — perspective, rotY/rotX diagonals, parallax layers, shadows matching the light story.
12. Appeal — delete anything that doesn't earn its motion. One great move beats three okay ones.

A3. Choreography

• Stagger everything plural (rows, chips, cards, words): short offsets, ~50–120ms (2–8f) between siblings; direction follows reading order or the energy source (= the gaze path, A12); randomize ±1f for humanity. The group should finish as one phrase, not a long cascade.
• Cause & effect chains. Click → button press → box lifts → screen recedes → cards fan. Each event triggered by the previous, 2–6f apart — never a simultaneous block-move.
• Beat-sync the big hits. Land mode switches, spawns, cuts, and flashes on the musical grid (see B1 for the math; A16 for how each arrival should feel). Small accents can breathe freely.
• No cheap fades. New things emerge from existing things — morph FROM, wipe, or physically travel. Opacity crossfades between unrelated elements are amateur. Order of preference: morph over cut, cut over crossfade.
• Nothing appears from nothing. Never enter from scale(0): a sub-pixel dot carries no mass, so the ease has nothing to act on and the move reads as a portal rather than an arrival. Start at 0.90–0.97 with `opacity: 0` — the element has size the instant it is visible. A zero-origin entrance also can't satisfy A15: growing from nothing is growing from no origin.
• One signature transition motif. Define the piece's transition once and reuse it for entries, exits, and internal cuts — a video where every cut behaves differently reads assembled, not designed. (Which motif — sweep, morph, match-cut, wipe — is a style call: Part C.)
• One focal event per 8–16 frames. Secondary glow/particles may echo 2–6f later but must not compete with the initiating event.

A4. The human touch (anti-robotic kit)

• Imperfection: ±1–2f timing jitter between siblings; ±2–4% scale/rotation variance — all seeded so renders stay deterministic.
• Idle life: nothing frozen. Breathing scale (±0.4%), float bob (2–5px sine, phase-offset per element), glow pulse, caret blink.
• Micro-rotation: ±0.3–0.5° on floats and landings. Perfectly axis-aligned rest states read CG.
• Typing: variable, accelerating rhythm; occasional seeded typo → delete → retype where the brief wants it.
• Restraint is the brake. Juice never at the cost of feel. Frequency-appropriate, justified motion only, precise micro-durations. If a move isn't earning its screen time, cut it.

A5. Depth, focus & the two blur systems

These are techniques, available to every style. How aggressively the camera exploits them (or whether it moves at all) is klik-cam's domain (its C0 dial).