Container Scroll `<mv-container-scroll>`

Un écran d’appareil qui bascule en arrière avec un reflet sur sa vitre, puis se redresse, se pose et perd son reflet en entrant dans la vue au défilement, pendant que le titre monte à sa place. Un seul jeu de keyframes, joué sur une view timeline native sans aucun script pendant le défilement, ou piloté par un repli JS léger.

Catégorie	Défilement
Type	Web Component (`<mv-container-scroll>`)
Statut	stable
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

Installation

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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["container-scroll"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/element.js, core/observe.js, components/container-scroll/container-scroll.js, components/container-scroll/container-scroll.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables 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	Type	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.