motion-frames

Original：🇺🇸 English

Translated

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.

4installs

Sourcenexu-io/open-design

Added on2026-04-29

NPX Install

npx skill4agent add nexu-io/open-design motion-frames

SKILL.md Content

View Translation Comparison →

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

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