motion-frames

motion-frames is a skill for Claude Code, Codex from wolfenazz/YzPzCode. It costs 91 tokens per session (937 once invoked), scanned A, a copy of motion-frames, Apache-2.0.

A single-page animated visual made with HTML and CSS, featuring rotating rings, labels, and a central graphic such as a globe or monogram. It is designed as a still composition that can be exported into a looping video.

In plain words
What is it for?
Use it for animated website heroes, motion-design posters, looping title cards, and video-poster compositions.
Why use it?
It provides a defined structure for creating an animated hero without starting the motion layout from scratch. The page can serve as a source for video or animation export tools.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/wolfenazz/yzpzcode/motion-frames
Any agent
npx skills add wolfenazz/YzPzCode --skill motion-frames
Clone the repo
git clone --depth 1 https://github.com/wolfenazz/YzPzCode

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for motion-frames

README.md
[![agentmods](https://agentmods.dev/badge/skills/wolfenazz/yzpzcode/motion-frames.svg)](https://agentmods.dev/skills/wolfenazz/yzpzcode/motion-frames)
Your own site
<a href="https://agentmods.dev/skills/wolfenazz/yzpzcode/motion-frames"><img src="https://agentmods.dev/badge/skills/wolfenazz/yzpzcode/motion-frames.svg" alt="Measured on agentmods" height="20"></a>
Per session 91 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 937 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00091 $0.00937
Opus 5 $0.00046 $0.00468
Sonnet 5 $0.00018 $0.00187
Haiku 4.5 $0.00009 $0.00094

Measured yesterday against content hash c6ca317d618a, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

motion-frames 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 yesterday.

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.

Origin

This is a copy

100% identical to motion-frames — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

app/desgin/design-templates/motion-frames/SKILL.md · 90 lines

How it starts

The opening of the file, as written. The whole thing — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Motion Frames Skill

Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.

Workflow

  1. Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
  2. Compose the canvas as a 16:9 hero with these layers, back to front:
    • Stage — full-bleed <main>. Off-white or DS-canvas background, very subtle dotted grid texture (CSS background, radial-gradient dots at 22–32px intervals).
    • Concentric rings — 2–3 SVG circles radiating from a focal point. Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
    • Focal mark — a wireframe globe, a stylized object, or a typographic monogram drawn as inline SVG. ~28% of the canvas wide.
    • Ring labels — short words / phonetic tokens placed around one of the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with the ring, with <text> paths counter-rotated so the words stay upright.
    • Headline — bottom-left or center-bottom. Display serif, italic accent on one word. Add a subtle letterSpacing + opacity reveal animation (@keyframes type-in).
    • Frame chrome — corner stamps (top-left lab tag, top-right brand or issue number) and a thin baseline rule. Static.
  3. Animate with @keyframes only — no JS:
    • rotate-slow, rotate-med, rotate-fast for rings.
    • globe-spin for the focal mark.
    • pulse for the focal dot, ~2s, easing.
    • marquee-fade to reveal headline once on load.
  4. Write a single HTML document:
    • <!doctype html> through </html>, CSS inline.
    • All motion uses CSS — no scripts, so HyperFrames or any frame-grabber can capture it deterministically.
    • data-od-id on stage, focal, ring, headline, chrome.
  5. Self-check:
    • The composition still reads as a poster with motion paused at frame 0.
    • At least 3 layers move at different speeds (depth comes from delta velocity, not parallax tricks).
    • Accent appears once — usually the italic word in the headline.

Read the full file on GitHub · 90 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

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.

  1. yesterday First seen · 90 lines · 91 tokens per session scan A c6ca317d618a

Subscribe to this mod's changes

motion-frames is a skill published in the GitHub repository wolfenazz/YzPzCode (13 stars, last pushed yesterday), licensed Apache-2.0. It adds 91 tokens to every session and 937 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to motion-frames, differing in 0 lines, and is treated as a copy.