アニメーションカタログ ギャラリー

factory 部材庫 / catalog=animation ・ 技術階層(tier)ごとに実ライブデモ＋佐藤の一言フォーム

CSS・JSライブラリ・GSAP・WebGL/three.js の4階層、全30項目。各カードは実際に動くライブデモ（読込時に自動再生 or 再生ボタン）と、検品用のパラメータ（range入力）を備える。気に入ったら「佐藤の一言」に雰囲気・合う業種を書いて保存すると、翻訳器で使用可能な部材として登録される（未記入は candidate 扱い）。

① CSS（最軽量・保守低）

トランジション/keyframesのみで完結。読込時に自動再生し、再生ボタンでリプレイできる。

② JSライブラリ（Swiper / Splide・保守中）

Swiper 11・Splide 4 によるスライド系。画像はプレースホルダの色ブロック。

③ GSAP（本丸・保守中）

ScrollTrigger／手動テキスト分割／マスク／差動／パララックス／pin+scrub／SVG描画を体系的に。

④ WebGL / three.js（保守重 ⚠）

r160・小さいcanvas。IntersectionObserverで非表示時は停止、パラメータ変更時はgeometryを適切にdispose。