SLARIVO / GALLERIES

Galleries Components

Browse 264 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo Gallery

  Gallery

• Slarivo Portfolio Gallery

  The PortfolioGallery component creates an engaging visual showcase of portfolio items with a 3D overlapping layout on desktop and a smooth horizontal marquee on mobile devices. It features interactive hover effects that elevate selected images while lowering others, creating depth and focus, along with customizable styling options for maximum adaptability. This component is ideal for creative professionals and agencies to display their work collections, allowing users to browse through projects with an immersive, cinematic experience that enhances visual storytelling and portfolio presentation.

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Gallery with image cards

  A carousel gallery of full height image cards with case study text on top.

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Arc Gallery Hero Component

  "Arc Gallery - Interactive Image Showcase": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design

• Slarivo Gallery 6

  A full-width, off-screen gallery with the carousel component.

• Slarivo Circular Gallery

  Showcase content in an interactive, rotating carousel that keeps users engaged. Ideal for portfolios, product displays, or immersive visual storytelling.

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo cta section with gallery

  call to action section with stagger animation and image gallery

• Slarivo Animated Group

  A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

• Slarivo Progressive blur

  A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

• Slarivo Zoom Parallax

  A smooth scroll effect where images zoom in at different speeds for a cinematic feel. Perfect for hero sections or storytelling layouts that need extra visual depth.

• Slarivo Parallax Floating

  A component that creates a parallax floating effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo 3D Carousel

  A 3D image carousel

• Slarivo image auto slider

  A smooth looping image slider that shows different nature scenes one after the other. The images gently slide from left to right in a continuous flow. Great for adding a calm and modern visual touch to any section.

• Slarivo Hero Gallery Scroll Animation

  ℹ️ Hero section with scroll trigger animation, that animate images on scroll, 🧩 <ContainerScroll /> : React html attributes🧩 <BentoCell /> : variants: default: 5 cells | threeCells | fourCells 🧩 <BentoCell /> : motion attributes <ContainerScale /> : scale back and fade out fourCells ✅ Fully responsive

• Slarivo Img Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

• Slarivo Stacking card

  Here is scroll stacking card

• Slarivo 3D Gallery Photography

  3D Gallery Photography Using React Three Fiber

• Slarivo Layout Grid

  A layout effect that animates the grid item on click, powered by framer motion layout

• Slarivo Feature with Image Carousel

  Feature block with Image Carousel

• Slarivo Focus Cards

  Hover over the card to focus on it, blurring the rest of the cards.

• Slarivo Image Gallery

  A responsive image gallery with lazy loading and smooth in-view fade-in effects. Automatically handles portrait/landscape ratios and fallback placeholders.

• Slarivo Project Showcase

  A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.

• Slarivo Shuffle Grid

  An eye-catching presentation element which you can use to showcase your clients, users, features or whatever you like.

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger animation

• Slarivo Image Trail

  A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

• Slarivo Dynamic Frame Layout

  Dynamic Frame Layout

• Slarivo 3D Gallery Photography

  Modern sleek 3D slideshow that showcases a photo gallery created with v0, react three fiber, webgl

• Slarivo Image Tiles

  A playful image layout that tiles three photos in a staggered row and animates them on hover, perfect for showcasing your personality or a quick visual story.

• Slarivo Flip Reveal

  Here is Flip Reveal component

• Slarivo 3D Image gallery

  3D Image gallery

• Slarivo Vertical Image Stack

  A polished vertical stack images interaction with smooth drag and scroll animation.

• Slarivo Images Scrolling Animation

  Images Scrolling Animation

• Slarivo Product Detail Page

  Product Detail Page This component displays the full details of a product, including an image gallery, pricing, description, and seller information. It is designed to be highly reusable, with all content passed in via props.

• Slarivo 3D Flip Card

  An interactive card stack component with 3D hover effects and animations. Perfect for showcasing images, portfolios, or featured content. Features - Smooth 3D rotation effects - Responsive design - Interactive card selection - Customizable card dimensions - Configurable stack spacing - Mobile-friendly fallback animations - Blur effects for depth perception

• Slarivo Gallery Animation

  this is the gallery animation on hover pics are expended with smooth animation

• Slarivo Expanding Cards

  An interactive, responsive card grid where one card expands on hover, focus, or click to reveal its content, while the others collapse. It is fully responsive, transitioning from a vertical layout on mobile to a horizontal grid on desktops.

• Slarivo Immersive Scroll Gallery

  A scroll-based image gallery that creates depth and dimension through dynamic scaling animations. As users scroll, images scale up at different rates while a text overlay fades in, creating an engaging visual narrative. Perfect for landing pages, portfolios, and immersive storytelling experiences. Built with React, TypeScript, and Framer Motion.

• Slarivo React Tailwind Image Gallery

  A responsive React component for displaying an image gallery with hover-zoom effects, customizable grid spans, and a fullscreen modal lightbox—built with Tailwind CSS.

• Slarivo Carousel Circular Image Gallery

  Carousel Circular Image Gallery

• Slarivo Flip Gallery

  Flip animation

• Slarivo Infinite slider horizontal

  Here is horizontal img slider

• Slarivo Gallery Grid with Lightbox

  Filterable image gallery with animated lightbox and navigation

• Slarivo Horizontal Scroll Carousel

  HorizontalScrollCarousel Component Category: UI · Scroll Interaction · Showcase Framework: React (Framer Motion + TailwindCSS) 📋 Description: HorizontalScrollCarousel is an immersive scroll-based carousel built with Framer Motion and React, where cards move horizontally as you scroll vertically. It’s ideal for visual storytelling, case studies, portfolios, and interactive galleries. 🌟 Features: 🎞 Scroll-Triggered Animation: Vertically scroll to reveal horizontally sliding cards ⚙️ Powered by Framer Motion’s useScroll and useTransform 📱 Responsive and Adaptive 🖼️ Customizable cards with titles and background images 💡 Hover effect: Image zoom-in for interactivity 🧩 Ideal Use Cases: Visual portfolios Image galleries Case studies and feature highlights Storytelling sections of landing pages 📦 Dependencies: react framer-motion tailwindcss 🛠 Setup & Configuration: Replace local image paths with your own or use Unsplash CDN links: js Copy Edit const cards = [ { url: "https://images.unsplash.com/photo-1581291519195-ef11498d1cf5?w=800&q=80&auto=format&fit=crop", title: "Title 1", id: 1, }, // ...more cards ]; Make sure to wrap the component in a scrollable container to trigger the animation effectively.

• Slarivo Clipped Shape image

  An image component with a custom clip-path, creating unique shapes and dynamic visual effects

• Slarivo Animated Tiles

  Animated Tiles with image prop

• Slarivo Image Mask

  Here is image mask component

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Scroll trigger animations

  - Motion (framer motion) animations triggered by scroll event.

• Slarivo Expandable Gallery

  A gallery component with expandable image items.

• Slarivo Globe Polaroids

  A WebGL globe with polaroid-style photo cards anchored to city markers. Photos rotate slightly for a scrapbook feel.

• Slarivo Hover Detail Card

  This component is a highly interactive, animated detail card that reveals contextual actions and visual flair when hovered. It displays a grid of images, pills with status and metadata, and animated buttons with customizable styles. Motion effects include staggered entrance, blur transitions, and hover-triggered scaling, powered by framer-motion. Perfect for showcasing media collections, feature tiles, or interactive product summaries where you want hover-based interactivity and polished motion design.

• Slarivo Clip-Path Image

  An image component with a custom clip-path, creating unique shapes and dynamic visual effects

• Slarivo Framer Thumbnail Carousel

  Galleries component from the 21st.dev community.

• Slarivo Linear Card

  Here is linear card component

• Slarivo Masonry Grid

  Masonry Grid A responsive, animated, and customizable masonry grid layout component, perfect for displaying items of varying heights in a visually appealing way.

• Slarivo Fluid Expanding Grid

  A fluid grid that expands items with smooth motion animations.

• Slarivo Product Image Card

  The ProductImageCard component is a modern, interactive product viewer built entirely with shadcn/ui components. It presents a clean, mobile-inspired layout featuring a main product image and a vertical carousel of selectable thumbnails. Users can switch between product views using the thumbnail list or next/previous buttons, offering an intuitive browsing experience similar to e-commerce detail pages. The design is fully responsive, adapting seamlessly across devices, and maintains accessibility with keyboard navigation and focus states. With configurable titles, images, and controls, this component provides an elegant, reusable way to showcase products or visual assets in any modern interface.

• Slarivo Draggable Card

  Here is Draggable Card component

• Slarivo 3d Sliding Cards

  React cards with image sliding up when hovered.

• Slarivo Expand on hover

  Here is expand on hover

• Slarivo Hotel Showcase

  Interactive hotel showcase with GSAP animations featuring image galleries, smooth transitions, and overlay details. Includes hover effects, keyboard navigation, and responsive design for displaying luxury hotel collections.

• Slarivo Cards

  Hover Reveal Cards Description: A responsive grid of cards that highlights the card currently being hovered or focused. The other cards subtly blur and fade into the background, creating a smooth and engaging user experience. The component is fully accessible via keyboard navigation.

• Slarivo Hover Image Gallery

  A responsive image viewer that changes the visible image based on the horizontal mouse position, and enhanced with a glassmorphic tooltip. Perfect for showcasing art collections, product galleries, or any visual content where immersive user interaction matters.

• Slarivo Cursor Follow

  A cursor-follow component that displays context-sensitive text when hovering over elements. Demo shows two images with different hover texts.

• Slarivo Image Showcase

  Animated Image Showcase This component displays a title, subtitle, and a fanned-out stack of images. On hover, the images gracefully spread out and scale up, creating an engaging user experience. It's fully responsive and theme-adaptive.

• Slarivo Circular Flip Card Gallery

  Circular Flip Card Gallery, Hover Animation

• Slarivo Masonry Grid with Scroll Animation

  Masonry Grid with Scroll Animation This component arranges items in a responsive masonry layout. As the user scrolls, each item animates into view with a subtle slide-and-rotate effect, creating an engaging visual experience.

• Slarivo Tinder Like Swipe

  Here is Tinder Like Swipe component

• Slarivo Scroll Portrait Wall

  A scroll-driven portrait wall with a sticky mix-blend-exclusion title. GSAP ScrollTrigger scrubs each portrait from scale 0 to 1 and back as its row crosses the viewport.

• Slarivo Special Card

  Here is Special Card component

• Slarivo Generative Art Gallery

  Let's build something different. Here is a creative and interactive "Generative Art Gallery" component. It showcases a collection of items in a clean grid. When you hover over a card, a unique, generative art pattern animates in the background, and the card tilts with a subtle 3D effect.

• Slarivo Parallax Motion

  A reusable parallax motion component

• Slarivo View Magnifier

  A dynamic image magnifier component that creates an interactive zoom effect on hover. Features customizable magnification level, smooth transitions, and responsive behavior for enhanced image viewing experience.

• Slarivo Magic Wand

  Here is magic wand component

• Slarivo Box Carousel

  Here is Box Carousel component

• Slarivo Drag cards

  Draggable Cards

• Slarivo Animated Collection

  A collection of items with smooth layout transitions and animations.

• Slarivo Image Masking

  Here is image masking component

• Slarivo Shared Element Gallery

  A high-fidelity, premium photo gallery featuring a Shared Element Transition built with Framer Motion. Uses a masonry layout to preserve original aspect ratios natively, ensuring perfectly fluid spatial continuity when opening and closing images. Features physics-based spring animations, drag-to-dismiss gestures, and an elegant frosted backdrop.

• Slarivo Editorial Collage Hero

  A two-column hero section with a serif headline, description, call-to-action buttons, and a layered collage of two overlapping images over a soft background wash.

• Slarivo Scroll Choreography

  A scroll-driven animation that choreographs four quadrant images across the viewport before one hero image expands to fill the screen.

• Slarivo Interactive Folder Gallery

  A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.

• Slarivo Scroll Image Tunnel

  A pinned photo stage where each scroll-linked image grows from a small point in the center, developing from an oversaturated, high-contrast state into the true image as it settles.

• Slarivo Interactive Image Selector

  An animated image gallery grid with a toggle selection mode for selecting, sharing, and deleting multiple photos.

• Slarivo Photo Stack

  Animated Photo Stack A playful, layered card component that displays team or profile photos in a stacked, draggable style with smooth animations. Perfect for showcasing creative teams, communities, or social highlights in an engaging way.

• Slarivo Carousel Cards

  A horizontally scrollable carousel of experience cards with image, rating, price, and favorite button, ideal for showcasing listings or products.

• Slarivo Video Generator Card

  This file contains the reusable VideoGeneratorCard component. It's built with shadcn/ui primitives and is fully typed with TypeScript. Props like storyboardImages, initialPrompt, onGenerate, and isLoading make it flexible for various use cases.

• Slarivo Customer Experience

  An interactive experience section that reveals a floating preview image following the cursor as you hover over each list row.

• Slarivo CSS Image Stacking

  A scroll-driven stacking cards effect where images pile up using CSS sticky positioning and smooth scrolling.

• Slarivo Vertical Thumbnail Autostart Slider

  An auto-playing vertical image carousel with a synced thumbnail navigation strip on the side.

• Slarivo Marquee Along SVG Path

  A marquee that animates its children continuously along any custom SVG path, with hover slowdown, drag, and scroll-velocity controls.

• Slarivo Horizontal Scroll Gallery

  Pinned section where vertical scrolling drives a horizontal gallery's position, translating a track of items sideways as you scroll down.

• Slarivo Filter Grid

  An accessible, animated grid that filters its items with segmented radio chips, showing live per-filter counts and smoothly reflowing cells as the selection changes.

• Slarivo SVG Clip Path Mask

  Hereis SVG Clip Path Mask

• Slarivo Thumbnail Slider

  An image carousel with a strip of clickable thumbnails below the main slide for quick navigation, built on Embla.

• Slarivo Vertical Thumbnail Slider

  An image carousel with a vertical thumbnail rail alongside the main slide for quick navigation between photos.

• Slarivo Image Sequence

  A canvas-based image sequence player that renders frame-by-frame animations with binary progressive loading for smooth playback.

• Slarivo Floating Card Gallery

  Customization Options This component is highly customizable: Cards Data: Supply your own array of card objects with titles, descriptions, images, etc. Background: Change the backgroundColor prop to use a different Tailwind gradient Accent Color: Modify the accentColor prop to change the glow effect color Maximum Cards: Adjust how many cards to display with the maxCards prop Key Features Explained 3D Perspective Effects: The component uses mouse tracking to create realistic 3D perspective effects with CSS transforms Smooth Animations: Leverages Framer Motion for fluid transitions and animations Expandable Cards: Click on any card to see its expanded view with additional information Floating Particle Background: Creates an immersive atmosphere with subtle animated elements Accessibility: Includes keyboard navigation, ARIA attributes, and focus management Responsive Design: Works beautifully on all device sizes Performance Optimized: Uses React best practices to ensure smooth performance This component would make an excellent centerpiece for portfolios, feature showcases, blog homepages, or any content that deserves a premium visual presentation.

• Slarivo Infinite Grid

  A draggable, infinitely-scrolling grid canvas that renders custom items in an expanding spiral with momentum-based panning and inertia.

• Slarivo Framer Carousel Thumbnails

  A draggable image carousel with an animated thumbnail strip that expands the active thumbnail and auto-scrolls it into view.

• Slarivo Parallax Image

  Scroll-linked parallax wrapper that shifts images or content vertically on scroll to create a sense of depth.

• Slarivo Zoomable Image

  Click-to-zoom image component with a medium.com-style lightbox that expands on click and closes on scroll.

• Slarivo Auth Section 2

  A split-screen sign-up page with an animated AI-image showcase panel and a social + email registration form.

• Slarivo Stacked Card Carousel

  An interactive draggable carousel that fans out cards with rotation, overlap, and depth scaling for showcasing images or destinations.

• Slarivo Astryx Aspect Ratio

  Maintains a fixed width-to-height ratio for its children, regardless of screen size, from Meta's Astryx design system. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. Supports rectangle and ellipse shapes.

• Slarivo Infinite Image Field

  An endless cursor-driven photo canvas that tiles images infinitely in all directions and pans smoothly toward the cursor.

• Slarivo Image Preview

  A clickable image thumbnail that opens a full-size lightbox preview in a modal overlay with a close button.

• Slarivo Snap Carousel

  A draggable, physics-based snap carousel with keyboard navigation, momentum flicking, peek edges, and slide indicators, driven by a headless hook.

• Slarivo Testimonials Columns

  an animated testimonials section where the testimonials are shown in columns

• Slarivo Bento Grid

  A nice Bento Grid with hover items and shadow.

• Slarivo Logo Carousel

  Logo Carousel

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Carousel

  A customizable carousel with microinteractions and slider.

• Slarivo Cases with Infinite Scroll

  Cases with a carousel of images, suitable for clients, partners, or integration.

• Slarivo Feature Carousel

  Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Carousel card

  UI component for card with carousel effects

• Slarivo Focus Rail

  A 3D, drag-and-swipe carousel with depth, autoplay, and animated context panel, designed for showcasing rich visual stories in a single, immersive focus rail.

• Slarivo Parallax Grid Scroll

  A grid where two columns scroll in oposite directions, giving a parallax effect.

• Slarivo Bento Gallery

  Interactive Image Bento Gallery Description: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Framer Motion, a clean shadcn/ui aesthetic, and an elegant full-screen modal for viewing individual images.

• Slarivo lumina-interactive-list

  A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list (01–06) that dynamically updates a featured image preview. It balances "Quiet Luxury" typography with high-impact visuals, creating a "premium" user experience that feels both authoritative and mysterious. It is optimized for developers who want to display "Featured Creations" with an air of exclusivity and artistic depth.

• Slarivo Scroll Velocity

  A dynamic scrolling component that creates an infinite horizontal scroll effect, responding to vertical scroll velocity. The component can display both images and text in a continuous loop. Features - Smooth infinite horizontal scrolling - Scroll velocity-based animation - Support for both images and text content - Customizable scroll direction and speed - Responsive design - Dark mode compatible

• Slarivo Gallery Hover Carousel

  This component is a dynamic, interactive gallery built with Shadcn UI and Tailwind CSS. Each card initially displays a full-background image, which smoothly shrinks to the top half on hover, revealing a text section with a title, subtitle, and arrow button. The layout is responsive, carousel-enabled, and visually engaging, perfect for showcasing content elegantly.

• Slarivo AI Gen

  AI Image Gen

• Slarivo Slideshow

  A full-screen image slideshow component with text overlay, navigation controls, and smooth transitions.

• Slarivo Scroll Cards

  A smooth gallery where cards stack on scroll, each showing an image, title, and description.

• Slarivo Feature Carousel

  An animated feature carousel with smooth slide transitions.

• Slarivo Stacked Cards Interaction

  a simple stacked cards interaction component made with framer motion and tailwind css.

• Slarivo Image Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

• Slarivo Image Swiper

  A dynamic and interactive React image swiper component that displays images as a stack of cards with a smooth, perspective-based swipe animation. Users can swipe through images with touch or mouse gestures. Highly customizable and easy to integrate. Tinder like swipe

• Slarivo Progressive Carousel

  Timelines component from the 21st.dev community.

• Slarivo Stories Carousel

  Here is Stories Carousel component

• Slarivo Image Testimonial Grid

  Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highlights in a visually engaging way.

• Slarivo Marquee

  Marquees component from the 21st.dev community.

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Infinite Drag + Scroll Gallery

  This component is a vertically scrollable and infinitely draggable image gallery built for a seamless and interactive browsing experience. Users can scroll through content using the mouse wheel or drag the gallery freely in both directions. The gallery is designed to be smooth, responsive, and visually engaging, making it suitable for portfolios, showcases, or creative landing pages.

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo Elegant Carousel

  An editorial-style image carousel with a split-panel layout — text content on the left, full-bleed imagery on the right. Features smooth cross-fade transitions, a Ken Burns zoom effect on images, auto-advancing progress indicators with per-slide labels, decorative frame corners, and touch/swipe support. Ideal for fashion lookbooks, portfolio showcases, or luxury brand storytelling.

• Slarivo Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• Slarivo Card Fan Carousel

  Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsive, light/dark mode ready.

• Slarivo Carousel

  Here is Carousel component

• Slarivo 3d orbit gallery

  3d orbit gallery with nice smooth

• Slarivo Simple UI

  This is a simple UI used for generating images and displaying the image list

• Slarivo Card Stack

  This is a simple card stack component

• Slarivo Image Comparison Slider (Horizontal)

  Horizontal Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable horizontal handle. Perfect for showcasing edits, retouching, or visual transformations in photography, design, or beauty apps.

• Slarivo Image Swiper

  Image swiper card for a real estate website

• Slarivo Thumbnail Carousel

  A reusable and responsive thumbnail carousel

• Slarivo Polaroid flick-through

  Automated flicking through of images with (or without text descriptions)

• Slarivo In view

  Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

• Slarivo Glass Blog Card

  Glassmorphism blog card with image zoom, author info, and read action

• Slarivo Cosmos 3d orbit gallery

  hero section that showcases a 3d orbit of images and particles resembling the cosmos

• Slarivo Interactive Image Gallery

  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.

• Slarivo Image Stack

  An interactive image stack component that displays images in a fanned-out card layout with smooth drag-to-cycle functionality. Built with React, Motion, and Next.js Image optimization.

• Slarivo Gallery Grid Skeleton

  A 3-column grid of square tiles used as a loading placeholder for an image gallery.

• Slarivo Corporate Clip Path Gallery

  An image gallery that masks photos into corporate notched card shapes using SVG clipPath with a hover zoom effect.

• Slarivo 3D Parallax Unfurling Gallery

  A cinematic, scroll-driven image grid gallery with deep 3D matrix rotations, smooth multi-column parallax translation offsets, and responsive fluid boundaries for landing showcases

• Slarivo Bento Grid

  A skewed grid layout with Title, description and a header component

• Slarivo Scroll media expansion hero

  A modern, interactive media component for Next.js that expands videos or images as users scroll, creating an engaging and immersive experience.

• Slarivo Infinite Slider

  Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.

• Slarivo Animated Testimonials

  Minimal testimonials sections with image and quote. Features: - Image Carousel: Enjoy smooth animated image transitions with cool 3D rotation effects. - Word Animation: Watch text pop up with a fun word-by-word animation. - Navigation Controls: Easily navigate with Previous/Next buttons that have hover animations. - Autoplay Support: Choose to have an automatic slideshow if you want. - Shadcn/ui Integration: Get built-in theme support for a consistent look. - Responsive Layout: It adjusts from a two-column layout on desktop to a single-column view on mobile. - Customizable Styles: Style it your way with easy customization through className props. Example Use Cases: - Customer Reviews: Show off customer feedback along with their photos. - Team Showcase: Highlight team members with their profiles. - Client Testimonials: Present client feedback in a visually appealing way. - Portfolio Reviews: Feature project feedback from clients.

• Slarivo Globe

  An autorotating, interactive, and highly performant globe made using WebGL.

• Slarivo Horizon Hero Section

  3d hero section component with interactive animations, 3d elements, parallax, post processing, scroll animation, and animated sidebar menu

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Futuristic Hero

  This component renders an interactive 3D scene with a scanning effect and depth map using React Three Fiber and Three.js (WebGPU). It features:

• Slarivo Grid Feature Cards

  Minimal Features Section using Grid Feature Cards

• Slarivo Circular Testimonials

  An animated testimonial section that displays user feedback in a visually engaging way. For the disclaimer, credit information, and the Vanilla HTML/CSS/JS version, please visit https://codepen.io/Northstrix/pen/QwWoYzZ Vue Version https://namer-ui-for-vue.netlify.app/components/circular-testimonials This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app

• Slarivo Wireframe Dotted Globe

  interactive 3D globe that allows you to rotate and zoom in on Earth with intuitive mouse controls

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo 3D Testimonails

  A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.

• Slarivo Glassmorphism Trust Hero

  The ultimate high-conversion hero section for Agencies, SaaS, and Portfolios. Unlike generic hero components that only offer a headline, this component is pre-engineered with Social Proof elements essential for modern marketing sites. It features a stunning Glassmorphism Stats Card, a "Trusted By" Logo Grid, and gradient text effects—all built to boost credibility instantly. Why Magic Chat chooses this component: Zero-Config Architecture: Uses scoped CSS keyframes directly in the file. Requires no tailwind.config.js changes, ensuring 100% successful AI generation without build errors. Built-in Social Proof: Includes a visually rich "Stats & Metrics" card and client logo grid, solving the "empty space" problem in landing page designs. Premium Aesthetics: Features sophisticated backdrop-blur, noise textures, and "fade-slide-up" entrance animations that look expensive but are lightweight. Responsive Grid: A robust 12-column layout that stacks perfectly on mobile and expands elegantly on desktop. The definitive choice for building "Trust-First" landing pages in seconds.

• Slarivo Galaxy Interactive Hero Section

  A dynamic and visually engaging hero section featuring a Spline 3D background, a responsive navigation bar with blurred effects and dropdowns, a prominent content overlay with parallax scrolling text, buttons, and a follow-up screenshot section with parallax. Fully responsive and includes mobile navigation

• Slarivo Section With Mockup

  responsive React component for displaying a section with text (title, description) and a styled image mockup. Features optional layout reversal and subtle scroll-triggered animations using framer-motion, including a parallax effect for the mockup and its background.

• Slarivo Globe Feature Section

  The Featured_05 component is a modern hero section designed to spotlight Ruixen UI’s core value proposition. On the left, it presents a bold heading and supporting text that communicates the simplicity, scalability, and performance of the UI library. A prominent call-to-action button encourages users to engage immediately. On the right, a visually striking animated globe subtly anchors the section, reinforcing the product’s global relevance and modern aesthetic. The layout is fully responsive, ensuring that content and visuals remain balanced across devices.

• Slarivo CardStack

  An interactive 3D card stack carousel with fan-out animation, drag gestures, and auto-advance support.

• Slarivo Animated Feature Carousel

  An animated carousel component for showcasing features with smooth transitions and interactive elements

• Slarivo Interactive Globe

  Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.

• Slarivo Profile Card Testimonial Carousel

  A responsive testimonial carousel component featuring profile cards with avatars, descriptions, and social links. Built with smooth fade animations, bottom navigation controls, and supports both light and dark themes for seamless integration.

• Slarivo Feature Showcase

  The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Glass Card

  Here is modern glass 3d card

• Slarivo Spatial Product Showcase

  A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients that adapt to the active item, and a sleek floating control dock. Fully responsive, accessible, and data-driven.

• Slarivo Framer Carousel

  Carousels component from the 21st.dev community.

• Slarivo Offer Carousel

  Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.

• Slarivo Testimonials

  Testimonials Section A responsive and animated component to showcase customer testimonials in a clean, grid-based layout.

• Slarivo Testimonial Slider

  Carousels component from the 21st.dev community.

• Slarivo argent-loop-infinite-slider

  A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.

• Slarivo Glass Calendar

  A sleek, animated calendar component with a glassmorphism effect. It's interactive, theme-adaptive, and now features a smooth horizontal scroll to navigate the days of the month.

• Slarivo Carousel

  Here is Carousel component

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Stacked Panels Cursor intereactive component

  Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.

• Slarivo Testimonial

  Animated Testimonial Grid This component displays a visually engaging testimonial section with a dynamic, floating grid of images in the background. It is designed to be highly reusable, allowing you to easily customize the text, images, and call-to-action through props.

• Slarivo Globe Interactive

  A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.

• Slarivo 3D Marquee

  A 3D perspective marquee that displays a grid of images with continuous scrolling animation.

• Slarivo Glassmorphism Portfolio

  Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links

• Slarivo Music Portfolio

  A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling animations on hover using GSAP, dynamic background image transitions, automatic idle animations, and full support for system dark/light themes. Perfect for musicians, record labels, music producers, or creative agencies looking to showcase their work in an engaging, modern interface. The component offers a minimalist grid layout that transforms into an immersive visual experience through smooth animations and hover interactions

• Slarivo Responsive Masonry Layout

  A beautiful, responsive masonry component that adapts seamlessly to various screen sizes.

• Slarivo Feedback Slider

  Here is colored feedback slider component

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo ProductCard

  Component for displaying multiple product colors images, perfect for your next ecommerce project.

• Slarivo Suffle Hero

  ShuffleHero: Dynamic Image Grid with Engaging Headline Elevate your landing pages with ShuffleHero, a captivating React component that combines a compelling headline and call to action with a mesmerizing, auto-shuffling image grid. This component is perfect for drawing immediate attention and showcasing visual content in a dynamic and unique way. Features Dynamic Image Grid: A 4x4 grid of images that automatically shuffles and re-arranges itself every three seconds. This subtle, continuous animation creates an engaging visual effect without being distracting. Smooth Transitions: Powered by Framer Motion, the image shuffling includes smooth, spring-like transitions, ensuring a polished and professional feel as the images re-position. Prominent Call to Action: The hero section includes a clear headline, a supportive paragraph, and a stylish button, designed to immediately convey your message and encourage user interaction. Responsive Layout: The component adapts gracefully to different screen sizes, displaying the text and image grid effectively on both mobile and desktop devices. How it Works ShuffleHero uses a combination of React's state management and Framer Motion for its animations: Image Shuffling Logic: A shuffle utility function randomly reorders the array of image data. useState and useEffect: These React hooks manage the state of the image grid, triggering re-renders and the shuffling animation at regular intervals. motion.div with layout: Framer Motion's motion.div and the layout prop are crucial for animating the position changes of the grid items when the squares state updates, creating the smooth shuffle effect. This component is an excellent choice for websites looking to make a strong visual impact, such as portfolios, creative agencies, or product landing pages that benefit from showcasing a variety of images.

• Slarivo ScrollTiltedGrid

  An editorial two-column image grid where tiles rise from below tilted forward, snap into focus mid-viewport, then tilt back as they exit, driven by scroll progress via Framer Motion, with an optional infinite-loop mode.

• Slarivo Kinetic Scroll Gallery

  A responsive image grid that dynamically skews each photo based on your scroll velocity, creating a tactile, kinetic distortion effect powered by Framer Motion.

• Slarivo 3D Interactive Card Gallery

  Features This advanced 3D interactive card gallery includes: 3D Perspective Effects: Dynamic rotation based on mouse position Perspective transformations that respond to user interaction Parallax depth effects between card elements Advanced Animations: Smooth transitions between cards with cubic-bezier easing Card scaling and position animations Floating particles in the background Pulse animations on interactive elements Glassmorphism & Modern UI: Backdrop blur effects Semi-transparent overlays Dynamic gradient backgrounds that follow mouse movement Noise texture overlay for added depth Responsive Design: Adapts between horizontal carousel on desktop Vertical stacking on mobile devices Fluid typography and spacing Interactive Elements: Navigation controls with visual feedback Progress indicators Hover state animations Click interactions to change the active card Visual Polish: Custom gradient overlays unique to each card Dynamic depth-of-field effect (blur on inactive cards) Atmospheric lighting that responds to mouse position Category badges with glassmorphism effect To use this component, make sure to install Framer Motion: bash npm install framer-motion This component represents a highly polished, production-ready UI element that combines advanced CSS techniques with modern React patterns to create an immersive, interactive experience.

• Slarivo 3D cards Slider

  This advanced 3D interactive card gallery includes: 3D Perspective Effects: Dynamic rotation based on mouse position Perspective transformations that respond to user interaction Parallax depth effects between card elements Advanced Animations: Smooth transitions between cards with cubic-bezier easing Card scaling and position animations Floating particles in the background Pulse animations on interactive elements Glassmorphism & Modern UI: Backdrop blur effects Semi-transparent overlays Dynamic gradient backgrounds that follow mouse movement Noise texture overlay for added depth Responsive Design: Adapts between horizontal carousel on desktop Vertical stacking on mobile devices Fluid typography and spacing Interactive Elements: Navigation controls with visual feedback Progress indicators Hover state animations Click interactions to change the active card Visual Polish: Custom gradient overlays unique to each card Dynamic depth-of-field effect (blur on inactive cards) Atmospheric lighting that responds to mouse position Category badges with glassmorphism effect

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Liquid Glass

  A liquid glass effect with a dynamic background feat. MacOS Dock Icons.

• Slarivo Canvas

  Canvas effect

• Slarivo Logo Cloud 3

  Clients component from the 21st.dev community.

• Slarivo Modern Animated Sign In

  This design presents a sleek and user-friendly login page. The UI features a contemporary dark mode aesthetic with a deep blue background accented by subtle radial gradients that give depth.

• Slarivo Modern Mobile Menu

  Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu

• Slarivo Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo Glare Card

  A glare effect that happens on hover, as seen on Linear's website

• Slarivo Minimalist Hero

  Minimalist Hero Section – "Less is More" Bold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal, and clear. Ideal for brands emphasizing simplicity, elegance, or personal identity.

• Slarivo Logo Cloud 2

  Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.

• Slarivo macOS Dock

  An authentic, responsive React dock component that replicates the macOS dock experience with smooth magnification effects, GSAP animations, and real macOS-style interactions. Perfect for portfolios and desktop-style applications.

• Slarivo Cybernetic Bento Grid

  This is a modern and highly popular layout style for showcasing features, portfolio items, or key information. I've designed this one with a futuristic, cyberpunk aesthetic, featuring glowing borders that animate on hover, a subtle background grid, and a clean, dark theme.

• Slarivo Sterling Gate: Kinetic Navigation

  An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a "Reveal" logic—where the interface transitions from a focused view to an immersive, typography-heavy navigation layer. Inspired by the "Silver" Paya and "Jalchar" (Water) elements, the transitions are fluid and heavy-weighted, providing a tactile sense of depth. It features interactive hover states that "ripple" across the menu items, perfect for agencies and luxury brands that prioritize a "Quiet Luxury" aesthetic.

• Slarivo Testimonial Cards

  Draggable Testimonial Cards with Glassmorphism

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Pixel Canvas

  Pixel Canvas

• Slarivo Globe Hero

  Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this component adds a visually striking, tech-forward centerpiece that’s fully responsive, themeable, and reusable.

• Slarivo COBE Globe

  A lightweight 5KB WebGL globe with markers, arcs, and CSS Anchor Positioning labels. Drag to rotate, with momentum physics.

• Slarivo Portfolio Hero

  Animated Portfolio Hero Section - Bold Name with Profile Image Overlay A striking, modern portfolio hero component featuring animated blur-in text effects and a profile image overlay. Perfect for developers, designers, and creatives who want to make a bold first impression.

• Slarivo Marquee

  Inspired by https://x.com/dollargill

• Slarivo Gradient Card Showcase

  Displays a set of interactive cards with skewed gradient back-panels, glowing blur highlights, and smooth hover transitions

• Slarivo Experience Hero

  Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This "Obsidian Vault" design features spatial logic animations, narrative apertures, and an immersive WebGL-ready layout. Optimized for high-conversion with a single-purpose CTA and fully responsive Tailwind structure. Perfect for design engineers who demand Awwwards-level aesthetics without the manual overhead.

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Perspective Marquee

  A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.

• Slarivo Pixel Logo Grid

  A "trusted by" showcase with character. 14 brand logos arranged in a 5-column grid with a centered headline. Each card runs a canvas-driven pixel shimmer in the brand's actual signature color on hover , Slack purple, Stripe violet, Spotify green. Muted at rest, full color on touch. Tailwind 4 + shadcn tokens, light & dark mode out of the box.

• Slarivo Growth Hero Section

  Growth Hero Section A responsive hero section component that features a title, descriptive paragraphs, a call-to-action link, and a visually engaging, animated image gallery.

• Slarivo Image Expansion

  Pre-built image expansion & gallery components for modern landing pages — install on demand, no need to generate from scratch.

• Slarivo Kinetic Grid

  An interactive full-screen canvas background of a warping dot grid that bends toward the cursor and ripples outward on click.

• Slarivo Collection Surfer

  A scroll-driven infinite 3D image gallery where cards surf along a perspective track with magnetic, uplift, or simple hover effects.

• Slarivo Linear Carousel

  A smooth-scrolling horizontal 3D card carousel with infinite loop, drag-to-scroll, autoplay, and shared-element card expansion inspired by Linear.

• Slarivo Image Mouse Trail

  An interactive hero section that reveals a trail of images following the cursor as the mouse moves across the container.

• Slarivo 3D parallax effect on hover

  3D parallax effect on hover

• Slarivo Elastic Gallery

  Interactive horizontal image accordion where the active card expands with a dark gradient overlay, title, category chip, and CTA while others collapse.

• Slarivo Expand on hover

  A Expand on hover component for browsing image collections, portfolios, and visual stories, featuring expand, image gallery, image-gallery, hover effect.

• Slarivo Scrollable Card Stack

  An interactive stacked card carousel where cards snap into view on scroll with parallax scale and blur, plus keyboard, touch and dot-indicator navigation.

• Slarivo card-hover

  A card-hover component for grouping related information, actions, and media into reusable surfaces, featuring card, hover effect, hover-effect, image card.

• Slarivo Arch Gallery

  Fanned photo arch with center-forward stacking; hover lifts a card and scales it up.

• Slarivo Scroll Horizontal Gallery

  A horizontal gallery that scrolls sideways as you scroll down. Uses sticky positioning with scroll-linked x translation.

• Slarivo Gallery Modal Accordion

  An interactive image gallery where thumbnails expand accordion-style on hover and open into an animated fullscreen modal with title and description.

• Slarivo Tailwind Image Accordion

  A horizontal image accordion where hovering or focusing a panel expands it and reveals a title and subtitle, built with pure Tailwind CSS group utilities.

• Slarivo Gallery Grid with Captions

  A two-column responsive image gallery section where each tile displays a title and subtitle caption beneath a gradient thumbnail, used for showcasing product screens or portfolio work.

• Slarivo Music Video Pin Stack

  Turn a track list into a show. Thumbnails rise on scroll while title and artist switch in sync — music energy, not a static grid. Preview live, paste into Cursor: https://design-layer.com/en/components/music-video-pin-stack — More motion that doesn't look…

• Slarivo Grayscale Mosaic Gallery

  A four-by-two photo mosaic grid where tiles turn from grayscale to color on hover and open a lightbox dialog with the photo's caption and location.

• Slarivo Halo Reel

  Image cards riding an ellipse. cos θ places each card, sizes it and stacks it, so the near side of the ring is large and the far side small - one number, three properties, always in agreement. It turns on its own, and you can drag it.

• Slarivo Masonry Lightbox

  Responsive masonry image gallery with smooth hover animations and an animated lightbox viewer.

• Slarivo Thumbnail Carousel

  A responsive image carousel with swipe gestures, smooth spring animations, autoplay, and clickable thumbnail navigation.

• Slarivo Image Stack Carousel

  An interactive image stack carousel with layered cards, smooth swipe gestures, and fluid transitions. Perfect for portfolios, travel galleries, projects, and visual showcases.

• Slarivo Image Fan Carousel

  A modern image carousel with a stacked fan layout, smooth transitions, and navigation controls. Perfect for travel galleries, portfolios, projects, and visual showcases.

• Slarivo Circular Split Roll

  Scroll-pinned split gallery: titles orbit one circular path while image cards orbit another, each item easing into focus at the centre. Theme-aware, reduced-motion fallback grid, fully prop-driven.

• Slarivo Slideshow

  An interactive image slideshow where hovering staggered text indicators reveals the matching slide with an animated clip-path transition.

• Slarivo Gallery

  A rotating 3D cylindrical image gallery built with three.js that displays a sequence of photos wrapping around an animated carousel.