
NOTHIN'
Awwwards Site of the Day + Developer Award。Webflowの上に、Netlifyから読み込む自作エンジンで流体シミュレーションを載せている。
- サイトURL
- https://www.noth.in
- クレジット
- Thomas Carré(開発)/ Pierre Patrault(デザイン)— Nothin'(Paris)
- 使用技術
- Three.js(WebGL2)GPU流体シミュレーションGSAPLenisTaxi.jsWebflowVite
ファッション・ラグジュアリー・テクノロジーの交点で活動するパリのクリエイティブスタジオ Nothin' のポートフォリオ。2026年8月10日に Awwwards Site of the Day(7.45)と Developer Award(7.24)を受賞しています。
見どころは、ヒーローの3DがモデルではなくリアルタイムのGPU流体シミュレーションであること。バンドルの中には、移流(advection)・発散(divergence)・カール(curl)・20回のヤコビ圧力反復・染料の減衰まで揃った、マルチパスのナビエ・ストークスソルバがそのまま入っています。カーソルは古典的なsplatパスで流体場に運動量を注入し(splatForce 5900、splatRadius 6e-5、dyeDissipation .988)、その結果できた流体マスクで2枚のテクスチャをクロスディゾルブします。つまりこの流体は、カーソルの下で別の画像を露出させる「ワイプ」として使われています。
【参考になるポイント】
・カスタムレイヤーがWebflowから完全に切り離されている。WebflowページはjQueryとwebflow.jsだけを配信し、インラインのブートストラップが外部ホストのESモジュールを1本注入する(開発時は localhost:3000/src/main.js、本番は nothinv1.netlify.app/main.js の752KB)。「WebflowはCMSとDOM、エンジンはViteでビルドしてNetlify」という分業は、Webflowで受賞レベルの仕事をするときの型として非常に参考になる
・_makePassMat() というヘルパーでパス別のマテリアル(advectionMat、splatMat、divergenceMat、圧力パス)を作り、read/writeのレンダーターゲットを .swap() でping-pongしている。pressureIterations:20 は実際に出荷されているコード内の定数
・Three.jsはWebGL2専用ビルド(バンドルに「WebGL 1 is not supported since r163」の文字列)。THREE.VideoTexture でBunny CDNのMP4をテクスチャとして流し込んでおり、video要素に crossorigin="anonymous" が付いているのがその前提
・ページ遷移は Taxi.js、スクロールは Lenis、アニメーションはGSAP(ScrollTrigger / Flip / Observer)。ローダーは sessionStorage の nothin:loader-played フラグで再訪時にスキップし、描画前に .loader を隠すstyleを注入する
・※.glb も .gltf も存在しない。ここでの「3D」は完全にシェーダと平面によるもので、モデルではない
