Skill6.7k estrellas del repoactualizado 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.

Ver fuente Repositorio: html-anything

Instalar en Claude Code

Copiar

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

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

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

Del mismo repositorio

article-magazineSkill

Substack / Medium 高级感长文排版, 适合公众号、博客发布

blog-postSkill

杂志感长文, 含 masthead、hero、figures、pull quote、作者署名

card-twitterSkill

推特金句 / 数据卡, 适合配推文

card-xiaohongshuSkill

小红书风格知识卡片, 多张联排可滑动浏览

competitive-teardownSkill

定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告

dashboardSkill