この1画面の作り方
撮影も3DCGも使っていません。生成画像1枚を動画化し、コマに分解してスクロールに縛っただけです。素材原価は約40円。
01画像生成（gpt-image-2）1536×1024 / 1枚
02画像→動画（Runway Gen-4 Turbo）5秒 / $0.25
03ffmpegでコマ分解121フレーム
04AVIF圧縮（PC/SP 2セット）960KB / 244KB
05canvasスクラブ（GSAP + Lenis + WebGLシェーダ）scrub 0.5
1パスグレイン／スクロール速度連動RGBシフト／クリック波紋を1枚のフラグメントシェーダで合成。WebGLコンテキストは1枚だけ確保し、喪失時は静止画へ退避
±12デコード保持ウィンドウ。全コマ展開せず現在位置の前後だけビットマップ化し、iOS Safariのメモリ上限を回避
2段フォールバック。reduced-motion・省データ設定では静止画に自動切替