{ "id": "motion:motion-linked-letters", "slug": "motion-linked-letters", "kind": "motion", "title": { "ja": "文字を繋げる", "en": "Linked letters" }, "aiName": "Connected letters", "summary": { "ja": "文字と文字のあいだを一本の線がつなぐ", "en": "A single ribbon winds through a heading and links its letters" }, "number": 60, "group": "text-motion", "techniques": [ "svg", "scroll-progress" ], "rules": [ { "ja": "線は文字の後ろに描く。文字の可読性を落とさない", "en": "Paint the ribbon behind the letters so legibility never drops" }, { "ja": "字の位置は書体が読み込まれてから測る", "en": "Measure character positions after the webfont has loaded" }, { "ja": "線は 1 本の path。字ごとに別の線にしない", "en": "Use one continuous path, not one line per letter" }, { "ja": "本物の見出しは aria-label に残し、動きを減らす設定では描き終えた状態で止める", "en": "Keep the real heading in aria-label, and rest with the ribbon drawn under reduced motion" } ], "reproduction": { "prompt": { "ja": "文字を繋げる — Connected letters\n\n見出しの文字と文字を、一本の線でつなぐ動きを作ってください。SVG（viewBox 1200 × 300）に太字の見出し（150px）を中央寄せで置き、各字の外接の中心を getExtentOfChar で拾います。字の高さの 62% と 32% を交互に通る点をつくり、前後に 90px ずつ延ばした両端を加えて、水平な接線の 3 次ベジェでなめらかにつなぎます。この線は文字の後ろに、幅 26px・var(--accent-mid) の丸い端で描き、pathLength=\"1\" を使って 340vh の pin 区画の進み 10% から 80% で、stroke-dashoffset を 1 → 0 へ easeOut（1 − (1 − t)²）で引きます。書体が読み込まれてから字の位置を測ります。本物の見出しは SVG の aria-label に残し、動きを減らす設定では線を引き終えた状態で見せます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 線は文字の後ろに描く。文字の可読性を落とさない\n- 字の位置は書体が読み込まれてから測る\n- 線は 1 本の path。字ごとに別の線にしない\n- 本物の見出しは aria-label に残し、動きを減らす設定では描き終えた状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-linked-letters/demo.html", "en": "Linked letters — Connected letters\n\nLink the letters of a heading with a single ribbon. Centre a bold 150px heading in an SVG with a 1200 × 300 viewBox and read each character’s extent with getExtentOfChar. Create points alternating between 62% and 32% of the letter height, add end points extended 90px beyond the first and last, and join them smoothly with cubic Béziers whose tangents are horizontal. Paint the ribbon behind the text, 26px wide in var(--accent-mid) with round caps and pathLength=\"1\", and draw it from 10% to 80% of a 340vh pinned section by moving stroke-dashoffset from 1 to 0 with an ease-out, 1 − (1 − t)². Measure the character positions after the webfont has loaded. Keep the real heading in the SVG’s aria-label, and with reduced motion show the ribbon already drawn. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Paint the ribbon behind the letters so legibility never drops\n- Measure character positions after the webfont has loaded\n- Use one continuous path, not one line per letter\n- Keep the real heading in aria-label, and rest with the ribbon drawn under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-linked-letters/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-linked-letters/demo.html", "html": "\n\n\n\n\n60 文字を繋げる — Connected letters\n\n\n\n

\n

\n

60

\n

文字を繋げる

\n

Connected letters

\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

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