{ "id": "motion:motion-highlighter-sweep", "slug": "motion-highlighter-sweep", "kind": "motion", "title": { "ja": "マーカー線", "en": "Highlighter sweep" }, "aiName": "Highlighter sweep", "summary": { "ja": "文中の語にマーカーが引かれる", "en": "A marker line sweeps across key words in the text as they come into view" }, "number": 27, "group": "text-motion", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "線は一度引いたら、スクロールを戻しても消さない", "en": "Once drawn, the line stays even when the reader scrolls back" }, { "ja": "折り返す語句には box-decoration-break: clone を付け、行の途中で線を切らない", "en": "Wrapped phrases use box-decoration-break: clone so the line is never cut mid-phrase" }, { "ja": "線は文字の後ろに薄く引き、文字の色は変えずに読めるままにする", "en": "Keep the line faint and behind the text, and leave the text colour as it is" }, { "ja": "動きを減らす設定では、最初から線を引いた状態で見せる", "en": "With reduced motion, show every line already drawn" } ], "reproduction": { "prompt": { "ja": "マーカー線 — Highlighter sweep\n\n本文の中で強調したい語をで囲み、語が画面に入ったら、蛍光ペンのような線が左から右へ 0.7 秒で引かれるようにする。\n線は linear-gradient の背景で作り、色はアクセント色を 32% 混ぜた半透明、高さは語の下側 62% にとどめる。\n動かすのは background-size だけで、0% 100% から 100% 100% へ広げる（background-repeat: no-repeat、background-position: 0 0）。\n語が画面の下端から 20% 上まで入り、その 6 割が見えた時点で引き始め、同じ文に語が複数あるときは先の語から 160ms ずつ遅らせる。\n折り返す語句は box-decoration-break: clone にして行ごとに線が左端から引かれるようにし、文字の色と太さは変えない。\nCSS の transition と IntersectionObserver だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 線は一度引いたら、スクロールを戻しても消さない\n- 折り返す語句には box-decoration-break: clone を付け、行の途中で線を切らない\n- 線は文字の後ろに薄く引き、文字の色は変えずに読めるままにする\n- 動きを減らす設定では、最初から線を引いた状態で見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-highlighter-sweep/demo.html", "en": "Highlighter sweep — Highlighter sweep\n\nWrap the words to emphasise in , and when a word enters the viewport draw a highlighter line across it from left to right over 0.7 s.\nBuild the line as a linear-gradient background: the accent colour mixed at 32% with transparent, covering only the lower 62% of the word. Animate background-size alone, from 0% 100% to 100% 100%, with background-repeat: no-repeat and background-position: 0 0.\nStart when 60% of the word is visible above a line 20% up from the bottom of the viewport, and when one sentence holds several words, delay each by 160 ms after the one before.\nGive phrases that wrap box-decoration-break: clone so every line draws its own stroke from its left edge, and leave the text colour and weight untouched.\nImplement with a CSS transition and IntersectionObserver only, no libraries.\n\nDo not drop:\n- Once drawn, the line stays even when the reader scrolls back\n- Wrapped phrases use box-decoration-break: clone so the line is never cut mid-phrase\n- Keep the line faint and behind the text, and leave the text colour as it is\n- With reduced motion, show every line already drawn\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-highlighter-sweep/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-highlighter-sweep/demo.html", "html": "\n\n\n\n\n27 マーカー線 — Highlighter sweep\n\n\n\n

\n

\n

27

\n

マーカー線

\n

Highlighter sweep

\n

文中の語にマーカーが引かれる

\n

SCROLL ↓

\n

\n

\n\n

\n

\n

\n

Section 1

\n

ここには説明の文章が入ります。読んでほしい大事な語に、画面へ入った順でマーカーが引かれます。

\n

\n

\n

Section 2

\n

線は左から右へ伸びます。行をまたいで折り返す長い語句でも、線は途中で切れずに行ごとに引かれます。

\n

\n

\n

Section 3

\n

一つの文に印を付けたい語がいくつかあるときは、先に出てくる語から少しずつ遅れて引かれます。

\n

\n

\n

Section 4

\n

一度引いた線は、スクロールを戻しても消えません。読み返すときも、印はそのまま残ります。

\n

\n

\n

Section 5

\n

線の色はアクセントの一色だけを薄く混ぜて使い、文字の色は変えません。

\n

\n

\n

\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-highlighter-sweep", "en": "https://design-vault.pages.dev/en/designs/motion-highlighter-sweep", "json": "https://design-vault.pages.dev/ai/assets/motion-highlighter-sweep.json", "designJson": null } }