Skip to content
Content
Skill

/motion-frames

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

Boost this skill
@nexu-ionexu-io@nexu-io
From plugin
html-anything
8.8k81 skills
Install
$ npx -y skills add nexu-io/html-anything --skill motion-frames --agent claude-code

How it fires

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

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • 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 动效组合: 旋转环、地球仪、计时器、视差标签

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
Read it on GitHub ↗
Ships withhtml-anything

From the team behind Open Design — 40k★ · 200+ contributors, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, Open Design is where the same team ships at scale.

Get the whole plugin
Stats
TypeScriptNodeHTMLCSSBash
+7 tags
SQLGitHubMarkdownAnthropicGeminiObsidianBun
8,827
Stars
857
Forks
Active
Maintenance
HTML
Language
Apache-2.0
License
2d ago
Last commit
4mo ago
Created

Repo: nexu-io/html-anything

In this plugin
81 skills
See everything inside

Other skills on html-anything.

See all 81 skills in html-anything