motion-frames について
motion-framesは、ループアニメーション付きのヒーローフレームを作るデザインテンプレートです。動画のイントロやランディングページの大きなビジュアルに使え、回転する文字や動く図形をCSSで表現します。
主な機能
- 01ループアニメーション付きヒーローの作成
- 02SVGの回転する文字リング
- 03動く地球または抽象図形の追加
- 04任意でタイマーを表示
- 05CSSのみでループアニメーションを実装
活用シーン
- 01動画イントロ画面の作成
- 02ランディングページのヒーロー画像の設計
- 03ブランドビジュアルへのループ演出の追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/motion-framesを入力して読み込まれたか確認します。
同梱ファイルexample.html
README（原文）English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
【模板: Motion 帧 / Hero Loop】 【意图】一帧带循环动效的 hero, 可作为视频片头或落地页大图。 【布局】
- Rotating type ring (SVG + transform)
- Animated globe / 抽象几何
- Ticking timer (mono 字体, JS 可有可无)
- Parallax labels 浮动 【设计细节】
- 纯 CSS 动效, 流畅可循环
- 电影感调色 + 1 个霓虹 accent
コメント
Markdown 対応