私たちは、静けさを売らない。

動きのないLPは、ただのチラシだ。

画面はスクロールされるために存在する。

止まっている情報は、読まれる前に忘れられる

だから私たちは、すべてを動かす

見出しは落ち、背景は色を変え、映像は指先で進む。

それは装飾ではなく、体験そのものだ。

クライアントの言葉を、そのまま動作に翻訳する。

1秒の遅延も、意図のうちに設計する。

OSSだけで、賞レベルのモーションは作れる。

Vite、GSAP、Lenis。それで十分だ。

コストをかけず、速度だけを上げる。

静的サイトでも、動的な印象は作れる。

スクロールは、ユーザーが唯一自分で操作できる演出装置だ。

私たちはそれを、最後まで信じ切る

画面の奥行きは、錯覚でしかない。

それでも人は、奥行きに心を動かされる

だから錯覚を、本気で作り込む。

中心にある言葉だけが、くっきりと読める。

遠くの言葉は霞み、次の焦点を予感させる。

読み進めることは、回転させることと同じだ。

ドラムは止まらない。スクロールする限り。

これは装飾ではなく、読ませるための構造だ。

最後の一行まで、視線を手放さない。

それが、私たちのマニフェストだ。

円筒の途中で止めても、そこから読み続けられる。

この演出について

説明
マニフェスト調のテキスト行を縦の3D円筒(ドラム)状に配置する演出。各行は 「フォーカス行からの距離」に応じて translateY + translateZ (cosで円筒曲率、半径約380px)+ rotateX で配置し、中心に近い行はシャープ・全opacity、遠い行は filter: blur と低opacityでDOF風に減衰させる。ScrollTrigger の pin + scrub でフォーカス行indexを スクロール進捗にマップし、毎フレーム gsap.quickSetter で全行のtransformを更新する。
元ref
ref-002 viktoroddy モーションチュートリアル(LP/references/ref-002-viktoroddy-motion-tutorial.md)
案件への移植メモ
demos/text-drum-3d/main.ts[data-text-drum] ブロックを、案件の src/animations/<パターン名>.ts に init 関数として切り出し、 src/animations/index.ts に登録する。行数×transform更新は負荷が高いので、モバイルでは半径や行数を減らす調整を検討する。
← ギャラリートップへ戻る