bêta

Gallery 3D `<mv-gallery-3d>`

Galerie 3D en CSS avec trois mises en scène : ring (un cylindre que vous faites tourner, qui continue sur son élan et s’arrête sur un élément), dome (des vignettes qui tapissent l’intérieur d’une sphère dont vous faites le tour du regard) et circular (une bande sans fin disposée le long d’un arc, pilotée au glisser ou à la molette). Visionneuse (lightbox) intégrée facultative.

Catégorie	3D
Type	Web Component (`<mv-gallery-3d>`)
Statut	bêta
Keywords	gallery, 3d, carousel, ring, dome, sphere, circular, orbit, lightbox, drag, inertia

When to use

A portfolio or campaign needs an immersive image showcase spun as a 3D ring with inertia
A large photo collection should surround the visitor as a dome of tiles to look around
An infinite strip of images bent into an arc should scroll by drag or wheel, with an optional lightbox

Avoid when

Product views need thumbnails, zoom and fullscreen on a product page → use Product Gallery instead
Images must be scanned quickly in a set order; a flat slider is easier to follow → use Carousel instead
Dozens of large images would load at once on low-end mobile, where 3D scenes and filler copies cost memory

Installation

node scripts/add.mjs gallery-3d --out ./src/marvelous

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

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/pointer.js, components/gallery-3d/gallery-3d.js, components/gallery-3d/gallery-3d.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-g3d-demo">
  <style>
    #mv-g3d-demo { display: grid; gap: 2.5rem; width: 100%; }
    #mv-g3d-demo section { display: grid; gap: .5rem; }
    #mv-g3d-demo header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-inline: .5rem; }
    #mv-g3d-demo h3 { margin: 0; font: 700 1.25rem/1.2 var(--mv-font-sans); letter-spacing: -.02em; }
    #mv-g3d-demo header span, #mv-g3d-demo h3 small { font: 400 .85rem var(--mv-font-sans); color: var(--mv-fg-muted); }
  </style>
  <section>
    <header><h3>City guides</h3><span id="mv-g3d-demo-out" aria-live="polite">Drag, or use the arrow keys · variant="ring"</span></header>
    <mv-gallery-3d id="mv-g3d-demo-ring" variant="ring" label="City guides" autoplay lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
  <section>
    <header><h3>Photo archive <small>· variant="dome", drag in any direction</small></h3></header>
    <mv-gallery-3d variant="dome" label="Photo archive" lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
  <section>
    <header><h3>Next departures <small>· variant="circular", drag or scroll sideways</small></h3></header>
    <mv-gallery-3d variant="circular" label="Next departures" bend="3" wheel lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
</div>
<script type="module">
  const ring = document.getElementById("mv-g3d-demo-ring");
  const out = document.getElementById("mv-g3d-demo-out");
  ring.addEventListener("mv-change", (e) => {
    out.textContent = `${e.detail.index + 1} / ${ring.length} · ${e.detail.item.querySelector("figcaption").firstChild.textContent}`;
  });
</script>

API

Attributes

Name	Type	Default	Description
`variant`	ring \| dome \| circular	`ring`	Staging mode.
`label`	string		Accessible name of the region.
`autoplay`	boolean		Continuous rotation / scrolling (pauses on hover, on focus and off-screen; disabled with reduced motion).
`speed`	number	`10 (°/s) · 40 (px/s for circular)`	Autoplay speed.
`lightbox`	boolean		Opens the chosen item in a lightbox (modal `<dialog>`, blurred backdrop).
`bend`	number	`3`	circular: arc curvature (negative = inverted arc, 0 = straight).
`wheel`	boolean		circular / ring: the vertical wheel also scrolls (horizontal wheel and Shift+wheel always do).
`rows / columns`	number	`5 / 22`	dome: rows and columns of tiles (items are repeated to fill the sphere).

Properties

Name	Type	Description
`index`	number	Item facing front (setting it calls goTo).
`length`	number	Number of items.
`strings`	Partial<Record<string, string>>	Overrides for every text: roledescription ("3D gallery"), item ("{name} ({index} of {count})"), close ("Close"), preview ("Preview"). English defaults.

Methods

Name	Description
`goTo(i) / next() / prev()`	Brings an item to the front (shortest path).

Events

Name	Description
`mv-select`	Click, tap, Enter or Space on an item (detail: { index, item }).
`mv-change`	The front item changes (detail: { index, item }).

Content structure

Name	Description
`children`	Each child is an item (figure with an img or .mv-gallery-3d-media, plus an optional figcaption). Filler copies are aria-hidden.

CSS classes

Name	Description
`mv-gallery-3d-item / -media / -scene / -lightbox`	Item (data-active on the front one), image surface without `<img>`, 3D scene, lightbox.

CSS variables

Name	Default	Description
`--mv-gallery-3d-height`	`28rem · 32rem · 26rem`	Stage height per variant.
`--mv-gallery-3d-item-width`	`12rem (14rem circular)`	Item width (ring, circular; the dome computes its own tiles).
`--mv-gallery-3d-item-ratio`	`0.75`	Item width / height ratio.
`--mv-gallery-3d-gap`	`32px`	Gap between items.
`--mv-gallery-3d-perspective`	`1600px`	Ring perspective.
`--mv-gallery-3d-tilt`	`-10deg`	Ring tilt.
`--mv-gallery-3d-radius`	`var(--mv-radius-xl)`	Item corner radius.
`--mv-gallery-3d-fog`	`var(--mv-bg)`	Ring: color of the veil over the far side.
`--mv-gallery-3d-fade`	`var(--mv-bg)`	Dome vignette color.

Accessibility

Region with aria-roledescription "3D gallery"; every item is focusable (role=button unless already interactive) and named "Kyoto (2 of 10)". Arrow keys move to the neighboring item and bring it to the front, Home/End jump to the ends, Enter/Space select. Keyboard focus brings the item to the front and pauses autoplay. Filler copies (dome, endless strip) are aria-hidden and out of the tab order. The lightbox is a modal <dialog> (Escape, backdrop click, Close button). Reduced motion (OS setting or data-motion="reduce"): no autoplay and no coasting, instant settling; dragging still works. Forced colors: items outlined, the front item and focus in Highlight.