
Goodgrowth
シカゴのクリエイティブディレクターの個人サイト。Three.js と Cinema 4D を併用し、レコード盤モチーフで作品を切り替える。
- サイトURL
- https://goodgrowth.com/
- クレジット
- Matt Stone
- 使用技術
- Three.jsCinema 4DViteサウンドポートフォリオ
シカゴ拠点のクリエイティブディレクター/デザイナー Matt Stone の個人ポートフォリオ。AT&T、Stellantis、Capital One、PayPal、Leo Burnett、Publicis といったクライアントワークを、Work / Info / Contact の3つに絞ったシンプルな構造で見せます。Columbia、Mopar FCA、ParkWhiz などの個別ページが .html の静的URLで切られているのが構造上の特徴です。
3Dは Awwwards のタグ上 Three.js と Cinema 4D の併用。ページ内のアセットには disc-back.png / disc-front.png というレコード盤の表裏と globe.png があり、回転するディスクを軸にした演出とみられます。冒頭にスパイラル状のプリローダー、作品間のトランジション、スクロール量に連動したアニメーション(「Keep scrolling ↓ 0%」という進捗表示付き)が置かれ、Best with sound on の注意書きどおりサウンドも設計に入っています。
【参考になるポイント】
・ビルドは Vite。SPAではなく /columbia.html /mopar.html のような静的ページに分かれており、作品ページ単位でURLが安定する
・スクロール進捗をパーセントで明示するUI。終わりの見えないスクロールに対して現在地を数字で返している
・Cinema 4D で作ったモーション素材と Three.js のリアルタイム描画が混ざる構成で、どこまでが動画でどこからがWebGLかは見た目では切り分けにくい
・※ディスクや地球儀の実際の描画方法(シーン構成、シェーダの有無)は未確認。バンドルの中身までは追えていない
・※Awwwards は2026年8月7日時点で Nominee、平均約7.7/10
