animation

Featured

Author animated technical explainer diagrams as .anim.json files for Nimbalyst's Animation editor. Use when the user wants to animate a diagram, show how a system/protocol/algorithm behaves over time, build a motion explainer, or turn a static architecture diagram into something that plays.

AI & Automation 1,691 stars 249 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Animation - step-based explainer diagrams `.anim.json` files open in Nimbalyst's Animation editor: a named scene plus an ordered list of steps that assign states to the scene's parts. You write plain JSON. Any agent can author or edit one with `Write` and `Edit` -- there is no binary format and no tool call required. ## When to use this - Explaining how a system behaves **over time**: a request crossing a network, a consensus round, a cache filling, a build pipeline, a queue draining. - Turning a static architecture diagram into something that plays. - Showing a failure and a recovery: the retry, the rollback, the rejected review. **Do not use it** when a static diagram says the same thing. If nothing changes between the first frame and the last, you want Excalidraw or a Mermaid block, not an animation. ## The mental model Three rules drive every decision in this format: 1. **The document says what is true when, never how to tween.** There are no keyframes, easing curves, or property tracks. You assign a *state* to a part, and CSS transitions interpolate. Adding motion means naming a state, not scripting a timeline. 2. **States are cumulative.** A step asserts only what changes; every part it does not mention keeps whatever the previous step left it in. Write deltas. **To turn something off you must explicitly set it back** -- it will not decay on its own. 3. **Ids are names, not handles.** `store`, `title-card`, `queueTask01`. You will reference them constantly in `...

Details

Author
nimbalyst
Repository
nimbalyst/nimbalyst
Created
10 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

diagram-animator

Animate the arrows of a static diagram — a pulse travels along each connector in the direction the data flows, and nothing else in the image moves. Use this whenever someone wants to animate an architecture diagram, flowchart, system design, pipeline, or any "how it works" explainer image, including phrasings like "make this diagram move", "animate the arrows", "animate this schema for LinkedIn", "add motion to this architecture picture", or "turn this PNG into a GIF". Also use it when someone asks how to animate a diagram at all, even before they upload one. Do NOT use it for generating diagrams from scratch, for video editing, or for animating photographs.

1 Updated 1 months ago
nazboyko
AI & Automation Listed

manim-explainers

Use when building short animated technical explainers (graphs, architectures, system diagrams) with Manim. Covers render commands and quality flags, scene structure notes, and a reusable network-graph scene starter.

1 Updated 1 weeks ago
Mixard
Web & Frontend Listed

animate-it

Animation implementation protocol for web interfaces: easing, duration, springs, CSS transitions, keyframes, Motion (Framer Motion), WAAPI. Fires on three branches: adding motion to a component ("animate this", "should this animate?"); diagnosing motion that feels wrong ("make this transition smoother", "what easing should I use"); and reviewing pasted animation code. Deciding what should move and why is kiln's job (motion.md); this skill makes it move correctly. Static styling without motion is kiln's too.

0 Updated 1 months ago
lroolle