{ "id": "motion:motion-text-on-path", "slug": "motion-text-on-path", "kind": "motion", "title": { "ja": "曲線に沿う文字", "en": "Text on a path" }, "aiName": "Text on a path", "summary": { "ja": "文字が曲線に沿って流れていく", "en": "A sentence flows along a curved path as you scroll" }, "number": 49, "group": "text-motion", "techniques": [ "svg", "scroll-progress" ], "rules": [ { "ja": "startOffset は進みだけで決める。文の頭が終点に来た状態が p = 0", "en": "Drive startOffset from progress only; p = 0 is the sentence head at the path end" }, { "ja": "文の長さは書体が読み込まれてから測る。先に測るとずれる", "en": "Measure the text length after the webfont loads, or the exit point drifts" }, { "ja": "道は画面の両端をはみ出させ、文が途中で切れて見えないようにする", "en": "Run the path past both screen edges so the sentence is never visibly cut mid-curve" }, { "ja": "本物の文は aria-label に残し、動きを減らす設定では全体が道に乗った位置で止める", "en": "Keep the real text in aria-label, and rest with the whole sentence on the path under reduced motion" } ], "reproduction": { "prompt": { "ja": "曲線に沿う文字 — Text on a path\n\n曲がりくねった道に沿って、一文が流れていく動きを作ってください。SVG（viewBox 1200 × 560）に、画面の左右をはみ出す S 字の path を点線で引き、その上に textPath で太字の一文（64px）を乗せます。360vh の pin 区画の進み p に合わせて startOffset を「道の全長 − p × (道の全長 + 文の長さ)」にし、文の頭が道の終点に現れてから、文の最後が始点を抜けるまで流します。文中の一語だけアクセント色にします。文の長さは書体で変わるので、書体が読み込まれてから getComputedTextLength で測ります。本物の文は SVG の aria-label に残し、動きを減らす設定では文全体が道に乗った位置で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- startOffset は進みだけで決める。文の頭が終点に来た状態が p = 0\n- 文の長さは書体が読み込まれてから測る。先に測るとずれる\n- 道は画面の両端をはみ出させ、文が途中で切れて見えないようにする\n- 本物の文は aria-label に残し、動きを減らす設定では全体が道に乗った位置で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-text-on-path/demo.html", "en": "Text on a path — Text on a path\n\nMake a sentence flow along a winding path as the page scrolls. In an SVG with a 1200 × 560 viewBox, draw a dotted S-shaped path that runs past both side edges, and set one bold sentence (64px) on it with textPath. In a 360vh pinned section set startOffset to \"path length − p × (path length + text length)\" so the head of the sentence enters at the path’s end and the tail leaves at its start. Colour one word of the sentence with the accent. The text length depends on the font, so measure it with getComputedTextLength after the font has loaded. Keep the real sentence in the SVG’s aria-label, and with reduced motion stop with the whole sentence resting on the path. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Drive startOffset from progress only; p = 0 is the sentence head at the path end\n- Measure the text length after the webfont loads, or the exit point drifts\n- Run the path past both screen edges so the sentence is never visibly cut mid-curve\n- Keep the real text in aria-label, and rest with the whole sentence on the path under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-text-on-path/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-text-on-path/demo.html", "html": "\n\n\n\n\n49 曲線に沿う文字 — Text on a path\n\n\n\n
\n
\n

49

\n

曲線に沿う文字

\n

Text on a path

\n

文字が曲線に沿って流れていく

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の文が曲がった道に沿って流れていきます。

\n
\n
\n\n
\n
\n \n \n 言葉は曲がりくねった道をたどって、遠くへ届く。\n \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-text-on-path", "en": "https://design-vault.pages.dev/en/designs/motion-text-on-path", "json": "https://design-vault.pages.dev/ai/assets/motion-text-on-path.json", "designJson": null } }