{ "id": "motion:motion-text-reveal", "slug": "motion-text-reveal", "kind": "motion", "title": { "ja": "テキストリビール", "en": "Text reveal" }, "aiName": "Text reveal (Split text)", "summary": { "ja": "文字が1字ずつせり上がる", "en": "Characters rise up one by one from below their line" }, "number": 4, "group": "appear", "techniques": [ "intersection-observer", "css-transition" ], "rules": [ { "ja": "一行は一つの要素にし、overflow: hidden で切る（行をまたがせない）", "en": "Each line is its own element clipped with overflow: hidden, never spanning lines" }, { "ja": "字の順は左から右、遅延は字ごとに 45ms 刻みにする", "en": "Characters rise left to right with a 45ms step per character" }, { "ja": "元の文は aria-label に残し、字の span は読み上げから外す", "en": "Keep the full sentence in aria-label and hide the character spans from assistive technology" } ], "reproduction": { "prompt": { "ja": "テキストリビール — Text reveal (Split text)\n\n見出しの文字を 1 字ずつ span に割り、各字を下（translateY(120%)）から元の位置（translateY(0)）へせり上がらせる。\n字と字の遅延は calc(var(--i) * 45ms)、各字の動きは 0.7 秒、イージングは cubic-bezier(.2, .7, .2, 1) にする。\n見出しは 1 行ずつ別の要素にし、各行を overflow: hidden の箱で切って下から出てくるように見せる。\n3 行の見出しを、画面の中央（threshold 0.5）に入ったとき一行ずつ再生する。\nCSS と IntersectionObserver と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 一行は一つの要素にし、overflow: hidden で切る（行をまたがせない）\n- 字の順は左から右、遅延は字ごとに 45ms 刻みにする\n- 元の文は aria-label に残し、字の span は読み上げから外す\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-text-reveal/demo.html", "en": "Text reveal — Text reveal (Split text)\n\nSplit each heading into one span per character, and rise each character from translateY(120%) to translateY(0).\nStagger the characters with calc(var(--i) * 45ms), with each character moving for 0.7 seconds on cubic-bezier(.2, .7, .2, 1).\nMake each line its own element clipped by overflow: hidden, so characters appear from below the line and never spill into the next one.\nPlay the three heading lines one at a time, when each reaches the middle of the screen (threshold 0.5).\nImplement with CSS, IntersectionObserver and plain JavaScript only, no library.\n\nDo not drop:\n- Each line is its own element clipped with overflow: hidden, never spanning lines\n- Characters rise left to right with a 45ms step per character\n- Keep the full sentence in aria-label and hide the character spans from assistive technology\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-text-reveal/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-text-reveal/demo.html", "html": "\n\n\n\n\n04 テキストリビール — Text reveal (Split text)\n\n\n\n

テキストリビール

Text reveal (Split text)

文字が1字ずつせり上がる

SCROLL ↓

\n\n

文字が1字ずつ

本文のダミーです。見出しは画面の中央に来たときに、字ごとに下から出てきます。

せり上がります

本文のダミーです。一度出た字は、戻っても消えません。

見出しが入ります

本文のダミーです。動きを減らす設定では、最初から全文を表示します。

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