フロントエンド & UI
Masked Reveal
スクロールで、オーバーフローマスク越しに見出しを 1 語ずつ現す。
概要
見出しをマスクした単語スパンに分割し、テキストがビューポートに入るのに合わせて時間差で上へ動かす GSAP ScrollTrigger のパターン。React のクリーンアップパターンを含む。
Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
デザインにとっての意味
- 単語単位の時間差は、文字単位のアニメーションより落ち着いて、エディトリアルに見える。
- スクリーンリーダーは、aria-label 越しに全文を受け取れる。
- reduced-motion のユーザーには、transform を当てない静止したテキストが表示される。
カバーする内容
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
インストール方法
Masked Reveal
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/masked-reveal/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
見出しに data-masked-reveal を付け、CSS のマスクルールを加える。
-
有料の SplitText プラグインを避ける、分割ヘルパーを呼び出す。
-
React では GSAP の context で包み、ルート変更時に ScrollTrigger が後片付けされるようにする。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。