Selkirk OMNI Paddle

アメリカのピックルボールブランド Selkirk Sport が、OMNI というパドルのために作ったランディングページ。ピン留めされたヒーローのパドルがビューポートを移動し、コートのシーンがクロスフェードし、技術比較や耐久性のチャートが動く、スクロール主導の製品ストーリーです。 注目すべきは「3D」の正体。ページ自身はWebGLを一切積んでおらず、canvas要素もThree.jsもありません。回転させられる3Dは、工業用CTスキャン企業 Lumafield のビューアを iframe で埋め込んだものです。ページ上のコピーにも「Lumafieldの工業用CTスキャンを見てみましょう。ドロップダウンから3Dビューを選ぶと、パドルを回転・反転させてPureFoamコアを探索できます」と書かれています。それ以外の立体的なビジュアルは Cinema 4D で事前レンダリングした静止画で、GSAPが2Dで動かしています。 【参考になるポイント】 ・3Dを「作る」のではなく「買う」判断。CTスキャン会社のビューアをiframeで埋めるだけで、自社ではWebGLを一行も書いていない ・スクロール演出は素のGSAP ScrollTrigger。gsap.matchMedia("(min-width: 980px)") でピン留めをデスクトップ限定にしている ・コートの「シーケンス」は連番レンダリングではなく、4枚のimgをz-indexとopacityでクロスフェードしているだけ ・img[loading="lazy"] の load イベントごとに ScrollTrigger.refresh() を呼んでいる。遅延読み込み画像で文書高が変わってピン留めが壊れる問題への、実践的な対処 ・※2026年8月20日時点でAwwwards Nominee（投票中）。スコアは未確定