{ "id": "motion:motion-stretch-stroke", "slug": "motion-stretch-stroke", "kind": "motion", "title": { "ja": "一部を伸ばす", "en": "Stretch a stroke" }, "aiName": "Stretch one stroke of a title", "summary": { "ja": "見出しの一画だけが長く伸びる", "en": "One stroke of a title stretches far out to the side" }, "number": 52, "group": "text-motion", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "棒は幅を動かさず scaleX だけで伸ばす。文字の位置を動かさない", "en": "Stretch with scaleX only, never width, so the remaining text does not shift" }, { "ja": "伸ばす基点は棒の右端。左へ伸びて、残りの文字には触れない", "en": "Anchor the stretch at the bar’s right end so it grows left without touching the text" }, { "ja": "届く倍率は画面幅から測り、リサイズで測り直す。375px でも画面外へはみ出さない", "en": "Measure the target scale from the viewport and re-measure on resize; it must not overflow at 375px" }, { "ja": "舞台は overflow: clip にして、横スクロールを出さない", "en": "Clip the stage with overflow: clip to avoid a horizontal scrollbar" } ], "reproduction": { "prompt": { "ja": "一部を伸ばす — Stretch one stroke of a title\n\n見出し「一部を伸ばす」のうち、「一」の画だけを長く伸ばす動きを作ってください。「一」は文字ではなく、高さ 0.09em・幅 1em のアクセント色の棒として作り、右端を残りの文字（「部を伸ばす」）の左に付けたまま、transform-origin: right center の scaleX で左へ伸ばします。320vh の pin 区画の進み 10% から 80% で、倍率を 1 から「棒の右端が画面の左端に届く倍率」まで 線形（緩急なし）に動かします（届く倍率は棒の右端の位置 ÷ 1em で測り、リサイズで測り直す）。幅は動かさず scaleX だけを使うので、文字の位置は動きません。下に小さく「STRETCH ONE STROKE」と添えます。本物の文は aria-label に残し、動きを減らす設定では 6 倍に伸ばした状態で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 棒は幅を動かさず scaleX だけで伸ばす。文字の位置を動かさない\n- 伸ばす基点は棒の右端。左へ伸びて、残りの文字には触れない\n- 届く倍率は画面幅から測り、リサイズで測り直す。375px でも画面外へはみ出さない\n- 舞台は overflow: clip にして、横スクロールを出さない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-stretch-stroke/demo.html", "en": "Stretch a stroke — Stretch one stroke of a title\n\nIn the heading \"一部を伸ばす\", stretch only the 一 stroke far out to the side. Build the 一 not as a glyph but as an accent-coloured bar 0.09em tall and 1em wide, keep its right end fixed against the remaining characters, and stretch it leftward with scaleX using transform-origin: right center. In a 320vh pinned section, from 10% to 80% progress, move the scale linearly from 1 to the factor at which the bar’s right end reaches the left edge of the viewport, measured as the bar’s right position ÷ 1em and re-measured on resize. Use only scaleX, never width, so the remaining text does not move. Add a small \"STRETCH ONE STROKE\" caption below. Keep the real text in aria-label, and with reduced motion stop at a stretch of 6×. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Stretch with scaleX only, never width, so the remaining text does not shift\n- Anchor the stretch at the bar’s right end so it grows left without touching the text\n- Measure the target scale from the viewport and re-measure on resize; it must not overflow at 375px\n- Clip the stage with overflow: clip to avoid a horizontal scrollbar\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-stretch-stroke/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-stretch-stroke/demo.html", "html": "\n\n\n\n\n52 一部を伸ばす — Stretch one stroke of a title\n\n\n\n
\n
\n

52

\n

一部を伸ばす

\n

Stretch one stroke of a title

\n

見出しの一画だけが長く伸びる

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の見出しの「一」の画だけが左へ長く伸びていきます。

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

部を伸ばす

\n

STRETCH ONE STROKE

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