{ "id": "motion:motion-timeline-fill", "slug": "motion-timeline-fill", "kind": "motion", "title": { "ja": "タイムライン", "en": "Timeline progress fill" }, "aiName": "Timeline progress fill", "summary": { "ja": "縦線が伸び、各段が灯る", "en": "A vertical line grows down the page and each step lights up as it reaches it" }, "number": 35, "group": "lp-section", "techniques": [ "scroll-progress", "css-transition" ], "rules": [ { "ja": "線は --p に比例して伸び、先端より下の段は灯らない", "en": "The fill grows in proportion to --p, and steps below its leading edge stay unlit" }, { "ja": "段が灯るのは線が中央を越えた後だけで、先に灯らない", "en": "A step lights only after the line has passed its centre, never before" }, { "ja": "375px では線と段のノードを左端に寄せ、横スクロールを出さない", "en": "At 375px the track and nodes sit at the left edge with no horizontal scroll" }, { "ja": "動きを減らす設定では線を全長で、全段を灯した状態で止める", "en": "With reduced motion, the line stays at full length and every step stays lit" } ], "reproduction": { "prompt": { "ja": "タイムライン — Timeline progress fill\n\n縦のタイムラインを作る。段は 5 つで、各段は画面の高さの 40vh を占める。背景の細い線（幅 2px）の上に、同じ太さの線をアクセント色で重ね、その線を `transform: scaleY(var(--p))` で上から下へ伸ばす。--p は 0〜1 で、区画全体のスクロール量から受け取る。\n線の先端が段の中央（区画の高さの (i + 0.5) / 5 の位置）を越えたら、その段の丸いノードに `.is-on` を付けて、白い地から塗りつぶしへ 0.7 秒で色を変える。段のノードは線の左側（375px では左端）に並べ、本文は線の右側に置く。\n幅 720px 以上では線を中央に置いて段の本文を左右に交互に配し、375px では線を左端に寄せて一列にする。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 線は --p に比例して伸び、先端より下の段は灯らない\n- 段が灯るのは線が中央を越えた後だけで、先に灯らない\n- 375px では線と段のノードを左端に寄せ、横スクロールを出さない\n- 動きを減らす設定では線を全長で、全段を灯した状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-timeline-fill/demo.html", "en": "Timeline progress fill — Timeline progress fill\n\nBuild a vertical timeline of five steps, each occupying 40vh of the viewport height. A thin 2px track sits behind an accent-coloured fill of the same width, and the fill grows from top to bottom with `transform: scaleY(var(--p))`, where --p runs from 0 to 1 over the scroll progress of the whole section.\nWhen the fill's leading edge passes the centre of step i (at (i + 0.5) / 5 of the section height), add `.is-on` to that step's round node, switching it from the ground colour to the accent over 0.7 seconds.\nAbove 720px, place the line at the centre and alternate the step text left and right; at 375px, pull the line to the left edge and stack the text in one column.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The fill grows in proportion to --p, and steps below its leading edge stay unlit\n- A step lights only after the line has passed its centre, never before\n- At 375px the track and nodes sit at the left edge with no horizontal scroll\n- With reduced motion, the line stays at full length and every step stays lit\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-timeline-fill/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-timeline-fill/demo.html", "html": "\n\n\n\n\n35 タイムライン — Timeline progress fill\n\n\n\n
\n
\n

35

\n

タイムライン

\n

Timeline progress fill

\n

縦線が伸び、各段が灯る

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
    \n \n \n
  1. \n \n
    \n

    Step 01

    \n

    見出しが入ります

    \n

    本文のダミーです。線が届いた段から灯ります。

    \n
    \n
    2. \n
  2. \n \n
    \n

    Step 02

    \n

    見出しが入ります

    \n

    本文のダミーです。段が増えても同じ線を進みます。

    \n
    \n
    3. \n
  3. \n \n
    \n

    Step 03

    \n

    見出しが入ります

    \n

    本文のダミーです。中ほどの段です。

    \n
    \n
    4. \n
  4. \n \n
    \n

    Step 04

    \n

    見出しが入ります

    \n

    本文のダミーです。最後から二番目の段です。

    \n
    \n
    5. \n
  5. \n \n
    \n

    Step 05

    \n

    見出しが入ります

    \n

    本文のダミーです。最後の段に届くと、線が全長になります。

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