{ "id": "motion:motion-callout-lines", "slug": "motion-callout-lines", "kind": "motion", "title": { "ja": "注釈線", "en": "Model-sheet callout lines" }, "aiName": "Model-sheet callout lines", "summary": { "ja": "人物の各部から線が伸び、番号つきの拡大窓につながる", "en": "Lines run from points on a figure to numbered close-up windows" }, "number": 62, "group": "lp-section", "techniques": [ "scroll-progress", "position-sticky", "svg", "clip-path" ], "rules": [ { "ja": "線の端は要素の位置から毎回測る。固定の座標で引くと、幅が変わった画面で窓から外れる", "en": "Measure the line ends from the elements on every draw; fixed coordinates miss the windows at other widths" }, { "ja": "窓の拡大は同じ絵の切り抜きにする。別の絵を入れると、線の指す場所と窓の中身が食い違う", "en": "Each window is a crop of the same picture, so the line and the close-up always agree" }, { "ja": "動きを減らす設定では、窓と線をすべて出した状態で止める", "en": "With reduced motion on, show every window and line at once and stop" } ], "reproduction": { "prompt": { "ja": "注釈線 — Model-sheet callout lines\n\n設定画のように、人物の全身を左に置き、右に角丸の横長の窓を 4 つ縦に積む。窓は 1 つおきに 8% 右へずらし、各窓の右に「: 01」のような等幅の番号と部位の名前を添える。区画の高さは 300vh、中の箱は 100vh の sticky にする。\n窓の中身は同じ人物の絵の一部分で、SVG の `` を窓ごとの viewBox で切り抜き、`preserveAspectRatio=\"xMidYMid slice\"` で窓いっぱいに広げる。\n窓 i は --p = 0.06 + 0.18i から 0.18 の間に `clip-path: inset(0 X% 0 0)` で左から開きつつ 48px 右から寄る。その 0.08 後から、人物の上の点（絵に対する 0〜1 の座標）から窓の左端の中央まで、`pathLength=\"1\"` の線を `stroke-dashoffset` で引く。点には差し色の丸を置く。線の両端は描くたびに要素の位置から測り直す。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 線の端は要素の位置から毎回測る。固定の座標で引くと、幅が変わった画面で窓から外れる\n- 窓の拡大は同じ絵の切り抜きにする。別の絵を入れると、線の指す場所と窓の中身が食い違う\n- 動きを減らす設定では、窓と線をすべて出した状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-callout-lines/demo.html", "en": "Model-sheet callout lines — Model-sheet callout lines\n\nLike a model sheet, put the full figure on the left and stack four wide rounded windows on the right, every other one shifted 8% to the right, each with a monospaced number such as \": 01\" and the part's name beside it. Make the section 300vh tall and the box inside a 100vh sticky element.\nEach window shows part of the same figure: an SVG `` cropped by the window's own viewBox and stretched to fill it with `preserveAspectRatio=\"xMidYMid slice\"`.\nWindow i opens from the left with `clip-path: inset(0 X% 0 0)` and slides in 48px from the right while --p goes from 0.06 + 0.18i over 0.18. Starting 0.08 later, draw a `pathLength=\"1\"` line with `stroke-dashoffset` from a point on the figure (0–1 coordinates of the picture) to the middle of the window's left edge, with an accent dot at the point. Re-measure both ends from the elements on every draw.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- Measure the line ends from the elements on every draw; fixed coordinates miss the windows at other widths\n- Each window is a crop of the same picture, so the line and the close-up always agree\n- With reduced motion on, show every window and line at once and stop\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-callout-lines/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-callout-lines/demo.html", "html": "\n\n\n\n\n62 注釈線 — Model-sheet callout lines\n\n\n\n
\n
\n

62

\n

注釈線

\n

Model-sheet callout lines

\n

人物の各部から線が伸び、番号つきの拡大窓につながる

\n

SCROLL ↓

\n
\n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n
\n
\n
\n
\n
    \n
  1. \n
    \n

    : 01
    髪飾り

    \n
    2. \n
  2. \n
    \n

    : 02
    目元

    \n
    3. \n
  3. \n
    \n

    : 03
    持ち物

    \n
    4. \n
  4. \n
    \n

    : 04
    靴

    \n
    5. \n
\n \n
\n
\n
\n
\n\n
END — 62 注釈線
\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-callout-lines", "en": "https://design-vault.pages.dev/en/designs/motion-callout-lines", "json": "https://design-vault.pages.dev/ai/assets/motion-callout-lines.json", "designJson": null } }