{ "id": "motion:motion-stroke-order", "slug": "motion-stroke-order", "kind": "motion", "title": { "ja": "筆順", "en": "Stroke order" }, "aiName": "Stroke-order handwriting", "summary": { "ja": "文字が一画ずつ、筆順どおりに書かれる", "en": "A character is written one stroke at a time, in stroke order" }, "number": 45, "group": "text-motion", "techniques": [ "svg", "scroll-progress" ], "rules": [ { "ja": "各画の path は筆の入りの点から書き始める。逆の端から描くと、筆順の向きが壊れる", "en": "Start each path at the point where the brush lands; drawing from the other end reverses the stroke direction" }, { "ja": "画の順は筆順そのもの。1 画の描き終わりを待ってから次の画に移る", "en": "The order of strokes is the stroke order; finish one stroke before the next begins" }, { "ja": "長さ 0 の線も丸い端の点が残るので、書き始める前の画は visibility: hidden にする", "en": "A zero-length line still leaves a round-cap dot, so keep unwritten strokes visibility: hidden" }, { "ja": "動きを減らす設定では、全画を書き終えた状態で止める", "en": "With reduced motion, stop with every stroke already written" } ], "reproduction": { "prompt": { "ja": "筆順 — Stroke-order handwriting\n\n「日」（4 画）と「本」（5 画）の 2 文字を、スクロールに合わせて 1 画ずつ筆順どおりに書いてください。各画は SVG の path（stroke-linecap: round、stroke-width 7）で、pathLength=\"1\" を付け、stroke-dasharray: 1 のまま stroke-dashoffset を 1 から 0 へ動かして描きます。420vh の pin 区画の進み 8% から 86% を使い、画ごとの実際の長さに比例して進みを配ります（長い画ほど長く書く）。いま書いている画の先端にはアクセント色の点を置き、下に「筆順 05 / 09」と画数を出します。各文字には薄い手本の線と点線の十字（米字格の半分）を敷き、JavaScript が動かない、または動きを減らす設定では 9 画を書き終えた状態で見せます。CSS と JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 各画の path は筆の入りの点から書き始める。逆の端から描くと、筆順の向きが壊れる\n- 画の順は筆順そのもの。1 画の描き終わりを待ってから次の画に移る\n- 長さ 0 の線も丸い端の点が残るので、書き始める前の画は visibility: hidden にする\n- 動きを減らす設定では、全画を書き終えた状態で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-stroke-order/demo.html", "en": "Stroke order — Stroke-order handwriting\n\nWrite the two characters 日 (4 strokes) and 本 (5 strokes) one stroke at a time, in correct stroke order, as the page scrolls. Draw each stroke as an SVG path (stroke-linecap: round, stroke-width 7) with pathLength=\"1\", keeping stroke-dasharray: 1 and moving stroke-dashoffset from 1 to 0. Use 8% to 86% of the progress through a 420vh pinned section, and give each stroke a share of it proportional to its real length so longer strokes take longer. Put an accent-coloured dot at the tip of the stroke being written, and show the stroke count below as \"筆順 05 / 09\". Lay a faint guide of the strokes and a dotted cross under each character, and with JavaScript off or reduced motion show all nine strokes already written. Implement it with CSS and JavaScript only, without any library.\n\nDo not drop:\n- Start each path at the point where the brush lands; drawing from the other end reverses the stroke direction\n- The order of strokes is the stroke order; finish one stroke before the next begins\n- A zero-length line still leaves a round-cap dot, so keep unwritten strokes visibility: hidden\n- With reduced motion, stop with every stroke already written\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-stroke-order/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-stroke-order/demo.html", "html": "\n\n\n\n\n45 筆順 — Stroke-order handwriting\n\n\n\n
\n
\n

45

\n

筆順

\n

Stroke-order handwriting

\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 \n \n \n \n \n \n \n \n \n \n \n \n \n

筆順 09 / 09

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