フロントエンド & UI
Cinematic Scroll Storytelling
スクロール駆動のランディングページのための、Lenis と GSAP ScrollTrigger のレシピ。
概要
Lenis と GSAP ScrollTrigger を使った、プリローダー、マスクした分割テキストの出現、セクションの出現、スクラブ連動でピン留めしたシーン、スティッキーなカードスタック、パララックスの実働コード。
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
デザインにとっての意味
- モーショントークンが継続時間、時間差、オフセット、ぼかしを固定し、出現の一貫性を保つ。
- どの効果にも reduced-motion の分岐があり、レイアウトとコントラストを損なわない。
- ビルドの順序が、まず静的なページ、次にモーションと段階を踏み、絡まったスクロールシーンを避ける。
カバーする内容
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
インストール方法
Cinematic Scroll Storytelling
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
gsap と lenis をインストールし、Lenis を GSAP のティッカーに結線する。
-
出現、スタック、パララックスのための data 属性を、セクションに付ける。
-
スクラブ連動のピン留めシーンは最後に加え、QA チェックリストを実行する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。