Ring Gallery
Ring 1
Ring 2
Ring 3
Ring 4
Ring 5
Ring 6
Ring 7
Ring 8
Ring 9
Ring 10
Ring 11
Ring 12
Ring 13
Ring 1
Ring 2
Ring 3
Ring 4
Ring 5
Ring 6
Ring 7
Ring 8
Ring 9
Ring 10
Ring 11
Ring 12
Ring 13
Ring 1
Ring 2
Ring 3
Ring 4
Ring 5
Ring 6
Ring 7
Ring 8
Ring 9
Ring 10
Ring 11
Ring 12
Ring 13
Ring 1
Ring 2
Ring 3
Ring 4
Ring 5
Ring 6
Ring 7
Ring 8
Ring 9
Ring 10
Ring 11
Ring 12

RingGallery documentation

`RingGallery` affiche des images autour d'un anneau 3D, avec rotation continue, ouverture au montage et centre personnalisable via `children`.

Props principales

images (obligatoire) - URLs ou objets `{ src, alt, id }`.
children - contenu central superposé à l'anneau.
targetRadius, imageWidth, gap - géométrie de base.
yawDeg, pitchDeg, perspective - angle de caméra 3D.
autoRotate, rotationSpeedDegPerMs - rotation continue.
responsive*, mobileMaxImageCount - adaptation mobile.

Exemple d'utilisation

import RingGallery from "@/components/ring-gallery";

const images = [
  "https://.../1.jpg",
  "https://.../2.jpg",
  "https://.../3.jpg",
];

<RingGallery
  images={images}
  targetRadius={320}
  imageWidth={84}
  gap={-24}
  responsive
  mobileMaxImageCount={10}
>
  <h2 className="text-5xl">Ring Gallery</h2>
</RingGallery>