{ "id": "motion:motion-tunnel-fly", "slug": "motion-tunnel-fly", "kind": "motion", "title": { "ja": "トンネル", "en": "Tunnel" }, "aiName": "Z-axis tunnel fly-through", "summary": { "ja": "奥へ飛び込むように層が迫る", "en": "Layers rush toward you as if flying into a tunnel" }, "number": 33, "group": "media-depth", "techniques": [ "scroll-progress", "position-sticky" ], "rules": [ { "ja": "枠は中心から広がり、画面の外へ出てから消える。途中で止めるように見せない", "en": "Frames grow out from the centre and fade only after leaving the frame" }, { "ja": "奥行きは scale の差で作り、translateZ は使わない（描画が安定する）", "en": "Depth comes from scale differences; never use translateZ (it renders unstably)" }, { "ja": "動きを減らす設定では枠を重ねた状態で止め、動かさない", "en": "With reduced motion, frames stay still in their stacked arrangement" } ], "reproduction": { "prompt": { "ja": "トンネル — Z-axis tunnel fly-through\n\n同心の枠を 6 枚重ね、画面の中心から奥へ飛び込むように手前へ通り過ぎさせる。\n枠は 40vmax の正方形（画面の長い辺を基準にし、縦長の画面でも消える前に縁が画面の外へ出る）で、各枠の `scale` は 0.04 から 3.24 まで `--p` に合わせて広がり、枠ごとに 0.15 ずつ出番を遅らせる。\n枠の `opacity` は出てくるときに 0 から 1 へ、通り過ぎるときに 1 から 0 へ戻す。奥行きの見え方は枠の大きさの差だけで作り、`translateZ` は使わない。\n区画の高さは 300vh、枠を収める箱は 100vh の sticky にし、CSS と素の JavaScript だけで実装する。ライブラリは使わない。\n\n外すと崩れる点:\n- 枠は中心から広がり、画面の外へ出てから消える。途中で止めるように見せない\n- 奥行きは scale の差で作り、translateZ は使わない（描画が安定する）\n- 動きを減らす設定では枠を重ねた状態で止め、動かさない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-tunnel-fly/demo.html", "en": "Tunnel — Z-axis tunnel fly-through\n\nStack six concentric square frames and send them past the viewer, as if flying into a tunnel from the centre.\nEach frame is 40vmax square (sized on the screen's longer side, so even on a tall screen its edges clear the viewport before it fades), and its `scale` grows from 0.04 to 3.24 with `--p`, each frame starting 0.15 later than the one before.\nFade each frame in from opacity 0 to 1 as it appears and back to 0 as it passes, building depth from size differences alone without `translateZ`.\nUse a 300vh section with a 100vh sticky box for the frames, implemented with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- Frames grow out from the centre and fade only after leaving the frame\n- Depth comes from scale differences; never use translateZ (it renders unstably)\n- With reduced motion, frames stay still in their stacked arrangement\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-tunnel-fly/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-tunnel-fly/demo.html", "html": "\n\n\n\n\n33 トンネル — Z-axis tunnel fly-through\n\n\n\n
\n
\n

33

\n

トンネル

\n

Z-axis tunnel fly-through

\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

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