GENEROSITY 公式サイトリニューアル

株式会社 GENEROSITY の公式サイトを大幅リニューアル。KV の流体シミュレーション、GSAP を使ったセクション全体のスクロール演出、細部のテキストエフェクトまで、「動き」を軸にコーポレートサイトを作り替えた。2025 年 6 月公開、複数の Web アワードで受賞。

Overview

• ja / en のバイリンガル 設計
• KV: Three.js + GLSL で非圧縮 Navier–Stokes の流体シミュを常駐
• GSAP でスクロールリビール・ホバーエフェクト・ページ遷移を統一
• セクション単位のコンポーネント分割で、top/, kv/, works-top/, works-detail/, tech-design/, business/, news/ それぞれが独立した実装

Key Visual

KV は Three.js + GLSL で常駐する非圧縮 Navier–Stokes の流体シミュレーション。10 個の Pass を毎フレームチェーンして速度場と色場を交互に更新している。

graph LR
  Input["Pointer"] --> TouchForce["TouchForcePass"]
  TouchForce --> Advect["AdvectionPass"]
  Advect --> Boundary["BoundaryPass"]
  Boundary --> Div["DivergencePass"]
  Div --> Jac["JacobiIterationsPass"]
  Jac --> Sub["GradientSubstractionPass"]
  Sub --> Velocity["(velocity buffer)"]
  Velocity --> TouchColor["TouchColorPass"]
  TouchColor --> Composition["CompositionPass"]
  Composition --> Canvas["WebGL canvas"]

• ピンポンテクスチャで速度場と色場をそれぞれ 2 枚用意して交互書き込み
• TouchForcePass がポインタの位置と移動量を読み取り、速度場に毎フレーム渦を足す
• JacobiIterationsPass で圧力ソルバを複数イテレーション回して非圧縮性を保つ
• CompositionPass で最終的な見た目（ノイズ・ビネット・色調）を合成
• 自前の RenderTarget 管理で、タブ非アクティブ時 / 画面外時はループを止める省電力化

Frontend

• GSAP ScrollTrigger — セクションの見出し・画像・テキストのリビールを統一。Tech Design ページや Works 詳細ではタイムラインを組み合わせた連動演出
• TextHoverEffect — カーソルに追従する文字単位のディストーション。common/TextHoverEffect.vue で一箇所にまとめて使い回し
• Image Gallery の演出 — Works 詳細のサムネイルは GSAP でクロスフェード + パララックス
• コンポーネント構造 — components/kv/, components/top/, components/works-detail/, components/tech-design/ などセクション単位で分割。それぞれ独立してビルド可能な粒度
• Tailwind + SCSS — ユーティリティは Tailwind、凝ったエフェクトは SCSS モジュールで記述

Awards

リニューアル後、複数の Web アワードで受賞・選出された。

受賞まとめは 会社の公式ニュース でも告知。

Links

• 公式サイト
• LT 登壇時のスライド（Docswell）