{ "id": "motion:motion-image-sequence", "slug": "motion-image-sequence", "kind": "motion", "title": { "ja": "画像シーケンス", "en": "Scroll-scrubbed image sequence" }, "aiName": "Scroll-scrubbed image sequence", "summary": { "ja": "連番画像をコマ送り再生", "en": "Plays a numbered image sequence frame by frame as you scroll" }, "number": 12, "group": "scroll-linked", "techniques": [ "scroll-progress", "position-sticky", "canvas" ], "rules": [ { "ja": "コマは 48 枚固定で、スクロール位置に対応する 1 コマだけを描く", "en": "Exactly 48 frames; each scroll position draws only its own frame" }, { "ja": "色は :root の役割名だけから読み、JS に色の値を直接書かない", "en": "Colours are read by role name from :root; no colour value is written in JS" }, { "ja": "動きを減らす設定では最後のコマを 1 枚だけ描いて止める", "en": "With reduced motion, draw only the final frame and stop" } ], "reproduction": { "prompt": { "ja": "画像シーケンス — Scroll-scrubbed image sequence\n\ncanvas に 48 コマの連番画像を描き、スクロール量に応じてコマを切り替える。区画の高さは 300vh、canvas を収める箱は 100vh の sticky にする。\n--p に 47 を掛けて四捨五入し、0〜47 のコマ番号を求める。コマ n の図形は、中心の輪の上を 3 つの点が回る形とし、角度は `2π・n/48 + k・2π/3`（k は点の番号 0〜2）で決める。\n色は `getComputedStyle(document.documentElement).getPropertyValue('--accent')` などで :root の役割名から読み、描画のたびに使う。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- コマは 48 枚固定で、スクロール位置に対応する 1 コマだけを描く\n- 色は :root の役割名だけから読み、JS に色の値を直接書かない\n- 動きを減らす設定では最後のコマを 1 枚だけ描いて止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-image-sequence/demo.html", "en": "Scroll-scrubbed image sequence — Scroll-scrubbed image sequence\n\nDraw a 48-frame numbered sequence on a canvas and switch frames with the scroll amount. Make the section 300vh tall and the box holding the canvas a 100vh sticky element.\nMultiply --p by 47, round it, and use the result as the frame number 0–47. Frame n shows three dots circling a central ring, at angle `2π·n/48 + k·2π/3` (k is the dot index, 0–2).\nRead colours from the :root role names through `getComputedStyle(document.documentElement).getPropertyValue('--accent')` and similar calls on each draw.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- Exactly 48 frames; each scroll position draws only its own frame\n- Colours are read by role name from :root; no colour value is written in JS\n- With reduced motion, draw only the final frame and stop\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-image-sequence/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-image-sequence/demo.html", "html": "\n\n\n\n\n12 画像シーケンス — Scroll-scrubbed image sequence\n\n\n\n
\n
\n

12

\n

画像シーケンス

\n

Scroll-scrubbed image sequence

\n

連番画像をコマ送り再生

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、中央の図形がコマ送りで一周します。

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

01 / 48

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