Line Mask Wipe
行マスク・ワイプ
行単位のclip-pathが走査し、文が1行ずつ拭き出されるように現れる
FORM & FIELD
A quieter kind of presence.
Less, but better.
余白まで、美しく設計する。
DESIGN NOTESVOL. 01 — 2026
再生で動きを確認。もう一度見るときは「最初から再生」を押してください。
こんな場面に
ブランドの第一声や、セクションの短い見出しに。
使うときの判断
本文や読み上げ対象を1文字ずつ分断しない。出現の完了を待たずに読み進められる設計に。
IMPLEMENTATION
実装レシピ
行ラップ+`clip-path:inset(0 0 0 100%)→inset(0)`をstagger。blur(.5px)併用で上品(Takram実測) →A-5
- 実装難易度
- 低〜中
- 実装の目安
- CSSのみ / JS軽量
- 収録範囲
- 説明・指示書（実装例コードは未同梱）
同梱の実装例は、組み込み先で表示・操作を確認してください。
記述の近い参考サイト
調査メモの関連語から抽出しています。採用技法の確認には元の調査記録と実際のサイトを参照してください。現在の表現は調査時点と異なる場合があります。
YOUR PROMPT
調整した値を確認する
実装指示書の全文を開く
Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding. ## Technique: Line Mask Wipe (行マスク・ワイプ) What happens: 行単位のclip-pathが走査し、文が1行ずつ拭き出されるように現れる ## Implementation recipe (normative) 行ラップ+`clip-path:inset(0 0 0 100%)→inset(0)`をstagger。blur(.5px)併用で上品(Takram実測) →A-5 ## Timing values chosen by the user (normative — use these exact values) - Easing: `cubic-bezier(0.22, 1, 0.36, 1)` - Base duration: 1.10s - Intensity 1/5: Keep amplitudes minimal (2-8px movements, opacity-led, no overshoot) — the motion should be barely-there and elegant. ## Quality bar - Runs at 60fps; animate only transform/opacity/filter where possible. - Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action. - Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection. - Difficulty reference: 低〜中. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.
コピーできない環境では、指示書を選択・保存する画面が開きます。