Motion Frames
FreeCreate looping CSS animations for web presentations.
Free · Opens the source repo
What Motion Frames does
Motion Frames is a skill designed for developers and designers looking to create dynamic, single-frame motion compositions using CSS animations. This skill provides a structured workflow for producing visually engaging hero videos or animated title cards that can be easily exported using tools like HyperFrames. The focus is on creating a composition that not only looks good but also adheres to best practices in typography and design, ensuring that the final output is both aesthetically pleasing and functional.
The process begins with selecting the right typography from your design system, emphasizing contrast to enhance readability and visual impact. The composition is structured in layers, starting with a full-bleed background and incorporating concentric rings, a focal mark, and animated labels that rotate dynamically. Each element is carefully crafted to contribute to the overall motion design, with specific animations defined using CSS keyframes, allowing for smooth transitions and engaging visuals.
This skill is particularly useful when you need to satisfy a brief that calls for motion design elements, such as animated heroes or looping video posters. By following the outlined steps, you can create a composition that maintains its integrity even when paused, ensuring that it reads well as a static image. The emphasis on inline CSS means that the resulting HTML document is lightweight and easy to integrate into various projects.
Whether you are working on a marketing campaign, a product launch, or any project requiring animated visuals, Motion Frames provides a reliable framework for creating captivating motion graphics that can enhance user engagement and deliver a professional touch to your designs.
When to use it
Use Motion Frames when you need to create a single-frame motion design that can be exported as a video or animation for web use.
When not to use it
This skill is not suitable for projects requiring complex animations involving JavaScript or for those that need extensive interactivity beyond CSS capabilities.
What you can build with it
Creating a Marketing Video
Use Motion Frames to design an animated title card for a marketing video, ensuring it captures attention with dynamic visuals.
Designing a Product Launch Hero
Leverage Motion Frames to create a visually appealing hero section for a product launch website, incorporating animations that highlight key features.
Developing an Interactive Web Presentation
Utilize Motion Frames to enhance a web presentation with looping animations, making the content more engaging for viewers.
How to install Motion Frames
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/motion-frames --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioMotion 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
- 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.
- 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-gradientdots 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.
- Stage — full-bleed
- Animate with
@keyframesonly — no JS:rotate-slow,rotate-med,rotate-fastfor rings.globe-spinfor the focal mark.pulsefor the focal dot, ~2s, easing.marquee-fadeto reveal headline once on load.
- 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-idon stage, focal, ring, headline, chrome.
- 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.
Output contract
Emit between <artifact> tags:
<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Frequently asked questions about Motion Frames
Similar skills
Slack GIF Creator
Create optimized animated GIFs for Slack effortlessly.
Motion Graphics
Create short, design-led motion graphics effortlessly.
HyperFrames Animation
Streamline your animation workflow with comprehensive tools.
Motion Graphics
Create short, impactful motion graphics effortlessly.
Web Animation Design
Create purposeful and natural web animations.
Motion Doctrine
Streamline your animations with cohesive motion rules.