{ "id": "motion:motion-erase-part", "slug": "motion-erase-part", "kind": "motion", "title": { "ja": "一部を消す", "en": "Erase a part" }, "aiName": "Partially erased letters", "summary": { "ja": "文字の下半分がひと字ずつ消えていく", "en": "The lower half of each letter is wiped away, one letter after another" }, "number": 54, "group": "text-motion", "techniques": [ "clip-path", "scroll-progress" ], "rules": [ { "ja": "消すのは clip-path だけ。文字の色を地色に変えて隠さない（地色が変わると見える）", "en": "Erase with clip-path only; do not hide by recolouring to the ground, which shows when the palette changes" }, { "ja": "切り口の線は transform で動かし、top を書き換えない", "en": "Move the cut-edge line with transform, never by rewriting top" }, { "ja": "字ごとの --e は進みだけで決まる。戻せば元どおり現れる", "en": "Each letter’s --e depends on progress alone, so scrolling back restores it" }, { "ja": "本物の文は aria-label に残し、動きを減らす設定では --e を 0.7 で止める", "en": "Keep the real text in aria-label, and fix --e at 0.7 for reduced motion" } ], "reproduction": { "prompt": { "ja": "一部を消す — Partially erased letters\n\n見出しの文字が、下半分から 1 字ずつ消えていく動きを作ってください。見出しを 1 字ずつ要素に割り、各字の本体に clip-path: inset(0 0 calc(var(--e) * 0.62em) 0) を当てて、下から 0.62em（字のおよそ半分）まで消します。--e は 0 から 1 で、字 i の開始は 10% + i/n × 45% の進み、消し切るまでに 30% の進みを使います（左の字から時間差で）。消した端にはアクセント色の 2px の線を置き、transform: translateY(calc(var(--e) * -0.62em)) で切り口に沿わせます。340vh の pin 区画で、字の間隔は 0.18em あけます。本物の文は aria-label に残し、動きを減らす設定では --e を 0.7 にして止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 消すのは clip-path だけ。文字の色を地色に変えて隠さない（地色が変わると見える）\n- 切り口の線は transform で動かし、top を書き換えない\n- 字ごとの --e は進みだけで決まる。戻せば元どおり現れる\n- 本物の文は aria-label に残し、動きを減らす設定では --e を 0.7 で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-erase-part/demo.html", "en": "Erase a part — Partially erased letters\n\nMake a heading’s letters vanish one by one from the bottom up. Split the heading into one element per letter and apply clip-path: inset(0 0 calc(var(--e) * 0.62em) 0) to each glyph, erasing from the bottom up to 0.62em (about half the letter). --e runs from 0 to 1; letter i starts at 10% + i/n × 45% progress and takes 30% progress to finish, so the letters go left to right with a stagger. Mark the cut edge with a 2px accent line moved by transform: translateY(calc(var(--e) * -0.62em)) so it follows the cut. Use a 340vh pinned section and 0.18em between letters. Keep the real text in aria-label, and with reduced motion fix --e at 0.7. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Erase with clip-path only; do not hide by recolouring to the ground, which shows when the palette changes\n- Move the cut-edge line with transform, never by rewriting top\n- Each letter’s --e depends on progress alone, so scrolling back restores it\n- Keep the real text in aria-label, and fix --e at 0.7 for reduced motion\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-erase-part/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-erase-part/demo.html", "html": "\n\n\n\n\n54 一部を消す — Partially erased letters\n\n\n\n
\n
\n

54

\n

一部を消す

\n

Partially erased letters

\n

文字の下半分がひと字ずつ消えていく

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の見出しの文字が、下半分から順に消えていきます。

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

一部を消す

\n

ERASE PART OF EACH LETTER

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