MOTION GALLERY

動的LPの演出デモ集

LP案件で使える演出パターンを、1デモ＝1ページで蓄積したギャラリー。 案件制作時はタグから演出を探し、デモのコードを案件の src/animations/ へ移植する。カタログと運用は INDEX.md を参照。

demo-001 元ref: ref-001

scramble-text

SplitTextで日本語見出しを1文字ずつ分割し、スクロールインでランダムな順に浮かび上がらせる

text scroll splittext
demo-002 元ref: ref-001

bg-color-shift

スクロールに連動して、セクション間で背景色とテキスト色がなめらかに遷移する

scroll background scrub
demo-003 元ref: ref-002

scroll-video-scrub

スクロール進捗に応じて背景動画の再生位置をlerpで滑らかにスクラブする

video scroll scrub
demo-004 元ref: ref-002

char-fall-hero

画面下端の巨大見出しが、スクロールに応じて1文字ずつ左から右へ崩れ落ちる

text scroll splittext scrub
demo-005 元ref: ref-002

text-drum-3d

マニフェスト調のテキスト行を3D円筒状に配置し、スクロールで回転させながら読ませる

text scroll 3d scrub

BLENDER → WEB

Blender → Web 3Dパイプライン

bpyスクリプトで3Dモデルをヘッドレス自動生成し、GLBとしてWebに組み込む制作ライン。 通常の演出デモとは別枠で、このセクションに蓄積していく（タグ blender で管理。手順は PLAYBOOK.md の「3Dアセットパイプライン（Blender）」参照）。

統括ページを見る →
demo-006 元ref: -

blender-gltf-hero

Blenderで生成したローポリ3DモデルをThree.jsで読み込み、スクロールでカメラオービット・浮遊回転・トーン変化させる

3d scroll scrub webgl gltf blender
demo-007 元ref: -

blender-product-story

Apple型の商品スクロールストーリーテリング。香水ボトルをカメラ回り込み→分解図→カラバリ切替で魅せるLPサンプル

3d scroll scrub webgl gltf blender
demo-008 元ref: NASA 3D Resources

blender-cad-ingenuity

NASA公式CADの火星ヘリを85%軽量化し、ローター回転・分解図・スペック訴求で見せる機械系サンプル

3d scroll scrub webgl gltf blender