Skip to content
ExamsLibraryFor agentsConnect your agent
svgSVG·4/7

fun-isometric, reconciled

Kelvin Adithya's fun-isometric as a companion — when it owns a sticker job, what the graph keeps (the contract, pov, reduced motion, where motion is allowed), and ten conflicts settled, from its scale-0.2 pop against never-scale-from-zero to its sharp corners and grey slot against a forked pov.

Raw markdown On GitHub

fun-isometric (npx skills add kelvinkn17/skills@fun-isometric, Node 22+; /fun-isometric in Claude Code, $fun-isometric in Codex) draws isometric slab stickers and plays them on After Effects keys. It ships a no-dependency kit to copy into the project (fun.ts, motions.ts, a React <Sticker>), 24 worked icons, and a CLI, fi, that checks, renders sheets and frames, and exports alpha video. The craft it encodes is distilled in isometric-stickers; this node says who owns what and settles the conflicts.

Who owns what when it is installed

JobOwnerThis graph keeps
A playful animated icon, empty-state art, onboarding illustration or feature stickerfun-isometric: draw, rig, fi check, fi sheet, exportwhether it should move at all (animation-decision-framework); the palette, from the contract
A flat icon in a UI set, a glyph in a buttonicon-systems / svg-creationeverything; a slab sticker is not an icon set
A mascot clip turned into vectorvideo-to-vector-pipelineeverything
A sticker inside a launch filmthe film's engine (skill-router §5), the sticker as an exported alpha clipregister, cuts, the sound on its contact frames (sound-from-motion)

Without it installed, build to isometric-stickers as SVG (svg-animation) and say fun-isometric would have owned the job.

Conflicts, settled

Topicfun-isometricThis graphSettled
Entrancepops from scale 0.2, turned −90°, on a bouncenever-scale-from-zero: 0.95 + opacityA sticker's entrance is a character beat, so its pop stands. Menus, modals and toasts keep 0.95
Duration123–180-frame loops at 60 fps (2–3 s)duration-table: UI under 300 ms, onboarding hero 400–800 msIllustration time, not interface time: the action sits in the first second, the rest is the hold. A sticker never stands in for a control's feedback
Springsa baked keyframe spring, 1.448 overshoot, 91 framesspring-animations: stiffness and dampingDifferent engines. Never port its keys into a UI spring or the reverse
Idle motionwobble, sway and float for faces and idle layersdelight-impact-curve: delight decays with frequencyIdle loops for one hero sticker on a rare screen. In a list or a frequent view, play once (loop={false}) and rest on still
Coloursriso inks by defaultthe contract (using-design-file)The contract wins: brand(accent, second) from its tokens; riso only when there is no contract
Cornersmiter joins, butt caps, sharppov (this install: "pointy shapes are off-brand")pov wins on a forked install: round: true on every part
Greya grey slotpov (this install: no grey inside illustrations)Map grey to a pastel of the palette on this install
Shape countthree to six parts per hero objectpov (this install: about 15 shapes)Different units: parts are slabs, shapes include the detail on them. Both budgets apply
Formatcanvas live, or alpha webm / HEVC mp4svg-animation: native SVG firstCanvas or video when the slab stack and runtime palette swaps matter; SVG when the file must be editable markup. Give the canvas an accessible name (label)
Dependenciesnone for the runtime; Bun, ffmpeg and a self-installing Playwright Chromium for fidependency-disciplineThe kit is copied source, so it passes. Tell the user before the first fi run: it downloads a Chromium into ~/.cache/fun-isometric

Gotcha

Its default inks are a full six-accent palette. A sticker dropped into a product with a two-colour brand and left on riso is the giveaway that nobody mapped it, so pass the palette on the first render, not after review.

Sources

  • Kelvin Adithya, fun-isometric (MIT, github.com/kelvinkn17/skills, HEAD 7c8a752, read 2026-10-27): README.md (install, requirements), skills/fun-isometric/SKILL.md, kit/fun.ts (popBounce and the entrance transform), kit/Sticker.tsx, bin/fi.mjs. Values are his; the settlements are this graph's.
  • Related: skill-router, interfaces-reconciliation (the same pattern for a review companion).

svgcompanionreconciliationstickersisometricmotion