{ "id": "motion:motion-sparkle-scatter", "slug": "motion-sparkle-scatter", "kind": "motion", "title": { "ja": "装飾を散らす", "en": "Sparkle scatter" }, "aiName": "Sparkle ornaments around a title", "summary": { "ja": "見出しのまわりに星が順にまたたく", "en": "Four-point stars twinkle into place around a title one after another" }, "number": 55, "group": "text-motion", "techniques": [ "svg", "scroll-progress" ], "rules": [ { "ja": "星は見出しの外側にだけ置き、文字に重ねない", "en": "Place stars only outside the heading; never overlap the lettering" }, { "ja": "出番・大きさ・回転は進みだけで決まる。戻せば星も順に消える", "en": "Timing, size and rotation depend on progress alone, so scrolling back removes them in order" }, { "ja": "飾りは aria-hidden にし、見出しは本物の文字のまま残す", "en": "Mark ornaments aria-hidden and keep the heading as real text" }, { "ja": "動きを減らす設定では全部の星を出した状態で止める", "en": "With reduced motion show every star in place" } ], "reproduction": { "prompt": { "ja": "装飾を散らす — Sparkle ornaments around a title\n\n見出しのまわりに、四角い星（四芒星）の飾りを順に散らす動きを作ってください。星は SVG の path（M0 -10 C1 -3 3 -1 10 0 C3 1 1 3 0 10 C-1 3 -3 1 -10 0 C-3 -1 -1 -3 0 -10Z）で、見出しの箱の外側の 12 か所に、大きさ 16〜40px で置きます（色はアクセントとインクを交互に）。星 k の出番は、340vh の pin 区画の進みを 0.9 で割った値が 0.08 から 0.88 まで順に並べた値を超えたときで、そこから 0.14 のあいだに scale を 0 から easeOutBack（1 + 2.7(t−1)³ + 1.7(t−1)²）で 1 まで、不透明度を 0 から 1 まで上げます。現れるときに 90° 回り、そのあともスクロールに合わせて少しずつ回ります。星は文字に重ねません。本物の見出しは通常の文字で残し、飾りは aria-hidden にします。動きを減らす設定では全部の星を出した状態で止めます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 星は見出しの外側にだけ置き、文字に重ねない\n- 出番・大きさ・回転は進みだけで決まる。戻せば星も順に消える\n- 飾りは aria-hidden にし、見出しは本物の文字のまま残す\n- 動きを減らす設定では全部の星を出した状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-sparkle-scatter/demo.html", "en": "Sparkle scatter — Sparkle ornaments around a title\n\nScatter four-point star ornaments around a heading, one after another. Draw each star as an SVG path (M0 -10 C1 -3 3 -1 10 0 C3 1 1 3 0 10 C-1 3 -3 1 -10 0 C-3 -1 -1 -3 0 -10Z) and place twelve of them outside the heading’s box at 16–40px, alternating accent and ink colours. Star k appears when progress ÷ 0.9 in a 340vh pinned section passes a value from 0.08 up to 0.88, in order, then over the next 0.14 its scale rises from 0 to 1 with easeOutBack (1 + 2.7(t−1)³ + 1.7(t−1)²) and its opacity from 0 to 1. Each star rotates 90° as it appears and keeps turning slowly with the scroll. Never overlap the lettering. Keep the heading as real text and mark the ornaments aria-hidden. With reduced motion show every star already in place. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Place stars only outside the heading; never overlap the lettering\n- Timing, size and rotation depend on progress alone, so scrolling back removes them in order\n- Mark ornaments aria-hidden and keep the heading as real text\n- With reduced motion show every star in place\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-sparkle-scatter/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-sparkle-scatter/demo.html", "html": "\n\n\n\n\n55 装飾を散らす — Sparkle ornaments around a title\n\n\n\n
\n
\n

55

\n

装飾を散らす

\n

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