Motion Frames

What it does

When your agent uses it

• The brief asks for motion design
• Pairs Open Claude Design with HyperFrames for a kinetic export

Example prompts

• “motion design”
• “animated hero”
• “video poster”
• “/motion-frames”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Read the active DESIGN.md (injected above). Motion lives or dies on
2. 2Compose the canvas as a 16:9 hero with these layers, back to front
3. 3Animate with @keyframes only — no JS
4. 4Write a single HTML document
5. 5Self-check

What it can do on your machine

Read from SKILL.md and the folder at commit 65da4ac. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md.

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Motion Frames loads about 910 tokens when it runs. Until then it costs about 105 tokens; SKILL.md has 338 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~105

When it runs · the whole SKILL.md, loaded when a task matches

~910

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sanqiufong/slides-from-anything at commit 65da4ac, republished under its Apache-2.0 licence (© sanqiufong). 338 words, ~910 tokens.

name

motion-frames

description

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.

triggers

motion design, motion graphic, animated hero, loop animation, video poster, title card, hyperframes, kinetic typography, 动态设计, 动效

od.mode

prototype

od.platform

desktop

od.scenario

marketing

od.featured

6

od.example_prompt

Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export.

<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>

© sanqiufong, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/motion-frames of sanqiufong/slides-from-anything.

• SKILL.md
• example.html

Open the folder on GitHubat commit 65da4ac

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sanqiufong/slides-from-anything, which our catalogue first saw on October 7, 2026.

• nexu-io/open-designdesign-templates/motion-frames