Motion Frames

You need an animated hero that loops cleanly for export, and you don't want to wrestle with After Effects timelines. This generates a single HTML file with pure CSS keyframes: rotating concentric rings, a wireframe focal object, kinetic type, all timed to loop at 12 seconds. It's designed as a poster frame that HyperFrames or any screen recorder can capture into video. The composition reads as a static design at frame zero, so even if someone disables motion it still works. Useful when a brief asks for "motion design" or "animated title card" and you want to hand off a deterministic artifact instead of a Lottie JSON nobody can edit.

skills.sh installs: 249
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill motion-frames --agent claude-code

Installs into .claude/skills of the current project.

Files

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.