マウスを動かすと目線が追ってきます 👀

画像から作る
動く3Dサイト

ChatGPTで画像 → Klingでアニメ → このサイトのように動く3D体験へ。マウス追従・スクロール進入・マグネティックUIをコードで実装した見本です。

// SCROLL DIVE

スクロールで中に入っていく

スクロール量にカメラ（拡大・奥行き）を同期。Splineの「Scroll」イベントやLuma AIのフライスルーと同系統の演出です。

// TECHNIQUES

👀

瞳がカーソルを向く（Spline「Look At」相当）。要素がカーソルに吸い寄るマグネティックUIも。

🌀

スクロールで拡大・前進し、シーンの中へ入る演出。重い動画は連番JPGに変換して同期。

🎬

AI生成動画を背景に敷き、内側グラデマスクで馴染ませる（本番はKling動画を差し替え）。

⚡

WebP/WebM・遅延読み込み・prefers-reduced-motion対応。古い端末でも崩れない設計。