SHOWCASE

この演出について

説明

画面下端に配置した巨大見出しを1文字ずつ <span class="char"> に分割し、ScrollTrigger の pin + scrub で左→右のstaggerに沿って各文字を translateY（落下）・ scaleY（着地の潰れ）・ opacity（フェード）させる。 scrub連動のためスクロールを戻すと完全に可逆。

元ref

ref-002 viktoroddy モーションチュートリアル（LP/references/ref-002-viktoroddy-motion-tutorial.md）

案件への移植メモ

demos/char-fall-hero/main.ts の [data-char-fall] ブロックを、案件の src/animations/<パターン名>.ts に init 関数として切り出し、 src/animations/index.ts に登録する。見出し文言・フォントサイズの clamp 値は案件のブランドに合わせて調整する。