SkillAgentSearch skills...

motion-frames

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

GenerateConvertImprove

Install / Use

npx skills add nexu-io/open-design --skill motion-frames

Installs into whichever agent you are using.

About this skill
📄

SKILL.md

Installable skill definition

Quality Score

90/100

Supported Platforms

Claude Code

Our assessment of motion-frames

motion-frames scores 90/100 on our quality scale, 170th of 1,630 Development & Engineering skills we index (top 11%).

Its SKILL.md is 3.5 KB long, split into 3 sections with 1 code example: a solid amount of guidance for an agent.

With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance
26/30
Structure
12/20
Description
15/15
Adoption
20/20
Freshness
15/15

Maintenance, license and trust

  • The repository was last updated today, so motion-frames is actively maintained.
  • It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
  • Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

motion-frames compared with similar skills

All 4 of these similar skills score higher than motion-frames; compare them before choosing.

SkillScoreStarsUpdatedFormat
motion-frames (this skill)by nexu-io9097.9ktodaySKILL.md
ai-job-searchby MadsLorentzen10043.9k3d agoCLAUDE.md
claude-howtoby luongnv8910041.7k5d agoCLAUDE.md
algorithmic-artby anthropics100177.9k2d agoSKILL.md
pptxby anthropics100177.9k2d agoSKILL.md

Frequently asked questions

How do I install motion-frames?
Run npx skills add nexu-io/open-design --skill motion-frames. The install tabs above show the steps for each supported agent.
Which AI agents does motion-frames work with?
It is written for Claude Code, as a SKILL.md file. Other agents that read the same format can often use it too.
Is motion-frames safe to use?
It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is motion-frames still maintained?
The repository was last updated today, so motion-frames is actively maintained.

Skill content

View source on GitHub

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 platform: desktop scenario: marketing preview: type: html entry: index.html design_system: requires: true sections: [color, typography, layout, components] 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."

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.

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.

Related Skills

ai-job-search

43.9k

The job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.

claude-howto

41.7k

A visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

pptx

177.9k

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…

nexu-io

View profile

View on GitHub
GitHub Stars97.9k
CategoryDevelopment
Updated15h ago
Forks11.4k
nexu-io/motion-frames

Languages

TypeScript

Trust signals

100/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

No cautions