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.

View source Repository: html-anything

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.

Definition

SKILL.md

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