mcpField
S
sprite-animation

sprite-animation

github.com/nexu-ioクリエイティブ・メディア9.3k40 回インストール2 週間前に更新
リポジトリ

sprite-animation について

sprite-animation は、ピクセルアート風の教育アニメーション用キービジュアルを作るデザインスキルです。中央のマスコットや大きな数字、動く文字を組み合わせ、JavaScript を使わず CSS アニメーションをループさせます。

主な機能

  1. 01ピクセルアート風ポスターの作成
  2. 02CSS keyframes のみでループ
  3. 03中央にピクセルアートのマスコット
  4. 04動く文字とタイムラインの追加
  5. 05レトロな配色の使用

活用シーン

  1. 01教育アニメーションのフレーム制作
  2. 02レトロなピクセルアートのビジュアル設計

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/sprite-animationを入力して読み込まれたか確認します。

同梱ファイルexample.html

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

【模板: 像素 / 8-bit 动画解说】 【意图】教育型动画的单帧海报, 纯 CSS keyframes 循环, 不用 JS。 【布局】

  • Full-bleed cream stage
  • Bold display year / 大字数字
  • 中心一个像素艺术 mascot (SVG 或纯 CSS 绘制)
  • kinetic 中文 / 日文 display 字
  • 底部 timeline ribbon 一直走 【设计细节】
  • 动画用 @keyframes, 不依赖 JS
  • 复古调色板: 红 / 米 / 墨绿

コメント

Markdown 対応