Ty-HA/animation

/animation — すぐに使える 100 のアニメーションスタイル

By Ty — BTHA System (bthasystem.io)。

引数の解釈

受け付ける形式：

• /animation glitch → スタイル glitch、デフォルトテキスト。
• /animation glitch "マイテキスト" → スタイル + アニメーションするテキスト（text プロップに渡します）。
• /animation glitch 16:9 または ... web → フォーマットまたはターゲットを指定。
• /animation 単体または /animation リスト → 以下にグループ化されたカタログを表示し、スタイルを尋ねます。

最初の単語がスラグです。各スラグには専用ファイル references/<slug>.md（このスキルのフォルダ内）があります。コードを書く前に必ずファイルを読んでください。そこには、テクニック、正確な値、そして出発点となる Remotion コンポーネントが含まれています。

不明なスラグ

スラグが存在しない場合：黙って推測しないでください。最も近い 3 つのスタイル（名前、ファミリー、または説明された効果で）を、1 行の説明とともに提案し、どれにするか尋ねてください。例：「vhs」→ glitch、risograph、light-leak。「3d text」→ extruded-text、liquid-chrome、kinetic-type。「matrix」→ ascii、scramble、code-typing。

デフォルトのスタック

• ビデオ（デフォルト）：Remotion (React + TypeScript)、1080×1920、30 i/s（TikTok、Reels、Shorts）。デフォルトの長さ：5 秒（150 フレーム）、別途指定がない場合。
• Web：ユーザーが Web サイト用のアニメーションを希望する場合、ファイルを HTML/CSS/JS（CSS キーフレーム、requestAnimationFrame、canvas、または SVG）に変換します。「位置 = 時間の関数」というロジックは同じです。
• その他のフォーマット：1080×1080（正方形）、1920×1080（YouTube）。9:16 のセーフゾーンを尊重：横方向に約 140 ピクセルのマージン、下部 25％（TikTok インターフェース）には重要なものを配置しない。

守るべき Remotion のルール：

• すべては useCurrentFrame() に依存：フレーム間で状態を蓄積しない（フレームは順不同かつ並列でレンダリングされます）。
• 乱数は remotion の random('seed') のみを使用し、Math.random() は絶対に使用しない。
• メディアは staticFile()、<Img>、<OffthreadVideo>、<Audio> を介して使用し、レンダリングが読み込みを待つようにします。
• フォント：@remotion/google-fonts/<Font> を使用してレンダリングを保証します。

ワークフロー

1. スラグを特定する（または 3 つの近いスタイルを提案する）。
2. references/<slug>.md を読む。
3. 必要に応じて明確化する（一度だけのグループ質問、不明で重要な場合のみ）：フォーマット（デフォルトは 9:16）、長さ、テキスト、ブランドカラー、既存または新しい Remotion プロジェクト。
4. 構築する：
   • 既存のプロジェクト：src/<Style>.tsx を追加し、Root.tsx に <Composition id=... durationInFrames fps={30} width={1080} height={1920} /> で登録する。
   • 新しいプロジェクト：npx create-video@latest（blank テンプレート）、その後同じ手順。
   • ファイルのスニペットから始め、テキスト/色に合わせて調整し、ファイルに示された依存関係をインストールする。
5. 確認する：npx remotion still <id> --frame=<n> out.png を 2〜3 のキーフレームで実行し、画像を確認、修正する。
6. レンダリングする：npx remotion render <id> out/<id>.mp4（より良い品質のために --crf=18 を追加、3D レンダリングが黒い場合は --gl=angle を追加）。
7. 納品する：ファイルパス、長さ、およびファイルから得られる 2〜3 のバリエーション。

複数のスタイルが同時に要求された場合（/animation glitch + synthwave）：すべてのファイルを読み、1 つのコンポーネントに組み合わせる（例：背景 synthwave + タイトル glitch）。

カタログ（100 スタイル）

🔤 キネティックタイポグラフィ & テキストエフェクト

• kinetic-type — Kinetic Type (Headline)：声に同期したインパクトのあるテキスト、ぎくしゃくしたズーム、単語ごと
• split-flap — Split-Flap Display：駅の案内板：文字が回転してから固定される
• glitch — Glitch & VHS レトロ：歪み、スキャンライン、アナログノイズ、色収差
• hud — HUD & Terminal Sci-Fi：未来的な等幅インターフェース、高速カウンター、照準線
• ascii — ASCII アートアニメーション：リアルタイムで変化する文字で構成された画像
• scramble — Scramble / Text Reveal：解読のようにランダムな文字、その後本当の単語
• stacking — Kinetic Stacking：狂ったようなリズムで積み重なる単語
• typewriter — Typewriter：タイプライター、一文字ずつ、点滅するカーソル
• karaoke — Karaoke Captions：TikTok の字幕、発音された単語がハイライトされる
• handwriting — Handwriting / Signature：手書きで描かれるテキスト（SVG パス）
• text-path — Text on Path：曲線、円、螺旋に沿うテキスト
• variable-font — Variable Font Morph：太くなったり、伸びたり、呼吸するような文字
• highlighter — Highlighter Sweep：単語の下に描かれる蛍光ペンや下線
• rotating-words — Rotating Words：固定フレーズの中でループして変わる単語
• mask-reveal — Mask Reveal：形状や画像を通して明らかにされるテキスト

🎨 有機的、流動的 & 抽象的な動き

• liquid-morph — Liquid Morphing：互いに変形し合う形状
• particles — Particles System：風や重力にさらされる何千もの点
• neon — Neon Glow / Cyberpunk：ハローと残像のある発光ライン
• topographic — Wave & Topographic：ループする等高線や数学的な波
• aurora — Aurora & Mesh Gradient：オーロラのように動くぼやけたグラデーション
• metaballs — Blobs & Metaballs：粘性のあるように融合する丸い形状
• bioluminescence — Bioluminescence：深海のような柔らかな光の脈動
• flow-field — Flow Field (Perlin Noise)：流れの場に従う何千もの線
• ink-water — Fluid / Ink in Water：水に拡散するインク
• fractal-zoom — Fractal Zoom：フラクタル内への無限ズーム
• voronoi — Voronoi Cells：分裂して動く有機的なセル
• reaction-diffusion — Reaction-Diffusion：シマウマの皮やサンゴのような生きた模様
• smoke-fire — Smoke & Fire Shader：リアルタイムで生成される煙や炎
• grain-gradient — Grain & Noise Gradient：モダンなポスターのような粒子のあるグラデーション

🧊 3D スタイル、立体感 & マテリアル

• clay-3d — Clay 3D (粘土)：物理演算とバウンドがある粘土細工のようなオブジェクト
• glassmorphism — Glassmorphism：背景をぼかすすりガラスのパネル
• wireframe — Isometric & Wireframe 3D：等角投影図またはワイヤーフレーム構造
• neumorphism — Neumorphism：影の遊びで背景に溶け込む形状
• low-poly — Low Poly：光を捉えるファセットのある 3D
• skeuomorphism — Skeuomorphism：本物のようなボタン、スイッチ、革や金属のテクスチャ
• liquid-chrome — Abstract Chrome / Liquid Metal：反射する水銀または液体金属
• product-spin — 3D Product Spin：それ自体で回転する 3D オブジェクト（パッケージショット）
• extruded-text — 3D Extruded Text：ライトと影のある立体的なテキスト
• card-flip — Card Flip 3D：透視投影で裏返るカード
• cube-transition — Cube / Box Transition：キューブの回転によるトランジション
• globe — 3D Globe：光る点とともに回転する地球儀
• galaxy — Galaxy Particles 3D：奥行きのある粒子の銀河
• holo-foil — Holographic Foil：ホログラムカードのような虹色の反射
• voxel — Voxel Art：Minecraft のような小さな立方体による 3D

📐 アーティスティック、グラフィカル & 歴史的な美学

• swiss — Swiss Design：非対称グリッド、大きなサンセリフ、幾何学的トランジション
• risograph — Risograph & Halftone：粒子の粗いレトロ印刷、ずれたレイヤー、12 i/s
• paper-cutout — Paper Cut-out：影のある切り絵、ストップモーション
• neobrutalism — Neobrutalism：太い黒い輪郭、ハードな影、派手な色
• bauhaus — Bauhaus：円、正方形、三角形、原色
• memphis — Memphis Style：ジグザグ、紙吹雪、市松模様、80 年代パステルカラー
• synthwave — Synthwave / Vaporwave：夕日に向かう無限のネオングリッド
• pixel-art — Pixel Art / 8-Bit：アンチエイリアシングなしのレトロゲーム風
• comic — Comic Book / Cel Shading：漫画、黒い輪郭、ポップアートの網点
• blueprint — Blueprint：青い背景に描かれる建築計画
• frutiger-aero — Frutiger Aero：泡、青緑色のガラス、2000 年代
• corporate-memphis — Corporate Memphis：手足の伸びたフラットなキャラクター
• psychedelic — Psychedelic Retro：70 年代、うねり、彩度の高い色
• line-boil — Line Boil：アニメのように震える輪郭
• y2k — Y2K / Chrome Bubble：2000 年代、クローム、星、泡
• manga-speed-lines — Manga Speed Lines：マンガのスピード線とオノマトペ
• watercolor — Watercolor：拡散する水彩絵の具のしみ
• chalkboard — Chalkboard / Sketch：チョークや鉛筆で描かれるような描画
• art-deco — Art Deco：20 年代の幾何学的な金色の線
• duotone — Duotone：2 色のコントラストによる画像

📊 ダッシュボード、データ & UI インターフェース

• data-story — Data Storytelling：上昇する棒グラフ、描かれる曲線
• bento — Bento Grid：動く非対称なセルのグリッド
• odometer — Count-up / Odometer：値まで回転するカウンター
• micro-interactions — Micro-interactions UI：変形するボタン、アイコン、リップル
• marquee — Infinite Scroll / Marquee：無限にスクロールする帯
• parallax — Parallax Scrolling：異なる速度のレイヤー
• skeleton — Skeleton Loading：コンテンツの前に脈動する形状
• bar-race — Bar Chart Race：時間とともに順位が入れ替わる棒グラフ
• progress-rings — Progress Rings：Apple Watch のような、満たされていくリング
• map-route — Map Route Tracing：地図上に描かれるルート（ランニング！）
• timeline — Timeline：進行する年表
• chat — Chat / iMessage Simulation：表示される会話の吹き出し
• notifications — Notification Stack：落ちてきて積み重なる通知
• phone-scroll — Phone Mockup Scroll：電話機内でスクロールするアプリ画面
• code-typing — Code Typing / IDE：エディタに書かれるコード
• cursor-demo — Cursor Demo：インターフェース内をクリックして移動するカーソル
• before-after — Before / After Slider：スライダーによるビフォーアフター比較

🎬 トランジション & カメラワーク

• whip-pan — Whip Pan：モーションブラーを伴う超高速パン
• zoom-punch — Zoom Punch：決定的瞬間への急激なズーム
• camera-shake — Camera Shake：衝撃による震え
• shape-wipe — Shape Wipe：画面をスイープする形状によるトランジション
• iris — Iris / Circle Reveal：円による開閉
• ink-transition — Ink / Paint Transition：画面を覆うインクのしみ
• light-leak — Light Leak & Lens Flare：フィルムのような光漏れ
• ken-burns — Ken Burns：写真へのスローズーム
• split-screen — Split Screen：開く分割画面
• speed-ramp — Speed Ramp：スローから加速へ
• page-curl — Page Curl：めくれるページ
• match-cut — Match Cut / Morph Cut：2 つの形状間の完璧なつなぎ

🧸 キャラクター & 楽しいエフェクト

• lip-sync — Lip-Sync Avatar：口が声に合わせて動くアバター
• puppet-rig — Puppet Rig：関節のあるキャラクター（腕、頭、まばたき）
• confetti — Confetti / Emoji Rain：紙吹雪や絵文字の雨
• sticker-pop — Sticker Pop：バウンドしながら現れるステッカー
• squash-stretch — Squash & Stretch：カートゥーンのような弾力のあるオブジェクト
• morph-icons — Morphing Icons：あるアイコンから別のアイコンに変形する
• fireworks — Firework / Burst：お祝いのパーティクルの爆発