Motion Gallery — 動的LPの演出デモ集

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

demo-009 元ref: -

blender-power-tool

自作コードレスドリルのハウジングが開いて内部機構が見える2段階分解＋カラバリ。工具メーカー向け営業デモ

3d scroll scrub webgl gltf blender

demo-010 元ref: -

blender-headphones

自作ワイヤレスヘッドホンのカップが開いてドライバーが見える2段階分解＋カラバリ。ガジェットメーカー向け営業デモ

3d scroll scrub webgl gltf blender

demo-011 元ref: -

blender-tool-case

自作walnut×真鍮のツールケースのフタが開いて道具がせり上がる2段階分解＋木のカラバリ。クラフト/プロダクトブランド向け営業デモ

3d scroll scrub webgl gltf blender

demo-012 元ref: -

blender-lens-cutaway

自作の一眼カメラレンズがスクロールで輪切りになり、内部のガラス構成・絞り・フォーカス機構を断面図として露出する断面カット演出。光学/精密機器ブランド向け営業デモ

3d scroll scrub webgl gltf blender cutaway

photoreal 元ref: オメガデ・ヴィル

photoreal-watch-render

Cyclesパストレースで金属・ガラスを写真品質で描くフォトリアル静止レンダ。約40mm径の自作ドレスウォッチ。時計/宝飾/化粧品ブランド向けヒーローカット

photoreal cycles render product blender