Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add aiatelie/ai-atelie --skill animated-videogit clone --depth 1 https://github.com/aiatelie/ai-atelieWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/aiatelie/ai-atelie/animated-video)<a href="https://agentmods.dev/skills/aiatelie/ai-atelie/animated-video"><img src="https://agentmods.dev/badge/skills/aiatelie/ai-atelie/animated-video/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/aiatelie/ai-atelie/animated-video"><img src="https://agentmods.dev/badge/skills/aiatelie/ai-atelie/animated-video.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00043 | $0.01660 |
| Opus 5 | $0.00022 | $0.00830 |
| Sonnet 5 | $0.00009 | $0.00332 |
| Haiku 4.5 | $0.00004 | $0.00166 |
Grade A, and why
animated-video scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 81 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Animated video
Timeline-based motion design — animated explainer-style HTML artifacts where time advances and elements enter or exit on a schedule. Distinct from interactive prototypes (which are state-driven, not time-driven) and from CSS micro-interactions (which decorate a static layout instead of carrying it).
When to use this skill
- The user asks for "an animated explainer", "a video", "an animation", "a sequence", "a kinetic title".
- The design's value is mostly in the timing (an idea unfolding over seconds, choreographed entries, scene transitions).
- The output will end up exported as a video clip (often via the
exportskill's video capability — MP4 / WebM / Lottie). - 1920×1080 hero animations, lower-third graphics for video editing, intro/outro sequences, animated logos.
When this skill does NOT apply
- Static layout with hover/scroll micro-interactions → use CSS transitions inside an interactive prototype (see
interactive-prototype) or directly in the page's CSS. - State-driven flows (click → next screen → modal → success state) → that's an interactive prototype, not motion design. Even if it animates between states, the animation is decorating the state machine, not driving the experience.
- Single-frame visuals (banners, posters, thumbnails) → DesignCanvas with one
<DCArtboard>. - Timeline scrubbing of a UI (showing a user flow as a sequence of screens advancing on a clock) → still better as
interactive-prototypewith auto-advance state, because the user typically wants to pause and study a frame.
Setup
Drop in the canonical animations.jsx starter via the MCP server:
mcp__starters__copy_starter({ kind: "animations.jsx" })
The starter exposes the timeline primitives via window:
| Primitive | Role |
|---|---|
<Stage> |
Wraps the whole piece. Provides auto-scale to fit the viewport, a scrubber, play/pause keyboard shortcuts. |
<Sprite start end> |
Declares the lifetime of an element on the timeline (in seconds). Renders only between start and end. |
useTime() |
Hook returning current timeline position in seconds. Use inside an animated component to drive transforms / opacity / etc. |
useSprite() |
Hook returning the local time within a <Sprite> (0 at start, end - start at end). |
Easing |
Standard easing functions (linear, easeIn, easeOut, easeInOut, cubic curves). |
interpolate(t, [tStart, tEnd], [vStart, vEnd], easing?) |
Value interpolation between keyframes; clamps outside the range. |
| Entry / exit primitives | <FadeIn>, <FadeOut>, <SlideIn>, <SlideOut> — wrap content; declare duration; the rest is automatic. |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 81 lines · 43 tokens per session scan A efa47e0790db
animated-video is a skill published in the GitHub repository aiatelie/ai-atelie (8 stars, last pushed 3mo ago), licensed MIT. It adds 43 tokens to every session and 1,660 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
hyperframes
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation…
magazine-web-ppt
For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.
hatch-pet
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells…
ve-midnight-editorial
OpenDesign's financial review: runway, burn, and the sustainability plan that keeps the project independent. Built as a decision-grade data & finance deck for board, leadership.
open-design-landing-deck
OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community.
hps-retro-tv
A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Built as a decision-grade story deck for family, close friends.