Skill

/motion-frames

可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签

shell

$ npx -y skills add nexu-io/html-anything --skill motion-frames --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/motion-frames

Context preview

The summary Claude sees to decide when to auto-load this skill.

可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签

Stats

Stars7,918

Forks772

LanguageHTML

LicenseApache-2.0

Ships with html-anything

SKILL.md

motion-frames.SKILL.md

---
name: motion-frames
zh_name: "动效英雄帧"
en_name: "Motion Frames"
emoji: "🌀"
description: "可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签"
category: video
scenario: marketing
aspect_hint: "桌面 hero"
featured: 6
tags: ["motion", "title card", "loop", "video poster"]
---

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