01 / DIRECT10件
Remotion Agent Skillsのremotion-markupを参照し、Sequenceのローカルフレーム、文字のマスク、springでリリースノートの項目を演出しています。
実行範囲 remotion-markupの構成・アニメーション規則を適用。描画と書き出しはRemotion。
CLAUDE OPUS 5.5 / MOTION DESIGN
Claudeでつくる、
モーショングラフィック。
34本の作例から選ぶ。
スキルとツールの組み合わせを、動きとコードで確認。
つくりたいものから選ぶ
02 / RENDER7件
HyperFramesのコンポジションにGSAPの時刻指定できるタイムラインを登録し、HTMLの文字と図形をフレーム単位でMP4へ書き出しています。
実行範囲 HTMLのコンポジション登録・描画・動画書き出しを実行。
03 / ANIMATE4件
GSAPのtimeline、SplitText、行マスク、staggerを使い、活字が棚から集まり、校正され、戻る一連の動きを任意時刻へ移動できるようにしています。
実行範囲 timeline・SplitText・行マスク・stagger・任意時刻の移動を使用。
04 / DEPTH6件
Three.jsのInstancedMeshで360本の柱を波と文字の形へ変形。材質、環境光、影とカメラを組み合わせて描いています。
実行範囲 InstancedMesh・材質・照明・影・カメラを使った3D描画。
05 / DRAW4件
PixiJSのApplication、Sprite、ContainerとGPUフィルタで、散らばった粒をFORMの文字へ集め、再びほどく2Dシーンを描いています。
実行範囲 スプライト描画・Container・GPUフィルタを使用。
06 / EXPLAIN3件
deck.glのHexagonLayerで5,000点を集計し、ArcLayerで経路を重ね、密度の高さと透明度を時刻に合わせて変えています。
実行範囲 架空の位置データによるGPU描画。HexagonLayerの集計とArcLayerを使用。
作例はClaude Opus 5.5やCodexと制作スキル・ライブラリを用いて制作しています。拡大再生して動きを確かめ、GIFとコードへ進めます。 34本の作例をすべて見る →
START WITH A STACK
迷ったら、制作ルートから。
制作環境を一つ選び、必要な描画ライブラリを組み合わせて進めます。
01
HTMLで短い動画をつくる
HyperFrames + 公式制作スキル
商品紹介・文字演出 →02Reactで動画を組み立てる
Remotion + 公式Agent Skills
再利用・差し替え →03触れる画面を動かす
Motion / GSAP + 設計スキル
UI・製品サイト →04仕組みを動きで伝える
Manim / Motion Canvas
数式・図解・技術解説 →Team・Enterpriseでチャットから制作するなら、Claude Motion（公式ベータ）の始め方と作例記事 →
- 01 / DIRECTClaude + 制作スキル
構成・デザイン・実装
- 02 / DRAWHTML / React / 描画ライブラリ
時刻に合わせてフレームを描く
- 03 / EXPORTレンダラー + 動画処理
動画化・音声・最終確認
コードと動きで選ぶ制作ツール
作例ごとに制作コード、使用スキル、ライブラリのバージョンを記録しています。紹介動画のコードと構成表も確認できます。