
Austin Werner
GSAPもLenisも使わず、framer-motion のスクロール値だけで React Three Fiber のシーンを動かしている採用エージェンシーのサイト。
- サイトURL
- https://austinwerner.io/
- クレジット
- YOLK STUDIO
- 使用技術
- Three.jsReact Three Fiberdreiframer-motionNext.jsBlender
2017年創業のイギリスのIT系人材紹介会社 Austin Werner のサイト。求職者と企業でモードが切り替わり、求人一覧、保存件数、コンサルタント紹介、キャリア診断ウィザードまで載った実務的なコーポレートサイトです。
冒頭は事前レンダリングのイントロ動画から始まり、そこからリアルタイムの React Three Fiber シーンに引き継がれます。3Dの中身はBlenderで作られた小さなプロップ群(fit_coin.gltf、blue_ball_with_base.gltf、orange_ball_with_base.gltf、lamels_2D.gltf)で、スクロールに合わせて動きます。
【参考になるポイント】
・Awwwardsの3Dサイトとしては珍しく、GSAPもLenisも一切入っていない。スクロールはネイティブのままで、2Dも3Dも全部 framer-motion の useScroll / scrollYProgress で駆動している。R3Fコンポーネントに scrollYProgress をpropsとして渡す構成
・モデルはdreiの useGLTF + モジュールスコープでの useGLTF.preload、コンポーネント側は nodes と materials を分割代入する gltfjsx の標準形。DRACOLoader はgstaticのデコーダ1.5.5を参照している
・Three.jsは初期ロードから完全にコード分割されている。最初に読まれるチャンクにthree.jsは含まれず、webpackのチャンクIDマップをたどらないと出てこない
・「シネマティックな冒頭は動画、インタラクティブなプロップはWebGL」というハイブリッド。全部をリアルタイムでやらないという判断
・※Awwwards は2026年8月18日時点でNominee(コミュニティ投票中、平均8.06前後)
