Showcase content in an interactive, rotating carousel that keeps users engaged. Ideal for portfolios, product displays, or immersive visual storytelling.
import React from 'react';
import { CircularGallery, GalleryItem } from '@/components/ui/circular-gallery';
const galleryData: GalleryItem[] = [
{
common: 'Lion',
binomial: 'Panthera leo',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/ef/ef529e673f5cd10e43948c189473d7f301ebad66d172d891e052db1e3f5cc093.jpg',
text: 'lion couple kissing on a brown rock',
pos: '47% 35%',
by: 'Clément Roy'
}
},
{
common: 'Asiatic elephant',
binomial: 'Elephas maximus',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/a4/a452d427a19507e4f14d05ca545df406c2304ff3946599b6cfa97dc81c647460.jpg',
text: 'herd of Sri Lankan elephants walking away from a river',
pos: '75% 65%',
by: 'Alex Azabache'
}
},
{
common: 'Red-tailed black cockatoo',
binomial: 'Calyptorhynchus banksii',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/ec/ecccd101412d0c0e2865c0a80978192fdf05b738b9a057c4ab1a4cfd84d90cdb.jpg',
text: 'close-up of a black cockatoo',
pos: '53% 43%',
by: 'David Clode'
}
},
{
common: 'Dromedary',
binomial: 'Camelus dromedarius',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/62/62477002d6e425b54d616d138a7b5c862e2bda1dcbd754fee075dbc04fc9d007.jpg',
text: 'camel and her new born calf walking in the Sahara desert',
pos: '65% 65%',
by: 'Moaz Tobok'
}
},
{
common: 'Polar bear',
binomial: 'Ursus maritimus',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/65/65eee6e9e7c2cd4fbb380d712346532109a5d6da513bd835a4c278424589d805.jpg',
text: 'polar bear on the snow, by the water, raised on the hind legs, front paws together',
pos: '50% 25%',
by: 'Hans-Jurgen Mager'
}
},
{
common: 'Giant panda',
binomial: 'Ailuropoda melanoleuca',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/d9/d958dcbb75b0cc4cd2d03578c809614f2c85f06e8573558683cc1f1418596753.jpg',
text: 'giant panda hanging from a tree branch',
pos: '47%',
by: 'Jiachen Lin'
}
},
{
common: 'Grévy\'s zebra',
binomial: 'Equus grevyi',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/91/91d46e30090f4b1b3ff7705e1029d2fc4f6cb824155b6728d92689d7472d0eed.jpg',
text: 'zebra standing on wheat field, looking back towards the camera',
pos: '65% 35%',
by: 'Jeff Griffith'
}
},
{
common: 'Cheetah',
binomial: 'Acinonyx jubatus',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/00/00c52ec264acae5198946c16870aebab88a2e4b60b504b5aac7e5abe02c4ca63.jpg',
text: 'cheetah sitting in the grass under a blue sky',
by: 'Mike Bird'
}
},
{
common: 'King penguin',
binomial: 'Aptenodytes patagonicus',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/00/00f92b2eb93c967ad77e3c34dbca897ca08e0eb595b00a82e1db281994f12bff.jpg',
text: 'king penguin with a fluffy brown chick on grey rocks',
pos: '35%',
by: 'Martin Wettstein'
}
},
{
common: 'Red panda',
binomial: 'Ailurus fulgens',
photo: {
url: 'https://cdn.21st.dev/assets/mirror/da/dab2d7dc03c3c605577e6a8782f1bdb2792b9f41530f34c1cc1ce35ae83c29e9.jpg',
text: 'a red panda in a tree',
by: 'Niels Baars'
}
},
];
const CircularGalleryDemo = () => {
return (
// This outer container provides the scrollable height
<div className="w-full bg-background text-foreground" style={{ height: '500vh' }}>
{/* This inner container sticks to the top while scrolling */}
<div className="w-full h-screen sticky top-0 flex flex-col items-center justify-center overflow-hidden">
<div className="text-center mb-8 absolute top-16 z-10">
<h1 className="text-4xl font-bold">Animal Gallery</h1>
<p className="text-muted-foreground">Scroll to rotate the gallery</p>
</div>
<div className="w-full h-full">
<CircularGallery items={galleryData} />
</div>
</div>
</div>
);
};
export default CircularGalleryDemo;