{ "id": "motion:motion-english-underline", "slug": "motion-english-underline", "kind": "motion", "title": { "ja": "下に英語", "en": "English underneath" }, "aiName": "English subtitle under a title", "summary": { "ja": "線が引かれ、下に英語が字間を詰めて現れる", "en": "A rule is drawn and an English subtitle tightens in beneath the title" }, "number": 59, "group": "text-motion", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "線は scaleX で引く。幅を動かさない", "en": "Draw the rule with scaleX, never by animating width" }, { "ja": "英語は見出しより小さく薄くして、主役にしない", "en": "Keep the English smaller and quieter than the heading so it never leads" }, { "ja": "折り返さない。375px でも clamp で収める", "en": "Never wrap; fit at 375px with clamp" }, { "ja": "動きを減らす設定では線と英語が出た状態で止める", "en": "Stop with the rule and the English shown under reduced motion" } ], "reproduction": { "prompt": { "ja": "下に英語 — English subtitle under a title\n\n日本語の大きな見出しの下に、線を引き、英語の副題を現す動きを作ってください。見出しの直下に見出しと同じ幅の 3px の線を置いて、transform: scaleX(0 → 1)（左端が基点）で引きます。その下の英語はイタリックの明朝（Georgia）で、字間を 0.6em から 0.14em へ詰めながら、不透明度を 0 から 1 にします。340vh の pin 区画で、線は進み 12% から 42%、英語は 30% から 75% で、どちらも easeOut（1 − (1 − t)³）です。英語は見出しの意味を補うだけにして、見出しより小さく、薄い色（var(--muted)）にします。折り返さず、375px でも収まるよう clamp で大きさを決めます。動きを減らす設定では線を引き終え、英語が現れた状態で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 線は scaleX で引く。幅を動かさない\n- 英語は見出しより小さく薄くして、主役にしない\n- 折り返さない。375px でも clamp で収める\n- 動きを減らす設定では線と英語が出た状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-english-underline/demo.html", "en": "English underneath — English subtitle under a title\n\nUnder a large Japanese heading, draw a rule and bring in an English subtitle. Put a 3px rule of the heading’s width directly beneath it and draw it with transform: scaleX(0 → 1) from the left edge. Set the English below in italic serif (Georgia), tightening its letter-spacing from 0.6em to 0.14em while its opacity goes from 0 to 1. In a 340vh pinned section run the rule from 12% to 42% progress and the English from 30% to 75%, both with ease-out 1 − (1 − t)³. Keep the English supporting, smaller than the heading and in var(--muted). Never wrap, and size with clamp so it fits at 375px. With reduced motion stop with the rule drawn and the English shown. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Draw the rule with scaleX, never by animating width\n- Keep the English smaller and quieter than the heading so it never leads\n- Never wrap; fit at 375px with clamp\n- Stop with the rule and the English shown under reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-english-underline/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-english-underline/demo.html", "html": "\n\n\n\n\n59 下に英語 — English subtitle under a title\n\n\n\n
\n
\n

59

\n

下に英語

\n

English subtitle under 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

English language placement

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