Skip to main content
ClaudeWave
Skill6.7k repo starsupdated 11d ago

motion-frames

The motion-frames skill provides reusable CSS animation combinations including rotating rings, globes, timers, and parallax labels for hero sections. Use this when building looping background animations for video intros, landing page headers, or full-width hero sections that require cinematic styling with neon accents and smooth, repeating motion effects.

Install in Claude Code
Copy
git clone --depth 1 https://github.com/nexu-io/html-anything /tmp/motion-frames && cp -r /tmp/motion-frames/next/src/lib/templates/skills/motion-frames ~/.claude/skills/motion-frames
Then start a new Claude Code session; the skill loads automatically.

SKILL.md

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