Gallery
A dynamic visual showcase featuring six interactive variants: a revolving 3D circular photo orbit ring, an interactive 3D video sphere gallery, a GSAP Flip self-rearranging moving bento grid, an interactive circular reel dial spinner, a 3D layered pill carousel, and a Framer-inspired 3D curved arc carousel gallery.
Orbit Gallery
Revolving 3D circular photo orbit ring with upright cards and smooth hover pause.
variant"orbit-gallery"- is the revolving 3D circular photo orbit ring layout (default).
images- are the cards on the ring, in orbit order. Any count works — each is offset by a share of
duration, so they stay evenly spaced. duration36- is the seconds for one full revolution.
color- is the accent — a preset (indigo, rose, emerald, zinc) or any CSS colour — and is nudged for contrast on light and dark surfaces. Left unset it follows your theme.
Moving Bento
Self-rearranging image bento grid with a dominant center hero slot. Peripheral items rotate into focus via GSAP Flip animations. Hovering holds the items still; clicking any peripheral item instantly brings it to the hero slot.
variant"moving-bento"- switches from the circular orbit to the GSAP Flip moving bento grid layout.
swapInterval3000- is the milliseconds between automatic position swaps.
gap12- is the spacing in pixels between bento items.
items- is an array of cards ({ id, title, description, image }) to populate the grid.
Circular Reel
Interactive, scroll-driven circular spinner. Each item lives on a segmented ring that responds to scroll or idles with smooth passive rotation. Features an active full-bleed background preview and center HUD.
variant"circular-reel"- switches to the Framer-inspired interactive scroll-driven circular dial spinner.
idleRotationSpeed5- is the degrees per second of passive idle rotation.
scrollSensitivity0.06- is the multiplier for mouse wheel and touch scroll interactions.
ringThickness37- is the percentage thickness of the segmented ring (10 to 60).
reelItems- is an array of items ({ id, name, category, description, image }) to populate the reel.
3D Pill Carousel
Layered diagonal image carousel with sculptural pill-shaped cards, smooth 3D depth transitions, click-to-focus, keyboard navigation, hover brightness/scale, and a floating theme-accent tooltip CTA above the active card.
variant"pill-carousel"- switches to the Framer-inspired 3D layered pill carousel.
autoSlidetrue- enables automatic sliding while also supporting click-to-focus. Pass
false(autoSlide={false}) to disable automatic sliding so cards change only when clicked. cardBorderRadius200- is the border radius in pixels for the pill-shaped cards.
activeBorderWidth6- is the border width in pixels around the centered active pill card (coloured with your theme/accent colour).
autoPlayInterval3000- is the interval in milliseconds between automatic slide advances when
autoSlideistrue. pillItems- is an array of items ({ id, image, tooltipText, link }) to populate the 3D pill carousel.
Arc Carousel Gallery
Curved 3D image carousel arranged along an interactive concave cylindrical arc. Cards flow seamlessly, drift with passive rotation, and spin with momentum physics on drag.
variant"arc-carousel"- switches to the Framer-inspired 3D curved arc carousel gallery.
curve-200- controls the arc curvature from -300 to 300: negative for concave (wrapping away like inside a cylinder, default -200), 0 for flat, and positive for convex (curling toward you).
cardSize220- is the width in pixels for each card on the arc.
perspective1200- is the 3D perspective depth in pixels.
autoScrollSpeed0.22- is the auto-drift speed in cards per second.
autoSlidetrue- enables continuous auto-scroll. Set to
falseto disable auto-scrolling and rely on drag-and-spin navigation. dragSpeed1.2- is the pointer drag multiplier for spinning with momentum.
inertia0.75- is the momentum inertia coefficient (0 to 1) for smooth gliding after release.
arcItems- is an array of items ({ id, image, title, subtitle, link }) to populate the arc carousel.
Video Sphere Gallery
Immersive 3D rotating spherical video showcase. Videos and media drift along a Fibonacci sphere with organic drag navigation, auto-drift rotation, depth-based scaling, dynamic blur and grayscale effects, and popup preview modal.
variant"video-sphere"- switches to the Framer-inspired interactive 3D video sphere showcase.
sphereItems- is an array of items ({ id, type, src, poster, title, description, link }) where type can be 'image' or 'video' to populate the sphere.
radius280- is the radius in pixels of the 3D sphere.
itemCount35- is the total number of cards distributed across the sphere surface.
autoRotateSpeed0.0015- controls the passive idle rotation drift speed.
blurStrength12- is the maximum blur in pixels applied to distant cards on the far side of the sphere.
enablePopuptrue- opens an animated video modal when a card is clicked.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Gallery
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs this for you. Run it yourself only if you are adding Gallery to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
gsap is an npm package.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "orbit" | "moving-bento" | "circular-reel" | "pill-carousel" | "arc-carousel" | "video-sphere" | "orbit" | Selects the revolving 3D circular photo orbit ring, 3D video sphere gallery, GSAP Flip moving bento, circular reel dial spinner, 3D pill carousel, or 3D curved arc carousel gallery. |
images | string[] | 15 landscapes | The cards on the ring for the "orbit" variant. |
duration | number | 36 | Seconds per revolution on the orbit ring. |
items | MovingBentoItem[] | 8 landscapes | The cards for the "moving-bento" variant. |
swapInterval | number | 3000 | Milliseconds between automatic card swaps in the moving bento. |
gap | number | 12 | Gap in pixels between bento grid cards. |
autoPlay | boolean | true | Controls whether automatic card swaps or idle passive rotation are enabled. |
reelItems | CircularReelItem[] | 10 landscapes | The items positioned along the ring for the "circular-reel" variant. |
idleRotationSpeed | number | 5 | Degrees per second of passive idle rotation in the circular reel. |
scrollSensitivity | number | 0.06 | Scroll and wheel sensitivity factor in the circular reel. |
ringThickness | number | 37 | Percentage thickness of the circular reel segmented donut ring (10 to 60). |
grayscale | boolean | false | Applies a grayscale filter to the reel images. |
pillItems | PillCarouselItem[] | 5 landscapes | The items ({ id, image, tooltipText, link }) for the "pill-carousel" variant. |
autoSlide | boolean | true | Controls automatic sliding in the "pill-carousel" variant. When true, cards slide automatically and can also be clicked; set to false to disable auto-sliding and navigate by clicking only. |
cardBorderRadius | number | 200 | Border radius in pixels for the pill-shaped cards in the 3D pill carousel. |
activeBorderWidth | number | 6 | Border width in pixels around the active center pill card (uses theme/accent colour by default). |
autoPlayInterval | number | 3000 | Milliseconds between automatic transitions in the 3D pill carousel when autoSlide is true. |
arcItems | ArcCarouselItem[] | 10 scenes | The items ({ id, image, title, subtitle, link }) for the "arc-carousel" variant. |
curve | number | -200 | Curvature value from -300 to 300: negative for concave cylinder arc, 0 for flat row, and positive for convex barrel arc. |
cardSize | number | 220 | Width in pixels of each card in the arc carousel. |
cardHeight | number | cardSize * 1.32 | Height in pixels of each card in the arc carousel. |
perspective | number | 1200 | 3D CSS perspective depth in pixels for the cylindrical arc. |
autoScrollSpeed | number | 0.22 | Continuous auto-drift velocity in cards per second. |
dragSpeed | number | 1.2 | Pointer drag multiplier when grabbing and spinning the carousel. |
inertia | number | 0.75 | Friction momentum coefficient (0 to 1) for smooth coasting after pointer release. |
sphereItems | VideoSphereItem[] | 9 video scenes | The items ({ id, src, poster, title, description, link }) for the "video-sphere" variant. |
radius | number | 280 | Radius in pixels of the 3D sphere. |
itemCount | number | 35 | Total count of cards distributed along the Fibonacci sphere surface. |
itemWidth | number | 110 | Width in pixels of each video card. |
itemHeight | number | 150 | Height in pixels of each video card. |
blurStrength | number | 12 | Max blur in pixels applied to cards on the far side of the sphere. |
enablePopup | boolean | true | Whether clicking a video card opens an animated lightbox preview modal. |
unmuteOnHover | boolean | false | Whether to unmute audio while hovering over an individual video card. |
maxConcurrentVideos | number | 12 | Max number of front-facing videos actively playing at once for performance optimization. |
highlights | { label: string; color?: string }[] | three facts | The dotted row under the actions. |
color | string | theme primary | Accent colour — a preset name or any CSS colour. |
linkComponent | ElementType | "a" | What renders every link; pass next/link in Next.js. |