概要
複数のアイコンが楕円の軌道上を周回し、2D版と奥行き表現付きの3D版を上下で見比べられる、技術スタックやサービス群を象徴的に見せる演出。
使用技術
・GSAP（数値トゥイーンによる角度駆動）
・Lucide（アイコン描画）
実装ポイント
・CSSアニメーションではなく、`{ angle }` オブジェクトを `duration: 20 / repeat: -1 / ease:”none”` で回し、`onUpdate` 内で三角関数から座標を算出
・`x = cos(angle) * radiusX`、`y = sin(angle) * radiusY` で楕円配置。半径はSVGの `getBoundingClientRect()` から毎フレーム再計算しレスポンシブ対応
・3D版は `depth = sin(angle)` を 0〜1に正規化した `t` で、`scale`・`opacity`・`zIndex`・`blur` を補間し奥行きと前後関係を表現
・枠線色・影・文字色は `gsap.utils.interpolate` で近/遠の2状態を補間
・アイコンの初期角度は `(i / 個数) * Math.PI * 2` で均等配置
コアスニペット
this.tl = gsap.timeline({
repeat: -1, yoyo: true, paused: true,
onUpdate: () => this.update(),
});
// ...
update() {
const fx = this.val.baseFreqX + this.val.mouseFreqX;
const fy = this.val.baseFreqY + this.val.mouseFreqY;
const s = this.val.baseScale + this.val.mouseScale;
this.turb.setAttribute("baseFrequency", `${fx} ${fy}`);
this.disp.setAttribute("scale", s);
}