{ "id": "motion:motion-gradient-sweep", "slug": "motion-gradient-sweep", "kind": "motion", "title": { "ja": "グラデ文字", "en": "Gradient sweep" }, "aiName": "Gradient text sweep", "summary": { "ja": "文字の中の色がスクロールで流れる", "en": "A band of colour slides through the letters as you scroll" }, "number": 53, "group": "text-motion", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "帯の位置は進みだけで決まる。background-position を CSS の --p から作る", "en": "Drive the band position from progress alone, through background-position built from --p" }, { "ja": "文字の外に色を出さない。background-clip: text と透明な塗りを必ず対にする", "en": "Never colour outside the glyphs; pair background-clip: text with a transparent fill" }, { "ja": "色は変数と color-mix() だけで作り、リテラルを書かない", "en": "Build colours only from variables and color-mix(), with no literals" }, { "ja": "動きを減らす設定では中央の位置で止める", "en": "With reduced motion rest at the centre position" } ], "reproduction": { "prompt": { "ja": "グラデ文字 — Gradient text sweep\n\n大きな見出し 3 行の、文字の中で色の帯が流れる動きを作ってください。見出しに background-clip: text と -webkit-text-fill-color: transparent を使い、背景は 100deg のグラデーション（インク色 → アクセント → 明るいアクセント → アクセント → インク色）を幅 280% で敷きます。各行を data-progress=\"through\" にして、帯の位置を background-position の横位置で動かします（1 行目と 3 行目は右へ、2 行目は左へ、進み 0 → 1 で 0% から 100%）。色は var() と color-mix() だけで作り、文字の外へは色がはみ出しません。動きを減らす設定では中央の位置で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 帯の位置は進みだけで決まる。background-position を CSS の --p から作る\n- 文字の外に色を出さない。background-clip: text と透明な塗りを必ず対にする\n- 色は変数と color-mix() だけで作り、リテラルを書かない\n- 動きを減らす設定では中央の位置で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-gradient-sweep/demo.html", "en": "Gradient sweep — Gradient text sweep\n\nMake a band of colour slide through the letters of three large headings. Use background-clip: text with -webkit-text-fill-color: transparent, and lay a 100deg gradient (ink → accent → light accent → accent → ink) at 280% width behind each heading. Mark each row data-progress=\"through\" and move the band with the horizontal background-position: rows one and three move right and row two moves left, from 0% to 100% as progress goes 0 → 1. Build the colours only from var() and color-mix(); nothing spills outside the glyphs. With reduced motion stop at the centre position. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Drive the band position from progress alone, through background-position built from --p\n- Never colour outside the glyphs; pair background-clip: text with a transparent fill\n- Build colours only from variables and color-mix(), with no literals\n- With reduced motion rest at the centre position\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-gradient-sweep/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-gradient-sweep/demo.html", "html": "\n\n\n\n\n53 グラデ文字 — Gradient text sweep\n\n\n\n

グラデ文字

Gradient text sweep

文字の中の色がスクロールで流れる

SCROLL ↓

\n\n

Section 1

見出しが入ります

本文のダミーです。スクロールすると、下の文字の中で色の帯が左右に流れます。

\n\n

グラデ文字

GRADIENT → 右へ

色が流れる

GRADIENT ← 左へ

光が走る

GRADIENT → 右へ

\n\n

Section 2

見出しが入ります

本文のダミーです。色の帯は、文字の外へはみ出しません。

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