STILL.

ウェリントン発、カフェインを含まないノートロピック飲料 STILL. のブランドサイト。オンライン直販の前段として、RefractWeb が作った最初のサイトです。 スクロールで進む1本のブランドナラティブで、ロードとともにワードマークがインクで描かれ、そこに開いた「絞り（アパーチャー）」がスクロールで拡がって製品の部屋になり、3種類の処方がピン留めされたシーケンスで提示されます。 3Dは本物のプロダクトレンダーです。/models/can.glb（291KB、Draco圧縮）を読み込み、自前ホストのHDRI（/hdri/studio_small_03_1k.hdr、972KB）でライティングし、3枚のラベルテクスチャ（still-01-clear / 02-dawn / 03-dusk）を差し替えています。 【参考になるポイント】 ・配信されるHTMLの時点で <canvas style="display:block"> が6枚ある。全画面固定のキャンバス1枚ではなく、セクションごとに独立したR3Fキャンバスを置く構成で、スクロールテリング型の製品ページとしては珍しく示唆に富む選択 ・React Three Fiber 9.6.1（React 19世代）＋ Turbopackビルドの Next.js。dreiのEnvironmentプリセット表がバンドルに入っているが、実際に使うHDRIは1枚だけ自前ホストしている ・ライブラリを役割で分けている。Lenis は専用チャンクでスムーススクロールだけを担当し、GSAP + ScrollTrigger はアプリ側と3Dチャンクの両方に入っている（3Dチャンク内に gsap 129箇所）。スクロールのタイムラインがWebGLシーンを直接駆動している ・マテリアル設定値（ior:1.5、roughness .42/.65/1、envMapIntensity .6/.85）から、焼き込み画像ではなく MeshPhysicalMaterial ＋ 環境マップで缶を描いていることが読み取れる ・※「アパーチャー」「アイリス」といった語はバンドル内に存在しない。仕掛けの名前はスタジオ側の説明によるもので、材料（キャンバス、GLB、HDRI、ScrollTrigger）は確認済み。2026年8月9日時点でAwwwards Nominee