Components
Loading preview...
The InteractiveImageGallery component is a dynamic, visually engaging layout designed to display images and accompanying text cards in a randomized, floating arrangement. Each time the page loads, images and text elements appear in different positions, creating a fresh, organic feel reminiscent of a modern design showcase or creative portfolio. Built entirely with shadcn/ui components and Tailwind CSS, it’s lightweight, responsive, and seamlessly adapts to both dark and light themes. A standout feature of this component is its hover interaction — when the user hovers over any image, all other images gently blur, bringing the focused item to the forefront while leaving text cards crisp and readable. This subtle depth effect enhances visual hierarchy without distracting from the overall layout. Ideal for creative portfolios, AI-generated art galleries, product showcases, or interactive visual storytelling, the InteractiveImageGallery strikes a balance between motion and clarity, transforming static content into a living, breathing experience that feels both elegant and intelligent.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/interactive-image-gallery"use client";
import { InteractiveImageGallery } from "@/components/ui/interactive-image-gallery";
export default function GalleryDemoPage() {
const items = [
{
id: "1",
type: "image",
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/ruixen-moon-chat.jpg",
},
{
id: "5",
type: "text",
text: "Discover our AI-powered visual collection that transforms data and creativity into emotion.",
},
{
id: "2",
type: "image",
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/three-dwall-calendar-dark.jpg",
},
{
id: "3",
type: "image",
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/solar-system-dark.png",
},
{
id: "6",
type: "text",
text: "Explore how intelligent design systems visualize the unseen and amplify imagination.",
},
{
id: "4",
type: "image",
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/infinite-scroll-light.png",
},
{
id: "8",
type: "image",
src: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/components-preview/popular/ripple-distortion-dark.png",
},
];
return (
<main className="min-h-screen bg-background text-foreground flex justify-center items-center">
<InteractiveImageGallery items={items} />
</main>
);
}