motion-frames
Best for Marketing teamsWorks with GitHubLow risk
⌘source
- author
@nexu-io- language
- TypeScript
★3.7kstars
455forks
Apr 29, 2026
✦overview.md
Key Features
- ·CSS-only looping animation
- ·Rotating type ring element
- ·Animated wireframe globe
- ·Ticking timer and parallax labels
- ·Single full-bleed poster frame
- ·Ready for keyframe export
Use Cases
- →Creating a motion hero for a marketing landing page
- →Generating a looping video poster for social media
- →Prototyping kinetic typography for a title card
- →Exporting animated frames for HyperFrames or Lottie
Best for
- ✓Marketing teams
- ✓Motion designers
- ✓Prototyping loops
Not ideal for
- !Static posters
- !Long-form video
- !Production without design system
FAQs
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","featured":6,"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
- 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
- Stage — full-bleed
$install
1-click copynpx skills add nexu-io/open-design --skill motion-framesSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.