Container Scroll `<mv-container-scroll>`

ガラスに映り込みのあるデバイスの画面が後ろに傾いた状態から、スクロールして表示されるにつれてまっすぐ起き上がって落ち着き、映り込みが消えていきます。同時にタイトルがせり上がって所定の位置に収まります。

仕組み

ガラスに映り込みのあるデバイスの画面が後ろに傾いた状態から、スクロールして表示されるにつれてまっすぐ起き上がって落ち着き、映り込みが消えていきます。同時にタイトルがせり上がって所定の位置に収まります。キーフレームは 1 組だけで、スクロール中はスクリプトなしでネイティブのビュータイムライン上で実行されるか、軽量な JS フォールバックでシークされます。

カテゴリー	スクロール
タイプ	Web Component（`<mv-container-scroll>`）
ステータス	安定版
Keywords	safe-rewrite, 3d, perspective, device, mockup, hero, product, view-timeline, scroll-driven

When to use

A landing page needs a product screenshot or video that flattens into view as the visitor scrolls to it
A launch section pairs a headline with an app screen and should feel like the device is being presented

Avoid when

The device frame should stay flat and static, with no scroll animation → use Device Mockup instead
The screenshot carries essential detail users must read while it is still tilted and scaled

インストール

node scripts/add.mjs container-scroll --out ./src/marvelous

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["container-scroll"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, core/element.js, core/observe.js, components/container-scroll/container-scroll.js, components/container-scroll/container-scroll.css。

使い方

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<div id="mv-cscroll-demo" class="mv-scroll-area" data-orientation="vertical" tabindex="0" aria-label="Container scroll demo, scroll to present the screen">
  <style>
    #mv-cscroll-demo { width: min(100%, 56rem); height: 460px; margin-inline: auto; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-xl); background: radial-gradient(70% 55% at 50% 75%, var(--mv-accent-subtle), transparent 70%), var(--mv-bg); }
    #mv-cscroll-demo .hint { height: 230px; display: grid; place-content: center; justify-items: center; gap: .5rem; color: var(--mv-fg-muted); font-size: .85rem; }
    #mv-cscroll-demo .hint i { width: 1.25rem; height: 2rem; border: 2px solid currentColor; border-radius: 99px; position: relative; }
    #mv-cscroll-demo .hint i::after { content: ""; position: absolute; left: 50%; top: .35rem; width: 3px; height: .45rem; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: mv-cscroll-demo-wheel 1.8s var(--mv-ease-in-out) infinite; }
    @keyframes mv-cscroll-demo-wheel { 60% { translate: 0 .5rem; opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { #mv-cscroll-demo .hint i::after { animation: none; } }
    #mv-cscroll-demo mv-container-scroll { padding: 0 1.5rem 7rem; }
    #mv-cscroll-demo .mv-container-scroll-title small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-accent-fg); font-weight: 600; }
    #mv-cscroll-demo .mv-container-scroll-title h2 { margin: .45rem 0 0; font: 700 clamp(1.6rem, 4vw, 2.6rem)/1.06 var(--mv-font-display); letter-spacing: -.035em; text-wrap: balance; }
    #mv-cscroll-demo .mv-container-scroll-title p { margin: .6rem auto 0; max-width: 30rem; color: var(--mv-fg-muted); font-size: .95rem; }
    #mv-cscroll-demo .mv-container-scroll-card { max-width: 44rem; height: 19rem; }

    #mv-cscroll-demo .board { display: grid !important; grid-template-rows: auto 1fr; background: var(--mv-bg); color: var(--mv-fg); font-size: .72rem; }
    #mv-cscroll-demo .bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--mv-border); }
    #mv-cscroll-demo .bar b { font-size: .85rem; margin-right: auto; }
    #mv-cscroll-demo .bar span { padding: .2rem .55rem; border-radius: 99px; background: var(--mv-bg-muted); color: var(--mv-fg-muted); }
    #mv-cscroll-demo .bar span:last-child { background: var(--mv-accent); color: var(--mv-fg-on-accent); }
    #mv-cscroll-demo .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: .8rem 1rem; min-height: 0; }
    #mv-cscroll-demo .col { display: grid; align-content: start; gap: .45rem; padding: .55rem; border-radius: .7rem; background: var(--mv-bg-subtle); }
    #mv-cscroll-demo .col > small { color: var(--mv-fg-muted); font-weight: 600; }
    #mv-cscroll-demo .task { display: grid; gap: .3rem; padding: .5rem .6rem; border-radius: .55rem; border: 1px solid var(--mv-border); background: var(--mv-surface); }
    #mv-cscroll-demo .task em { font-style: normal; color: var(--mv-fg-muted); }
    #mv-cscroll-demo .task u { text-decoration: none; justify-self: start; padding: .05rem .4rem; border-radius: 99px; font-size: .62rem; background: var(--mv-accent-subtle); color: var(--mv-accent-fg); }
  </style>

  <div class="hint"><i aria-hidden="true"></i>Scroll to present the screen</div>

  <mv-container-scroll>
    <div class="mv-container-scroll-title">
      <small>Roadmap</small>
      <h2>Ship the next release without the spreadsheet</h2>
      <p>Plan, assign and track every task in one shared board.</p>
    </div>
    <div class="mv-container-scroll-card">
      <div class="board" role="img" aria-label="Project board with three columns: To do, In progress and Done, each holding task cards">
        <div class="bar"><b>Release 4.2</b><span>Due Oct 14</span><span>8 of 13 done</span></div>
        <div class="cols">
          <div class="col"><small>To do</small>
            <div class="task">Localize checkout in Japanese<em>Kenji Watanabe</em><u>i18n</u></div>
            <div class="task">Audit color contrast<em>Amara Okafor</em><u>a11y</u></div>
          </div>
          <div class="col"><small>In progress</small>
            <div class="task">Faster image uploads<em>Lucas Moreau</em><u>perf</u></div>
            <div class="task">New pricing page<em>Priya Nair</em><u>web</u></div>
          </div>
          <div class="col"><small>Done</small>
            <div class="task">Apple Pay on mobile<em>Sofia Rossi</em><u>payments</u></div>
            <div class="task">Dark mode emails<em>Diego Alvarez</em><u>email</u></div>
          </div>
        </div>
      </div>
    </div>
  </mv-container-scroll>
</div>

API

Attributes

Name	タイプ	Description
`scroller`	selector \| window	Reference scroll container; setting it switches to the JS path. Default: the nearest scroll container, or the page.
`fallback`	boolean	Forces the JavaScript path (tests, browsers without view timelines).

Content structure

Name	Description
`.mv-container-scroll-title`	Title above the screen; rises and brightens while the screen straightens.
`.mv-container-scroll-card`	Device frame (solid bezel, lit edge, camera dot, glare); its child is the screen (image, video, mockup).

CSS variables

Name	Default	Description
`--mv-container-scroll-rotate`	`20deg`	Starting lean (rotateX around the bottom edge).
`--mv-container-scroll-scale`	`1.05`	Starting scale of the screen.
`--mv-container-scroll-lift`	`1.75rem`	Starting offset of the title (downward).
`--mv-container-scroll-perspective`	`900px`	Perspective depth.
`--mv-container-scroll-width`	`60rem`	Max. screen width.
`--mv-container-scroll-gap`	`var(--mv-space-8)`	Space between the title and the screen.
`--mv-container-scroll-glare`	`oklch(1 0 0 / 0.22)`	Color of the glare resting on the glass while it leans back.
`--mv-container-scroll-frame / -bezel / -radius`	`gray-800 / 0.625rem / 1.75rem`	Frame color, bezel thickness, outer radius.

Accessibility

Purely visual: give the screen alternative text (image alt or role="img" + aria-label). No scroll hijacking: the native path runs on a view timeline with no script; the fallback uses one passive listener and one frame at a time, only while the section is near its scrollport. The motion goes from the moment the section has entered its scrollport to the moment it is centered. Reduced motion (OS setting or data-motion="reduce"): the resting layout at once, flat screen and title in place. Without JS or support: the resting layout. Forced colors: a system outline replaces the frame shading, no glare.