本記事は original/travel-through/ のオリジナル視差デモです。3枚のPNG（スマホ背面・ガラス・手前のキャラ）を重ね、マウスで深度ごとに異なる移動量を与えます。WebGLは使わず、data-depth と requestAnimationFrame による平滑化だけです。
ライブデモ
下の枠内でマウスを動かしてください（デスクトップ向け）。
parallax_phone_scene.html — 3レイヤー・マウス視差。レイヤー構成
- 0.15 —
Mobile-phone-background.png（最奥） - 0.38 —
Glass-cover.png（mix-blend-mode: screen） - 0.70 —
Penetrating-characters.png（手前・最も大きく動く）
技術メモ
ポインタを中心基準で正規化し、cx += (mx - cx) * 0.07 でイージング。amplitude = 28 px。画像は pointer-events: none。iframe の前後に説明文を置くことで、クローラが主題（CSS視差・レイヤーUI）を把握しやすくなります。