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.

Install to Claude Code

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