# Motion Frames

> Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.

- Skill: `nexu-io/motion-frames` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add nexu-io/motion-frames`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/motion-frames/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Design & Media, Animation & Graphics, CSS & Styling
- Tags: Css Animations, Globe, Hero Section, Landing Page, Parallax, Svg, Timer
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-07-19
- Page: https://skillmd.com/skills/nexu-io/motion-frames

---


【模板: Motion 帧 / Hero Loop】
【意图】一帧带循环动效的 hero, 可作为视频片头或落地页大图。
【布局】
- Rotating type ring (SVG + transform)
- Animated globe / 抽象几何
- Ticking timer (mono 字体, JS 可有可无)
- Parallax labels 浮动
【设计细节】
- 纯 CSS 动效, 流畅可循环
- 电影感调色 + 1 个霓虹 accent