animation
FeaturedAuthor 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.
Install
Quality Score: 87/100
Skill Content
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
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.
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.
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.