{ "id": "motion:motion-marquee", "slug": "motion-marquee", "kind": "motion", "title": { "ja": "マーキー", "en": "Marquee (scroll velocity)" }, "aiName": "Marquee (scroll velocity)", "summary": { "ja": "流れ続け、スクロールで加速", "en": "Keeps moving at all times and speeds up as the page scrolls" }, "number": 16, "group": "scroll-linked", "techniques": [ "scroll-progress" ], "rules": [ { "ja": "帯は止めない。スクロールは速さを足すだけ", "en": "The bands never stop; scrolling only adds speed" }, { "ja": "継ぎ目が見えないよう、同じ内容を 2 組並べる", "en": "Two identical copies keep the loop seamless" }, { "ja": "動きを減らす設定では、流さずに先頭の位置で止める", "en": "With reduced motion, hold the bands still at the start position" } ], "reproduction": { "prompt": { "ja": "マーキー — Marquee (scroll velocity)\n\n上下 2 本の帯（文字は見出し大、40〜72px）を 100vh の sticky 箱に置き、帯の外へ出る文字は overflow: hidden で隠す。\n上の帯は左へ、下の帯は右へ、基本速度 60px/s で止まらずに流れ続ける。\n1 フレームごとのスクロール量の 3 倍を速度に加算し、毎秒 2% まで減衰させる（スクロールを止めると 1 秒ほどで基本速度に近づく）。\n同じ文字の組を 2 つ並べ、組の幅ぶん流れたら位置を戻して、継ぎ目を見せない。\nrequestAnimationFrame と transform だけで動かし、ライブラリは使わない。\n\n外すと崩れる点:\n- 帯は止めない。スクロールは速さを足すだけ\n- 継ぎ目が見えないよう、同じ内容を 2 組並べる\n- 動きを減らす設定では、流さずに先頭の位置で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-marquee/demo.html", "en": "Marquee (scroll velocity) — Marquee (scroll velocity)\n\nPlace two bands of text, one above the other, inside a 100vh sticky box, each in an overflow-hidden frame with large heading type (40–72px). The upper band moves left and the lower band moves right, both at a base speed of 60px per second and never stopping.\nEach frame, add three times that frame's scroll distance to a speed boost; the boost decays to 2% of its value every second, so scrolling briefly speeds the bands up.\nLay out two identical copies of the items and wrap the offset by the width of one copy so the loop has no seam.\nAnimate only transform with requestAnimationFrame; no libraries.\n\nDo not drop:\n- The bands never stop; scrolling only adds speed\n- Two identical copies keep the loop seamless\n- With reduced motion, hold the bands still at the start position\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-marquee/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-marquee/demo.html", "html": "\n\n\n\n\n16 マーキー — Marquee (scroll velocity)\n\n\n\n

マーキー

Marquee (scroll velocity)

流れ続け、スクロールで加速

SCROLL ↓

\n\n

\n 見出しが入ります\n 見出しが入ります\n 見出しが入ります\n 見出しが入ります\n

スクロールすると流れが速くなります

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