{ "id": "motion:motion-slash-strike", "slug": "motion-slash-strike", "kind": "motion", "title": { "ja": "斜線を入れる", "en": "Diagonal slashes" }, "aiName": "Diagonal slashes through a title", "summary": { "ja": "文字の間に斜線が左から順に引かれる", "en": "Diagonal lines are drawn between the letters of a title, left to right" }, "number": 56, "group": "text-motion", "techniques": [ "svg", "scroll-progress" ], "rules": [ { "ja": "線は上から下へ、左の線から順に引く。次の線は前の線が引き終わる少し前から始めてよい", "en": "Draw each line top to bottom, left to right; the next may start just before the previous finishes" }, { "ja": "SVG の座標は見出しの実寸（px）にそろえる。引き伸ばした座標だと、線の太さと破線の長さが歪む", "en": "Match SVG coordinates to the heading’s real pixel size; stretched coordinates distort stroke width and dash length" }, { "ja": "引く前の線は visibility: hidden。長さ 0 でも丸い端の点が残る", "en": "Keep unstarted lines visibility: hidden, since a zero-length line still leaves a round-cap dot" }, { "ja": "本物の見出しは aria-label に残し、動きを減らす設定では全線を引いた状態で止める", "en": "Keep the real heading in aria-label, and rest with every line drawn under reduced motion" } ], "reproduction": { "prompt": { "ja": "斜線を入れる — Diagonal slashes through a title\n\n見出しの文字の間に、斜線を左から順に引いていく動きを作ってください。見出しは字間 0.2em の太字で、上に重ねた SVG（viewBox は見出しの実寸 px に合わせ、リサイズで取り直す）に、右上から左下へ向かう斜線を 7 本、見出しの幅いっぱいに等間隔で置きます。線は stroke を var(--accent)、幅 3px、pathLength=\"1\" で、340vh の pin 区画の進み 10% から、1 本ごとに 10% ずつ遅らせ、各線を 14% の進みで上から下へ stroke-dashoffset 1 → 0 で引きます。引き始める前の線は visibility: hidden にします。引いた線は残し、戻すと逆順に消えます。本物の見出しは aria-label に残し、動きを減らす設定では 7 本とも引いた状態で見せます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 線は上から下へ、左の線から順に引く。次の線は前の線が引き終わる少し前から始めてよい\n- SVG の座標は見出しの実寸（px）にそろえる。引き伸ばした座標だと、線の太さと破線の長さが歪む\n- 引く前の線は visibility: hidden。長さ 0 でも丸い端の点が残る\n- 本物の見出しは aria-label に残し、動きを減らす設定では全線を引いた状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-slash-strike/demo.html", "en": "Diagonal slashes — Diagonal slashes through a title\n\nDraw diagonal slashes between the letters of a heading, left to right. Set the heading in bold with 0.2em letter-spacing and overlay an SVG (its viewBox set to the heading’s real pixel size and re-read on resize) holding seven slashes that run from upper right to lower left and are spread evenly across the heading’s width. Stroke each line with var(--accent), 3px wide, with pathLength=\"1\". In a 340vh pinned section start at 10% progress, delay each line by a further 10%, and draw each over 14% progress from top to bottom with stroke-dashoffset 1 → 0. Keep unstarted lines visibility: hidden. Drawn lines stay, and scrolling back removes them in reverse order. Keep the real heading in aria-label, and with reduced motion show all seven lines drawn. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Draw each line top to bottom, left to right; the next may start just before the previous finishes\n- Match SVG coordinates to the heading’s real pixel size; stretched coordinates distort stroke width and dash length\n- Keep unstarted lines visibility: hidden, since a zero-length line still leaves a round-cap dot\n- Keep the real heading in aria-label, and rest with every line drawn under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-slash-strike/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-slash-strike/demo.html", "html": "\n\n\n\n\n56 斜線を入れる — Diagonal slashes through a title\n\n\n\n
\n
\n

56

\n

斜線を入れる

\n

Diagonal slashes through a title

\n

文字の間に斜線が左から順に引かれる

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の見出しの文字の間に斜線が左から順に引かれていきます。

\n
\n
\n\n
\n
\n

斜線を入れる\n \n

\n

DIAGONAL SLASHES

\n
\n
\n\n
\n
\n

Section 2

\n

見出しが入ります

\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-slash-strike", "en": "https://design-vault.pages.dev/en/designs/motion-slash-strike", "json": "https://design-vault.pages.dev/ai/assets/motion-slash-strike.json", "designJson": null } }