mcpField
M
motion-frames

motion-frames

github.com/nexu-ioCreative & media9.3k39 installsUpdated 2w ago
Repository

About motion-frames

motion-frames is a design template for a hero frame with a looping animation, suited to video intros or landing-page hero images. It combines rotating type, animated visuals, and floating labels using CSS motion.

Key features

  1. 01Creates a hero frame with looping motion
  2. 02Uses an SVG rotating type ring
  3. 03Adds an animated globe or abstract geometry
  4. 04Optionally includes a ticking timer
  5. 05Uses CSS-only looping animation

Use cases

  1. 01Creating a video intro frame
  2. 02Designing a landing-page hero image
  3. 03Adding looping motion to brand visuals

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/html-anything --skill motion-frames

After installing, type/motion-framesin Claude Code to confirm it loaded.

Bundled filesexample.html

Details

From the project README

【模板: Motion 帧 / Hero Loop】 【意图】一帧带循环动效的 hero, 可作为视频片头或落地页大图。 【布局】

  • Rotating type ring (SVG + transform)
  • Animated globe / 抽象几何
  • Ticking timer (mono 字体, JS 可有可无)
  • Parallax labels 浮动 【设计细节】
  • 纯 CSS 动效, 流畅可循环
  • 电影感调色 + 1 个霓虹 accent

Comments

Markdown supported