kirifuda inc.

東京のクリエイティブカンパニー kirifuda inc.（株式会社切札）のサイト。Three.js に GSAP のタイムラインを組み合わせ、派手さよりも動きの精度とスクロールの気持ちよさで評価されているタイプです。 実装で一番学べるのは構造のほう。DOMがまるごと二重に書かれており、nogl_ プレフィックスのクラス群（nogl_about_contents、nogl_contact_left_desc、nogl_about_contents_crews_name など）がWebGL側と並走しています。WebGLが使えない環境では壊れるのではなく、完全にスタイルの当たった非WebGL版に落ちる設計です。 【参考になるポイント】 ・nogl_ による並走DOMは、GL主体サイトのグレースフルデグラデーションの、めずらしく明示的な実例 ・vendor.js は Three.js と GSAP（29か所）の組み合わせ。生のrAFループではなく、既存のアニメーションタイムラインでGPU描画を駆動している ・WebGLRenderer が1つに対して BufferGeometry が125か所。多数のジオメトリを1シーンに集約する構成で、homunculus の多レンダラー構成と好対照 ・vendor.js と index.js をESモジュール（type="module"）で分割配信しており、重い3Dペイロードの読み込み設計がきれい ・※同名の「株式会社キリフダ」（kiri-fuda.com）とは別の会社なので混同に注意