Motion Frames

Name: Motion Frames
Author: nexu-io

nexu-io/open-design

250 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

motion-frames is an Open Design skill that generates a single-frame looping CSS animation hero as inline HTML for developers who need motion design specs exportable to HyperFrames or other keyframe exporters.

About

motion-frames is an Open Design prototype skill that produces a full-bleed 16:9 motion composition using inline CSS animations only—no JavaScript—so the page itself is the loop. Developers reach for motion-frames when briefs ask for motion design, animated heroes, video posters, title cards, kinetic typography, or HyperFrames-ready kinetic exports paired with Open Claude Design. The workflow reads the active DESIGN.md design system, composes layered SVG rings, a focal wireframe mark, co-rotating ring labels, a display-serif headline, and static frame chrome, then animates at least three layers at different speeds with @keyframes such as rotate-slow, globe-spin, and type-in reveals. Output is a single self-contained HTML document with data-od-id attributes suitable for deterministic capture by HyperFrames, Lottie pipelines, or similar frame grabbers. The skill self-checks that the composition reads as a poster at frame zero and uses the design system accent only once.

animation frames
micro-interactions
transition specs
loading states
UI motion guidance

Motion Frames by the numbers

250 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #557 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill motion-frames

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/motion-frames.svg)](https://skillselion.com/skills/nexu-io/open-design/motion-frames)

Installs	250
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

How do you spec looping CSS hero animations?

Define motion frames and micro-animation sequences for web and product UI to specify transitions, loading states, and interactive feedback before implementation.

Who is it for?

Frontend and design engineers who need a deterministic CSS-only animated hero spec before HyperFrames capture or marketing video production.

Skip if: Teams needing JavaScript-driven interaction animations, native mobile Lottie authoring, or backend API motion orchestration.

When should I use this skill?

The brief mentions motion design, animated hero, loop animation, video poster, title card, kinetic typography, or HyperFrames export.

What you get

A self-contained HTML artifact with inline CSS keyframes, layered SVG motion, design-system tokens, and data-od-id attributes for frame export.

looping HTML motion hero
CSS keyframe animation spec

By the numbers

16:9 hero canvas aspect ratio
Requires at least 3 independently animated layers
Uses 2–3 concentric SVG rings with staggered rotation speeds

Files

SKILL.mdMarkdownGitHub ↗

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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Reach every country — Charlotte &amp; Vine</title>
  <style>
    :root {
      --paper: #f3eee5;
      --ink: #1a1816;
      --muted: #7a766c;
      --accent: #c0563b;
      --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
      --mono: ui-monospace, 'JetBrains Mono', monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body { background: var(--paper); color: var(--ink); font: 14px/1.5 -apple-system, system-ui, sans-serif; overflow: hidden; }
    main {
      position: relative;
      width: 100vw;
      height: 100vh;
      background:
        radial-gradient(circle at 50% 50%, rgba(26,24,22,0.04), transparent 70%),
        radial-gradient(circle, rgba(26,24,22,0.10) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--paper);
      overflow: hidden;
    }

    .chrome { position: absolute; left: 36px; right: 36px; font: 10px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
    .chrome.top { top: 28px; display: flex; justify-content: space-between; align-items: center; }
    .chrome.top .right { display: flex; align-items: center; gap: 22px; }
    .chrome.top .rule { width: 60px; height: 1px; background: var(--ink); opacity: 0.6; }
    .chrome.bot { bottom: 28px; display: flex; justify-content: space-between; align-items: center; }

    .stage {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }
    .composition {
      position: relative;
      width: min(78vh, 78vw);
      aspect-ratio: 1 / 1;
    }

    .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(26,24,22,0.45);
      animation: spin 60s linear infinite;
    }
    .ring.r2 {
      inset: 4%;
      border-color: rgba(26,24,22,0.30);
      animation-duration: 90s;
      animation-direction: reverse;
    }
    .ring.r3 {
      inset: 10%;
      border-color: rgba(26,24,22,0.22);
      border-style: dashed;
      animation-duration: 180s;
    }
    .ring.r4 {
      inset: 18%;
      border-color: rgba(26,24,22,0.12);
      animation-duration: 36s;
    }

    .ring-labels { position: absolute; inset: 0; animation: spin 60s linear infinite; }
    .ring-labels span {
      position: absolute;
      left: 50%; top: 50%;
      font: 12px/1 var(--serif);
      font-style: italic;
      color: var(--ink);
      letter-spacing: 0.02em;
      transform-origin: 0 0;
      white-space: nowrap;
    }
    .ring-labels span.l1 { transform: rotate(-12deg) translate(0, -49vh); }
    .ring-labels span.l2 { transform: rotate(34deg) translate(0, -49vh); }
    .ring-labels span.l3 { transform: rotate(78deg) translate(0, -49vh); }
    .ring-labels span.l4 { transform: rotate(132deg) translate(0, -49vh); }
    .ring-labels span.l5 { transform: rotate(178deg) translate(0, -49vh); }
    .ring-labels span.l6 { transform: rotate(224deg) translate(0, -49vh); }
    .ring-labels span.l7 { transform: rotate(266deg) translate(0, -49vh); }
    .ring-labels span.l8 { transform: rotate(312deg) translate(0, -49vh); }
    .ring-labels span i { display: inline-block; transform: rotate(0deg); /* counter rotation handled inside */ }

    .globe {
      position: absolute;
      inset: 22%;
      border-radius: 50%;
      animation: spin 38s linear infinite reverse;
      transform-style: preserve-3d;
    }
    .globe svg { width: 100%; height: 100%; display: block; }

    .focal-dot {
      position: absolute;
      left: 50%; top: 50%;
      width: 7px; height: 7px;
      background: var(--accent);
      border-radius: 50%;
      transform: translate(-50%,-50%);
      animation: pulse 2.6s ease-in-out infinite;
      box-shadow: 0 0 0 0 rgba(192,86,59,0.35);
    }

    .meta-tl { position: absolute; top: 96px; left: 56px; font: 10px/1.5 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }
    .meta-tl b { display: block; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.12em; }
    .issue { position: absolute; top: 96px; right: 56px; font: 9px/1.3 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-align: right; text-transform: uppercase; }
    .issue .num { font: 18px/1 var(--serif); font-style: italic; color: var(--ink); display: block; letter-spacing: 0; margin-bottom: 4px; }

    .headline {
      position: absolute;
      bottom: 80px;
      left: 0; right: 0;
      text-align: center;
      font: 38px/1.1 var(--serif);
      letter-spacing: -0.005em;
      animation: type-in 1.4s cubic-bezier(.2,.7,.2,1) both;
    }
    .headline .em { font-style: italic; color: var(--ink); }
    .headline .accent { font-style: italic; color: var(--accent); padding-left: 4px; padding-right: 4px; }
    .baseline { position: absolute; bottom: 56px; left: 36px; right: 36px; height: 1px; background: rgba(26,24,22,0.25); }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(192,86,59,0.45); transform: translate(-50%,-50%) scale(1); }
      50% { box-shadow: 0 0 0 18px rgba(192,86,59,0); transform: translate(-50%,-50%) scale(1.25); }
    }
    @keyframes type-in {
      from { opacity: 0; letter-spacing: 0.06em; }
      to { opacity: 1; letter-spacing: -0.005em; }
    }
    @media (max-width: 900px) {
      .meta-tl { left: 20px; }
      .issue { right: 20px; }
      .headline { font-size: 28px; }
    }
  </style>
</head>
<body>
  <main data-od-id="stage">
    <div class="chrome top">
      <div>ANTHROPIC LABS — APR 17 · 2026</div>
      <div class="right"><div class="rule"></div><div>HOW IT WORKS</div></div>
    </div>

    <div class="meta-tl">
      <b>27 · CHARLOTTE × VINE</b>
      19 · 2026
    </div>
    <div class="issue">
      <span class="num">175</span>
      LANGUAGES HAPPENING
    </div>

    <div class="stage">
      <div class="composition" data-od-id="composition">
        <div class="ring r1"></div>
        <div class="ring r2"></div>
        <div class="ring r3"></div>
        <div class="ring r4"></div>

        <div class="globe" data-od-id="globe">
          <svg viewBox="0 0 200 200" aria-hidden="true">
            <defs>
              <radialGradient id="globeShade" cx="35%" cy="32%" r="78%">
                <stop offset="0%" stop-color="#fffaf0"/>
                <stop offset="60%" stop-color="#ece6da"/>
                <stop offset="100%" stop-color="#cfc8b9"/>
              </radialGradient>
            </defs>
            <circle cx="100" cy="100" r="92" fill="url(#globeShade)" stroke="rgba(26,24,22,0.35)" stroke-width="0.7"/>
            <g fill="none" stroke="rgba(26,24,22,0.40)" stroke-width="0.7">
              <ellipse cx="100" cy="100" rx="92" ry="20"/>
              <ellipse cx="100" cy="100" rx="92" ry="48"/>
              <ellipse cx="100" cy="100" rx="92" ry="78"/>
              <ellipse cx="100" cy="100" rx="20" ry="92"/>
              <ellipse cx="100" cy="100" rx="48" ry="92"/>
              <ellipse cx="100" cy="100" rx="78" ry="92"/>
            </g>
            <g fill="rgba(26,24,22,0.28)" stroke="rgba(26,24,22,0.55)" stroke-width="0.6">
              <path d="M 64 70 Q 78 58 96 64 L 110 78 Q 102 92 88 96 L 70 92 Q 60 84 64 70 Z"/>
              <path d="M 116 70 Q 138 64 156 80 Q 152 96 138 100 Q 124 96 116 86 Z"/>
              <path d="M 54 110 Q 72 110 84 124 Q 80 142 64 150 Q 50 138 54 110 Z"/>
              <path d="M 102 118 Q 124 112 146 126 Q 142 144 120 152 Q 102 144 102 118 Z"/>
              <path d="M 84 36 Q 98 32 112 38 L 108 50 Q 96 56 84 50 Z"/>
              <path d="M 80 158 Q 96 156 110 162 L 104 174 Q 90 174 80 168 Z"/>
            </g>
          </svg>
        </div>

        <div class="focal-dot"></div>
      </div>
    </div>

    <div class="ring-labels" data-od-id="ring-labels" aria-hidden="true">
      <!-- positioned around the outer ring; co-rotates with .ring -->
    </div>

    <div class="headline" data-od-id="headline">
      <span class="em">Reach</span> every <span class="accent">country.</span>
    </div>
    <div class="baseline"></div>

    <div class="chrome bot">
      <div>SIGNAL · LIVE</div>
      <div>BROADCASTING / 0001</div>
    </div>
  </main>
</body>
</html>

Related skills

Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k

Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665

Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665

Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665

Remotion RenderRender videos programmatically using React components and Remotion framework441k665

Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

FAQ

Does motion-frames use JavaScript for animation?

motion-frames uses inline CSS @keyframes only with no JavaScript scripts. That deterministic approach lets HyperFrames and other frame grabbers capture the looping hero composition reliably for video export.

What output format does motion-frames produce?

motion-frames emits a single self-contained HTML document between artifact tags with data-od-id attributes on stage, focal, ring, headline, and chrome elements. The 16:9 composition is ready for HyperFrames or similar exporters.

Generative Mediauiux