チームのタスクを、
積み木のように。

手法

ヒーローの背景をCSSではなくThree.js（r170固定）で組んだ3Dシーンにした。ラフネス0.92のMeshStandardMaterialで木質の積み木ブロックを7個配置し、scrollYを0〜1に正規化した値でposition.lerpVectorsとquaternion.slerpQuaternionsを毎フレーム更新。バラバラに散った状態から、実物の積み木と同じ物理的な積み上げ順で組み上がるようにした。

なぜAI感が消えるのか

1. CSSのtransitionやkeyframesは時間軸で動く。ここではrequestAnimationFrameの中でwindow.scrollYを読み、displayed += (raw - displayed) * 0.09という式で毎フレーム値を追いかけさせているだけで、コードのどこにも「何秒で動く」という数値がない。動きの速さを決めているのは読者の指の速さそのもの。
2. DirectionalLightにcastShadow=trueを与え、shadow.mapSizeを1024四方に設定して積み木の下の板に影を落とさせた。フラットなSaaSテンプレはbox-shadowの多重指定で疑似的な浮遊感を作るだけで、光源の角度によって影の伸び方が変わるということが起きない。ここでは光源1灯・影の解像度固定で、輪郭が計算結果として毎回わずかに違って見える。
3. 7個のブロックはそれぞれ開始位置を乱数シード（mulberry32系のseededRandom）で個別に持ち、組み上がる区間もwindowStartを0.083刻みでずらしたstaggerを個別に設定した。全部同時に動く一括アニメーションをやめ、下の板から順に積み上がる待ち時間の差をコードで書いた。
4. カメラのorbitはCSSのtransformでは再現できない領域。sin(angle)*radius・cos(angle)*radiusでカメラ位置を計算し、進捗に応じて円弧上を動かしながらlookAtし続けている。スクロールが止まればangleの計算も止まるので、カメラも同じ場所で静止する。ループするイージングのような「待っていれば同じ動きが繰り返される」仕掛けは置いていない。
5. 積み木が組み上がるという動き自体が「チームのタスクを、積み木のように。」というコピーの再現になっている。動きを先に決めてからコピーに寄せたのではなく、コピーが指す状態変化をそのまま3Dのアニメーションターゲットにした。外して見せる装飾ではなく、プロダクトの説明として動きが機能している。

プロダクト自体に「組み立てる」「積み上げる」のようなメタファーがある領域に向く。タスク管理・拠点構築系ゲーム・家具や建材のECのように、動きそのものが機能の説明になる商材で効いてくる。