{ "id": "motion:motion-velocity-skew", "slug": "motion-velocity-skew", "kind": "motion", "title": { "ja": "ベロシティスキュー", "en": "Velocity skew" }, "aiName": "Scroll-velocity skew", "summary": { "ja": "速くスクロールすると傾く", "en": "Headings tilt when you scroll fast and level out when you stop" }, "number": 40, "group": "ambient", "techniques": [ "scroll-velocity" ], "rules": [ { "ja": "傾きは ±6 度で頭打ちにし、どれほど速くても崩れない", "en": "The tilt is capped at ±6 degrees, however fast the scroll" }, { "ja": "止まったら傾きは減衰して 0 に戻り、静止時に傾いたまま残らない", "en": "When scrolling stops the tilt decays back to 0 and never stays tilted at rest" }, { "ja": "動きを減らす設定では傾けず、計測の処理も始めない", "en": "With reduced motion, nothing tilts and no measuring loop starts" } ], "reproduction": { "prompt": { "ja": "ベロシティスキュー — Scroll-velocity skew\n\n見出しの群を、スクロール速度に応じて斜めに傾ける。requestAnimationFrame で 1 フレームあたりのスクロール量を測り、速度 v に 0.02 を掛けて `skewY(clamp(-6deg, v * 0.02, 6deg))` の値にする。v は 60Hz の 1 フレームを基準に正規化し、画面の更新頻度が違っても傾きが変わらないようにする。\nスクロールが止まると v を 1 フレームごとに 0.9 倍へ減衰させ、傾きは数分の 1 秒で 0 に戻る。傾けるのは見出しと本文を含む 5 つの区画で、各区画は 80vh の高さを持つ。\nCSS 変数 `--skew` を経由して `transform` だけを書き換え、ライブラリは使わない。\n\n外すと崩れる点:\n- 傾きは ±6 度で頭打ちにし、どれほど速くても崩れない\n- 止まったら傾きは減衰して 0 に戻り、静止時に傾いたまま残らない\n- 動きを減らす設定では傾けず、計測の処理も始めない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-velocity-skew/demo.html", "en": "Velocity skew — Scroll-velocity skew\n\nTilt groups of headings according to scroll speed. Measure the scroll amount per animation frame with requestAnimationFrame, multiply the velocity v by 0.02 and apply `skewY(clamp(-6deg, v * 0.02, 6deg))`. Normalise v to a 60 Hz frame so that the tilt does not change with screen refresh rate.\nWhen scrolling stops, multiply v by 0.9 each frame so the tilt returns to 0 within a fraction of a second. Tilt five sections, each 80vh tall, containing headings and body text.\nWrite only `transform`, through a CSS variable `--skew`; do not use a library.\n\nDo not drop:\n- The tilt is capped at ±6 degrees, however fast the scroll\n- When scrolling stops the tilt decays back to 0 and never stays tilted at rest\n- With reduced motion, nothing tilts and no measuring loop starts\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-velocity-skew/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-velocity-skew/demo.html", "html": "\n\n\n\n\n40 ベロシティスキュー — Scroll-velocity skew\n\n\n\n
\n
\n

40

\n

ベロシティスキュー

\n

Scroll-velocity skew

\n

速くスクロールすると傾く

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。速くスクロールすると、見出しの群が傾きます。

\n
\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。止めると、傾きは減衰して 0 に戻ります。

\n
\n
\n
\n
\n

Section 3

\n

見出しが入ります

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

Section 4

\n

見出しが入ります

\n

本文のダミーです。動きを減らす設定では、傾かずに静止したままです。

\n
\n
\n
\n
\n

Section 5

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