{ "id": "motion:motion-hero-shrink", "slug": "motion-hero-shrink", "kind": "motion", "title": { "ja": "ヒーロー縮小", "en": "Hero title shrink" }, "aiName": "Hero title shrinks into header", "summary": { "ja": "大見出しが縮んでヘッダーに収まる", "en": "The large title shrinks and settles into the header" }, "number": 39, "group": "lp-section", "techniques": [ "position-sticky", "scroll-progress" ], "rules": [ { "ja": "縮む見出しは pin 区画の中に置き、区画が終わるまでの間に着地を終える", "en": "The shrinking title sits inside the pinned section and finishes landing before the section ends" }, { "ja": "拡大率は 1 から 0.18 の範囲に収め、ヘッダーの文字の大きさと一致させる", "en": "Scale stays between 1 and 0.18, and the landed size matches the header text" }, { "ja": "動きを減らす設定では見出しを動かさず、ヘッダーに収まった状態だけを表示する", "en": "With reduced motion, skip the movement and show only the landed state in the header" } ], "reproduction": { "prompt": { "ja": "ヒーロー縮小 — Hero title shrinks into header\n\nページ冒頭に画面いっぱいの大見出しを置き、スクロールに合わせてヘッダーの位置へ縮めて収める演出を作ってください。外側の区画は高さ 300vh とし、その中に position: sticky; top: 0 の 100vh の箱を置きます。区画の上端が画面の上端に来たとき p=0、区画の下端が画面の下端に来たとき p=1 として進み具合 p（0〜1）を求めます。見出しは `transform: scale(calc(1 - var(--p) * 0.82))` で 1 から 0.18 まで縮め、同時に画面中央から上端へ移動させて、p=1 でヘッダーのブランド位置（左 24px、高さ 64px のヘッダーの上下中央）に着地させます。ヘッダーは固定の別部品として上端に置き、着地したときだけブランドの文字を表示します。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 縮む見出しは pin 区画の中に置き、区画が終わるまでの間に着地を終える\n- 拡大率は 1 から 0.18 の範囲に収め、ヘッダーの文字の大きさと一致させる\n- 動きを減らす設定では見出しを動かさず、ヘッダーに収まった状態だけを表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-hero-shrink/demo.html", "en": "Hero title shrink — Hero title shrinks into header\n\nStart the page with a full-screen large title that shrinks into the header position as the user scrolls. The outer section is 300vh tall and holds a 100vh box with position: sticky; top: 0. Compute the progress p (0 to 1) as p=0 when the section's top reaches the top of the screen and p=1 when its bottom reaches the bottom. Scale the title with `transform: scale(calc(1 - var(--p) * 0.82))`, shrinking it from 1 to 0.18 while it moves from the middle of the screen to the top edge, so that at p=1 it sits at the header's brand position (24px from the left, vertically centred in the 64px-tall header). The header is a separate fixed bar at the top, and its brand text appears only once the title has landed. Implement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The shrinking title sits inside the pinned section and finishes landing before the section ends\n- Scale stays between 1 and 0.18, and the landed size matches the header text\n- With reduced motion, skip the movement and show only the landed state in the header\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-hero-shrink/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-hero-shrink/demo.html", "html": "\n\n\n\n\n39 ヒーロー縮小 — Hero title shrinks into header\n\n\n\n
\n
\n

39

\n

ヒーロー縮小

\n

Hero title shrinks into header

\n

大見出しが縮んでヘッダーに収まる

\n

SCROLL ↓

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

見出し

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、上の大見出しが縮んでヘッダーへ収まります。

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

見出し

\n

本文のダミーです。見出しが入ります。

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

Section 2

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