映像制作・モーショングラフィックスで使われるシェイプアニメーション408種を、20のカテゴリに分類したビジュアル辞典。すべてのエフェクトにライブデモとRemotionでの実装コード解説付き。

408
エフェクト総数
20
カテゴリ
408
ライブデモ
3
実装方式

この辞典について

なぜ作ったか

Remotionで映像制作をしていると、「あのアニメーション何だっけ?」「この動きをどう実装するんだっけ?」という場面に頻繁に遭遇します。Web上の情報は断片的で、網羅的にまとまった日本語リソースは存在しません。

この辞典は、シェイプを使ったモーショングラフィックスのパターンを408種収録し、すべてにブラウザ上で動作するライブデモを付けることで、「見て→動かして→実装する」という流れをワンストップで完結させることを目指しています。

使い方

3つの実装方式

CSS Animation JavaScript / React Canvas / SVG

各エフェクトは上記いずれかの方式で実装されています。Remotionでは主にReactコンポーネントとして記述しますが、CSSアニメーションやCanvas描画も組み合わせて使用します。

📷 画像をドロップ または クリックで選択 — シェイプに画像を適用

20カテゴリ 一覧

1. シェイプの登場(Shape Entrances)

28種
1-1Scale Popスケールポップ

シェイプがscale 0から110%にオーバーシュートし、100%に収まる定番の登場演出

ボタン出現 / モーダル表示 / アイコン登場 / 通知バッジ

弾けるような活力と注目感。ポップで親しみやすい印象を与える

LIVE DEMO
1-2Spring Popスプリングポップ

バネのようなオーバーシュート&バウンスで弾力的に拡大。GSAPのelastic.outイージング

ゲームUI / キャラ登場 / リアクションアニメーション / 強調表示

弾力感が「生きている」印象を与え、楽しさとダイナミズムを感じさせる

LIVE DEMO
1-3Slide From Edgeエッジスライド

画面端(左/右/上/下)からスライドインして所定位置に到達する基本的な登場演出

メニュー出現 / カードリスト / スライドショー / サイドパネル

方向性が「到着」を暗示し、自然で違和感のない動き

LIVE DEMO
1-4Drop Inドロップイン

上から落下し、着地時にscaleY圧縮+scaleX拡張のスクワッシュ変形後に復帰

通知ドロップ / ゲームアイテム獲得 / モーダルダイアログ / バッジ付与

重力感が「実体」を感じさせ、物理的な存在感と重要性を演出

LIVE DEMO
1-5Grow From Pointポイント成長

clip-path circleが中心の0%から100%に広がり、シェイプが内側から出現する

フォーカスポイントの展開 / マップピン / プロフィール画像表示

中心から広がる動きが「発生」「誕生」を暗示し、有機的な印象

LIVE DEMO
1-6Unfoldアンフォールド

scaleX 0→1で左端を起点に横に展開する。折り畳まれた紙が開くイメージ

プログレスバー / パネル展開 / アコーディオン / メニュー開閉

段階的な開示が「丁寧さ」を演出。情報を整理して見せる効果

LIVE DEMO
1-7Iris Openアイリスオープン

カメラの絞りのように中心から円形に開いて内容が現れる映像的トランジション

シーン切替 / 映画風演出 / フォトギャラリー / ビデオオープニング

映画・映像の文法で「次の場面へ」の期待感を生む。シネマティック

LIVE DEMO
1-8Wipe Revealワイプリビール

左から右にマスクが通過してシェイプが徐々に露出する。clip-path insetで実装

ビフォーアフター / スライドショー / テキスト表示 / コンテンツ切替

「覆いを取る」動作が発見の喜びを演出。自然な時間の流れを表現

LIVE DEMO
1-9Diagonal Wipeダイアゴナルワイプ

斜め45度の切り口でシェイプが出現。polygon clip-pathで斜め方向にマスク拡張

ポートフォリオ / ファッション系サイト / 映像トランジション

斜めの動きがダイナミズムと洗練された印象を同時に与える

LIVE DEMO
1-10Rotate Inロテートイン

回転しながらスケールアップして登場。回転の勢いが注目を集める

ローディング完了 / アイコン登場 / ゲームエフェクト / バッジ獲得

回転が「変化」「変身」を暗示し、エネルギッシュで劇的な印象

LIVE DEMO
1-11Flip Inフリップイン

Y軸回転で裏面から表面へ。3Dperspectiveで奥行きのあるフリップ

カードフリップ / 情報切替 / クイズの答え表示 / プロダクトカード

裏返す動作が「秘密の開示」を暗示し、好奇心と発見の喜びを刺激

LIVE DEMO
1-12Shutter Openシャッターオープン

上下のシャッター(幕)が開いて中身のシェイプが見える。映画の幕開け風

プロダクトリビール / 映画風オープニング / ギャラリー / イベント告知

「幕が上がる」メタファーが特別感と期待感を最大化する

LIVE DEMO
1-13Typewriter Blocksタイプライターブロック

4つの小さなブロックが左から順にスタガー(時間差)で出現するタイプライター風

ステップ表示 / プログレス / ドット読み込み / リズム感のある登場

順序立てた出現がリズム感を生み、「整理された情報」の印象を与える

LIVE DEMO
1-14Pixel Assembleピクセルアセンブル

ドットがランダム位置から集合して四角形を形成する。Canvas2Dで粒子シミュレーション

テクノロジー系演出 / データ集約の可視化 / ロゴ組み立て / SF風UI

混沌から秩序への変化が「知性」「テクノロジー」を暗示する

LIVE DEMO
1-15Line Draw Revealラインドローリビール

SVGの枠線がstroke-dashoffsetで描画された後、中身がフェードインする二段階演出

アイコン描画 / ロゴアニメーション / インフォグラフィック / イラスト表示

手描き感が「丁寧さ」「クラフト感」を演出。完成への過程を見せる

LIVE DEMO
1-16Elastic Stretchエラスティックストレッチ

ゴムのように引き伸ばされて飛んできて所定位置に収まる。GSAP elastic easing使用

ゲームUI / キャラクターアニメ / インタラクティブ要素 / 遊び心のあるUI

弾力的な変形が「柔軟性」「遊び心」を表現。子ども心をくすぐる

LIVE DEMO
1-17Split Entranceスプリットエントランス

左右に分割された面が両側から合体して1つのシェイプになる

ロゴ表示 / 合流・統合のメタファー / コラボ表現 / パートナーシップ

分離から統合への動きが「結合」「協力」を象徴。完成の達成感

LIVE DEMO
1-18Mask Chaseマスクチェイス

矩形マスク枠が移動しながら中身を順次露出させる。スキャン風の演出

スキャン演出 / 検索結果表示 / テクノロジー系UI / データ解析風

走査線が「分析」「探索」を暗示し、テクノロジカルな印象を与える

LIVE DEMO
1-19Blur Materializeブラーマテリアライズ

強いぼかしから徐々にクリアになり実体化する。filter: blurで実装

夢から覚める演出 / フォーカス効果 / 回想シーン / 視点変化

ぼやけた状態が「不確かさ」、クリアになることで「確信」「発見」を表現

LIVE DEMO
1-20Stampスタンプ

上から叩きつけるように出現し、着地時に画面全体が微震動する

承認スタンプ / 実績解除 / 重要通知 / ゲームクリア演出

衝撃的な着地が「決定」「確定」を暗示。力強さとインパクト

LIVE DEMO
1-21Spiral Inスパイラルイン

渦巻き状の軌道で外周から中心に向かって登場する。JS制御の座標変化

ロゴ登場 / マジック演出 / ゲームアイテム出現 / 集約のメタファー

渦巻きが「集中」「引き寄せ」を暗示し、催眠的な魅力を持つ

LIVE DEMO
1-22Bounce Cascadeバウンスカスケード

3つのシェイプが時間差でバウンドしながら着地する。カスケード(連鎖)演出

リスト項目の登場 / ステップ表示 / 複数要素の順次表示 / 評価スター

連鎖的な動きがリズム感と楽しさを生む。複数要素の「チームワーク」感

LIVE DEMO
1-23Fan Openファンオープン

3枚のカードが重なった状態から扇子のように広がって並ぶ

カード選択 / メニュー展開 / ギャラリー表示 / ゲームの手札

扇形の展開が「選択肢の提示」を暗示。優雅で洗練された印象

LIVE DEMO
1-24Morph From Dotドットモーフ

小さな円(ドット)から徐々に四角形にモーフィングしてシェイプが完成する

ローディング→コンテンツ / マップピン展開 / UI要素の生成

形状の変化が「進化」「成長」を暗示。有機的で自然な変化

LIVE DEMO
1-25Zigzag Enterジグザグエンター

ジグザグ軌道を描きながら左からスライドインする。JS座標制御

ゲームUI / キャラクター登場 / 遊び心のある演出 / 注目集め

不規則な動きが「遊び心」「予測不能な楽しさ」を表現

LIVE DEMO
1-26Curtain Riseカーテンライズ

下から上にカーテンが上がるようにclip-pathで徐々に露出する

劇場風オープニング / プロダクトリビール / セレモニー / イベント告知

カーテンが上がるメタファーが「開演」「始まり」の高揚感を演出

LIVE DEMO
1-27Clock Revealクロックリビール

時計の針のようにconic-gradientの扇形が12時方向から時計回りに広がって出現

タイマー完了 / 円グラフ / ローディング / カウントダウン演出

時計の動きが「時間の経過」「達成」を暗示。進行感と達成感

LIVE DEMO
1-28Glitch Appearグリッチアピア

デジタルノイズ→ちらつき→安定して出現。clip-pathとtranslateの断片的な表示

テクノロジー系 / SF演出 / エラー→復帰 / サイバーパンク風UI

グリッチが「デジタル」「未来」を暗示。不安定から安定への安心感

LIVE DEMO

2. シェイプの退場(Shape Exits)

18種
2-1Scale Outスケールアウト

110%に一瞬膨張してからscale 0に収縮して消える。登場のScale Popの逆再生

モーダル閉じ / 通知消去 / アイテム削除 / ポップアップ退場

「弾けて消える」感覚が軽快さを演出。消去のストレスを和らげる

LIVE DEMO
2-2Fade Outフェードアウト

opacity 1→0で静かに消える最も基本的な退場。他のアニメーションと組み合わせやすい

セクション切替 / 要素の非表示 / トースト消去 / 背景トランジション

穏やかで自然な消え方。ユーザーに「消えた」ことを意識させない上品さ

LIVE DEMO
2-3Slide Awayスライドアウェイ

画面端(右方向)へスライドして退場。translateXで水平移動しながらフェード

リスト要素の削除 / スワイプ退場 / カルーセル切替 / パネル閉じ

移動方向が「退出」を明確に伝え、空間的な理解を助ける

LIVE DEMO
2-4Rise Outライズアウト

上方向にふわっと浮き上がりながらフェードアウト。重力に逆らう軽やかな退場

完了メッセージ / 送信アニメーション / 成功通知 / アイテム消費

上昇は「昇華」「達成」を暗示。ポジティブな消去演出に最適

LIVE DEMO
2-5Shrink to Pointポイント収縮

clip-path circleが中心に向かって収縮し、点になって消える。Grow From Pointの逆

フォーカス解除 / マップピン消去 / 閉じるアニメーション / 最小化

中心に吸い込まれる動きが「格納」「保存」を暗示。消えても存在は残る感覚

LIVE DEMO
2-6Fold Closeフォールドクローズ

右端を起点にscaleX 1→0で横方向に折り畳まれて消える。Unfoldの逆再生

パネル閉じ / アコーディオン収納 / メニュー格納 / サイドバー

折り畳む動作が「整理」「片付け」を連想させ、秩序感を保つ

LIVE DEMO
2-7Iris Closeアイリスクローズ

clip-path circleが100%→0%に絞られ、カメラの絞りのように中心に閉じる

シーン終了 / エンディング演出 / フォトギャラリー閉じ / ビデオクロージング

映画のフェードアウト。「幕が閉じる」終わりの美学を表現する

LIVE DEMO
2-8Wipe Awayワイプアウェイ

左端から右端へマスクが閉じてシェイプが消去される。clip-path insetで実装

スライド切替 / コンテンツ消去 / ビフォーアフター逆再生

拭き取る動作が「清掃」「リセット」を連想させ、すっきりとした印象

LIVE DEMO
2-9Diagonal Wipe Outダイアゴナルワイプアウト

斜め方向にpolygon clip-pathが収縮してシェイプが消える。Diagonal Wipeの逆

ポートフォリオ切替 / 映像トランジション / ファッション系退場演出

斜めの動きが退場にもダイナミズムを加え、単調さを打破する

LIVE DEMO
2-10Rotate Outロテートアウト

回転しながら縮小して消える。Rotate Inの逆。渦に吸い込まれる印象

ゲームエフェクト退場 / ローディング終了 / アイコン消去 / トランジション

回転の勢いが「消え去る」動作にエネルギー感を付加する

LIVE DEMO
2-11Flip Outフリップアウト

Y軸回転で裏側に回転しながら消える。3D perspectiveで奥行きのある退場

カード裏返し退場 / 情報切替 / クイズ終了 / パネル閉じ

表から裏への移行が「片付ける」「しまう」を暗示する立体的退場

LIVE DEMO
2-12Dissolveディゾルブ

シェイプがパーティクルに分解されて散逸する。Canvasで粒子が四方に飛散

消滅演出 / ゲームキャラ退場 / マジック風消失 / データ削除

物質が粒子に還る様が「無に帰す」「変容」を暗示。劇的で印象的

LIVE DEMO
2-13Blur Vanishブラーバニッシュ

filter blurが0→20pxに増加しながらopacityが低下。焦点が外れて消える

夢の終わり / 回想シーン退場 / ソフトフォーカス遷移 / 幻影消失

焦点が合わなくなる=「記憶から薄れる」。余韻を残す退場

LIVE DEMO
2-14Explodeエクスプロード

シェイプが複数の破片に分裂し、放射状に飛び散って消える。Canvas描画

敵撃破 / ブロック破壊 / ゲームオーバー / 劇的な消滅演出

爆発は最も強いインパクト。破壊と解放のカタルシスを与える

LIVE DEMO
2-15Collapseコラプス

scaleYが1→0に潰れ、同時にscaleXが一瞬1.3に膨らむスクワッシュ変形で消える

アコーディオン閉じ / 通知消去 / パネル折畳み / UI要素の最小化

潰れる動きが物理的な「圧縮」を感じさせ、格納された実感を与える

LIVE DEMO
2-16Spiral Outスパイラルアウト

螺旋を描きながら外側へ拡大移動し、画面外に消える。Spiral Inの逆

ポータル退場 / 魔法エフェクト / ワープ演出 / ゲームアイテム消費

螺旋の軌道が「渦に吸い込まれる」「異世界へ去る」を表現する

LIVE DEMO
2-17Swipe Dismissスワイプディスミス

横方向に加速しながらスワイプされ、回転を伴いながら画面外に飛ばされる

通知のスワイプ消去 / Tinder風カード退場 / リスト要素削除

物理的に「弾き飛ばす」動作の模倣。快感と操作実感を最大化する

LIVE DEMO
2-18Glitch Disappearグリッチディスアピア

デジタルグリッチノイズで画面が乱れながら消失。clip-pathの断片的表示で崩壊を表現

エラー演出 / サイバーパンク退場 / 敵消滅 / データ破損表現

デジタル的な崩壊が「バグ」「異常」を暗示。不穏さとクールさの共存

LIVE DEMO
🔄

3. シェイプ変形(Shape Morphing)

22種
3-1Scale Pulseスケールパルス

シェイプが一定のリズムで拡大・縮小を繰り返す。心臓の脈動のような基本パルス

注目ボタン / アクティブ状態 / 通知アイコン / 待機アニメーション

規則的な拍動が「生命感」「重要性」を暗示。適度な注意喚起

LIVE DEMO
3-2Breatheブリーズ

ゆっくりとした拡縮+opacity変化で呼吸するようなリズム。Scale Pulseより有機的

ローディング中 / 瞑想アプリ / 待機状態 / 環境音楽系UI

呼吸のリズムが安心感を与え、ユーザーに「待つこと」を受容させる

LIVE DEMO
3-3Squash & Stretchスカッシュ&ストレッチ

アニメーション12原則の基本。潰れと伸びを交互に繰り返し弾力感を表現

キャラアニメーション / ボタンタップ反応 / ゲームUI / 楽しいローディング

弾力性が「生きている」印象を最大化。カートゥーン的な親しみやすさ

LIVE DEMO
3-4Jelly Wobbleジェリーウォブル

ゼリーのように不規則に揺れ動く。複数のscale値が減衰しながら振動

タッチフィードバック / エラー表示 / 新着通知 / ゲーム報酬獲得

柔らかさと弾力が遊び心を伝え、インタラクションへの応答を実感させる

LIVE DEMO
3-5Rotate Loopロテートループ

360度の回転をリニアに繰り返す最もシンプルな回転アニメーション

ローディングスピナー / 処理中表示 / ギア・歯車 / リフレッシュアイコン

終わりのない回転が「処理中」「進行中」を明確に伝える

LIVE DEMO
3-6Pendulumペンデュラム

振り子のように左右に揺れる。上端を支点にtransform-originを設定

時計 / メトロノーム / 揺らぎ演出 / アイドルアニメーション

規則的な往復運動が時の経過とリズムを暗示。催眠的な落ち着き

LIVE DEMO
3-7Flip XフリップX

X軸(横軸)を中心に回転。コインが手前に倒れて起き上がるような動き

カード裏返し / コイン回転 / 情報トグル / ゲームアニメーション

奥行きのある回転が3D空間の実在感を生む。表裏の切替を物理的に表現

LIVE DEMO
3-8Flip YフリップY

Y軸(縦軸)を中心に回転。ページをめくるような横方向の回転

ページめくり / 情報切替 / プロダクトビュー / 3Dショーケース

横方向の回転が「次のページ」「別の面」を暗示。好奇心を刺激

LIVE DEMO
3-9Skew Swingスキュースウィング

skewXで左右に傾斜が交互に変化。風に揺れる旗のような動き

バナー揺れ / テキスト強調 / 遊び心のあるUI / ホバーエフェクト

斜めの変形が動的な緊張感を生み、静止画にない活力を与える

LIVE DEMO
3-10Accordion XアコーディオンX

横方向にscaleXが1→0.3→1と収縮・復帰を繰り返す。アコーディオンの蛇腹

パネル開閉 / メニュー伸縮 / データ圧縮表現 / リズミカルな装飾

横方向の伸縮が「呼吸」「収縮」を表現。変化しながらも安定感を保つ

LIVE DEMO
3-11Accordion YアコーディオンY

縦方向にscaleYが1→0.3→1と収縮・復帰。上下方向のアコーディオン

ドロップダウン開閉 / リスト伸縮 / 高さアニメーション / ステータスバー

縦方向の変形は「潰れる・立ち上がる」を連想。存在のオンオフを体感

LIVE DEMO
3-12Elastic Scaleエラスティックスケール

GSAPのelastic.inOutイージングでゴムのように振動しながら拡縮する

ゲームUI反応 / 特別なボタン / アテンション誘導 / リワード演出

自然では見られない弾性振動が「超現実的な楽しさ」を生む

LIVE DEMO
3-13Circle to Squareサークル・トゥ・スクエア

border-radiusが50%(円)→8px(角丸四角)に変化する形状モーフィング

アバター切替 / モード切替 / 状態遷移表示 / トグルアニメーション

有機的な円から人工的な四角への変化が「構造化」「確定」を表現

LIVE DEMO
3-14Corner Morphコーナーモーフ

四隅のborder-radiusが非対称に変化し、有機的な形状が次々に遷移する

クリエイティブ背景 / アート系装飾 / ローディング / ブランドアイデンティティ

不規則な角丸変化が「有機的」「自然」な印象。生物的な形状変容

LIVE DEMO
3-15Blob Morphブロブモーフ

8値のborder-radiusが複雑に変化し、アメーバのような不定形の形状が連続変形

ヒーロー背景 / グラデーション装飾 / アート作品 / 環境アプリ

生物的な形状変化が「成長」「変容」「流動性」を強く表現

LIVE DEMO
3-16Star Morphスターモーフ

clip-path polygonで星形の頂点が微妙に変化し、星が脈動するように変形

レーティング / お気に入り / 実績バッジ / ゲームエフェクト

星の変形が「輝き」「特別さ」を強調。静止した星より存在感が増す

LIVE DEMO
3-17Heartbeatハートビート

心臓の鼓動パターン(ドクッ・ドクッ)を模した二段階の拡大。医療モニター風

健康アプリ / いいねボタン / 緊張表現 / バイタルサイン

心拍リズムが本能的に注意を引き、「生きている」「大切」を強く暗示

LIVE DEMO
3-18Shakeシェイク

左右に素早く振動し徐々に減衰する。エラーや拒否のフィードバック

ログイン失敗 / バリデーションエラー / 操作拒否 / 注意喚起

首を横に振る動作の模倣。「NG」「ダメ」を直感的に伝える

LIVE DEMO
3-19Vibrateバイブレート

2D方向にランダムに微振動する。スマホのバイブレーション的な触覚フィードバック

緊急通知 / ホラー演出 / 地震エフェクト / 携帯着信

不規則な微振動が不安定さ・緊急性を伝え、即座の注意を促す

LIVE DEMO
3-20Floatフロート

ゆっくりと上下に浮遊する。重力から解放された無重力感

ヒーロー要素 / CTA強調 / ファンタジーUI / 宇宙空間表現

浮遊感が「特別」「軽やか」を表現。地に足がつかない夢幻的な印象

LIVE DEMO
3-21Bounce Loopバウンスループ

跳ねるボールのように上下運動+着地時のスクワッシュを繰り返す

ゲームキャラアイドル / 待機中表示 / 楽しいUI / 子ども向け

弾むリズムが楽観的なエネルギーを伝え、退屈さを打破する

LIVE DEMO
3-22Orbitオービット

中心点の周りを楕円軌道で周回し続ける。衛星の公転運動

ローディング / 太陽系表現 / 原子モデル / ダッシュボード装飾

周回運動が「循環」「秩序」「システム」を暗示。科学的な洗練

LIVE DEMO

4. パスドロー&ストローク(Path Draw & Stroke)

24種
4-1Line Drawラインドロー

stroke-dashoffsetを使い、線が始点から終点へ描画される最も基本的なパスアニメーション

ロゴ描画 / 署名アニメーション / 地図のルート表示 / チュートリアルガイド

「今まさに描かれている」臨場感。手仕事・丁寧さを暗示する

LIVE DEMO
4-2Circle Drawサークルドロー

円形パスがstroke-dashoffsetで描画される。ゲージ・進捗表示の定番

プログレスサークル / スキルレベル / タイマー / 達成率

円の完成が「達成」「満了」を視覚化。進捗が一目でわかる

LIVE DEMO
4-3Rectangle Drawレクタングルドロー

矩形パスの外周を一筆書きで描画。フレーム・ボーダーの動的生成

カードボーダー / 選択枠 / フォーカスインジケータ / フレーム装飾

枠線が描かれることで「囲い込み」「保護」の印象を動的に構築

LIVE DEMO
4-4Triangle Drawトライアングルドロー

三角形パスを一筆書きで描画。再生ボタンやアイコンの動的描画

再生ボタン登場 / 警告アイコン / ナビゲーション矢印 / 幾何学装飾

三角形は方向性と安定性を同時に持ち、描画により存在感が増す

LIVE DEMO
4-5Star Drawスタードロー

五芒星パスを一筆書きで描画。星形が線で浮かび上がる演出

レーティング / お気に入り登録 / 実績アイコン / 特別感の演出

星が描かれる過程を見ることで「付与される」「獲得する」感覚が強まる

LIVE DEMO
4-6Spiral Drawスパイラルドロー

中心から外側に向かって螺旋が描画される。渦巻き模様のパスアニメーション

ローディング / 催眠効果 / 渦巻き装飾 / 宇宙・銀河表現

螺旋の展開が「成長」「拡大」を暗示。見入ってしまう催眠的な魅力

LIVE DEMO
4-7Heartbeat Lineハートビートライン

心電図のような波形パスが左から右に描画される。医療モニター風

ヘルスケアアプリ / バイタル表示 / 生命感の演出 / テクノロジーUI

心電図パターンが「生命」「鮮度」を暗示。データの「生きた」感覚

LIVE DEMO
4-8Wave Drawウェーブドロー

正弦波パスが左から右に描画される。滑らかな波形の動的生成

音声波形 / 海・水面表現 / 信号波形 / デコレーション

波の規則的な動きが「流れ」「リズム」を表現。心地よい視覚体験

LIVE DEMO
4-9Zigzag Drawジグザグドロー

ジグザグの折れ線パスが描画される。鋭角的な動きの軌跡

エネルギー・電気表現 / デコレーション / ゲームパス / 株価チャート

鋭角の繰り返しが「電気」「エネルギー」「変動」を連想させる

LIVE DEMO
4-10Check Mark Drawチェックマークドロー

チェックマーク(✓)がサッと描画される。完了・成功のフィードバック

フォーム送信完了 / タスク完了 / 成功通知 / 承認表示

チェックマークの描画が「達成」「OK」の瞬間を劇的に演出する

LIVE DEMO
4-11Cross Drawクロスドロー

バツ印(×)が2本の線で描画される。エラー・閉じるのフィードバック

エラー通知 / 閉じるボタン / 削除確認 / 失敗表示

交差する線の描画が「否定」「取消」を明確かつ劇的に伝える

LIVE DEMO
4-12Arrow Drawアロードロー

矢印が描画される。軸線の後に矢じりが描かれる2段階アニメーション

チュートリアル / 方向誘導 / フロー図 / CTA強調

矢印の描画が「方向」「進め」を動的に指し示し、誘導力が増す

LIVE DEMO
4-13Handwritingハンドライティング

手書き風の文字パスが描画される。署名・キャッチコピーの動的表示

署名アニメーション / ブランドロゴ / 手紙風演出 / クリエイター紹介

手書きの軌跡が「人の温もり」「個性」を伝え、デジタルに人間味を加える

LIVE DEMO
4-14Multi-Path Staggerマルチパススタガー

複数のパスが時間差で順番に描画される。並列ラインのスタガー表示

データグラフ / 多層表現 / ネットワーク / 楽譜

順次描画が情報の階層構造を視覚化し、複雑さを整理して伝える

LIVE DEMO
4-15Dash Flowダッシュフロー

破線がパスに沿って流れるように移動する。stroke-dasharrayとoffsetのループ

データフロー / パイプライン / 電流 / ネットワーク接続表示

破線の流れが「転送」「移動」「プロセス」を視覚的に表現する

LIVE DEMO
4-16Dot Trailドットトレイル

ドット(点線)がパスに沿って流れる。小さな丸が軌跡を描くように移動

軌跡表示 / GPS経路 / パーティクルトレイル / 装飾ライン

点の連なりが「軌跡」「旅路」を暗示。線より軽やかな動き

LIVE DEMO
4-17Gradient Strokeグラデーションストローク

ストロークにグラデーションが適用された状態でパスが描画される

ブランドライン / プレミアム装飾 / エネルギービーム / 魔法陣

色の変化を伴う線が「高級感」「エネルギーの流れ」を表現

LIVE DEMO
4-18Stroke Width Animateストローク幅アニメーション

描画済みのストロークの太さが時間経過で変化する。細→太→細のパルス

強調ライン / アクティブパス / ホバーフィードバック / 脈動エフェクト

線の太さ変化が「呼吸」「脈動」を表現し、静的な線に生命感を与える

LIVE DEMO
4-19Draw & Fillドロー&フィル

パスのストロークが描画された後、内部がフェードインで塗りつぶされる

ロゴアニメーション / アイコン出現 / マップ領域表示 / 図形教育

「線→面」の2段階が「設計→完成」のプロセスを可視化する

LIVE DEMO
4-20Eraseイレース

描画済みのストロークが始点から順に消えていく。Draw & Fillの逆

パス退場 / アンドゥ演出 / データ削除 / リセットフィードバック

線が消える過程が「取り消し」「巻き戻し」を視覚的に表現する

LIVE DEMO
4-21Bidirectional Draw双方向ドロー

中央から両端に向かって同時に描画される。左右対称の展開

区切り線 / タイトル装飾 / バランス表現 / 対称デザイン

中央起点の展開が「均衡」「調和」を表現。左右対称の安定感

LIVE DEMO
4-22Glow Trailグロートレイル

描画される線に光の軌跡(グロー)が追従する。ネオン・レーザー風

ネオンサイン / レーザーエフェクト / SF風UI / 魔法陣描画

光の軌跡が「エネルギー」「魔法」を暗示。近未来的な演出

LIVE DEMO
4-23Self-Drawing Polygonセルフドローイングポリゴン

多角形(六角形)が頂点を結びながら自動で描画される。幾何学パターン生成

テクノロジーUI / ブロックチェーン / 結晶構造 / 幾何学アート

規則的な多角形の構築が「秩序」「テクノロジー」「精密さ」を演出

LIVE DEMO
4-24Infinity Drawインフィニティドロー

∞(無限大)記号のパスが描画される。8の字の軌跡

ローディング / 無限スクロール / 永続性の表現 / ブランドマーク

無限記号が「終わりなき可能性」「永遠」を象徴する

LIVE DEMO

5. クリップ&マスク(Clip & Mask)

22種
5-1Circle Revealサークルリビール

中心から円形にclip-pathが拡大してコンテンツが出現する

シーン切替 / ポートレート表示 / フォーカス演出 / 映画風トランジション

円の拡大が「発見」「開眼」を暗示。中心から広がる有機的な登場

LIVE DEMO
5-2Circle Wipeサークルワイプ

円形clip-pathが中心に収縮してコンテンツが消える。Circle Revealの逆

シーン終了 / エンディング / フォーカスアウト / トランジション閉じ

収縮する円が「終幕」「閉じる」を演出。映画的な余韻

LIVE DEMO
5-3Inset Revealインセットリビール

四辺から均等にinsetが縮小してコンテンツが中央から外に向かって出現

画像ギャラリー / パネル展開 / モーダル表示 / カード出現

均等な拡大が「枠の解放」を表現。バランスの取れた安定的な登場

LIVE DEMO
5-4Inset Wipeインセットワイプ

四辺が均等に内側に迫りコンテンツを圧縮して消す。Inset Revealの逆

閉じるアニメーション / 最小化 / コンテンツ退場 / パネル閉じ

四方から圧縮される動きが「格納」「収束」を表現する

LIVE DEMO
5-5Left Wipeレフトワイプ

左端から右に向かってinset clip-pathが開きコンテンツが出現

スライドショー / テキスト表示 / 横スクロール連動 / ビフォーアフター

左→右の動きが読み方向と一致し、自然な情報の流れを作る

LIVE DEMO
5-6Right Wipeライトワイプ

右端から左に向かってinset clip-pathが開きコンテンツが出現

逆方向スライド / RTL言語対応 / 巻き戻し演出 / 特殊トランジション

右→左の動きが通常と逆で意外性を生む。「戻る」「振り返る」の暗示

LIVE DEMO
5-7Top Wipeトップワイプ

下端から上に向かってinset clip-pathが開きコンテンツが上昇的に出現

スクロール連動表示 / カーテンライズ / リスト要素出現

下→上の動きが「上昇」「浮上」を暗示。力強い登場感

LIVE DEMO
5-8Bottom Wipeボトムワイプ

上端から下に向かってinset clip-pathが開きコンテンツが落下的に出現

ドロップダウン / メニュー展開 / 通知パネル / カーテンドロップ

上→下の動きが「降下」「カーテンが降りる」を暗示。重力感のある登場

LIVE DEMO
5-9Diamond Revealダイヤモンドリビール

菱形(ダイヤモンド型)のclip-pathが中心から拡大してコンテンツが出現

特別コンテンツ表示 / ジュエリー系 / ゲームアイテム / VIP演出

菱形が「宝石」「特別」を暗示。円形よりシャープで洗練された印象

LIVE DEMO
5-10Diamond Wipeダイヤモンドワイプ

菱形clip-pathが中心に収縮してコンテンツが消える。Diamond Revealの逆

退場演出 / シーン切替 / 特殊トランジション / ゲームクリア

菱形の収縮が「結晶化」「凝縮」を暗示。幾何学的な美しさのある退場

LIVE DEMO
5-11Star Revealスターリビール

星形のclip-pathが中心から展開してコンテンツが星型に出現

報酬獲得 / スペシャル演出 / 子ども向け / ゲームクリア

星形の出現が「特別」「ご褒美」を最大限に演出する

LIVE DEMO
5-12Hexagon Revealヘキサゴンリビール

六角形のclip-pathが中心から展開してコンテンツが出現

テクノロジーUI / ハニカム / ボードゲーム / 化学・科学系

六角形が「構造」「効率」「テクノロジー」を暗示する

LIVE DEMO
5-13Triangle Revealトライアングルリビール

三角形のclip-pathが中心から展開してコンテンツが出現

再生ボタン / 方向表示 / 警告 / ピラミッド的階層表現

三角形が「方向性」「階層」「注意」を暗示。鋭角的な緊張感

LIVE DEMO
5-14Cross Revealクロスリビール

十字形のclip-pathからフルサイズに展開。十字型の窓が開くような演出

医療系 / 教会・宗教 / レッドクロス / ゲームアイテム

十字形が「救済」「回復」「追加」を暗示する象徴的な展開

LIVE DEMO
5-15Blinds Horizontalブラインド横

水平方向のブラインド(スリット)が一つずつ開いてコンテンツが現れる

写真ギャラリー / スライドショー / 映像トランジション / 窓の演出

ブラインドが開く動作が「覗く」「少しずつ見える」好奇心を刺激

LIVE DEMO
5-16Blinds Verticalブラインド縦

垂直方向のブラインドが一つずつ開いてコンテンツが現れる

ポートフォリオ / 画像切替 / カーテン風演出 / グリッド表示

縦のスリットが「ドアが開く」「カーテンが引かれる」を連想させる

LIVE DEMO
5-17Radial Segmentsラジアルセグメント

円をピザのように分割し、各セグメントが順番に開いてコンテンツが現れる

ローディング完了 / パイチャート / 時計風 / ゲームステージ解放

セグメントの順次展開が「段階的な解放」「タイマー」を表現

LIVE DEMO
5-18Checkerboardチェッカーボード

チェスの盤面のように、市松模様でセルが順にオンになりコンテンツが現れる

レトロゲーム / ピクセルアート / ノスタルジー演出 / グリッド切替

市松模様が「レトロ」「ゲーム」を連想させ、遊び心を演出

LIVE DEMO
5-19Spiral Revealスパイラルリビール

conic-gradientマスクが螺旋的に展開してコンテンツが現れる

ポータル / 魔法陣 / 催眠効果 / 特別なローディング

螺旋展開が「渦の中心からの出現」「魔法的な登場」を表現

LIVE DEMO
5-20Moving Circle Maskムービングサークルマスク

円形clip-pathが画面上を移動し、スポットライトのようにコンテンツを照らす

スポットライト / ゲームの視界 / 謎解き / フォーカス誘導

移動するスポットが「探索」「発見」を暗示。ユーザーの注目を誘導

LIVE DEMO
5-21Morphing Clipモーフィングクリップ

clip-path polygonが複数の形状間を連続的にモーフィングする

アート系背景 / ブランド装飾 / 有機的なUI / クリエイティブ表現

形状の連続変化が「変容」「流動性」を表現。生命的な印象

LIVE DEMO
5-22Parallax Maskパララックスマスク

clip-pathの位置が移動しながら内部コンテンツも逆方向に動くパララックス効果

ヒーローセクション / 奥行き演出 / スクロール連動 / 映像的表現

マスクと内容の逆動きが「覗き窓」「奥行き」を作り、没入感を生む

LIVE DEMO
💥

6. spring()物理(Spring Physics)

20種
6-1Spring Popスプリングポップ

バネ物理でscale 0→1にオーバーシュート&バウンスしながら登場

モーダル表示 / ボタン出現 / 通知ポップ / ゲームUI

バネの弾性が「生きている」「弾力がある」物理的実在感を与える

LIVE DEMO
6-2Spring Slideスプリングスライド

バネ物理でtranslateXが目標位置を超えて振動しながら定位置に収束

メニュー出現 / カードスライド / パネル展開 / リスト要素

オーバーシュートが「勢いよく到着」を表現し、ダイナミックな登場

LIVE DEMO
6-3Spring Rotateスプリングローテート

バネ物理で回転角度が目標を超えて往復振動しながら安定する

ダイヤル / スイッチ切替 / 矢印方向転換 / コンパス

回転の振動が「調整中」「最適化」を暗示。最終的に安定する安心感

LIVE DEMO
6-4Spring Dropスプリングドロップ

上から落下してバウンド。重力+バネの組み合わせで自然な着地

通知ドロップ / アイテム獲得 / バッジ付与 / ゲームオブジェクト

重力落下+弾みが物理的な「重さ」「実在感」を最大化する

LIVE DEMO
6-5Spring Chainスプリングチェーン

複数要素が連鎖的にバネアニメーション。前の要素の動きが次に伝播

リスト表示 / メニュー展開 / カードグリッド / ステップ表示

連鎖反応が「ドミノ倒し」「波及」を表現。順序感とリズム

LIVE DEMO
6-6Overdampedオーバーダンプ

減衰率が高くオーバーシュートなしで滑らかに目標値に到達するバネ

UIトランジション / モーダル / ゆったりとした動き / 上品な登場

振動のない到達が「落ち着き」「高級感」「制御された動き」を表現

LIVE DEMO
6-7Underdampedアンダーダンプ

減衰率が低く大きくオーバーシュートして何度も振動しながら収束

弾むボール / ゲームエフェクト / 楽しいUI / 遊び心のある動き

大きな振動が「遊び心」「活発さ」を表現。子ども向けUIに最適

LIVE DEMO
6-8Critically Dampedクリティカルダンプ

振動と無振動の臨界点。最短時間でオーバーシュートなく目標に到達

UIアニメーション標準 / マテリアルデザイン / プロダクション品質

最適化された動きが「洗練」「計算された美しさ」を暗示

LIVE DEMO
6-9Stiff Springスティッフスプリング

バネ定数が高く、高速で目標値に到達。素早い反応でカチッとした動き

ボタンクリック / トグル切替 / タブ選択 / 即時フィードバック

素早い応答が「正確さ」「確実性」を表現。操作への即時性

LIVE DEMO
6-10Soft Springソフトスプリング

バネ定数が低く、ゆっくりと大きな振幅で目標に到達。優雅な動き

ゆったりUIアニメーション / 瞑想アプリ / ファンタジー / ドリーミー

ゆっくりとした振動が「穏やかさ」「夢見心地」を表現

LIVE DEMO
6-11Spring Squashスプリングスカッシュ

バネ物理でscaleX/scaleYが交互にオーバーシュートするスカッシュ変形

キャラアニメ / ゲームUI / 弾むボタン / 楽しい反応

弾力的な変形が「生物的」「カートゥーン的」な生命感を最大化

LIVE DEMO
6-12Spring Flipスプリングフリップ

バネ物理で3D回転がオーバーシュートしながら安定する

カード裏返し / 情報切替 / コイントス / プロダクト表示

回転の弾みが「めくる」動作に物理的な重みを加える

LIVE DEMO
6-13Magnetic Snapマグネティックスナップ

磁石に引き寄せられるように加速→スナップ位置でバネ振動して停止

ドラッグ&ドロップ / スナップポイント / グリッド吸着 / スロット

加速→急停止が「吸い付く」「ピタッとはまる」快感を生む

LIVE DEMO
6-14Rubber Bandラバーバンド

ゴムバンドのように引っ張って離すとパチンと戻る。iOS風のバウンス

スクロール端バウンス / プルトゥリフレッシュ / リスト引っ張り

ゴムの弾力が「限界」「境界」を暗示。引っ張った分だけ反動

LIVE DEMO
6-15Pendulum Springペンデュラムスプリング

振り子の振幅がバネ減衰で徐々に小さくなる自然な振り子

時計演出 / 吊り下げアニメ / 自然な揺れ / メトロノーム

減衰振動が「自然法則」「時の流れ」を物理的にシミュレーション

LIVE DEMO
6-16Spring Orbitスプリングオービット

螺旋軌道のバネ。半径がバネ振動しながら中心に収束する楕円運動

ローディング / 軌道シミュレーション / ポータル / 渦巻き

収束する螺旋が「集約」「焦点化」を表現。催眠的な動き

LIVE DEMO
6-17Spring Opacityスプリングオパシティ

opacityがバネ物理で振動。明滅しながら最終的に完全表示に落ち着く

ホログラム / グリッチ登場 / 不安定な出現 / SF的演出

明滅が「不安定→安定」の遷移を表現。信号が安定する過程

LIVE DEMO
6-18Spring Colorスプリングカラー

色相がバネ振動で変化。目標色を超えて振動しながら収束する

状態変化 / テーマ切替 / レベルアップ / モード変更

色の振動が「変化の過程」を可視化。最終色に到達する達成感

LIVE DEMO
6-19Spring Blurスプリングブラー

filter blurがバネ物理で振動。ぼけ→シャープ→ぼけ→シャープと収束

フォーカス演出 / カメラ風ぼけ / 登場エフェクト / 夢の覚醒

焦点の振動が「ピントを合わせる」プロセスを表現。覚醒の過程

LIVE DEMO
6-20Spring Sizeスプリングサイズ

width/heightがバネ物理で目標サイズに振動しながら到達する

パネルリサイズ / ウィンドウ拡大 / コンテナ展開 / レイアウト変更

サイズの振動が「伸縮する有機体」を連想させ、硬いUIに柔らかさを加える

LIVE DEMO
💠

7. スタガー&群体(Stagger & Swarm)

22種
7-1Linear Staggerリニアスタガー

複数要素が均等な時間差で左から右に順番に登場。最も基本的なスタガー

リスト表示 / メニュー展開 / カードグリッド / ナビゲーション

規則的な順序が「整然」「秩序」を伝え、情報の階層を視覚化

LIVE DEMO
7-2Reverse Staggerリバーススタガー

右から左に逆順で登場。退場時や巻き戻し演出に使用

リスト退場 / 逆順表示 / 巻き戻し演出 / アンドゥビジュアル

逆順が「巻き戻し」「回帰」を暗示。通常と異なる方向性で注目を集める

LIVE DEMO
7-3Center Out Staggerセンターアウトスタガー

中央から外側に向かって順番に登場。中心から放射状に展開

タイトル文字 / 対称デザイン / バランス演出 / 展開アニメ

中央起点の展開が「中心から広がる」「焦点」を強調する

LIVE DEMO
7-4Random Staggerランダムスタガー

ランダムな順序で各要素が登場。予測不能な楽しさ

パーティクル登場 / 楽しいローディング / ゲーム / クリエイティブ

ランダム性が「遊び心」「カオス」を表現。規則とは違う新鮮さ

LIVE DEMO
7-5Grid Staggerグリッドスタガー

グリッド配置の要素が左上→右下に向かって斜めに順番に登場

ポートフォリオグリッド / 画像ギャラリー / ダッシュボード / タイル表示

斜めの波紋が「整列」と「動き」を両立。グリッドに生命を吹き込む

LIVE DEMO
7-6Wave Staggerウェーブスタガー

波のように上下しながら順番に登場。sinカーブのスタガー

テキスト文字 / 音楽ビジュアライザー / 海洋系 / リズミカルUI

波の動きが「流動性」「リズム」を表現。音楽的な心地よさ

LIVE DEMO
7-7Cascade Downカスケードダウン

上から下に滝のように順番に登場。縦リストのスタガー

サイドバーメニュー / 通知リスト / タイムライン / 設定項目

上→下の流れが「滝」「時系列」を暗示。情報の自然な流れ

LIVE DEMO
7-8Spiral Staggerスパイラルスタガー

螺旋軌道で外側から中心に向かって順番に登場

ダッシュボード / データポイント / 渦巻きレイアウト / アート

螺旋が「収束」「中心への集約」を表現。求心的な動き

LIVE DEMO
7-9Explode Staggerエクスプロードスタガー

中心から放射状に要素が飛び散るように登場

メニュー展開 / FAB展開 / 花火エフェクト / データ散布

中心からの爆発が「拡散」「エネルギー放出」を最大化する

LIVE DEMO
7-10Typewriter Staggerタイプライタースタガー

タイプライターのように左から1要素ずつ叩かれるように登場

テキスト入力 / コード表示 / チャット / ターミナル風

一つずつ現れる感覚が「入力中」「書き込み中」のリアルタイム感

LIVE DEMO
7-11Dominoドミノ

ドミノ倒しのように前の要素が倒れると次の要素が連鎖的に倒れる

リスト退場 / 連鎖反応 / ゲーム / 物理演出

連鎖の快感が「因果」「波及効果」を視覚的に体感させる

LIVE DEMO
7-12Popcornポップコーン

ランダムなタイミングで要素が弾けるように登場。ポップコーン風

パーティ演出 / 成功祝い / ゲーム報酬 / 楽しいフィードバック

ランダムな弾けが「祝祭」「歓喜」を表現。予測不能な楽しさ

LIVE DEMO
7-13Rippleリップル

中心からの距離に比例した遅延で要素が登場。水面の波紋

グリッドUI / マテリアルデザイン / タッチフィードバック / データマップ

波紋が「衝撃の伝播」を表現。タッチ地点からの影響を可視化

LIVE DEMO
7-14Scatter Gatherスキャッターギャザー

散らばった要素が集まって整列する。逆も可能(整列→散布)

データ整理 / ソートビジュアル / パズル / 構成アニメ

カオス→秩序の変化が「整理」「解決」「完成」を表現する

LIVE DEMO
7-15Accordion Staggerアコーディオンスタガー

アコーディオンのようにscaleYが0→1に順番に展開

FAQ展開 / アコーディオンメニュー / ステップ表示 / 情報段階開示

順次展開が「段階的な情報開示」を表現。読み手のペースを尊重

LIVE DEMO
7-16Breathing Swarmブリージングスウォーム

群体が呼吸するように全体的に拡縮。各要素に微妙な位相差

アンビエント装飾 / 海中生物 / 細胞分裂 / 環境アプリ

群体の呼吸が「有機体」「共生」を表現。生命的な一体感

LIVE DEMO
7-17Orbit Swarmオービットスウォーム

複数要素が中心の周りを異なる速度・半径で公転する

原子モデル / 太陽系 / ローディング / 装飾エフェクト

多重周回が「複雑な秩序」「宇宙的スケール」を暗示する

LIVE DEMO
7-18Flockフロック

鳥の群れのように要素が集団で移動。先頭に追従する群体行動

群体AI / 自然シミュレーション / データフロー / ビジュアルアート

群体行動が「一体感」「自然の法則」「社会性」を表現

LIVE DEMO
7-19Pulse Chainパルスチェーン

パルス(拡縮+色変化)が左から右に伝播する波のような連鎖

イコライザー / 信号伝達 / ネットワーク / 心拍伝播

パルスの伝播が「信号」「エネルギーの流れ」を直感的に可視化

LIVE DEMO
7-20Fill Rowフィルロウ

左から右に行が「埋まる」ようにbackgroundが順番に塗られる

プログレスバー / スキルレベル / 投票結果 / ローディング

充填の進行が「達成度」「完了への道のり」を直感的に可視化

LIVE DEMO
7-21Shuffleシャッフル

要素の位置がランダムに入れ替わるシャッフルアニメーション

カードゲーム / リスト並替 / ソート可視化 / ランダム化

シャッフルが「ランダム性」「公平さ」「再配置」を表現する

LIVE DEMO
7-22Magnetic Clusterマグネティッククラスター

散らばった要素が磁石に引き寄せられるように中心に集合する

データ集約 / グループ化 / フィルタリング結果 / マージ演出

集合の動きが「統合」「集約」「一致団結」を力強く表現する

LIVE DEMO
💠

8. グリッド&パターン(Grid & Pattern)

24種
8-1Grid Fade Inグリッドフェードイン

4x4グリッドのアイテムが左上から右下へ順番にフェードインする

画像ギャラリー / ポートフォリオ / ダッシュボード / カードUI

規則的な出現が「整然」「秩序」を伝え、コンテンツの一覧性を強調

LIVE DEMO
8-2Grid Scale Inグリッドスケールイン

グリッドアイテムがscale(0)から1にスタガー付きで拡大出現する

アプリアイコン / サムネイル / スキルバッジ / タグクラウド

ゼロからの出現が「生成」「創造」を表現。各要素の存在感を強調

LIVE DEMO
8-3Grid Flipグリッドフリップ

グリッドアイテムがY軸180度回転して表面を見せるフリップ演出

カードゲーム / 記憶ゲーム / 情報開示 / Before/After

裏返しが「隠された情報の発見」「秘密の解明」を暗示する

LIVE DEMO
8-4Grid Slide Inグリッドスライドイン

各アイテムが上下左右の交互方向からスライドして定位置に収まる

マガジンレイアウト / ニュースフィード / コンテンツグリッド / メニュー

多方向からの合流が「集合」「統合」を表現。動的で活気ある印象

LIVE DEMO
8-5Grid Rotate Inグリッドローテートイン

各アイテムがランダムな角度から回転しながら定位置に収まる

写真コラージュ / クリエイティブポートフォリオ / アート展示 / 散乱効果

回転の多様性が「自由」「創造性」を表現。整列との対比が面白い

LIVE DEMO
8-6Masonry Cascadeメイソンリーカスケード

高さの異なるアイテムが列ごとに上から滝のように現れるメイソンリー配置

Pinterestレイアウト / ブログ / 商品一覧 / 画像ボード

不規則な高さの調和が「多様性の中の統一」を表現。自然な流れ

LIVE DEMO
8-7Hex Grid Revealヘックスグリッドリビール

六角形のグリッドが中心から外側に向かって放射状に出現する

地図UI / 戦略ゲーム / ハニカム表示 / テクノロジー演出

六角形の規則性が「効率」「テクノロジー」を暗示。中心展開で集中力を誘導

LIVE DEMO
8-8Tile Flipタイルフリップ

タイルがメモリカードのようにランダム順で裏返り色付きの表面を見せる

神経衰弱ゲーム / クイズ / 情報カード / プロダクト紹介

裏返し動作が「発見」「驚き」を演出。ゲーム的な楽しさを付与

LIVE DEMO
8-9Grid Pulseグリッドパルス

パルス波が中心からグリッド全体に放射状に伝播し、各アイテムがスケールする

ヒートマップ / 心拍モニター / 衝撃波 / データビジュアル

波紋の伝播が「衝撃」「影響力の広がり」を直感的に可視化する

LIVE DEMO
8-10Matrix Rainマトリックスレイン

列ごとにアイテムが上から下に降り注ぐマトリックス風の雨演出

サイバー演出 / ハッキングシーン / テクノロジー / コード表現

上から下への連続的な流れが「データフロー」「デジタル世界」を象徴

LIVE DEMO
8-11Checkerboardチェッカーボード

チェス盤のように白マスと黒マスが交互に出現するパターン

ボードゲーム / 市松模様 / デザインパターン / トランジション

交互パターンが「バランス」「二面性」「秩序」を強く印象付ける

LIVE DEMO
8-12Brick Stackブリックスタック

レンガ積みのように下段から上段へ、偶数行をオフセットしながら積み上がる

建築演出 / プログレス表示 / 壁面デザイン / レベルアップ

積み上げが「構築」「成長」「堅牢性」を力強く表現する

LIVE DEMO
8-13Mosaic Buildモザイクビルド

ランダムな位置にピースが次々と現れ、モザイク画が組み上がる

画像ローディング / パズル完成 / アート生成 / データ集約

ランダム配置から完成形へ向かう過程が「創造」「完成」を象徴する

LIVE DEMO
8-14Grid Waveグリッドウェーブ

正弦波がグリッドを横断し、通過点のアイテムがスケール変化する波動効果

音楽ビジュアライザー / 水面エフェクト / ステータス表示 / アンビエント

波の通過が「流動」「エネルギーの伝播」を滑らかに表現する

LIVE DEMO
8-15Pixel Sortピクセルソート

バラバラの位置にあるアイテムがソートされるように正しい位置にスライドする

ソートアルゴリズム可視化 / データ整理 / パズル / 復元演出

カオスから秩序への遷移が「解決」「整理整頓」「論理」を表現する

LIVE DEMO
8-16Grid Scatterグリッドスキャッター

整列したグリッドから各アイテムがランダム方向に散り散りになる

削除演出 / 爆発エフェクト / 分解 / コンテンツ退場

秩序の崩壊が「解放」「破壊」「変革」を表現。インパクト大

LIVE DEMO
8-17Tessellation Buildテセレーションビルド

三角形のテセレーション(敷き詰め)パターンが順番に組み上がる

幾何学デザイン / 低ポリアート / 建築 / アブストラクト演出

幾何学的な敷き詰めが「精密」「数学的美」「秩序」を強く印象付ける

LIVE DEMO
8-18Grid Color Flowグリッドカラーフロー

色の変化がグリッドの左から右に波のように流れ、グラデーションを形成する

ヒートマップ / 気象データ / ムード表示 / 音楽ビジュアライザー

色彩の流動が「変化」「推移」「感情の波」を鮮やかに表現する

LIVE DEMO
8-19Pattern Repeatパターンリピート

繰り返しパターンのタイルが順次出現してエリアを埋め尽くす

壁紙生成 / テキスタイル / 背景パターン / デザインプレビュー

反復の美しさが「統一」「調和」「無限の広がり」を表現する

LIVE DEMO
8-20Stripe Revealストライプリビール

縦横のストライプが交互にスライドして全体を覆うリビール演出

トランジション / スライドショー / ページ遷移 / タイトル表示

ストライプの規則性が「洗練」「モダン」を表現。スタイリッシュな印象

LIVE DEMO
8-21Cross Hatchクロスハッチ

斜め線が交差して描画され、クロスハッチング模様を形成する

スケッチ風演出 / 製図 / テクスチャ / 陰影表現

手描き風の交差線が「アナログ」「職人技」「温かみ」を表現する

LIVE DEMO
8-22Dot Matrixドットマトリックス

ドットが行列状に波のように出現し、マトリックスパターンを形成する

LED表示 / レトロディスプレイ / ドットアート / 電光掲示板

ドットの整列が「デジタル」「レトロ」「精密」を表現する

LIVE DEMO
8-23Kaleidoscopeカレイドスコープ

対称的なパターンが回転しながら万華鏡のように組み上がる

アート演出 / ローディング / 瞑想アプリ / デコラティブ背景

万華鏡の対称性が「美」「調和」「無限の変化」を幻想的に表現する

LIVE DEMO
8-24Grid Collapseグリッドコラプス

グリッドの全アイテムが中心に向かって吸い込まれるように収縮する

コンテンツ退場 / ブラックホール / 最小化 / 集約演出

中心への収束が「収束」「集約」「終結」を力強く表現する

LIVE DEMO
🌌

9. ジェネラティブ&ノイズ(Generative & Noise)

20種
9-1Perlin Flowパーリンフロー

パーティクルがパーリンノイズのフローフィールドに沿って流動する

背景演出 / アンビエント / データビジュアライゼーション / 風の表現

有機的な流れが「自然」「生命」を暗示し、見る者に穏やかな安心感を与える

LIVE DEMO
9-2Noise Gradientノイズグラデーション

ノイズ関数に基づいたカラーグラデーションがアニメーションする

背景テクスチャ / ヒーローセクション / ローディング画面 / アート表現

流動的な色変化が「神秘」「深淵」を感じさせ、没入感を高める

LIVE DEMO
9-3Particle Swarmパーティクルスウォーム

群れの法則(分離・整列・結合)に従ってパーティクルが群体行動する

群れシミュレーション / 背景アニメ / ソーシャルメディア / ゲーム演出

集団行動が「一体感」「社会性」を表現し、生物的な親しみを生む

LIVE DEMO
9-4Generative Linesジェネラティブライン

ノイズで曲率が変化する曲線を複数本同時に描画する

アート背景 / ポスターデザイン / 地形図風 / 等高線演出

不規則な曲線が「手描き感」「温かみ」を表現し、機械的な冷たさを打ち消す

LIVE DEMO
9-5Noise Displacementノイズディスプレースメント

グリッド上のドットがノイズ値に応じて位置とサイズが変位する

インタラクティブ背景 / テクスチャ / ビジュアルエフェクト / UI装飾

規則と不規則の共存が「秩序の中の混沌」を表し、知的な好奇心を刺激する

LIVE DEMO
9-6Organic Growthオーガニックグロース

L-system風のルールで枝分かれしながら有機的に成長する

自然表現 / 植物アニメ / ネットワーク図 / データツリー

成長の過程が「生命力」「進化」を象徴し、ポジティブな印象を与える

LIVE DEMO
9-7Voronoi Cellsボロノイセル

移動する母点によるボロノイ図が動的に更新される

テクスチャ生成 / 細胞表現 / マップ分割 / 有機パターン

細胞状のパターンが「生物学的」「ミクロの世界」を想起させ知的関心を引く

LIVE DEMO
9-8Reaction Diffusionリアクションディフュージョン

2つの化学物質の拡散・反応をシミュレートしてパターンを生成する

テクスチャ生成 / 生物模様 / サイエンスアート / 装飾パターン

自己組織化するパターンが「自然の神秘」「複雑系の美」を伝える

LIVE DEMO
9-9Strange Attractorストレンジアトラクタ

ローレンツアトラクタの軌跡をリアルタイムに描画する

サイエンス演出 / カオス理論ビジュアル / 背景装飾 / データアート

カオス的な軌跡が「予測不能」「深遠」を表現し、知的好奇心を刺激する

LIVE DEMO
9-10Noise Terrainノイズテレイン

2Dノイズをハイトマップとしてグラデーションカラーで地形描画する

地形生成 / ゲームマップ / 背景テクスチャ / ビジュアライゼーション

地形的パターンが「広大さ」「冒険」を暗示し、想像力を掻き立てる

LIVE DEMO
9-11Cellular Automataセルオートマトン

コンウェイのライフゲーム風ルールでセルが生死を繰り返す

ゲーム演出 / サイエンスアート / 背景パターン / 教育コンテンツ

単純ルールから生まれる複雑さが「創発」「可能性」を感じさせる

LIVE DEMO
9-12Fibonacci Spiralフィボナッチスパイラル

フィボナッチ数列の黄金角に基づいて点が螺旋状に配置される

自然パターン / ひまわり模様 / ローディング / 数学ビジュアル

黄金比の配置が「調和」「自然の美」を体現し、普遍的な美しさを伝える

LIVE DEMO
9-13Random Walkランダムウォーク

複数のエージェントがランダムに歩行し軌跡を残す

軌跡アニメ / データ可視化 / 株価チャート風 / パスアニメーション

偶然性のある動きが「探索」「自由」を表現し、予測不能な面白さを生む

LIVE DEMO
9-14Fractal Treeフラクタルツリー

再帰的な枝分かれでフラクタル樹形を段階的に描画する

自然表現 / 教育 / アート生成 / ネットワーク図

自己相似な構造が「無限」「再帰的な美」を想起させ、深い印象を残す

LIVE DEMO
9-15Wave Interference波の干渉

複数の正弦波が重なり干渉パターンを生成する

水面エフェクト / 音波ビジュアル / サイエンス演出 / 背景装飾

干渉パターンが「科学」「波動」を表現し、理知的な雰囲気を醸す

LIVE DEMO
9-16Smoke Effectスモークエフェクト

パーティクルが上昇しながら拡散・透明化して煙を表現する

雰囲気演出 / ゲームVFX / タイトル背景 / ミステリアス演出

立ち上る煙が「神秘」「儚さ」を表現し、ドラマチックな雰囲気を作る

LIVE DEMO
9-17Lightningライトニング

再帰的な分岐でプロシージャルに稲妻を生成・描画する

天候演出 / 電撃エフェクト / インパクト演出 / ゲームVFX

瞬間的な閃光が「衝撃」「パワー」を伝え、強烈な印象を残す

LIVE DEMO
9-18Generative Circlesジェネラティブサークル

サークルパッキングアルゴリズムで円が隙間を埋めるように配置される

ポスターデザイン / インフォグラフィック / アート生成 / 充填パターン

隙間なく詰まる円が「充実」「密度」を表現し、完成度の高さを感じさせる

LIVE DEMO
9-19Noise Meshノイズメッシュ

接続されたメッシュポイントがノイズで変位し有機的なネットワークを形成する

ネットワーク図 / テクノロジー背景 / 接続演出 / SaaS背景

繋がり合うメッシュが「接続」「テクノロジー」を象徴し、先進的な印象を与える

LIVE DEMO
9-20Auroraオーロラ

多層のグラデーション帯がノイズで揺らぎオーロラを表現する

背景演出 / ヒーローセクション / 幻想的演出 / 自然現象

幻想的な光のカーテンが「神秘」「壮大さ」を伝え、畏敬の念を呼び起こす

LIVE DEMO
🎬

10. ローワーサード&テロップ(Lower Thirds & Telops)

26種
10-1Slide Barスライドバー

水平バーが左からスライドインし、テキストがフェードアップで出現する二段階演出

ニュース速報 / インタビュー名前表示 / プレゼンテーション / YouTube動画

安定した横移動が「信頼感」と「正式な紹介」の印象を与える

LIVE DEMO
Title Text Subtitle
10-2Wipe Inワイプイン

clip-pathで左からワイプしてバーを露出させ、テキストが追従して現れる

テレビ番組テロップ / ドキュメンタリー / バラエティ / 字幕

覆いが剥がれる動きが「発見」と「情報開示」の期待感を生む

LIVE DEMO
Title Text Subtitle
10-3Split Barスプリットバー

バーが中央から左右に分裂して広がり、テキストが中央に浮かび上がる

タイトルコール / スポーツ中継 / イベント告知 / ライブ配信

中心から広がる動きが「インパクト」と「注目」を強く惹きつける

LIVE DEMO
Title Text
Subtitle
10-4Stack Buildスタックビルド

タイトルバーが先にスライドインし、続いてサブタイトルバーが下に積み重なる

番組出演者紹介 / 肩書き表示 / 情報階層表示 / レポーター名

段階的な構築が「丁寧な紹介」と「情報の整理」を印象づける

LIVE DEMO
Title Text
Subtitle
10-5Line Accentラインアクセント

細いアクセントラインが上から下に描画され、その横にテキストがフェードイン

ミニマルデザイン / ドキュメンタリー / 映画クレジット / アート系映像

細い線が「繊細」「上品」を暗示し、洗練されたミニマルな印象

LIVE DEMO
Title Text
Subtitle
10-6Box Revealボックスリビール

小さな点からボックスが拡大し、中にテキストがタイピング風に出現する

テック系動画 / プログラミング解説 / HUD表示 / データ表示

点から広がる動きが「情報の展開」と「デジタル感」を演出

LIVE DEMO
Title Text Subtitle
10-7Corner Frameコーナーフレーム

L字型のコーナーピースが四隅からアニメーションインしてテキストを囲むフレームを形成

フォーカス表示 / ターゲット指示 / スコープ風UI / 写真フレーム

四隅のフレームが「狙い」「フォーカス」を暗示し、注目を集中させる

LIVE DEMO
Title Text
Subtitle
10-8Underline Drawアンダーラインドロー

テキストが先にフェードインし、その下にアクセントラインが左から描画される

名前テロップ / 解説字幕 / キャプション / シンプルなテロップ

下線が「強調」と「確定」を示し、テキストに権威ある存在感を付与

LIVE DEMO
Title Text
Subtitle
10-9Badge Popバッジポップ

丸みのあるバッジがscale 0→110%→100%でポップアップし、ラベルテキストを表示

LIVE表示 / NEW表示 / タグバッジ / ステータス表示

弾けるような登場が「新着」「重要」のインパクトを強調する

LIVE DEMO
Title Text
Subtitle
10-10Ticker Tapeティッカーテープ

テキストがニュースティッカーのように右端から左端へ水平にスクロールし続ける

ニュース速報 / 株価ティッカー / ライブ配信アラート / お知らせ

連続的な流れが「最新情報」「リアルタイム」の緊迫感を演出

LIVE DEMO
BREAKING NEWS ─ Title Text ─ Subtitle ─ BREAKING NEWS ─ Title Text ─ Subtitle
10-11Glitch Titleグリッチタイトル

テキストがデジタルグリッチ(色ずれ・ちらつき・位置ずれ)を伴って出現する

SF映像 / サイバーパンク風 / ゲーム実況 / テクノロジー系動画

グリッチが「デジタル」「未来」を暗示し、エッジの効いた印象を与える

LIVE DEMO
Title Text
Subtitle
10-12Typewriterタイプライター

テキストが1文字ずつ順番にタイピングされるように表示される古典的な演出

字幕テロップ / ナレーション字幕 / ストーリーテリング / コード表示

1文字ずつの表示が「語りかけ」と「集中」を促し、読む速度をコントロール

LIVE DEMO
10-13Neon Signネオンサイン

テキストがネオン管のようにフリッカーしながら点灯し、グロウ効果で発光する

ナイトライフ / バー・クラブ映像 / レトロ風 / 80sスタイル

ネオンの温かい光が「夜の魅力」「ノスタルジア」と「華やかさ」を演出

LIVE DEMO
Title Text
Subtitle
10-14Stamp Pressスタンプ

テキストが上からスタンプのように叩きつけられ、インパクトと共に着地する

承認印 / APPROVED表示 / ゲームクリア / 重要アナウンス

衝撃的な着地が「決定」「確定」「権威」を強く暗示する

LIVE DEMO
Title Text
Subtitle
10-15Ribbon Slideリボンスライド

リボン形状のバナーが画面左からスライドインし、テキストを載せて停止する

セール告知 / 受賞表示 / 特別イベント / キャンペーンバナー

リボンの装飾性が「特別感」「祝い」「プレミアム」を演出する

LIVE DEMO
Title Text Subtitle
10-16Card Flipカードフリップ

カード型ローワーサードがY軸回転で裏面から表面へフリップして登場する

クイズ番組の答え / カード演出 / 情報切替 / プロフィール表示

裏返す動作が「秘密の開示」を暗示し、サプライズ感を高める

LIVE DEMO
Title Text Subtitle
10-17Gradient Barグラデーションバー

グラデーションカラーのバーがスライドインし、シマー(光沢)が走る二段階演出

プレミアムコンテンツ / 高級ブランド / アワード / ランキング

グラデーションの光沢が「高級感」「プレミアム」「輝き」を演出

LIVE DEMO
Title Text Subtitle
10-18Minimal Fadeミニマルフェード

超クリーンなフェードイン。細い水平ラインと共にテキストが静かに出現する

映画字幕 / ドキュメンタリー / アート映像 / ミニマルデザイン

控えめな出現が「上品」「知的」「落ち着き」を印象づける

LIVE DEMO
Title Text
Subtitle
10-19Bracket Frameブラケットフレーム

[ ] 角括弧が左右から閉じるようにアニメーションし、中のテキストを囲む

テック系UI / コード風表示 / データラベル / プログラミング動画

括弧が「分類」「定義」を暗示し、テクニカルで知的な印象

LIVE DEMO
[
Title Text
Subtitle
]
10-20Tag Labelタグラベル

タグ(ラベル)形状のシェイプが横からスライドインしてテキストを表示する

カテゴリ表示 / タグ付け / 商品ラベル / ジャンル表示

タグ形状が「分類」「ラベリング」を直感的に伝え、整理された印象

LIVE DEMO
Title Text Subtitle
10-21Progress Barプログレスバー

プログレスバーが左から右に充填され、同時にテキストがフェードインする

ローディング表示 / スキルレベル / 進捗表示 / ステータスバー

充填される動きが「進行」「達成」を暗示し、完了への期待感を生む

LIVE DEMO
Title Text
Subtitle
10-22Diagonal Barダイアゴナルバー

斜めにカットされたエッジを持つバーが左からスライドインする

スポーツ中継 / ニュース速報 / アクション映像 / ダイナミックな場面

斜めのカットが「スピード」「ダイナミズム」を暗示し、躍動感を演出

LIVE DEMO
Title Text Subtitle
10-23Double Lineダブルライン

上下2本の水平ラインが左右から伸びてテキストを挟み込むサンドイッチ演出

映画タイトル / 高級ブランド / フォーマルな場面 / クレジット表示

二本線のフレームが「格式」「エレガンス」「権威」を表現する

LIVE DEMO
Title Text
Subtitle
10-24Circle Maskサークルマスク

円形のマスクが左端から広がり、ローワーサード全体を露出させる

トランジション / 映画風演出 / フォーカス効果 / シネマティック

円形の広がりが「発見」「開示」の有機的な印象を与える

LIVE DEMO
Title Text Subtitle
10-25Kinetic Typeキネティックタイプ

各単語が個別にバウンス・回転・スケールしながら順番に着地するキネティック演出

ミュージックビデオ / 歌詞表示 / ポップな動画 / SNS向けコンテンツ

個別の動きが「リズム」「エネルギー」「楽しさ」を最大限に表現

LIVE DEMO
Title Text - Subtitle
10-26Call Outコールアウト

始点からラインが伸び、端点にテキストラベルが出現するコールアウト演出

図解・解説 / 製品紹介 / 部品名表示 / インフォグラフィック

線で繋ぐ動きが「関連付け」「説明」を暗示し、理解を促進する

LIVE DEMO
Title Text
Subtitle
🔄

11. トランジションワイプ(Transition Wipes)

28種
11-1Horizontal Wipe横ワイプ

左から右へclip-path insetが開いてScene Bが出現する最も基本的なワイプトランジション

スライドショー切替 / シーン遷移 / ビフォーアフター / ニュース映像

水平方向の流れが「時間の経過」「物語の進行」を自然に表現する

LIVE DEMO
Scene A
Scene B
11-2Vertical Wipe縦ワイプ

上から下へclip-pathが開いてScene Bが現れる縦方向のワイプトランジション

ページ遷移 / 縦スクロールサイト / ストーリー切替 / メニュー展開

上から降りてくる動きが「幕が開く」印象を与え、舞台的な演出効果

LIVE DEMO
Scene A
Scene B
11-3Diagonal Wipe斜めワイプ

斜め方向にpolygon clip-pathが拡大してScene Bが斜線カットで出現する

ポートフォリオ / ファッション系 / 映像トランジション / PV制作

斜めの動きがダイナミズムと洗練さを同時に表現。視線を誘導する

LIVE DEMO
Scene A
Scene B
11-4Iris Wipeアイリスワイプ

中心から円形にclip-path circleが拡大してScene Bが現れるカメラ絞り風ワイプ

シーン切替 / 映画風演出 / フォトギャラリー / レトロアニメ

中心から広がる円がフォーカスを集め、シネマティックな期待感を生む

LIVE DEMO
Scene A
Scene B
11-5Clock Wipeクロックワイプ

時計の針のようにconic-gradientマスクが12時方向から回転してScene Bを露出する

タイマー演出 / 時間経過表現 / カウントダウン / レトロTV風

時計回りの動きが「時の流れ」を直感的に伝え、期待感を段階的に高める

LIVE DEMO
Scene A
Scene B
11-6Star Wipeスターワイプ

中心から星型のclip-path polygonが拡大してScene Bが星形に現れるポップなワイプ

キッズ向け / バラエティ番組 / ゲーム演出 / お祝い・イベント

星形が「特別感」「ハイライト」を演出し、楽しく華やかな印象を与える

LIVE DEMO
Scene A
Scene B
11-7Heart Wipeハートワイプ

中心からハート型のclip-pathが拡大して愛らしくScene Bが出現する形状ワイプ

ウェディング / バレンタイン / 恋愛系コンテンツ / SNSエフェクト

ハート形が「愛情」「温かさ」を直感的に伝え、感情的なつながりを演出

LIVE DEMO
Scene A
Scene B
11-8Diamond Wipeダイヤモンドワイプ

中心からダイヤモンド(菱形)のclip-pathが拡大してScene Bが現れるワイプ

ジュエリー系 / 高級感演出 / プレゼンテーション / MV映像

菱形のシャープな幾何学が「高級感」「洗練」を暗示。フォーマルな印象

LIVE DEMO
Scene A
Scene B
11-9Cross Wipeクロスワイプ

中心から十字型のclip-pathが拡大してScene Bが十字形に広がるワイプ

医療系 / 救急表示 / ゲームUI / シンボリックな切替

十字の対称性が「バランス」「秩序」を表現。方向性の安定感を与える

LIVE DEMO
Scene A
Scene B
11-10Barn Doorバーンドア

Scene Aが中央から左右に分かれて開き、背後のScene Bが現れる扉開放ワイプ

ステージオープニング / 映画予告 / 製品発表 / イベント開始

扉が開く動きが「開放」「発表」を暗示。期待感とドラマチックな印象

LIVE DEMO
Scene B
Sce
ne A
11-11Venetian Blindsブラインド

水平なブラインド状のストリップが順次開いてScene Bが段階的に露出するワイプ

プレゼン切替 / インテリア系 / ビジネス映像 / 写真ギャラリー

段階的な露出が「整然とした変化」を表現。秩序正しく上品な印象

LIVE DEMO
Scene B
11-12Checker Wipeチェッカーワイプ

チェッカーボード(市松模様)パターンでセルが順次反転しScene Bが現れるワイプ

ボードゲーム / レトロ演出 / パターン系デザイン / ピクセルアート

格子状の変化がパズル的な面白さを演出。レトロでゲーム的な印象

LIVE DEMO
Scene A
Scene B
11-13Dissolveディゾルブ

ランダムなピクセルノイズパターンでScene AがScene Bにじわじわと溶け込む遷移

映画的フェード / 夢の場面 / 回想シーン / 時間経過

柔らかく溶け合う遷移が「融合」「変容」を暗示。穏やかで詩的な印象

LIVE DEMO
Scene A
Scene B
11-14Page Curlページカール

Scene Aの右下角がめくれるようにCSS 3D transformで回転し、裏のScene Bが露出

電子書籍 / デジタルマガジン / フォトアルバム / ストーリーブック

ページをめくる物理的な動きが「読書体験」を想起させ、親しみやすい

LIVE DEMO
Scene B
Scene A
11-15Zoom Throughズームスルー

Scene Aが拡大して消え、奥からScene Bが拡大して出現するズーム貫通ワイプ

ドリルダウンナビ / 階層遷移 / 地図ズーム / ゲームステージ移行

ズームインが「深く入り込む」探究心を刺激。空間的な没入感を演出

LIVE DEMO
Scene A
Scene B
11-16Slide Pushスライドプッシュ

Scene BがScene Aを押し出すように左方向へ同時スライドする物理的なワイプ

カルーセル / タブ切替 / カード送り / スワイプナビゲーション

押し出す動きが「次へ進む」勢いを表現。テンポよい連続性を感じさせる

LIVE DEMO
Scene A
Scene B
11-17Slide Overスライドオーバー

Scene Bが右から左へScene Aの上に覆い被さるようにスライドインするワイプ

モーダル表示 / パネルオーバーレイ / サイドメニュー / 通知パネル

上に重なる動きが「更新」「上書き」を暗示。新情報の到来を表現

LIVE DEMO
Scene A
Scene B
11-18Rotate Wipeローテートワイプ

回転するバーが通過しながらScene AをScene Bに塗り替えるダイナミックなワイプ

スポーツ中継 / アクション系 / ゲーム切替 / ダイナミック演出

回転のエネルギーが「変革」「転換」を力強く表現。アクティブな印象

LIVE DEMO
Scene A
Scene B
11-19Radial Wipeラジアルワイプ

放射状のセグメントが中心から外側へ開いてScene Bが現れるラジアルワイプ

ロゴ表示 / エネルギー系演出 / 太陽光表現 / 放射状UI

放射状の展開が「エネルギーの放出」「覚醒」を暗示。力強い印象

LIVE DEMO
Scene A
Scene B
11-20Mosaic Wipeモザイクワイプ

モザイクタイルが順次反転してScene AからScene Bに切り替わるタイルフリップワイプ

モザイクアート / パズルゲーム / クイズ番組 / インフォグラフィック

タイルの反転が「発見」「解明」を一つずつ表現。インタラクティブ感を演出

LIVE DEMO
Scene A
Scene B
11-21Ripple Wipeリップルワイプ

水面の波紋のように同心円が広がりながらScene Bが揺らぎとともに出現するワイプ

水系演出 / 幻想的なシーン / ドリーム演出 / 自然テーマ

波紋が「波及」「影響の広がり」を暗示。穏やかで幻想的な印象

LIVE DEMO
Scene A
Scene B
11-22Pixelateピクセレート

Scene Aがピクセル化して粗くなり、ピクセルが解消されるとScene Bが現れるワイプ

レトロゲーム / デジタルアート / テック系 / グリッチ演出

ピクセル化が「デジタル変換」を表現。テクノロジー感と懐かしさを共存

LIVE DEMO
Scene A
Scene B
11-23Glitch Wipeグリッチワイプ

グリッチノイズのようにランダムな水平ストリップが乱れながらScene Bに切り替わる

サイバーパンク / ホラー / テック系 / 破壊的演出

信号の乱れが「異常」「不安定」を表現。緊張感とエッジの効いた印象

LIVE DEMO
Scene A
Scene B
11-24Flash Cutフラッシュカット

白いフラッシュが一瞬画面を覆い、光が収まるとScene Bに切り替わっているカット

カメラフラッシュ / 衝撃演出 / 場面転換 / 写真撮影風

フラッシュが「瞬間」「インパクト」を表現。強烈で記憶に残る印象

LIVE DEMO
Scene A
Scene B
11-25Morph Wipeモーフワイプ

有機的な楕円clip-pathがモーフィングしながら拡大してScene Bが現れる流体ワイプ

オーガニック系 / アート作品 / クリエイティブサイト / ブランド演出

有機的な形状変化が「生命感」「創造性」を表現。柔らかく芸術的な印象

LIVE DEMO
Scene A
Scene B
11-26Spiral Wipeスパイラルワイプ

渦巻き状にマスクが広がりScene Bが螺旋軌道で徐々に露出するスパイラルワイプ

サイケデリック / 催眠演出 / トンネル効果 / ファンタジー系

螺旋の動きが「吸い込まれる」没入感を生む。異世界への導入に最適

LIVE DEMO
Scene A
Scene B
11-27Matrix Wipeマトリックスワイプ

マトリックス風の文字列が上から流れ落ち、文字が消えるとScene Bが現れるワイプ

サイバー演出 / ハッカー系 / SF映画 / テック系プレゼン

流れるコードが「デジタル世界」「解読」を表現。テクノロジカルな神秘感

LIVE DEMO
Scene A
Scene B
11-28Shatterシャッター

Scene Aがガラスのように破片に砕けて飛散し、背後のScene Bが現れる破壊ワイプ

アクション演出 / ゲームオーバー / 衝撃的場面転換 / 破壊エフェクト

破砕が「破壊」「解放」を暗示。衝撃的でインパクトの強い場面転換

LIVE DEMO
Scene B
🎬

12. タイトルカード&フレーム(Title Cards & Frames)

22種
12-1Center Expandセンターエクスパンド

タイトル文字が中心からスケールアップし、装飾ラインが四辺に伸びる

映画タイトル / エピソード冒頭 / チャプター表示 / ロゴ表示

中心から広がる動きが「主役感」と「堂々とした登場」を演出

LIVE DEMO
TITLE
Episode 1
12-2Slide & Lockスライド&ロック

タイトルとサブテキストが左右からスライドし、中央でロックイン

番組タイトル / 対戦画面 / VS表示 / イベント告知

左右からの合流が「合体」「決定」のイメージを生む

LIVE DEMO
TITLE
Episode 1
12-3Frame Drawフレームドロー

装飾フレームが一筆書きのように四辺を描画し、最後にタイトルが表示

高級感あるタイトル / 証書風 / ギャラリー / フォトフレーム

手描きの軌跡が「手間をかけた特別感」を演出する

LIVE DEMO
TITLE
2024
12-4Cinematic Barsシネマティックバー

上下にレターボックス(黒帯)が閉じてからタイトルがフェードイン

映画予告 / シネマティック演出 / ドラマチック場面転換 / PV冒頭

レターボックスが「映画的」「シネマスコープ」の高級感を生む

LIVE DEMO
TITLE
A Cinematic Experience
12-5Particle Titleパーティクルタイトル

パーティクルが飛び交い集約した後、タイトル背景が形成される

ゲームOP / ファンタジー演出 / 魔法エフェクト / テクノ系タイトル

粒子の収束が「エネルギーの集中」「覚醒」を暗示する

LIVE DEMO
TITLE
Particles
12-6Split Revealスプリットリビール

画面が左右に割れてタイトルが露出する開幕演出

ドラマチックOP / 重厚な場面転換 / ゲームステージ開始 / カーテンオープン

「幕が開く」メタファーが期待感と高揚感を誘う

LIVE DEMO
TITLE
Split Reveal
12-7Zoom Blurズームブラー

タイトルが遠方から高速ズームインし、放射状ブラーが残像を演出

アクション系タイトル / スポーツ中継 / インパクトシーン / ロゴ登場

高速接近が「迫力」「緊迫感」「スピード感」を生む

LIVE DEMO
TITLE
Zoom Blur
12-8Glitch Title Cardグリッチタイトル

グリッチノイズが走った後にタイトルが安定表示される

サイバーパンク / ホラー演出 / テクノ系 / ハッキング演出

不安定さが「デジタル」「異常」「緊張感」を演出する

LIVE DEMO
TITLE
TITLE
TITLE
Glitch
12-9Gradient Sweepグラデーションスイープ

グラデーションがタイトル文字上を横断してスイープする

プレミアム感 / ラグジュアリーブランド / 受賞表示 / ゴールド演出

光の走査が「輝き」「特別感」「高級」を暗示する

LIVE DEMO
TITLE
Gradient Sweep
12-10Minimal Lineミニマルライン

細いラインが伸びた後、ミニマルなタイポグラフィが表示される

アート系 / 建築 / ポートフォリオ / ミニマルデザイン

余白と線の緊張感が「洗練」「知性」「静謐」を表現

LIVE DEMO
TITLE
Minimal Design
12-11Corner Bracketsコーナーブラケット

四隅にL字型ブラケットがアニメーションで出現し、タイトルを囲む

カメラUI / ターゲットロック / 写真フレーム / HUD風デザイン

四隅のフレームが「注視」「フォーカス」「捕捉」を表現

LIVE DEMO
TITLE
Corner Brackets
12-12Circle Frameサークルフレーム

円形フレームがSVGストロークで描画され、中央にタイトルが表示

ロゴ演出 / エンブレム / バッジ表示 / 完了マーク

円の完成が「完全」「統一」「達成」を象徴する

LIVE DEMO
TITLE
2024
12-13Stagger Lettersスタガーレターズ

文字が1文字ずつ時間差で出現するタイポグラフィ演出

テキストアニメ / タイプライター / ドラマ字幕 / ゲームUI

文字の逐次出現が「物語の始まり」「語りかけ」を感じさせる

LIVE DEMO
12-14Reflectionリフレクション

タイトルが表示された後、下に反射テキストとシマー効果が出現

水面演出 / 高級感 / ロゴアニメーション / エレガントなOP

反射が「深み」「奥行き」「格調高さ」を演出する

LIVE DEMO
TITLE
TITLE
12-15Neon Frameネオンフレーム

ネオン発光するフレームがタイトル周囲に出現し、脈動する

ナイトクラブ / レトロ / サイバーパンク / ネオン看板

ネオンの発光が「夜」「都会」「エネルギッシュ」を表現

LIVE DEMO
NEON
Glow Frame
12-16Tape Stripeテープストライプ

斜めストライプがスライドインし、その上にタイトルが表示される

警告表示 / 工事中 / セール / カジュアルなバナー

ストライプが「注意喚起」「工業的」「力強さ」を表現

LIVE DEMO
TITLE
Tape Stripe
12-17Vertical Stackバーティカルスタック

単語が縦に積み上がるように1つずつアニメーションで登場

詩的な演出 / クレジット / モダンタイポ / 歌詞表示

縦の積み上げが「構築」「詩的リズム」「重層感」を表現

LIVE DEMO
THE
GRAND
TITLE
2024
12-18Mask Revealマスクリビール

円形マスクが中央から広がってタイトルを露出させる

ドラマチック登場 / ロゴ演出 / フォーカスイン / ポータル

マスクの拡大が「発見」「開示」「世界が広がる」を表現

LIVE DEMO
TITLE
Mask Reveal
12-19Blueprintブループリント

設計図風のグリッドと寸法線が描画された後、技術テキストが出現

建築 / エンジニアリング / テクニカル / 設計図風デザイン

青焼き設計図が「精密」「技術力」「計画性」を表現

LIVE DEMO
DESIGNATION
TITLE
REV. 2024-A
12-20Stamp Sealスタンプシール

スタンプ/印鑑が上から押し付けられるように着地し、振動する

承認マーク / 認証 / 合格表示 / レトロポスター

スタンプの着地が「認定」「確定」「オフィシャル」を象徴

LIVE DEMO
APPROVED
2024
12-21Countdownカウントダウン

3→2→1とカウントダウンした後にタイトルが表示される

イベント開始 / レース / ゲーム開始 / 番組OP / ライブ配信

カウントダウンが「期待の高まり」「クライマックスへの昂揚」を生む

LIVE DEMO
GO!
Title Here
12-22Wave Textウェーブテキスト

文字が波のように上下にうねりながら登場するテキストアニメーション

遊び心あるタイトル / キッズ向け / ポップ演出 / 音楽系

波の動きが「リズム」「楽しさ」「生命力」を表現する

LIVE DEMO
📊

13. データビジュアライゼーション(Data Visualization)

22種
13-1Bar Chart Riseバーチャートライズ

棒グラフが下から順番に成長するスタガーアニメーション

売上データ / 比較分析 / レポート画面 / ダッシュボード

成長の動きが「上昇」「達成」を視覚化し、データへの注目を促す

LIVE DEMO
13-2Pie Chart Drawパイチャートドロー

円グラフのセグメントが一つずつ描画されていくアニメーション

構成比表示 / マーケットシェア / 予算配分 / アンケート結果

全体から部分への分割が「構成」「割合」の理解を直感的にする

LIVE DEMO
13-3Line Chart Drawラインチャートドロー

折れ線グラフのパスが左から右へ順に描画されるアニメーション

時系列データ / トレンド分析 / 株価チャート / アクセス推移

軌跡を辿る動きが「流れ」「変遷」を自然に伝え、ストーリーを生む

LIVE DEMO
13-4Donut Chartドーナツチャート

ドーナツ型チャートのセグメントが順番にアニメーションで出現

KPI表示 / 進捗状況 / カテゴリ比率 / リソース配分

中央の空白が「余白」「焦点」を作り、中心に数値を配置できる

LIVE DEMO
13-5Area Chart Fillエリアチャートフィル

面グラフが左から右へ塗りつぶされながら展開するアニメーション

累積データ / 領域比較 / ストリームグラフ / 収益推移

面の広がりが「量」「蓄積」を視覚化し、ボリューム感を与える

LIVE DEMO
13-6Scatter Plotスキャッタープロット

散布図のドットがひとつずつポップアップして出現するアニメーション

相関分析 / 分布表示 / クラスタ可視化 / 統計データ

点の散らばりが「多様性」「分布」を示し、パターンの発見を促す

LIVE DEMO
13-7Horizontal Barsホリゾンタルバー

横棒グラフが左から右へ伸びるスタガーアニメーション

ランキング表示 / スキルバー / 投票結果 / 項目比較

横への伸びが「進行」「到達度」を直感的に表現する

LIVE DEMO
13-8Stacked Barスタックドバー

積み上げ棒グラフのセグメントが順番に積み重なるアニメーション

内訳表示 / 複合データ / カテゴリ別集計 / 年度比較

積み上がりが「累積」「構成」を示し、全体と部分の関係を明確にする

LIVE DEMO
13-9Gauge Meterゲージメーター

半円ゲージの針がスイープして値を指すアニメーション

速度メーター / パフォーマンス指標 / 健康スコア / 信頼度

針の動きが「計測」「判定」を連想させ、即座に良し悪しを伝える

LIVE DEMO
13-10Counterカウンター

数値が0から目標値まで高速でカウントアップするアニメーション

統計数値 / フォロワー数 / 売上額 / ダウンロード数

数字の変動が「成長」「インパクト」を演出し、大きな数値を印象づける

LIVE DEMO
0
Total Users
13-11Sparklineスパークライン

ミニ折れ線グラフがコンパクトに描画されるアニメーション

インライン指標 / テーブル内チャート / KPIカード / ミニトレンド

最小限の情報でトレンドを伝え、文脈を損なわず一目で傾向がわかる

LIVE DEMO
13-12Bubble Chartバブルチャート

バブルが異なるサイズでポップアップ出現する散布図アニメーション

3次元データ / 市場分析 / 人口統計 / ポートフォリオ比較

サイズの違いが「重要度」「規模」を直感的に伝え、比較を容易にする

LIVE DEMO
13-13Radar Chartレーダーチャート

レーダーチャートのポリゴンが中心から広がって描画されるアニメーション

能力値表示 / 製品比較 / 多軸評価 / キャラクターステータス

多角形の広がりが「バランス」「総合力」を一目で把握させる

LIVE DEMO
13-14Funnel Chartファネルチャート

ファネル(漏斗)の各段階が上から順にアニメーション表示

コンバージョンファネル / 採用プロセス / 販売パイプライン / 離脱分析

段階的な絞り込みが「プロセス」「効率」を視覚的に表現する

LIVE DEMO
13-15Treemapツリーマップ

ツリーマップの矩形が面積に応じてスタガーで出現するアニメーション

ディスク使用量 / ポートフォリオ配分 / カテゴリ面積 / 組織構成

面積の大小が「比重」「優先度」を空間的に理解させる

LIVE DEMO
13-16Heatmapヒートマップ

グリッドセルが色温度に応じて順番に色づくアニメーション

アクティビティ表示 / コミット履歴 / 温度分布 / 利用頻度

色の濃淡が「強度」「頻度」を直感的に伝え、ホットスポットを発見させる

LIVE DEMO
13-17Progress Ringプログレスリング

円形プログレスリングが弧を描いて目標値まで充填されるアニメーション

達成率 / ローディング / スキルレベル / 完了状態

円の充填が「完成度」「進捗」を一目で伝え、残りの量も直感的にわかる

LIVE DEMO
13-18Waterfall Chartウォーターフォール

滝グラフのセグメントが上から階段状にカスケード表示されるアニメーション

損益分析 / 予算変動 / 増減要因分解 / 財務レポート

段階的な増減が「因果関係」「要因分解」を論理的に伝える

LIVE DEMO
13-19Histogramヒストグラム

ヒストグラムの棒が正規分布の形状で成長するアニメーション

度数分布 / 統計分析 / 品質管理 / テスト成績分布

分布の形が「集中」「ばらつき」を視覚化し、データの特性を即座に把握させる

LIVE DEMO
13-20Sankey Flowサンキーフロー

フローパスがノード間をアニメーションしながら接続されるサンキーダイアグラム

エネルギーフロー / ユーザー遷移 / 予算配分 / データパイプライン

流れの太さが「量」「重要度」を示し、全体の構造を俯瞰的に理解させる

LIVE DEMO
13-21Timelineタイムライン

水平タイムラインのラインが伸び、イベントが順番に出現するアニメーション

沿革 / プロジェクト工程 / 歴史年表 / リリース履歴

時間の流れに沿った配置が「進展」「歴史」を自然に物語る

LIVE DEMO
Q1
Launch
Q2
Growth
Q3
Scale
Q4
Profit
13-22KPI DashboardKPIダッシュボード

複数のKPIカードがスタガーでアニメーション表示されるダッシュボード

経営ダッシュボード / 分析レポート / モニタリング画面 / サマリーページ

複数指標の同時提示が「全体像」「一覧性」を提供し、意思決定を支援する

LIVE DEMO
0
Revenue
+12.5%
0
Users
+8.3%
0%
Conv. Rate
-1.2%
0
Orders
+22.1%

14. アイコン&シンボル(Icon & Symbol)

20種
14-1Draw Onドローオン

SVGのstroke-dasharray/dashoffsetを使い、アイコンのストロークが一筆書きで描画される

ロゴ表示 / 機能紹介 / チュートリアル / ローディング完了

手描きの温もりと「今まさに出現する」ライブ感を演出

LIVE DEMO
14-2Fill Wipeフィルワイプ

アイコンが下から上へ色で塗りつぶされるクリップパスアニメーション

レベルアップ / ゲージ充填 / スキル解放 / 進捗表示

エネルギーが注がれ満たされる感覚。達成感を視覚化

LIVE DEMO
14-3Spin Inスピンイン

アイコンがscale(0)から回転しながら拡大して登場する

設定ギア / リフレッシュ / 読み込み完了 / アイテム獲得

機械的・技術的な印象。ギアやツールに最適

LIVE DEMO
14-4Bounce Inバウンスイン

アイコンが弾むように登場する弾性モーション

通知到着 / 新機能バッジ / いいね反応 / ゲーム報酬

楽しさ・ポジティブさを強調。ユーザーの注目を自然に引く

LIVE DEMO
14-5Morph Iconモーフアイコン

再生ボタンが一時停止アイコンへスムーズにモーフィングする

再生/停止 / メニュー開閉 / 状態切替 / トグルUI

状態変化を自然に伝える。操作の因果関係を視覚化

LIVE DEMO
14-6Pulse Glowパルスグロー

アイコンが光るアウトラインと共に脈動するように拡縮を繰り返す

アクティブ状態 / 注目ポイント / 接続中 / ライブ配信中

生命感・脈動感。「今動いている」存在感を持続的に示す

LIVE DEMO
14-7Shake Alertシェイクアラート

アイコンが左右に震えてユーザーの注意を引く警告モーション

エラー通知 / 未入力警告 / 新着メッセージ / 緊急アラート

不安定さ・緊急性を伝える。見逃し防止に効果的

LIVE DEMO
14-8Flip Revealフリップリビール

アイコンが3Dパースペクティブで回転して表面が現れる

カード裏返し / 情報開示 / 切替アニメーション / 結果発表

隠されていたものの出現。期待感・発見の喜びを演出

LIVE DEMO
14-9Stamp Downスタンプダウン

アイコンが上方から大きく登場し、ドンと着地するインパクト演出

承認スタンプ / 認証バッジ / 完了マーク / 品質保証

権威・確定感。重みのある決定的な印象を与える

LIVE DEMO
14-10Assemble Partsパーツアセンブル

アイコンのパーツが四方から飛んできて一つのアイコンに組み上がる

ビルドプロセス / チーム結成 / パズル完成 / 組立表現

統合・構築の過程を可視化。達成感と構造理解を促す

LIVE DEMO
14-11Outline to Fillアウトラインtoフィル

アイコンのアウトラインが描画された後、内部が塗りつぶされる2段階演出

お気に入り登録 / 選択確定 / ブックマーク / いいねアクション

段階的な完成。選択→確定のフィードバックを二重に表現

LIVE DEMO
14-12Wiggleウィグル

アイコンが連続して小刻みに揺れるかわいらしいモーション

削除確認 / 編集モード / iOSアプリ並べ替え / 注目アイテム

不安定さの中のかわいらしさ。操作可能性を暗示する

LIVE DEMO
14-13Pop & Sparkleポップ&スパークル

アイコンがポップインで登場し、周囲にキラキラ粒子が飛び散る

達成 / 報酬獲得 / 新規解放 / お祝い演出

華やかさ・特別感。成功体験を強化し満足度を高める

LIVE DEMO
14-14Swipe Changeスワイプチェンジ

スワイプジェスチャーで旧アイコンが去り新アイコンが入ってくる

タブ切替 / カルーセル / ビュー変更 / モード切替

方向性のある切替。次の画面・状態へ進む実感を与える

LIVE DEMO
14-15Loading Spinローディングスピン

ローディングスピナーが回転し、完了時にチェックへ変化する

データ読み込み / 送信中 / 処理待ち / ファイルアップロード

処理中の安心感。動き続けることで「止まっていない」と伝える

LIVE DEMO
14-16Success Checkサクセスチェック

円が描画されつつ中央にチェックマークがドローオンで出現する成功演出

送信完了 / バリデーション成功 / タスク完了 / 支払い成功

安心感・完了感。ユーザーの操作が正しかったことを即座に伝達

LIVE DEMO
14-17Error Crossエラークロス

×マークがドローオンで描画された後、全体がシェイクするエラー演出

入力エラー / 認証失敗 / 拒否 / 404エラー

明確な否定・失敗。視覚と動きの二重表現でエラーを確実に伝える

LIVE DEMO
14-18Arrow Morphアローモーフ

矢印がスムーズに方向転換する(右→下→左→上)モーフィング

ナビゲーション / ソート順変更 / 展開/折畳 / スクロール誘導

方向の明示的な変化。ユーザーの視線を新しい方向へ自然に誘導

LIVE DEMO
14-19Badge Countバッジカウント

アイコン右上に通知バッジがポップアニメーションで出現する

未読通知 / メッセージ数 / カートアイテム数 / アラート表示

見逃し防止の視覚的フック。数字の出現で即座に注意を引く

LIVE DEMO
3
14-20Sticker Peelステッカーピール

アイコンがステッカーを剥がして貼り付けるような3D回転で登場する

ラベル付与 / バッジ授与 / シール演出 / コレクション追加

物理的な貼り付け感。デジタルに触覚的なリアリティを付与

LIVE DEMO
🎨

15. 背景&テクスチャ(Background & Texture)

18種
15-1Gradient Shiftグラデーションシフト

CSSグラデーションの色が滑らかにアニメーションし、背景の雰囲気が変化し続ける

LP背景 / ヒーローセクション / 雰囲気演出 / アンビエント背景

色の流動が「変化」「創造性」を暗示し、見る者を引き込む没入感を生む

LIVE DEMO
15-2Particle Fieldパーティクルフィールド

無数の微粒子がCanvasに浮遊し、緩やかに移動するアンビエント背景演出

テック系LP / ポートフォリオ / ダッシュボード背景 / 宇宙風演出

粒子の浮遊が「自由」「広がり」を暗示し、未来的で知的な印象を与える

LIVE DEMO
15-3Starfieldスターフィールド

星が奥から手前に流れるパララックス深度効果で、宇宙空間を飛行する感覚を演出

SF演出 / ゲームOP / 宇宙テーマLP / ワープ演出

奥行き方向の移動が「前進」「冒険」を暗示し、ワクワク感と没入感を生む

LIVE DEMO
15-4Grid Linesグリッドライン

グリッド線がスクロールしながら遠近感を表現するサイバー風の背景パターン

レトロフューチャー / ゲーム背景 / テクノロジー系UI / データ可視化

規則的なグリッドが「秩序」「構造」を暗示し、テクノロジカルな信頼感を与える

LIVE DEMO
15-5Bokehボケ

柔らかい円形のボケライトがふわふわと浮遊する、幻想的な背景演出

写真系サイト / ウェディング / 夜景演出 / エレガントな背景

ぼけた光が「夢幻」「ロマンチック」を暗示し、柔らかく温かい印象を与える

LIVE DEMO
15-6Rainレイン

Canvasに細い雨粒が上から下へ落下し続ける天候エフェクト

天気演出 / ムーディーな背景 / ゲーム環境 / 感傷的な雰囲気

雨が「静寂」「内省」を暗示し、メランコリックで詩的な雰囲気を演出

LIVE DEMO
15-7Snowスノー

雪の結晶がゆっくり落下しながら水平方向にも揺れる、冬の背景演出

冬季キャンペーン / クリスマスLP / 天候演出 / ファンタジー背景

雪の静かな落下が「穏やかさ」「純粋さ」を暗示し、清潔感と静謐さを演出

LIVE DEMO
15-8Noise Textureノイズテクスチャ

ランダムなノイズ/グレイン粒子がちらつくフィルムグレイン風オーバーレイ

映画風演出 / レトロフィルター / テクスチャ背景 / ヴィンテージ風

ノイズが「アナログ感」「手触り」を暗示し、デジタル一辺倒を和らげる温もりを付加

LIVE DEMO
15-9Ripple Surfaceリップルサーフェス

水面に落ちた滴のように同心円の波紋が広がり消えていく、水面風エフェクト

水のテーマ / 禅・瞑想系 / リラクゼーション / インタラクティブ背景

波紋が「波及」「影響の広がり」を暗示し、穏やかで瞑想的な印象を与える

LIVE DEMO
15-10Light Raysライトレイ

上部から差し込むボリューメトリックな光の筋(ゴッドレイ)が脈動する演出

神秘的演出 / 森林シーン / 教会風 / ドラマチック背景

光の筋が「希望」「神聖さ」を暗示し、荘厳で感動的な雰囲気を醸成する

LIVE DEMO
15-11Bubble Riseバブルライズ

泡が下部から浮かび上がり、ゆらゆら揺れながら上昇して消える水中演出

水中テーマ / 飲料広告 / アクアリウム / 爽やかな背景

泡の上昇が「軽やかさ」「解放」を暗示し、爽快でリフレッシュ感のある印象

LIVE DEMO
15-12Geometric Patternジオメトリックパターン

三角形・四角形・六角形などの幾何学模様が回転しながら反復表示される背景

テクノロジー系 / ブランド背景 / パターンデザイン / 幾何学アート

幾何学図形の反復が「秩序」「数学的美」を暗示し、知的で洗練された印象

LIVE DEMO
15-13Wave Linesウェーブライン

複数のサイン波ラインが位相差をつけて流れる、海や音波を連想させる背景

音楽系サイト / オーディオ可視化 / 海テーマ / サウンドウェーブ

波の流れが「リズム」「調和」を暗示し、心地よい律動感を感じさせる

LIVE DEMO
15-14Confettiコンフェッティ

カラフルな紙吹雪が回転しながら落下する、お祝い・達成演出

成功画面 / 購入完了 / お祝い / ゲームクリア / 記念日

紙吹雪が「祝福」「達成」を暗示し、幸福感とお祭り気分を最大化する

LIVE DEMO
15-15Smoke Fogスモークフォグ

複数レイヤーの煙/霧がゆっくり漂い、幻想的な雰囲気を醸し出す背景演出

ダークテーマ / ミステリアス演出 / ホラー系 / 高級感のある背景

漂う霧が「神秘」「不確実性」を暗示し、深みと奥行きのある雰囲気を創出

LIVE DEMO
15-16Matrix Codeマトリックスコード

緑色の文字列が列ごとに異なる速度で落下するマトリックス風デジタルレイン

ハッカー風UI / サイバーセキュリティ / テクノロジー演出 / SF背景

流れるコードが「デジタル世界」「ハッキング」を暗示し、テック感を最大化

LIVE DEMO
15-17Electric Fieldエレクトリックフィールド

ランダムな稲妻/プラズマアークがCanvasに発生し消滅する電撃エフェクト

エネルギー演出 / SF背景 / ゲームエフェクト / テスラコイル風

電撃が「エネルギー」「パワー」を暗示し、迫力と緊張感のある印象を与える

LIVE DEMO
15-18Gradient Meshグラデーションメッシュ

複数のグラデーションポイントが個別に移動し、色の融合が変化し続けるメッシュ背景

Apple風背景 / モダンLP / ブランドサイト / クリエイティブ背景

色の融合と変形が「流動性」「革新」を暗示し、洗練されたプレミアム感を演出

LIVE DEMO
💠

16. 3D&パース(3D & Perspective)

18種
16-1Card Flip 3Dカードフリップ3D

Y軸回転でカードが裏返り、背面の情報が現れる。backface-visibilityで制御

プロダクトカード / クイズ回答 / 情報切替 / ゲームカード

「裏側を見せる」動きが秘密の開示・発見の喜びを刺激する

LIVE DEMO
FRONT
BACK
16-2Cube Rotateキューブローテート

3Dキューブが回転して各面を順に表示。4面に異なるコンテンツを配置可能

コンテンツ切替 / ステップ表示 / ダッシュボード / プレゼン

立体回転が「多面性」「奥行き」を暗示し、情報の豊富さを感じさせる

LIVE DEMO
A
B
C
D
16-3Carousel 3Dカルーセル3D

6つのアイテムが3D円環上に配置され、Y軸回転で次々と前面に来る

商品カタログ / ギャラリー / チーム紹介 / ポートフォリオ

回転展示が「選択肢の豊富さ」を表現。ショーケースのような特別感

LIVE DEMO
16-4Book Openブックオープン

左右のページが背表紙を軸に開く。rotateYで奥行きのある展開

電子書籍 / カタログ / 招待状 / ストーリー演出

本を開く動作が「知識の開示」「物語の始まり」を暗示する

LIVE DEMO
Left
Right
16-5Fold Downフォールドダウン

パネルが上辺を軸にrotateXで折り畳み状態から展開。蓋が開くイメージ

メニュー展開 / FAQ開閉 / 通知パネル / ドロップダウン

折り畳みが「収納→展開」を物理的に表現。整理整頓の印象

LIVE DEMO
FOLD
16-6Perspective Tiltパースペクティブチルト

perspective付きでX/Y軸に交互傾斜。立体的な揺れで奥行き感を強調

カードホバー / 3D UI効果 / インタラクティブ要素 / 商品表示

微妙な傾きが「手に取って見ている」ような臨場感と親密さを生む

LIVE DEMO
16-7Door Openドアオープン

左辺を軸にrotateYでドアが開く。パネルの背後にコンテンツが見える演出

メニュー開閉 / リビール演出 / ナビゲーション / ポータル

ドアを開ける動作が「招待」「歓迎」「新世界への入口」を暗示

LIVE DEMO
DOOR
16-8Flip Stackフリップスタック

重なったカードが手前からrotateXで奥へめくれ、次のカードが順番に現れる

カードデッキ / 画像ギャラリー / ニュースフィード / タスクリスト

めくる動作が「次へ進む」「発見」を暗示。ページをめくる楽しさ

LIVE DEMO
Card 1
Card 2
Card 3
16-93D Rotate In3Dローテートイン

Y軸回転しながら奥から手前に登場。perspectiveで立体的な出現演出

モーダル表示 / カード登場 / ヒーロー要素 / プロダクト紹介

回転登場が「舞台袖から現れる」劇的な印象。注目度が高い

LIVE DEMO
16-10Parallax Layersパララックスレイヤー

深度の異なるレイヤーがマウス位置に応じて異なる速度で動く。視差効果で奥行き表現

ヒーローセクション / ゲームBG / インタラクティブカード / ポートフォリオ

視差が「空間の深さ」を感じさせ、没入感とリアリティを高める

LIVE DEMO
DEPTH
16-11Cylinder Rollシリンダーロール

テキストがX軸回転でシリンダー状に巻かれ、ロールしながら次の面を表示

数値カウンター / スロットマシン / テキスト切替 / ティッカー

ロール動作が「切り替え」「更新」を物理的に表現。メカニカルな印象

LIVE DEMO
HELLO
WORLD
3D CSS
MAGIC
16-12Prism Rotateプリズムローテート

三角柱が120度ずつ回転して3つの面を順に表示。独特な幾何学的切替演出

テキストローテーション / バナー切替 / コンテンツスイッチ

三角柱の回転がユニークな幾何学的美しさを演出。印象に残る

LIVE DEMO
Face A
Face B
Face C
16-13Fold Accordionフォールドアコーディオン

4枚のパネルが交互にrotateYで折り畳まれ、アコーディオンのように開閉

FAQ / メニュー展開 / 追加情報表示 / パネル開閉

蛇腹の開閉が「情報の圧縮と展開」を直感的に表現。整理された印象

LIVE DEMO
1
2
3
4
16-143D Pop Out3Dポップアウト

奥からtranslateZで手前に飛び出しながらスケールアップ。迫力ある登場

CTA強調 / 通知ポップ / ゲームアイテム / 商品ハイライト

手前への飛び出しが「重要性」「緊急性」を強調。画面を飛び出す迫力

LIVE DEMO
16-15Isometric Gridアイソメトリックグリッド

アイソメトリック視点のグリッドが1セルずつ浮き上がりながら構築される

ゲームマップ / ダッシュボード / インフォグラフィック / 3D都市

積み上げ動作が「構築」「成長」を暗示。戦略的・建設的な印象

LIVE DEMO
16-16Perspective Zoomパースペクティブズーム

perspectiveトンネルの中を手前に向かってズーム。矩形リングが奥から手前に飛来

ワープ演出 / トランジション / SF風UI / スピード感のある場面転換

奥からの接近が「加速」「突入」を暗示。スピード感と没入感

LIVE DEMO
16-17Swing Inスウィングイン

上辺を支点にX軸回転で振り子のように揺れながら正面を向く。3D振り子登場

通知カード / ドロップダウン / メニュー登場 / ラベル表示

振り子の動きが「吊り下がり」「物理的実在感」を与える。自然な登場

LIVE DEMO
16-18Box Unfoldボックスアンフォールド

箱の4面が中心面から展開図のように平らに開く。rotateX/Yで各面が倒れる

パッケージ演出 / 展開図アニメ / プロダクトリビール / 教育コンテンツ

展開が「開封」「中身を見せる」メタファー。ワクワク感と発見の喜び

LIVE DEMO
CENTER
TOP
RIGHT
FRONT
LEFT
🌈

17. カラー&グラデーション(Color & Gradient)

16種
17-1Linear Gradient Sweepリニアグラデーションスイープ

リニアグラデーションの角度が滑らかに360度回転する

ローディング / 背景演出 / カードハイライト / アイキャッチ

回転するグラデーションが「流動」「進行中」の印象を与える

LIVE DEMO
17-2Radial Gradient Pulseラジアルグラデーションパルス

放射状グラデーションが拡大・縮小を繰り返す脈動エフェクト

注目喚起 / ボタンホバー / 通知 / エネルギー表現

脈動が「生命」「鼓動」を暗示し、有機的な印象を与える

LIVE DEMO
17-3Conic Gradient Spinコニックグラデーションスピン

コニック(円錐)グラデーションが回転する。プログレスリング風

プログレス / ローディング / レーダー / タイマー

円錐回転が「スキャン」「走査」を表現し、処理中の感覚を伝える

LIVE DEMO
17-4Color Cycleカラーサイクル

HSLの色相を0〜360度まで連続的に変化させ、スペクトラムを一周する

ゲーム演出 / パーティ / レインボー / ステータス変化

虹色の循環が「多様性」「無限」を象徴する

LIVE DEMO
17-5Gradient Positionグラデーションポジション

グラデーションの中心位置が要素内を移動する

ホバーエフェクト / スポットライト / 追跡UI / インタラクティブ背景

光源の移動が「追従」「インタラクティブ」な印象を生む

LIVE DEMO
17-6Multi-Stop Shiftマルチストップシフト

複数のグラデーションストップ(色停止点)の位置が同時にシフトする

データ可視化 / グラフ / 進捗バー / ヒートマップ

多層の色変化が「複雑さ」「豊かさ」を表現する

LIVE DEMO
17-7Color Flashカラーフラッシュ

高速に色がフラッシュのように切り替わるシーケンス

衝撃演出 / ダメージ / 警告 / ストロボ / カウントダウン

急速な色変化が「衝撃」「緊張」を引き起こす

LIVE DEMO
17-8Chromatic Aberration色収差

RGBの各チャンネルがわずかにずれて色収差を発生させる

グリッチ / レトロ / カメラ風 / サイバーパンク / VHS風

色のズレが「歪み」「デジタルノイズ」の雰囲気を演出する

LIVE DEMO
17-9Duotone Shiftデュオトーンシフト

2色のトーンが別のカラーパレットへ滑らかに変化する

テーマ切替 / ムードチェンジ / スライドショー / ブランディング

2色の変化が「気分転換」「変容」を穏やかに伝える

LIVE DEMO
17-10Rainbow Waveレインボーウェーブ

虹色のグラデーションが波のように横方向に流れる

ゲームUI / 祝祭演出 / プライド / ファンタジー / ロゴ

流れる虹が「祝福」「歓喜」「多彩」の強い印象を与える

LIVE DEMO
17-11Gradient Maskグラデーションマスク

グラデーションをマスクとして使い、下の要素を段階的にリビールする

画像表示 / テキスト出現 / ローディング / スライドイン

段階的な露出が「発見」「期待」を効果的に演出する

LIVE DEMO
17-12Neon Glowネオングロー

ネオンサインのように色が脈動しながら発光するエフェクト

ネオンサイン / サイバーパンク / ナイトクラブ / ゲームUI

発光の明滅が「夜」「都市」「未来」の雰囲気を醸成する

LIVE DEMO
17-13Color Dissolveカラーディゾルブ

ある色から別の色へ粒子的に溶けるように変化する

シーン遷移 / テーマ変更 / ムード切替 / 状態変化

溶解する変化が「変容」「移行」を自然に感じさせる

LIVE DEMO
17-14Metallic Sheenメタリックシーン

メタリックなハイライトが表面を横切るように流れる

高級感演出 / カード / ロゴ / バッジ / メダル

光沢の走りが「高級」「プレミアム」「価値」を表現する

LIVE DEMO
17-15Gradient Borderグラデーションボーダー

ボーダー(枠線)にアニメーションするグラデーションを適用

カードUI / 入力フォーム / 選択状態 / フォーカス表示

光る枠が「選択中」「アクティブ」の状態を華やかに示す

LIVE DEMO
17-16Holographicホログラフィック

ホログラムのように角度によって虹色に変化するイリデッセント効果

カード / ID / チケット / プレミアム演出 / コレクション

見る角度で変わる色が「希少」「特別」「未来的」な価値を感じさせる

LIVE DEMO
🎨

18. 合成&ブレンド(Composite & Blend)

14種
18-1Multiply Blend乗算ブレンド

2つのシェイプの重なり部分が乗算合成で暗くなる。色が重なるほど深い色になる

影の表現 / テクスチャ合成 / ヴィンテージ風加工 / 印刷物デザイン

色の掛け合わせが「深み」「重厚感」を演出し、高級感を与える

LIVE DEMO
mix-blend-mode: multiply
18-2Screen Blendスクリーンブレンド

重なり部分がスクリーン合成で明るくなる。乗算の逆で光を加算するような効果

発光演出 / レンズフレア / ライトリーク / 光の重なり表現

明るさが増す合成が「希望」「輝き」を暗示し、ポジティブな印象を与える

LIVE DEMO
mix-blend-mode: screen
18-3Overlay Blendオーバーレイブレンド

multiplyとscreenの組み合わせ。暗い部分はより暗く、明るい部分はより明るくなる

コントラスト強調 / テクスチャオーバーレイ / 写真加工 / ドラマチック演出

コントラスト増強が「インパクト」「ドラマ性」を高め、視線を引き付ける

LIVE DEMO
mix-blend-mode: overlay
18-4Difference Blend差分ブレンド

上下レイヤーの色の差分を取り、反転したような鮮やかな色を生成する

サイケデリック演出 / ネガポジ反転 / アート表現 / 音楽ビジュアライザ

予想外の色彩が「驚き」「非日常」を演出し、実験的な印象を与える

LIVE DEMO
mix-blend-mode: difference
18-5Color Dodge覆い焼き

下のレイヤーを明るくして上のレイヤーの色で焼く。強烈なハイライトを生成

光線演出 / 爆発エフェクト / ネオンサイン / 輝くハイライト

眩い発光が「エネルギー」「強さ」を象徴し、目を引く強烈な印象

LIVE DEMO
mix-blend-mode: color-dodge
18-6Luminosity Blendルミノシティ

上のレイヤーの輝度のみを下のレイヤーに適用。色相・彩度は下のレイヤーを維持

明暗調整 / 写真の雰囲気統一 / モノクロ風加工 / 映画的カラーグレーディング

輝度分離が「洗練」「繊細さ」を表現し、プロフェッショナルな印象

LIVE DEMO
mix-blend-mode: luminosity
18-7Blur Compositeブラーコンポジット

backdrop-filterでぼかしフィルタをかけたオーバーレイが背景のシェイプを透過ぼかしする

フロストガラス / すりガラス効果 / UIオーバーレイ / フォーカス演出

すりガラス越しの視界が「奥行き」「レイヤー感」を演出し、先進的な印象

LIVE DEMO
backdrop-filter: blur
18-8Brightness Pulseブライトネスパルス

filter: brightnessが脈打つように明暗を繰り返す。シェイプが呼吸するような演出

警告表示 / ハートビート / 集中線 / エネルギー充填

明滅が「鼓動」「生命力」を暗示し、有機的で緊張感のある印象

LIVE DEMO
filter: brightness()
18-9Contrast Shiftコントラストシフト

filter: contrastがアニメーションし、淡い色から鮮烈な色へコントラストが変化する

フォーカスイン / ドラマチック演出 / 映画風カラー / ビフォーアフター

コントラスト変化が「焦点化」「覚醒」を暗示し、集中力を喚起する

LIVE DEMO
filter: contrast()
18-10Hue Rotateヒューローテート

filter: hue-rotate()で色相環を一周する。全ての色を巡りながら元に戻る

カラーサイクル / レインボー演出 / モード切替 / 色変化アニメーション

色相の全域を巡る動きが「多様性」「変化」を表現し、万華鏡のような魅力

LIVE DEMO
filter: hue-rotate()
18-11Saturate Waveサチュレートウェーブ

filter: saturate()が波のように増減し、彩度がモノクロから極彩色まで変化する

感情表現 / ハイライト演出 / 雰囲気切替 / ムービーフィルター

彩度の波が「感情の高まり」を表現し、視覚的なリズムを生む

LIVE DEMO
filter: saturate()
18-12Sepia Fadeセピアフェード

filter: sepia()でセピア調に変化し、ノスタルジックなトーンを経て元に戻る

回想シーン / ヴィンテージ演出 / 時間経過表現 / フォトエフェクト

セピアが「懐かしさ」「古い記憶」を暗示し、感傷的な雰囲気を演出

LIVE DEMO
filter: sepia()
18-13Double Exposure二重露光

2つのレイヤーをscreenブレンドで重ね、フィルム写真の二重露光を再現する

アート写真 / MVエフェクト / ポートレート合成 / ドリーミーな演出

二重の像が「記憶の重なり」「夢」を暗示し、幻想的な世界観を表現

LIVE DEMO
screen + overlay
18-14Glass Morphismグラスモーフィズム

backdrop-filter: blur + saturateで半透明ガラス風カードが背景を透過ぼかしする

カードUI / ダッシュボード / モダンUI / iOS風デザイン

ガラスの透明感が「先進性」「洗練」を演出し、未来的でモダンな印象

LIVE DEMO
backdrop-filter: blur + saturate

19. Remotion固有API(Remotion-Specific APIs)

20種
19-1interpolate()インターポレート

Remotionのinterpolate()関数を再現。入力範囲を出力範囲に線形マッピングし、値を補間する

位置制御 / サイズ変化 / 不透明度遷移 / 任意のプロパティ補間

滑らかな値変化が「計算された精密さ」と「制御された美しさ」を表現

LIVE DEMO
19-2spring()スプリング

Remotionのspring()関数を再現。物理ベースのバネ減衰振動で自然なアニメーションを生成

登場演出 / バウンス / 物理的な動き / オーバーシュート効果

物理シミュレーションが「生き生きとした実在感」と「有機的な動き」を演出

LIVE DEMO
19-3useCurrentFrameフレームカウンター

RemotionのuseCurrentFrame()フックを再現。現在のフレーム番号をリアルタイムに表示する

フレーム同期 / タイミング制御 / デバッグ表示 / 進捗計算の基盤

数値の更新が「精密な時間管理」「フレーム単位の制御力」を可視化する

LIVE DEMO
Frame: 0 / 90
19-4Sequenceシーケンス

Remotionの<Sequence>コンポーネントを再現。各要素にfrom/durationDurationを指定して時間軸上に配置

タイムライン制御 / 順次登場 / シーン構成 / パートごとの独立制御

時間的な構造化が「物語性」「段階的な展開」を演出する

LIVE DEMO
A
B
C
D
19-5Seriesシリーズ

Remotionの<Series>コンポーネントを再現。各要素が前の要素の終了後に自動的に連続再生される

連続アニメーション / スライドショー / ステップバイステップ / 自動連結

途切れない連続性が「流れ」「リレー」のような一体感を表現する

LIVE DEMO
1
2
3
4
19-6Loopループ

Remotionの<Loop>コンポーネントを再現。指定区間のアニメーションを自動的に繰り返す

ローディング / 背景アニメーション / 反復モーション / 待機状態の演出

繰り返しが「継続」「安定」「リズム」を感じさせ、心地よい周期性を生む

LIVE DEMO
19-7Freezeフリーズ

Remotionの<Freeze>コンポーネントを再現。アニメーション途中の特定フレームで静止させる

一時停止演出 / ハイライト / 静止画キャプチャ風 / ドラマチックな停止

突然の静止が「衝撃」「注目」を生み、時間の停止感で緊張を演出する

LIVE DEMO
FROZEN
19-8Easing Functionsイージング関数

Remotion.Easingモジュールの各イージング関数を並列比較。linear/easeIn/easeOut/easeInOutの挙動差

イージング選定 / 動きの比較 / 学習・リファレンス / プレゼン資料

比較表示が「選択肢の理解」「最適解の発見」を促し、知的な満足感を与える

LIVE DEMO
linear
easeIn
easeOut
easeInOut
19-9measureSpringスプリング計測

RemotionのmeasureSpring()を再現。バネパラメータからアニメーション持続時間と振動波形をグラフ化

パラメータ調整 / 持続時間の事前計算 / デバッグ / アニメーション設計

波形の可視化が「科学的理解」「パラメータの直感的把握」を促進する

LIVE DEMO
stiffness: 100
damping: 10
duration: --
19-10AbsoluteFillアブソリュートフィル

Remotionの<AbsoluteFill>を再現。複数レイヤーが同じ領域を完全に覆い、重なりで合成する

レイヤー合成 / 背景+前景 / オーバーレイ / 複数要素の重ね合わせ

レイヤーの積み重ねが「深み」「複合的な表現力」を可視化する

LIVE DEMO
L1
L2
L3
19-11Transition Fadeトランジションフェード

Remotionの@remotion/transitionsのfade()を再現。コンポーネントAがフェードアウトしBがフェードイン

シーン切替 / スライドショー / ページ遷移 / コンテンツ差し替え

滑らかな溶け合いが「自然な移行」「穏やかな変化」を演出する

LIVE DEMO
Scene A
Scene B
19-12Transition Slideトランジションスライド

Remotionの@remotion/transitionsのslide()を再現。Bが横からスライドしてAを押し出す

カルーセル / ページ送り / パネル切替 / 横スクロール型遷移

方向性のある移動が「前進」「次のステップ」を暗示する

LIVE DEMO
Scene A
Scene B
19-13Transition Wipeトランジションワイプ

Remotionの@remotion/transitionsのwipe()を再現。マスクが左から右へ拭き取るようにシーンを切替

映像的切替 / ビフォーアフター / ドラマチック遷移 / プレゼン

拭い取る動作が「覆いを剥がす」「新しい面の発見」を暗示する

LIVE DEMO
Scene B
Scene A
19-14Timeline Scrubタイムラインスクラブ

Remotionのタイムラインスクラバーを再現。スライダーでフレームを自在にシーク可能

プレビュー制御 / フレーム指定 / インタラクティブ操作 / 編集UI

直接操作が「完全な制御権」「自由な探索」を体感させる

LIVE DEMO
Frame 0
19-15FPS ControlFPSコントロール

RemotionのfpsプロパティによるフレームレートをCSSのstep()で可視化。30fps vs 60fpsの滑らかさの違い

フレームレート選択 / 品質比較 / パフォーマンス調整 / 出力設定

段階的な動きと滑らかな動きの対比が「品質の違い」を直感的に理解させる

LIVE DEMO
30fps
60fps
19-16Duration Controlデュレーション

RemotionのdurationInFramesプロパティを再現。同じ動きでも持続フレーム数で速度が変わる

速度調整 / テンポ制御 / スローモーション / クイックカット

同一モーションの速度差が「緩急」「テンポ感」の重要性を体感させる

LIVE DEMO
30f
60f
120f
19-17Delay Chainディレイチェーン

Remotionのspring()のdelay引数を再現。各要素に異なるディレイを設定して連鎖的に登場させる

スタガー登場 / リスト表示 / カスケード / ウェーブ効果

時間差が「波紋」「伝播」を演出し、リズミカルで心地よい連鎖感を生む

LIVE DEMO
19-18interpolateColorsカラー補間

RemotionのinterpolateColors()を再現。フレーム進行に応じてRGBA色空間で滑らかに色を補間する

グラデーション遷移 / テーマ切替 / 時間帯表現 / ムード変化

色の連続変化が「移り変わり」「グラデーションの美しさ」を表現する

LIVE DEMO
#00d4ff#a855f7
19-19Compositionコンポジション

Remotionの<Composition>を再現。独立したタイムラインを持つネストされた構造で個別にアニメーション

コンポーネント設計 / 独立制御 / ネスト構造 / 再利用可能な単位

入れ子構造が「階層」「整理された複雑さ」を示し、構造的な美しさを表現

LIVE DEMO
Composition
Child
19-20Render Progressレンダー進捗

RemotionのrenderMedia() / onProgress を再現。フレーム単位のレンダー進捗バーをシミュレーション

レンダリング表示 / エクスポート進捗 / バッチ処理 / 完了通知

進捗バーが「確実な前進」「完了への期待」を可視化し安心感を与える

LIVE DEMO
Rendering: 0 / 150 frames (0%)
📦

20. 実用テンプレート(Practical Templates)

24種
20-1Countdown Timerカウントダウン

3→2→1→GO!のカウントダウン。数字がスケールポップで切り替わる

動画オープニング / イベント開始 / ゲームスタート

期待感と緊張感を高め、注意を集中させる

LIVE DEMO
3
20-2Subscribe Button登録ボタン

ベルアイコンからテキスト展開、色が切り替わるインタラクティブボタン

YouTube風登録 / フォローボタン / アクション促進

マイクロインタラクションが操作の手応えと達成感を付与

LIVE DEMO
🔔 登録済み
20-3Social Media BarSNSバー

4つのアイコンがスタガーで下からスライドイン

SNS共有バー / フッターリンク / プロフィール

順次登場が視線を誘導し、各アイコンへの認知を促す

LIVE DEMO
X
f
IG
YT
20-4Quote Card引用カード

枠線がドローで展開→テキストフェード→署名がスライドイン

名言表示 / テスティモニアル / レビュー引用

段階的な情報公開が読者の注意を引きつけ保持する

LIVE DEMO
“シンプルさは究極の洗練である”
— Leonardo da Vinci
20-5Progress Barプログレスバー

0→100%のバーアニメーションと数値カウントアップ

ファイルアップロード / スキル表示 / 達成度

進行の可視化が達成感と完了への期待を生む

LIVE DEMO
Progress 0%
20-6Notification Toast通知トースト

右からスライドイン→3秒滞在→右へスライドアウト

成功通知 / エラー表示 / システムメッセージ

非侵入的な通知が体験を中断せずに情報を伝える

LIVE DEMO
保存しました
20-7Loading Spinnersローディング

4種のスピナーを横並び表示(回転/ドット/パルス/バー)

データ読込中 / ページ遷移 / 処理待ち

動きのあるフィードバックが待ち時間のストレスを軽減

LIVE DEMO
20-8Pricing Cards料金カード

3カードがスタガーで起き上がり、中央カードがハイライト

料金プラン / サービス比較 / プラン選択

中央ハイライトが推奨プランへ自然に視線を誘導する

LIVE DEMO
Basic
$9
/月
Pro
$29
/月
Team
$59
/月
20-9Feature List機能リスト

チェックマーク付きリストがスタガーでスライドイン

機能紹介 / メリット訴求 / 仕様一覧

順次表示がリスト各項目への注目度を均等に高める

LIVE DEMO
  • 無制限プロジェクト
  • カスタムドメイン
  • 優先サポート
  • APIアクセス
  • チーム管理
20-10CTA SectionCTAセクション

グラデ背景上にテキスト登場→ボタンがパルスアニメーション

ランディングページ / 申込誘導 / メルマガ登録

パルスする行動喚起がクリック衝動を刺激する

LIVE DEMO
今すぐ始めよう
14日間の無料トライアル
20-11Badge Collectionバッジ集

5つのバッジがスタンプ風にポップインで登場

タグ表示 / スキルバッジ / カテゴリラベル

スタンプ動作が「認定・承認」の印象を与える

LIVE DEMO
HTML CSS React Node TS
20-12Timelineタイムライン

縦線が伸びながら3つのノードがフェードイン

沿革表示 / ロードマップ / ステップ説明

時系列の流れが「進歩」と「成長」の物語を演出

LIVE DEMO
2024.01
プロジェクト開始
2024.06
ベータリリース
2025.01
正式公開
20-13Stats Counter統計カウンター

数値が0からカウントアップし最終値に到達する統計表示。ダッシュボードやインフォグラフィックに最適

KPI表示 / 実績紹介 / ランディングページ / データ可視化

数値の動的な増加が「成長」「信頼性」「具体的な実績」を直感的に伝える

LIVE DEMO
0
プロジェクト
0
ユーザー
0
評価
20-14Tab Switcherタブ切替

タブクリックでアンダーラインがスライドし、コンテンツがフェード切替される。UIパターンの基本

コンテンツ切替 / 設定画面 / 商品詳細 / ダッシュボード

滑らかなスライドが「構造化された情報」「直感的な操作性」を演出

LIVE DEMO
概要
機能
料金
シンプルで高速なサービスです
20-15Accordionアコーディオン

クリックで項目が展開・折りたたみされるFAQ形式のUI。コンテンツの整理に最適

FAQ / ヘルプ / メニュー / 設定パネル

段階的な情報開示が「整理された構造」「ユーザー主導の探索」を促す

LIVE DEMO
どんなサービスですか?
AIを活用したクリエイティブツールです。
料金はかかりますか?
基本無料でお使いいただけます。
対応環境は?
PC・スマホの最新ブラウザに対応。
20-16Image Gallery画像ギャラリー

6つの画像タイルがグリッド配置でスタガーフェードインする。ポートフォリオ表示に最適

作品集 / 商品一覧 / フォトギャラリー / ポートフォリオ

順次出現が「豊富なコンテンツ」「発見の楽しさ」を段階的に提供

LIVE DEMO
20-17Split Screen分割スクリーン

画面が中央から左右に分割展開し、各面にテキストが出現する。比較・対比演出に最適

ビフォーアフター / 機能比較 / チーム紹介 / コンセプト提示

分割と統合が「二面性」「選択肢」「対比の明確さ」を表現

LIVE DEMO
Creative
Studio
20-18Popup Modalモーダル

オーバーレイがフェードイン→モーダルがスケールポップ→閉じボタンで消滅する一連のUI演出

確認ダイアログ / 詳細表示 / ログインフォーム / 通知

背景暗転と浮上が「注目の集中」「重要な情報」を強く印象づける

LIVE DEMO
お知らせ
モーダルが表示されました
閉じる
20-19Scroll Progressスクロール進捗

画面上部の横バーが左から右に伸長し、読了進捗を示すインジケーター

記事進捗 / ローディング / ステップ表示 / タイムライン

進捗の可視化が「達成感」「残り量の把握」「読み進める動機」を与える

LIVE DEMO
0%
20-20Particle Buttonパーティクルボタン

ボタンクリックで粒子に分解→散逸→再構築される演出。インタラクションの驚きを生む

送信ボタン / いいねボタン / 削除確認 / ゲームUI

分解と再生が「変容」「達成」「魔法のような体験」を演出

LIVE DEMO
Click Me
20-21Logo Revealロゴリビール

マスクがワイプで開き、ロゴにグロー効果が加わり定位置に定着する。ブランド演出の定番

オープニング / ブランディング / スプラッシュ / エンドロゴ

段階的な出現が「ブランドの格」「プレミアム感」「記憶への定着」を促進

LIVE DEMO
20-22End Screenエンドスクリーン

2枚のカードと登録ボタンがスライドインする動画エンド画面。YouTube風のアウトロ演出

動画エンディング / 関連コンテンツ / CTA / チャンネル誘導

終了後の導線が「次のアクション」「継続的なエンゲージメント」を自然に促す

LIVE DEMO
次の動画
おすすめ
チャンネル登録
20-23Before Afterビフォーアフター

clip-pathで左右分割し、ドラッグで比較位置を変更できるスライダー。ビジュアル比較の定番

加工前後 / デザイン比較 / リフォーム / 性能比較

操作可能な比較が「変化の実感」「自分で確かめる納得感」を提供

LIVE DEMO
Before
After
20-24Testimonial口コミ

引用文→名前→星評価の順にフェードインし、自動で次のレビューに遷移する口コミ表示

レビュー / お客様の声 / 推薦文 / ソーシャルプルーフ

段階的な出現と自動遷移が「信頼の積み重ね」「多くの支持」を演出

LIVE DEMO
「素晴らしいサービスです」
— ユーザーA
★★★★★

全カテゴリの統計

20カテゴリ・合計408種のシェイプアニメーションを収録しています。各エフェクトは以下の3つの実装方式のいずれかで構築されています。

CSS Animation@keyframes と CSS プロパティによる宣言的アニメーション。Remotion の style prop 経由で適用。シンプルなトランジションやループに最適。

JavaScript / React — Remotion の useCurrentFrame()interpolate() を組み合わせたフレーム単位の精密制御。spring() による物理ベースのイージングもここに含まれます。

Canvas / SVG<canvas> や SVG パスを使った描画ベースのアニメーション。パーティクル、ジェネラティブアート、複雑なパス操作に使用。

各カテゴリの件数は以下の通りです。

CAT カテゴリ名 件数
01シェイプの登場28
02シェイプの退場18
03シェイプ変形22
04パスドロー&ストローク24
05クリップ&マスク22
06spring()物理20
07スタガー&群体22
08グリッド&パターン24
09ジェネラティブ&ノイズ20
10ローワーサード&テロップ26
11トランジションワイプ28
12タイトルカード&フレーム22
13データビジュアライゼーション22
14アイコン&シンボル20
15背景&テクスチャ18
163D&パース18
17カラー&グラデーション16
18合成&ブレンド14
19Remotion固有API20
20実用テンプレート24
合計408

関連コンテンツ