Screenshots
Overview
概要
Lottie(After Effects由来のJSONベクターアニメーション)でできることを、操作しながら確かめられるショーケースです。掲載中のアニメーションは外部CDNやライセンス素材に頼らず、すべてコードから生成したLottie JSONで構成。再生制御からモーフィング、スクロール同期、動的テーマ変更まで、Lottieの主要機能を9つのセクションで実演します。
How to use
遊び方・使い方
上から下へスクロールすると各セクションのデモが順に現れます。「再生制御」ではplay／pause／速度／方向の切替やコマ送りスクラバを操作でき、「操作反応」ではホバー・クリック・カーソル追従、送信ボタンの状態遷移を試せます。「モーフィング」では形状が無段階に変形し、「スクロール同期」ではスクロール量に連動する進捗リングを確認。「動的テーマ」ではJSON内のカラーを実行時に置換して再描画し、「リピーター」では実ファイルサイズと描画図形数のライブ表示を見られます。
Tech stack
技術スタック
lottie-web 5.13Next.js 16React 19TypeScriptTailwind CSS v4
lottie-webはlight build(SVGレンダラ)をクライアントのuseEffect内で動的importしSSRを回避。アニメーションJSONはbodymovin 5.x互換の最小スキーマ(図形／トランスフォーム／トリムパス／カラー)で出力し、Webフォントを使わずシステムフォントでCLSと帯域を抑えています。
Highlights
工夫した点
- 全アニメーションを自前スクリプトで生成し、外部CDN・ライセンス素材・ラスタ画像を一切排除して、解像度非依存・極小サイズというLottieの利点をそのまま体現
- prefers-reduced-motionの尊重と、画面外アニメをIntersectionObserverで自動停止する負荷低減を両立
- play／pause／setSpeed／playSegments／goToAndStopなどを公開する命令的コントローラをReactラッパで提供し、各デモから細かく制御
To improve
改善したい点
- アニメーションJSONがコード生成のため、デザイナーがAfter Effectsで作る本来のリッチな表現とは差がある
- スクラバやセグメント再生などの操作UIをモバイルでより扱いやすくする余地がある
What's next
今後の展望
- 生成スクリプトに新しいアニメ種別を追加し、高度なモーフィングやステート遷移の例を拡充
- After Effects由来の実Lottieとコード生成版を並べ、制作フローの違いを見せる比較デモ