SLARIVO / IMAGES

Images Components

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

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo Network Image

  Image component that adapts its resolution and loading strategy in real time based on the visitor's network connection speed.

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo LQIP Image

  Image component with a Low Quality Image Placeholder (LQIP) that shows a blurred placeholder and fades into the full image once it loads.

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Slide Image

  A compound image component with aspect-ratio control and an optional caption for adding media to presentation slides.

• Slarivo Pixel Image

  Here is Pixel Image components

• Slarivo Image Card

  Neobrutalism-styled image card component.

• Slarivo Image Cropper

  This Image Cropper component is a highly interactive and user-friendly tool built entirely with shadcn UI and React. It allows users to upload any image and crop it with precision using adjustable zoom and customizable aspect ratios, including square, 4:3, 16:9, or freeform cropping. The component provides a real-time preview of the cropped area and allows users to download the resulting image directly. Its interface leverages shadcn UI elements such as Card, Button, Select, and Slider, ensuring a clean, modern, and responsive design. This makes it ideal for applications requiring image editing features, such as profile picture selection, social media content creation, or visual content management, providing a seamless and professional user experience.

• Slarivo Image Reveal

  Here is image reveal component

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Text Rotate

  A text component that switches the rendered text from a list.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Hero with image, text and two buttons

  Hero with image, text and two shadcn/ui buttons

• Slarivo Pixel Trail

  You can customize the individual pixels by passing a pixelClassName prop. 1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them as you move your cursor. Each pixel is represented by a single div element, so perf may be impacted when using a large number of pixels, especially on the first render. 2. Keep the z-index of the effect's container lower than the rest of your content, so the pointer-events will captured by all of your other elements.

• Slarivo Pixel Canvas

  Pixel Canvas

• 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 Aspect Ratio

  Displays content within a desired ratio.

• 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 Feature 1

  Basic Feature block with heading, description and buttons on left and image on right.

• Slarivo Circular Reveal Heading

  Circular Reveal Heading

• Slarivo Zoomable Image

  A responsive image component with zoom functionality, built on top of Next.js Image and react-medium-image-zoom. Features - Built on top of Next.js Image - Smooth zoom animations - Keyboard navigation - Screen reader support - Responsive design - Custom zoom controls - Reduced motion support

• Slarivo Feature with image

  Feature block with image and text

• Slarivo AI Gen

  AI Image Gen

• Slarivo AI Image Generator Hero

  Images component from the 21st.dev community.

• 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 Social Links

  Link with image appearing on hover. Inspired by @alexanderolssen and @ln_dev7

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Reveal Wave Image

  An interactive WebGL image component with animated wave distortion, dithering, and a mouse-driven color reveal effect.

• Slarivo Simple UI

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

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Image Crop

  Here is Image Crop component

• Slarivo Lens

  A lens component to zoom into images, videos, or practically anything.

• Slarivo Accordion 03

  Accordion with images and button

• Slarivo Feature 2

  Basic feature section with heading, description and buttons. Image on left

• Slarivo Image Player

  - Image player component, flexible to use takes array of images urls and interval, also you can use any html image tag '<img />' (by default) or '<picture>' or use next 'Image' this on is very recommended (check the demo) as next optimized images makes load fast. 👉 Docs: https://systaliko-ui.vercel.app/docs/blocks/image-player

• Slarivo Wilderness

  On Hover Parallax Hero

• Slarivo Item

  Here is Item component

• Slarivo Image Uploader

  Image Uploader The ImageUploader is a highly interactive and accessible component for handling file uploads. It supports drag-and-drop, file selection through a dialog, and provides animated previews of the selected images. Built with framer-motion, it offers smooth animations for adding and removing files, enhancing the user experience. It's fully themeable using shadcn/ui CSS variables and includes validation for file types and size.

• Slarivo Gallery with image cards

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

• Slarivo useImageUpload

  Hook for image uploading

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo 3D Carousel

  A 3D image carousel

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo Feature with Image Comparison

  Feature block with Image Comparison

• 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 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 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 Feature 197

  A versatile block with an Accordion that can switch between multiple features. Each feature has a heading, text and an image.

• Slarivo Compare

  A comparison component between two images, slide or drag to compare

• 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 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

  Gallery

• 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 features

  A dynamic, scrollable feature showcase with auto-progress animation, * built using React, Framer Motion, and Tailwind CSS. * Highlights multiple features with icon support, images, and a visual progress indicator.

• Slarivo Smooth Scroll Hero

  A React component that creates a smooth-scrolling hero section with parallax background effects. Features responsive images for mobile and desktop, with customizable scroll animations built using Framer Motion.

• 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 FAQ Sections

  Here is FAQ Sections component

• Slarivo Halide Topo Hero

  A monochrome 3D hero component with topographical parallax layers and film grain effects.

• Slarivo Image Comparison Slider

  Image Comparison Slider. Drag the slider to compare the two images.

• 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 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 Pixel perfect Hero

  Interactive hero section with a Canvas-based pixel ripple animation, shimmering glassmorphism header, and logo marquee. Features dynamic theme-color detection, responsive layout, and prefers-reduced-motion accessibility.

• Slarivo PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

• Slarivo 3D Image gallery

  3D Image gallery

• Slarivo Vertical Image Stack

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

• 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 Image Zoom

  Image Zoom

• Slarivo Mac

  Mockup for iMac

• Slarivo ProductCard

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

• Slarivo Card

  Interactive Zoom Image An image component that smoothly zooms in on the cursor's position on hover. It leverages framer-motion for fluid animations and is fully customizable through props.

• Slarivo hover image preview

  A reusable component for hover image preview

• Slarivo MagnifierLens

  Hover over the image to see the magnifying glass effect with optical distortion

• Slarivo Pixel Art Image Component

  This code implements a reusable component, `PixelatedCanvas`, that renders images in a pixelated style. It leverages a custom component (presumably defined elsewhere in the project) to achieve this effect. The component takes an image source URL as input and applies various parameters to control the pixelation, distortion, and visual style. The `PixelatedCanvasDemo` function serves as a simple example showcasing the component's usage. The component processes the image by dividing it into a grid of cells (defined by `cellSize`), each representing a pixel in the final output. It then applies several effects: a 'dropout' effect to randomly remove pixels (`dropoutStrength`), a distortion effect (`distortionStrength`, `distortionRadius`, `distortionMode`), and a jitter effect (`jitterStrength`, `jitterSpeed`). Additionally, a tint effect can be applied (`tintColor`, `tintStrength`). The `interactive` prop suggests the possibility of user interaction, potentially allowing for real-time adjustments or manipulation of the pixel art. The component uses properties to customize the pixel size (`cellSize`), image dimensions (`width`, `height`), shape of pixels (`shape`), background color (`backgroundColor`), and many other visual aspects. This component is suitable for adding a retro or stylized pixel art effect to images in web applications. It could be used in game development, image editing tools, or any application needing a pixel art filter. For example, you could use it to display profile pictures in a pixel art style, create a retro-themed gallery, or add a unique visual effect to website banners.

• Slarivo Aspect Ratio

  Aspect Ratio

• Slarivo Advanced Image Uploader

  ChatGPT said: This Advanced Image Upload & Crop component is a highly interactive and user-friendly tool built entirely with Shadcn UI components. It allows users to upload multiple images either by clicking a button or using the drag-and-drop area, making it versatile for different workflows. Each uploaded image is displayed as a preview in a responsive grid, with options to crop or remove the image.

• Slarivo Frosted Image Reveal

  A component that applies a frosted glass effect to an image, allowing users to reveal the clear image beneath by hovering.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo Analyzing Image

  An animated image-scanning loader that sweeps a highlight bar across a picture icon to indicate image analysis in progress.

• Slarivo Hover Zoom

  Here is Hover Zoom component

• Slarivo Frame

  Animated Blob Image This component uses the CSS clip-path property combined with a CSS animation to create a gentle, morphing blob effect around the image. It's designed to be fully responsive and reusable.

• Slarivo Picture

  A figure primitive that frames an image with a grayscale-to-color hover reveal and an overlaid caption, for blog and editorial reading layouts.

• Slarivo Resize Handle

  A resizable wrapper with draggable resize handles for media elements in a Plate editor, letting users resize images and other blocks by dragging their side bars.

• Slarivo Great UI Image Hover Reveal

  A dual-image avatar surface implementing directional hover reveals and cursor coordinate tracking spring slices.

• Slarivo Before/After Image Slider

  An interactive image comparison component with a draggable divider that reveals a before and after image, supporting horizontal and vertical orientations.

• Slarivo IntegrationHero

  The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously scroll in opposite directions, creating a dynamic carousel effect. The component includes a central call-to-action with a headline, description, and a “Get Started” button, encouraging users to explore integrations.

• 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 Card Carousel

  Here is Card Carousel component

• Slarivo Image Slider

  Image slider for login/signup screens. Rotates lifestyle or product photos alongside the authentication form. Enhances visual appeal and storytelling during user login.

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Project Card

  A visually appealing card component designed to showcase projects. It features a hover-to-zoom image effect, a clear content section, and a call-to-action link, all while adapting to both light and dark themes using shadcn's CSS variables.

• Slarivo Flip Reveal

  Here is Flip Reveal component

• 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 Animated Scroll

  An animated two-panel scroll adventure

• Slarivo AI Chat Image Generation

  Simulates an AI Chat generating and image

• Slarivo Carousel

  Here is Carousel component

• Slarivo Login Form

  Here is Login Form component

• 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 Image loading

  A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, expand to cover gaps, and fade out to reveal the final image with smooth transitions.

• Slarivo Icon 3D Hover

  A 3D animated card component with a rotating cube icon and smooth text fill effect that triggers on hover.

• 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 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 Ink Reveal

  A canvas overlay that lets users brush away a colored mask to reveal content underneath. Mouse movement creates organic, wobbly ink stamps that expand and fade, producing a natural paint-stroke feel. Fully customizable — control brush size, mask color, lifetime, wobble, and more.

• Slarivo Polaroid flick-through

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

• Slarivo Security Card

  Here is Security Card component

• Slarivo Icon Picker

  A Component responsible for making all lucide react icons available for selection and returning the icon name.

• 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 Hero Section

  Scroll-Triggered Image Animation Component This React component uses Framer Motion to create a scroll-linked animation effect. As the user scrolls, an image flies in from off-screen, accompanied by static text content. Error handling is included for image loading failures.

• Slarivo Image Mask

  Here is image mask component

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo image uploader

  This is a reusable ImageUploadField React component built with Next.js and Tailwind CSS. It allows users to upload and preview an image with optional error display, loading skeleton, aspect ratio control, and size restriction. The component supports both file and URL inputs and provides clear UI feedback for upload state, errors, and removal actions. It’s designed to integrate cleanly with forms and supports customization via props like disabled, error, defaultImage, and maxSize.

• Slarivo Hero Section

  Hero Section A full-screen, responsive hero section with staggered text and button animations, designed to capture user attention.

• Slarivo Expandable Gallery

  A gallery component with expandable image items.

• Slarivo SignInPage

  Login Page with an image and a form and a continue with google, github option.

• Slarivo Clip-Path Image

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

• Slarivo Linear Card

  Here is linear card component

• Slarivo Avatar

  An image element with a fallback for representing the user

• 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 Text Animation

  Text Animation

• 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 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 Image Masking

  Here is image masking componen

• 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 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 Editorial Image Hero

  A hero section with a full-width landscape image above and a top-aligned tagline paired with a right-aligned serif headline, description, and call-to-action buttons below.

• Slarivo Image Reveal

  A responsive image hover component that creates a smooth circular reveal effect with a blurred overlay mask that follows the mouse cursor.

• Slarivo Image Spotlight

  A React TypeScript component that creates an engaging spotlight effect on images.. The image appears blurred by default, but reveals sharp details in a circular area that follows the user's mouse cursor. Includes subtle 3D perspective transforms for enhanced visual appeal.

• 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 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 Vertical accordion

  here is interactive vertical accordion

• Slarivo Hero Modern

  Here is Hero Modern 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 Hero Section

  A powerful hero section component built with shadcn/ui. Create stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Each variant is designed to make a strong first impression while maintaining shadcn's signature aesthetic. Built with Tailwind CSS, this component delivers pixel-perfect, responsive hero sections that adapt beautifully across all devices. The clean, modern design principles ensure your hero section effectively communicates your message while maintaining visual harmony with other shadcn components.

• 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 Spotlight Card

  advanced React component designed to create an engaging and modern card interface. It features a unique spotlight glow effect that intelligently tracks the mouse pointer across the screen, highlighting the card with a configurable hue. Part of the EaseMize UI library, it supports several preset glow colors, predefined responsive sizes ('sm', 'md', 'lg'), and allows for completely custom dimensions via width, height, or className props. The underlying CSS leverages custom properties for a highly dynamic and performant visual effect.

• Slarivo Interactive Hover Button

  A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

• Slarivo BG Patterns

  A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any section using pure CSS gradients—no images or external assets required.

• 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 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 Fullscreen Calendar

  A clean and responsive fullscreen calendar component for React applications. Built with TypeScript and Tailwind CSS, it provides a spacious layout perfect for displaying events or navigating through dates. Features Fullscreen layout with generous day cells for content Easy month navigation with previous/next controls "Today" quick access button Responsive grid layout that adapts to screen size Visual highlighting for current date and selected dates Built with TypeScript and Tailwind CSS Perfect for building event dashboards, scheduling interfaces, or any application requiring a prominent calendar view.

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo AI Chat Input

  Animated and interactive AI chat input 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 Floating Icons Hero Section

  Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, or integration-focused products

• Slarivo Interactive Selector

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

• Slarivo Limelight Nav

  A sleek and modern navigation bar with a unique "limelight" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, providing a smooth and intuitive user experience. Part of the EaseMize UI library, it's incredibly easy to integrate into your projects and customize to fit your brand's aesthetic. The component is built with TypeScript and is fully typed for a better developer experience

• 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 Modem Animated Footer

  A modern, fully customizable footer component with animated background text, social links, navigation menu, and a floating brand icon. Features smooth hover animations, responsive design, and dark mode support using shadcn's neutral color palette.

• 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 Circular Gallery

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

• 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 Futurastic Hero Section

  AuroraHero: Dynamic Gradient & Starfield Hero Section Captivate your audience from the moment they land on your page with AuroraHero, a stunning and interactive hero component for React. This component combines a mesmerizing, animated radial gradient background with a subtle, shimmering starfield, creating an immersive and modern visual experience that grabs attention. Features Animated Aurora Gradient: The background features a beautiful radial gradient that smoothly transitions through a predefined palette of colors, creating a dynamic "aurora" effect that adds depth and visual interest. This animation is handled seamlessly by Framer Motion. Subtle Starfield Background: A captivating 3D starfield, powered by React Three Fiber and Drei, provides a subtle yet engaging backdrop, enhancing the cosmic and futuristic feel of the component. Engaging Call to Action: A prominent headline and descriptive text are accompanied by a call-to-action button that dynamically changes its border and box-shadow color to match the animating background gradient. The button also includes subtle hover and tap animations for improved user feedback. Responsive Design: The component is built with responsiveness in mind, ensuring it looks fantastic and performs well on various screen sizes. How it Works AuroraHero leverages the power of: Framer Motion: For all the fluid animations, including the color transition of the background gradient, button border, and box-shadow. useMotionValue and useMotionTemplate are key here, linking the dynamic color to various CSS properties. React Three Fiber & Drei: For rendering the performant and visually appealing 3D starfield, adding an extra layer of polish to the hero section. This component is ideal for SaaS landing pages, product showcases, or any website where you want to make a bold, modern, and memorable first impression. Its elegant animations and engaging visuals are sure to leave a lasting impact on your visitors.

• Slarivo Glowing Shadow

  The component features a rotating, color-cycling glow that responds beautifully to hover interactions with enhanced blur, opacity, and scale effects.

• 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 Hero Section

  Hero component with sleek animation

• Slarivo Animated Feature Carousel

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

• Slarivo Modern & Stunning sign in

  Dark theme modern and stunning sign-in component.

• 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 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 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 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 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 layout preloader

  An animated image preloader with GSAP transitions, featuring sequential image reveals, smooth zoom effects, and grid-based layout animations with interactive restart functionality

• Slarivo Dock

  This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight 3D arc effect using perspective transforms, which makes the layout feel more dynamic and futuristic. Each icon is wrapped with shadcn/ui Buttons and Tooltips for accessibility and consistency, while Framer Motion adds natural hover animations. When you hover over an item, the icon subtly tilts, scales up, and gains a glowing border ring, creating a magnetic feel that draws the eye. Clicking an icon highlights it with a small glowing dot beneath, serving as a minimal but effective active state indicator. The combination of tilt, glow, blur, and arc design makes this component stand out as both functional and visually engaging, perfect for dashboards, apps, or landing pages where you want a unique, premium navigation experience.

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Slideshow

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

• Slarivo Modern Hero

  Here's a description for your SmoothScrollHero component, tailored for 21st.dev: SmoothScrollHero: Immersive Parallax & Scroll Effects in React Elevate your web projects with SmoothScrollHero, a React component that delivers a captivating and highly performant smooth scrolling experience. Built with Lenis for silky-smooth scroll animations and Framer Motion for dynamic, interactive visuals, this component is designed to bring your content to life with stunning parallax effects and a responsive layout. Features Effortless Smooth Scrolling: Integrates ReactLenis for a truly fluid and customizable scroll feel, enhancing user engagement and content readability. Dynamic Parallax Imagery: Showcases a large, central image that transforms its clip-path, background-size, and opacity based on scroll position, creating an eye-catching focal point. Layered Parallax Images: Multiple smaller images animate independently with varying scroll speeds and fades, adding depth and a sense of movement to your hero section. Interactive Navigation: A fixed navigation bar with a "Launch Schedule" button provides a smooth scroll-to-section functionality. Animated Content Reveal: Individual schedule items gracefully animate into view as they enter the viewport, drawing attention to key information. Responsive Design: Optimized to look great and perform well across various screen sizes. How it Works SmoothScrollHero combines several powerful libraries to achieve its effects: react-lenis: Provides the core smooth scrolling functionality, ensuring a consistent and pleasant user experience. framer-motion: Powers all the motion and animation, including useScroll, useTransform, and useMotionTemplate hooks to link scroll position to CSS properties like clipPath, backgroundSize, opacity, and translateY. This component is perfect for creating impactful landing pages, portfolios, or any section where you want to create a visually rich and engaging introduction to your content.

• 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 Modern Animated Hero Section

  RainingLetters: Dynamic Text Scramble & Matrix Rain Effect The RainingLetters component offers a captivating visual experience, combining a "text scramble" effect with a classic "Matrix rain" animation. It creates an engaging and futuristic ambiance, ideal for hero sections, landing pages, or any digital space that aims to convey innovation and a tech-savvy vibe. What It Is: This component creates a full-screen, immersive background where a stream of characters continuously "rains" down the screen. Overlaying this dynamic background is a central title that undergoes a scrambled text animation, cycling through a series of predefined phrases. This blend offers both constant background motion and an intriguing foreground message. Key Features: Full-Screen Matrix Rain Effect: Hundreds of characters (alphabets, numbers, symbols) continuously fall from the top of the screen. Characters randomly change as they loop from bottom to top, creating a true "raining" effect. Dynamic Character Appearance: A select few "active" characters at any given moment become brighter, larger, bolder, and pulse with a glowing green color, mimicking the iconic Matrix digital rain. Other characters remain a subtle grey, adding depth. Text Scramble Title Animation: A prominent, centered title uses a unique "scramble" animation. Words transition smoothly from one phrase to the next, with individual letters appearing to rapidly cycle through random characters before settling on the final letter. The TextScramble class handles this intricate character-by-character animation, offering a sleek and eye-catching way to display messages. Customizable Phrases: The central scrambled title can easily be updated with your own array of messages, making it versatile for different contexts (e.g., brand slogans, key features, or calls to action). Responsive and Performance-Optimized: Designed to fill the entire viewport, adapting seamlessly to various screen sizes. Animations are managed with requestAnimationFrame for smooth performance. Tailwind CSS Integration: Leverages Tailwind CSS for styling, allowing for easy customization of colors, fonts, and sizes. Modern React Hooks: Built using useState, useEffect, useCallback, and useRef for efficient state management and DOM manipulation. Why It's Cool for Devs: This component is a fantastic demonstration of several advanced front-end techniques: Complex UI Animations: Showcases how to create intricate, synchronized animations using pure JavaScript and requestAnimationFrame within a React environment. Class-Based Utility (TextScramble): Provides a clear example of encapsulating animation logic in a reusable class, integrating it smoothly into a functional React component. Dynamic Backgrounds: Illustrates how to build engaging and non-intrusive animated backgrounds that enhance user experience. Performance Considerations: Highlights the use of techniques like willChange CSS property and requestAnimationFrame to ensure smooth animations.

• Slarivo Modern Timeline

  A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.

• Slarivo Button

  Here is modern liquid animated button component

• Slarivo flow-gradient-heroSection

  An authoritative UI component featuring fluid liquid gradients and kinetic typography. Designed for premium dark-mode experiences, it combines a sophisticated grainy texture with bold messaging that commands attention. This section captures a modern, leadership-focused aesthetic, ideal for high-stakes tech brands or creative agencies looking for a "smart," professional edge.

• Slarivo Interactive Text Particle

  A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts responsively to screen size, supports rich color palettes, and offers fully customizable animation dynamics—all with zero external dependencies. Perfect for landing pages, hero sections, and attention-grabbing banners.

• Slarivo Modern Background Paths

  BackgroundPaths: Dynamic SVG Paths & Animated Hero Section The BackgroundPaths component creates a stunning and subtly animated background using dynamically generated SVG paths. It perfectly complements an engaging, animated hero title and a stylish call-to-action button, making it an excellent choice for a modern header or landing section on any website. What It Is This React component uses framer-motion to generate and animate a series of elegant, flowing SVG paths that gently shift and fade in the background. Overlaying this dynamic backdrop is a customizable title where each letter animates into view with a smooth, spring-like effect. Below the title, a stylish button with interactive hover effects invites user engagement. Key Features Animated SVG Background: Dynamic Paths: The FloatingPaths sub-component creates 36 unique SVG <path> elements. Their shapes, stroke widths, and opacities are all dynamically generated, creating a sense of depth and variation. Continuous Motion: Each path animates infinitely with varying durations, resulting in a mesmerizing, non-repeating flow of lines across the background. Light/Dark Mode Support: The paths automatically adapt their color to match the surrounding text, seamlessly integrating with both light and dark themes. Spring-Animated Hero Title: Letter-by-Letter Entrance: The main title (controlled by the title prop) animates each individual letter into view with a "spring" effect, creating a lively and engaging entrance. Gradient Text: The title text uses a gradient fill that changes based on the theme, providing a modern and polished look. Customizable: Easily change the hero text by passing a different title prop. Stylish Call-to-Action Button: A beautifully designed button, "Discover Excellence," is positioned below the title. It features subtle background gradients, a backdrop-blur effect for a frosted glass look, and a shadow for depth. Interactive Hover Effects: On hover, the button scales slightly, its shadow deepens, and an arrow icon to the right smoothly translates, signaling interactivity. Theme-Aware: The button's colors and hover states work flawlessly in both light and dark modes. Responsive Layout: The component is designed for responsiveness, ensuring the title and button are well-centered and legible across various screen sizes. Framer Motion Integration: Extensive use of framer-motion handles all animations, providing smooth, hardware-accelerated transitions and complex sequence orchestration. Why It's Cool for Developers This component is an excellent demonstration of: Generative SVG Animation: Learn how to programmatically create and animate complex SVG paths for unique background effects. Sophisticated framer-motion Usage: It showcases advanced framer-motion features like pathLength, pathOffset, and spring transitions for precise control over animations. Layered UI Design: See how to combine background elements (SVG paths) with foreground content (text and a button) while maintaining proper z-index for visual hierarchy. Theming and Responsiveness: Implement design that gracefully adapts to different themes and screen sizes. Component Composition: It breaks down a complex UI into smaller, manageable sub-components (FloatingPaths).

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• Slarivo Multimodal AI Chat Input

  A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo LumaBar

  This is a futuristic floating navigation bar designed for modern web and mobile interfaces. It features a glassmorphism pill-shaped container, with a glowing gradient indicator behind the active icon. Icons scale up smoothly when active, and tooltips appear on hover to show their labels. The component is fully responsive, visually striking, and provides a dynamic, interactive navigation experience.

• Slarivo HolographicCard

  An interactive holographic UI card component that reacts to cursor movement with subtle 3D tilt, dynamic glow, and iridescent sheen for a futuristic, tactile micro-interaction.

• 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 3D Marquee

  Here is 3D Marquee component

• 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 Gooey Marquee

  The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.

• Slarivo Interactive Scrolling Story Component

  This React component creates an immersive, full-page scrolling animation designed to showcase a series of features or messages. As the user scrolls down, the content on the left smoothly transitions with a fade and slide effect, while the corresponding image on the right slides into view.

• 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 Feature Card

  Animated Feature Card This component displays a feature or benefit in a visually engaging card format. It's designed to be highly reusable, accepting props for its content, image, and color theme. The hover animation, powered by framer-motion, adds a delightful interactive element.

• Slarivo MultiOrbitSemiCircle

  This component renders three concentric semi-circle orbits populated with app icons that display tooltips on hover. It includes a large blurred radial gradient in the background, fading upward to overlap the heading and description for added depth. The design adapts for light and dark modes, using black or white fades to keep the glow visible in both themes.

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Minimal Dock

  This component renders a modern, animated dock with icon tooltips and a reflection effect, inspired by macOS.

• 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 Animated Hero Section

  PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. To celebrate the 21st Dev anniversary, here's a description of your PromptingIsAllYouNeed component, perfect for sharing! PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. What It Is: This component renders a dynamic canvas where a bouncy ball navigates the screen, interacting with four paddles positioned at each edge. The core phrase, "PROMPTING IS ALL YOU NEED," is displayed in a retro pixel-art style. As the ball collides with these pixels, they change color, simulating a "hit" effect, much like breaking blocks in a game of Breakout. The paddles on all four sides automatically track and follow the ball's movement, keeping the action continuous and mesmerizing. Key Features: Pixel Art Text: The central message "PROMPTING IS ALL YOU NEED" is rendered using custom pixel maps for each letter, offering a distinct retro aesthetic. Interactive Gameplay: A ball continuously bounces around the screen, changing direction upon hitting the canvas edges, the paddles, or the pixel-art letters. Dynamic Paddles: Four automated paddles (top, bottom, left, right) intelligently track the ball's position, ensuring constant interaction and deflections. Breakable Pixels: Each time the ball hits a pixel in the text, its color changes from white to gray, visually indicating a "hit." Responsive Design: The canvas and all game elements (pixel size, ball radius, paddle dimensions, and speeds) dynamically adjust to fit any screen size, ensuring a seamless experience across devices. Configurable Colors: Easily customize the background, ball, paddle, text, and hit-pixel colors directly within the component's constants. Smooth Animations: Utilizes requestAnimationFrame for fluid game loops, providing a smooth and engaging visual experience.

• Slarivo Glass Cards

  Neomorphic and glassmorphism stacked cards with smooth GSAP animations and interactive hover effects

• Slarivo Micro Expander

  Here is Micro Expander component

• Slarivo Isometric Wave Grid Background

  "Retro-futuristic isometric wave grid with real-time mouse distortion physics and ambient breathing animation. Features canvas-based rendering with gradient fade effects, smooth bezier interpolation, and vignette depth overlay. Mouse-reactive repulsion field creates dynamic 3D-depth illusion with non-linear force falloff. Customizable color (RGB), speed multiplier, and grid density. Zero-dependency, single-file portable. Built for shadcn/ui with TypeScript type safety. Ideal for hero sections, sci-fi dashboards, and cyberpunk interfaces."

• Slarivo Member List

  Here is modern Member list by indev ui

• Slarivo Particle Hero

  The component includes all the stunning visual effects like animated particles, rotating spotlights, and the gold mode toggle functionality,

• Slarivo Feature Spotlight

  Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.

• Slarivo Glass Card

  A glassmorphism card component with frosted glass effect and backdrop blur. Includes flexible sub-components (header, title, content, footer) for building modern transparent UI cards.

• Slarivo Premium Auth

  A modern, animated authentication component with a beautiful glass-morphism design. Features include: Toggle between Login and Sign Up modes Form validation with error handling Password visibility toggle Social login options (Google and GitHub) Loading states and smooth animations Success/error message handling Responsive design with mobile support Beautiful background effects and particle animations Built with React, Framer Motion, and Tailwind CSS Component Type: UI Component Tags: authentication login signup modal glass-morphism animation form social-login premium tailwind framer-motion Cover Image Description: The cover image should showcase the component's glass-morphism design with: The main authentication modal with a blurred background The neural network pattern and moving gradient orbs The login form with input fields and social login buttons The premium badge with sparkle animation A dark theme with purple/indigo gradients Video Preview Description: The video should demonstrate: Opening animation of the modal Switching between Login and Sign Up modes Form validation and error states Password visibility toggle Loading states during authentication Success message animations Social login button interactions Background particle animations Hover effects on buttons and inputs Closing animation Technical Requirements: React 16.8+ Framer Motion Tailwind CSS Lucide React icons Usage Example: import { PremiumAuth } from './premium-auth'; function App() { return ( <PremiumAuth onClose={() => { // Handle modal close console.log('Modal closed'); }} /> ); } Features: Authentication: Email/Password login User registration Social login (Google & GitHub) Form validation Error handling UI/UX: Glass morphism effect Animated background Floating particles Smooth transitions Loading states Success/Error messages Responsive Design: Mobile-friendly Adaptive layout Touch-friendly inputs Proper spacing Accessibility: Keyboard navigation ARIA labels Focus management Error announcements Performance: Optimized animations Lazy loading Efficient state management Minimal dependencies This component is perfect for: Premium SaaS applications Modern web applications Authentication flows User onboarding Premium feature access Subscription-based services The component is designed to be: Easy to integrate Highly customizable Well-documented Performance-optimized Accessible Mobile-responsive

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Flip Gallery

  Flip animation

• 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 Lazy Image

  A lightweight lazy-loading image with a skeleton shimmer and smooth fade-in. Supports placeholders, in-view loading, and responsive aspect ratios out of the box.

• Slarivo Progressive Blur Card

  Progressive Blur Card A clean and modern card component with a smooth progressive blur effect that makes images pop while keeping text perfectly readable. Great for travel apps, portfolios, and landing pages. This card comes with a subtle gradient overlay, bold typography, and a simple call-to-action button that feels natural on any UI.

• Slarivo Upload Input

  This component is a modern and elegant file upload card built with React and Tailwind CSS. It allows users to drag and drop or click to select an image file. Upon selection, it shows a smooth progress animation for uploading and displays a preview of the uploaded image inside a card-style container.

• Slarivo Frosted Image Reveal

  A visually striking component that applies an interactive frosted glass effect to an image. The image is revealed locally as the user mouses over, creating an engaging "defrosting" interaction using advanced SVG filters.

• Slarivo Tilt

  3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.

• Slarivo iPhone 15 Pro

  A mockup of the iPhone 15 Pro

• Slarivo Safari

  A safari browser mockup to showcase your website.

• Slarivo Iphone Mockup

  A configurable Iphone mockup

• Slarivo Card

  Article Card This card component is designed to showcase an article, event, or location in a visually appealing and structured format. It's fully responsive and uses shadcn/ui theme variables for seamless light/dark mode integration.

• Slarivo Safari

  Mockup of Safari

• Slarivo Showcase Card

  An elegant Bali Island showcase card with smooth animations, interactive elements, and a gradient text header that presents travel information in a visually appealing dark-themed interface.

• Slarivo Animated 3D MacBook Air

  Showcase a stunning, purely CSS-driven 3D animation of a MacBook Air with this React component. Leveraging Tailwind CSS for styling and custom CSS keyframes for complex animations, this component brings a realistic and dynamic laptop to life. It includes animations for full 360-degree rotation, lid opening and closing, a screen reflection effect, and even subtle keyboard key presses. Ideal as a hero element, a sophisticated loader, or just a cool visual flourish for your React applications.

• Slarivo Tilt Effect

  Here is Tilt Effect component

• Slarivo Browser

  The Browser component lets you showcase website screenshots or any other content within a realistic browser-style frame.

• Slarivo Auto Layout Card

  Here is Auto layout interactive card

• Slarivo Shirt Parallax Card

  The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.

• Slarivo Card

  Article Card A responsive card component designed to display articles or blog posts, featuring an image, title, description, and author details. It adapts seamlessly to both light and dark themes.

• Slarivo 3D parallax effect on hover

  3D parallax effect on hover

• Slarivo Macbook Keyboard

  Here is macbook keyboard component

• Slarivo Card

  Property Card A visually polished card component designed to showcase properties, rentals, or listings. It features a responsive layout, theme support for light and dark modes, and subtle animations on hover and load.

• Slarivo Card

  Property Card A modern, responsive card component designed to showcase property listings with key details and a call-to-action.

• Slarivo Card

  Music Card A visually engaging card component for displaying music tracks, featuring hover animations and a theme-adaptive design.

• Slarivo FlipHover

  A card component that performs a 3D flip animation on hover, rotating 180 degrees * around the Y-axis while translating upward.

• Slarivo stack card

  A reusable animated stack card

• Slarivo Browser Preview

  Browser Preview Component

• Slarivo File Thumbnail

  A compact file preview thumbnail shell for externally generated images, loading states, and fallback states. Renders a square preview at any aspect ratio with a blur-in reveal on first image load.

• Slarivo Card Hover

  Here is hover card component

• Slarivo Hotel Card UI Component

  This code implements a reusable UI component for displaying hotel information, along with a theme toggle. The `HotelCard` component takes hotel data as props (image URL, hotel name, location, rating, etc.) and renders a visually appealing card. It leverages styling and layout features to create a clean and responsive design. The component uses image placeholders, handles different screen sizes responsively, and includes interactive elements like hover effects. A theme toggle button dynamically switches between light and dark themes using the `next-themes` library. The `HotelCard` component is designed to be easily integrated into any application that displays hotel listings or travel information. The application renders a list of sample hotel cards using data stored in an array. It uses a functional component approach and JSX for UI rendering. The `useTheme` hook from `next-themes` manages the theme state. Lucide React provides the icons. This is useful for showcasing hotels in travel websites, travel apps, or hotel booking platforms. It could also be integrated with a backend system to fetch hotel data dynamically.

• Slarivo Liquid Reveal

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo Hover Card

  Here is hover card component

• Slarivo Great UI Macbook Mockup

  A realistic 3D Macbook Pro device frame mockup with aluminum casing, keyboard base, and dual-pane WhatsApp Web chat UI.

• Slarivo Great UI Mobile Mockup

  An interactive mobile device frame mockup with a realistic smartphone chassis, status bar, and WhatsApp mobile chat UI.

• Slarivo Frosted Card

  Frosted Card A visually polished card component that displays an image with layered, stylized text. It features an interactive 3D tilt effect on mouse hover and is fully responsive and theme-adaptive.

• Slarivo Presence Card

  Animated Presence Card Description: A visually striking card component designed to showcase a primary message or product. It features a prominent image, clear typography, and an interactive 3D tilt effect on mouse hover, powered by framer-motion. The component is fully responsive and uses shadcn/ui theme variables for seamless light and dark mode integration.

• Slarivo Image Metadata Preview

  An image preview card that lifts to reveal a filename, description, and EXIF-style metadata panel with smooth Motion animations.

• Slarivo Magic Keyboard Component

  A sleek, responsive keyboard component built with React and Tailwind CSS that replicates the look and feel of a physical keyboard. This component features Lucide React icons for arrow keys and maintains the original design's aesthetics with smooth hover and active states.

• Slarivo Ghost Reveal

  A soft, feathered image reveal for React. Instead of a fade or a hard wipe, a tall cloudy alpha mask slides across the element via animated mask-position, so content bleeds in through a ghostly, feathered edge — like the image is forming out of fog. Zero dependencies (React only). Scroll-triggered once via IntersectionObserver by default, or drive it yourself with a controlled `play` prop. Reveals from any direction (up, down, left, right) using vertical and horizontal feather masks with no element rotation (so nothing clips), tunable softness (scale/mask-size), duration and CSS easing, an onHidden callback for swapping the child exactly when nothing is visible, and a graceful opacity fallback under prefers-reduced-motion.

• Slarivo Chat Messages

  Animated iMessage-style chat conversation that reveals messages one by one inside an iPhone device frame.

• Slarivo AI Generate Overlay

  Animated AI-generation overlay that blurs a source image under a shimmering dot grid and a pulsing "Generating…" pill before fading in a freshly generated image.

• Slarivo Domain Stack

  A depth-stacked set of browser address bars, each narrowing and fading to show a different subdomain with a lock icon and traffic-light dots on the front window.

• Slarivo Alternating Features Section

  A features section with alternating side-by-side rows pairing headings and descriptions with images, animated into view on scroll.

• Slarivo IMG Reveals

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo Iphone

  iphone screen

• Slarivo Shutter Reveal

  Shutter Reveal is a React component that animates image loading using vertical shutter panels. It creates a cinematic reveal effect with customizable direction, color, timing, and easing. Ideal for portfolios, galleries, or any UI that deserves a dramatic entrance.

• Slarivo Tilt

  3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.

• Slarivo Iphone Mockup

  A configurable Iphone mockup

• Slarivo Iphone Mockup

  A configurable Iphone mockup

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Product Bounce Card

  The ProductBounceCard is a sleek, animated display card designed to showcase products with a lively and modern 3D bounce effect. Using Framer Motion, it smoothly animates the product image with gentle vertical movement and subtle Y-axis rotation, creating…

• Slarivo Image Stream Hero

  Two rails of images ride out of the vanishing point at the centre and sweep to both edges, growing and turning as they approach. Perspective does the sweep and the growth at once, and the loop never stops.

• Slarivo Card Studio

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

• 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 Compare Slider

  A before/after image comparison slider with a draggable handle, orientation and label support for revealing two overlaid states.

• Slarivo QR Code

  QR code generator with rounded finder patterns and dot-style data modules.

• Slarivo The Item one

  A The Item one component for grouping related information, actions, and media into reusable surfaces, featuring card, travel, image card, image-card.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo ReUI Aspect Ratio

  Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

• Slarivo Card

  Flexible container component for grouping related content and actions.

• 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…

• 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…

• 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…

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration…

• 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…

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Compare Slider

  A before/after image comparison slider with a draggable handle, orientation and label support for revealing two overlaid states.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• 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 Reveal Image

  A scroll-driven image that expands its width, zooms out, and animates its border radius with spring physics as it enters the viewport.

• Slarivo Hero Section with Device Mockups

  A full-screen hero section with a navbar, animated blur-in headline and CTA buttons, and a desktop dashboard screenshot overlaid with an iPhone device mockup.

• Slarivo Image reveal slider

  A before-and-after image slider that reveals a grayscale overlay, from the official Motion examples catalog.

• 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 Stack Loader

  Stack-to-spread image intro loader with GSAP SplitText word animations and staggered image choreography. Reveals your own content underneath once it finishes.

• Slarivo Draggable Photo Stack

  An interactive draggable photo stack with tactile swipe physics, fan view, shuffle animation, fullscreen previews, and responsive touch controls.

• Slarivo Pixelated Image Effect

  A Pixelated Image Effect component for presenting photos, illustrations, screenshots, and responsive media, featuring animated transitions, pointer-responsive feedback, responsive behavior.

• Slarivo Photo Remix Grid

  An interactive photo-effects mosaic that slices any image into mixed visual treatments. Shuffle the composition, paint individual tiles, add custom images, adjust grid density, and export the finished artwork.

• Slarivo Hover Expand Gallery

  A row of hairline-separated panels with vertical labels. Hover or tap one and it absorbs the free space to reveal its image while the rest stay rail-width; below 1024px the same list becomes a vertical accordion. Pure CSS flex-grow transition - no…

• Slarivo Item Image

  A list of items with a thumbnail image, title, subtitle and trailing metadata, useful for music tracks, files or search results.

• 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 Grainient Images Section

  Stop flat image grids. Gradient tiles rush toward center on scroll, then the headline lands — a gallery with gravity. Preview live, paste into Cursor: https://design-layer.com/en/components/grainient-images-section — More motion that doesn't look like…

• Slarivo Phone Scroll Hero

  A hero whose 3D-tilted phone mockup flattens and climbs up over the headline as the page scrolls. Theme-aware, with a reduced-motion fallback.

• Slarivo Cinematic List

  Expandable destination list where each row reveals a full-width cinematic background image and travel metadata on hover.

• Slarivo Hero Carousel

  A full-bleed editorial hero driven by a filmstrip: cards share one top edge, the focused card unfurls to full height while its neighbours stay clipped to half, and the whole background re-grades to the focused photo. Wheel, drag, click and arrow keys.