SLARIVO / SLIDERS

Sliders Components

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

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

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

  - Animated hover slider

• Slarivo Autoscroll Slider

  An infinite auto-scrolling carousel that continuously loops through slides using Embla and pauses on hover.

• Slarivo Infinite Slider

  An infinitely scrolling marquee slider that loops any set of children horizontally or vertically, with adjustable speed, gap, direction, reverse, and slow-on-hover.

• Slarivo book slider

  click to scroll

• Slarivo Slider

  Neobrutalism-styled slider component.

• Slarivo Side By Side Slide

  An image comparison slider with a spring-animated divider that follows the cursor on hover to reveal before/after images.

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

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Dual Range Slider

  An enhancement slider that allows you to select a range of values.

• Slarivo Image Swiper

  Image swiper card for a real estate website

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

  Here is colored feedback slider component

• Slarivo Slider [react-aria-components]

  A slider allows a user to select one or more values within a range. The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.

• Slarivo Slider

  A draggable control that uses rubber banding for out-of-bounds feedback.

• Slarivo Audio Book Player

  The Audio Book Mini Player is a compact, sticky component designed for seamless listening experiences. It displays the chapter title and author, includes a progress slider for seeking, and offers adjustable playback speed (1x, 1.5x, 2x). Fully compatible with light and dark themes, it integrates cleanly into any interface without taking up much space. Ideal for audiobook apps, podcasts, or educational platforms, it combines functionality with a minimalist, modern design for effortless user interaction.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Angle Slider

  Here is Angle Slider component

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Spline Scene

  A React component that integrates Spline 3D scenes. Demo component combines interactive 3D visualization with a spotlight effect and responsive text content. Features: • Lazy-loaded Spline integration • Responsive layout with flex columns • Gradient text effects • Spotlight background effect • Dark theme optimized

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

  A sleek, animated feature section showcasing steps with engaging visuals and smooth transitions. Features - Auto-advancing steps with progress - Smooth animations and transitions - Responsive design - Image carousel with transitions - Customizable timing and appearance - shadcn/ui theme integration - Progress indicators - Checkmark for completed steps

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

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Scroll Morph Hero

  A stunning hero section that morphs from a scattered layout to a circle, and finally to a scroll-driven interactive rainbow arc.

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

  A customizable carousel with microinteractions and slider.

• Slarivo Slider

  An input where the user selects a value from within a given range.

• Slarivo Full Screen Scroll FX

  React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props

• Slarivo Animated Feature Carousel

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

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

  Animated Gallery with scroll trigger animation

• Slarivo Color Picker

  Inputs component from the 21st.dev community.

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

  A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Slideshow

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

• Slarivo Feature Carousel

  An animated feature carousel with smooth slide transitions.

• Slarivo Images Slider

  A full page slider with images that can be navigated with the keyboard.

• 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 Image Comparison Slider

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

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

  Adaptive Layout: Automatically adjusts visible testimonials (1-3) based on screen size Smooth Animations: Spring-based transitions with drag-and-drop functionality Auto-Play: Rotates testimonials every 4 seconds with pause on interaction Interactive Controls: Navigation buttons and dot indicators with hover effects Mobile Optimized: Touch-friendly swipe gestures with reduced swipe threshold Visual Feedback: Animated user avatars and active slide indicators Accessible: ARIA labels and keyboard-navigable controls Modern Design: Gradient accents, card shadows, and clean typography Performance: Optimized image loading with error fallbacks

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Image Comparison Slider Vertical

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

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Volume Component

  A smooth, draggable volume slider component with framer-motion animations and shadcn styling.

• Slarivo Range Slider

  A reusable component for slider

• Slarivo Slider

  Here is Slider component

• Slarivo Vertical Volume Slider with Mute Toggle

  A sleek vertical volume control component featuring a rotated range slider with smooth visual feedback. Includes an interactive volume icon that toggles between normal and muted states, automatically remembering the previous volume level. Perfect for media players, audio applications, or any interface requiring intuitive volume control with a modern vertical design.

• Slarivo Audiobook Card

  AudiobookCard An AudiobookCard is a visually rich component designed to display the progress and details of an audiobook or any reading material. It features a prominent cover image, title, author details, and an animated, segmented progress bar. The component is built to be highly reusable and customizable through props.

• Slarivo Compare Slider

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

• Slarivo ChatGPT Model Selector

  A ChatGPT-inspired model intelligence picker with five magnetic tiers, animated color progression, sparkles, and an Ultra celebration.

• Slarivo Slider

  A customizable range input component for selecting numeric values with multiple variants and sizes

• Slarivo Slider

  Slider component built on Radix UI — supports single value and range selection.

• Slarivo Slider

  Slider component built on Radix UI — supports single value and range selection.

• Slarivo BeUI Range Slider

  Sliders component from the 21st.dev community.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo 8-bit Slider

  Pixel-art slider from 8bitcn.com — chunky track and thumb with retro 8-bit styling. Wraps Radix Slider primitive.

• Slarivo HeroUI Slider

  Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full keyboard and screen-reader support. Built on React Aria.

• Slarivo HeroUI Slider

  Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full keyboard and screen-reader support. Built on React Aria.

• Slarivo DialKit

  A floating control panel to tune animation and UI parameters in real time. Wire sliders, toggles, color pickers, spring editors and easing curves directly to your values, organize them into nested folders, and export presets as JSON. Auto-detects control types from a plain config object and works with React, Solid, Svelte and Vue.

• Slarivo Claude Model Selector

  A Claude-inspired effort picker with six magnetic levels, spring snapping, keyboard controls, and an animated Ultracode pixel field.

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Video Player

  A video player component made with framer motion and tailwind css.

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Interactive Selector

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

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

  Hero Section Component This component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons, social proof statistics, and a visually appealing image collage.

• Slarivo Hero Section

  Hero component with sleek animation

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

  Here is Sticky Scroll component

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Carousel card

  UI component for card with carousel effects

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• 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 Apple Liquid glass switcher

  Here is Apple Liquid glass switcher component

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

  Here is modern liquid animated button component

• Slarivo Slide Button

  Here is Slide Button component

• Slarivo Animated Counter

  A simple animated counter component.

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

  Carousels component from the 21st.dev community.

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Image Comparison

  Interactively compare two images with a draggable slider to reveal differences.

• Slarivo Slider Number Flow

  Slider with animated value number by Number Flow

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

  Here is Smooth Scroll card

• Slarivo Carousel

  Here is Carousel component

• Slarivo Select

  Reusable select option component built with framer motion and tailwindcss

• Slarivo Bento Grid

  Grids & Bento component from the 21st.dev community.

• Slarivo Dynamic Text Slider

  This is a React component that creates a full-screen hero section. It features a unique, interactive headline where the words "Video Editor" are revealed inside a draggable range slider. The slider tilts dynamically as the user moves the handles, and the handles scale up on hover and drag for better visual feedback. The component is designed to be responsive and visually engaging.

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

  Here is scrolling stacking card

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Registration Stepper

  Registration Stepper A responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using an accordion-style layout with smooth transitions powered by framer-motion. The component is built with shadcn/ui principles, ensuring it's theme-adaptive and highly customizable through props.

• Slarivo SnappySlider

  SnappySlider is a highly interactive range input component that combines precise value control with intuitive visual feedback. It features: - Snap-to points for accurate value selection - Visual markers for predefined values - Direct numeric input with keyboard controls - Touch and mouse drag support - Customizable step sizes and ranges - Out-of-bounds value indication - Double-click to reset functionality - Prefix/suffix label support

• Slarivo Color Input

  A sophisticated color input component with opacity control, color swatches, and clipboard integration. Features - Color Management - HEX color input - Visual color preview - One-click copy to clipboard - Color swatches for quick selection - Opacity Control - Smooth slider control (0-100%) - Visual gradient feedback - Custom styled thumb matching selected color - Real-time color preview

• Slarivo Loading Carousel

  Here is Loading Carousel component

• Slarivo Carousel

  Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Slider

  An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

• Slarivo Angle Slider

  Here is Angle Slider component

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Container Scroll Animation

  A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.

• Slarivo Testimonials with Marquee

  A dynamic testimonials section with infinite scroll animation featuring a headline, description, and auto-scrolling testimonial cards that pause on hover, inspired by Launch UI. Features: • Infinite scroll animation with hover pause • Responsive, mobile-first design • Gradient fade edges for smooth transitions • Customizable content through props • Dark mode support • Optimized performance using CSS animations

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

  Client logos scrolling automatically with a Carousel with masked edges

• Slarivo Logo Carousel

  Logo Carousel

• Slarivo 3D Carousel

  A 3D image carousel

• 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 Cinematic landing Hero

  Calls to Action component from the 21st.dev community.

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

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

• Slarivo Responsive Hero Banner

  A stunning full-screen hero section featuring a cinematic background image, glassmorphic navigation bar with backdrop blur, animated badge, elegant serif typography, dual call-to-action buttons, and a partner logos grid. Fully responsive with smooth fadeSlideIn animations.

• Slarivo Digital Serenity - Animated Landing Page

  Component creates a visually immersive and calming landing page. It features a dark UI with animated text quotes appearing word by word, a dynamic grid background, subtle floating elements, corner decorative accents, and interactive effects like a mouse-following gradient and click ripples. 

• Slarivo Shuffle Grid

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

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

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

• 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 3D Gallery Photography

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

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

  An animated testimonials slider, pairing a person's image on the left with their quote, name, and title on the right. Users can navigate through entries with arrow controls, and the component features a subtle animated grid background with both light and dark modes.

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

  Get your site some awwwards level link hover animation with pure css, no framer motion.

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

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

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

  1:1 replica of Loops pricing. An interactive pricing calculator component designed to help users estimate their monthly cost based on subscriber count. It features a range slider limited to discrete pricing breakpoints (from 0 to 1M+ subscribers) and dynamically updates both the subscription label and corresponding price in real time.

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

  A reusable and responsive thumbnail carousel

• Slarivo Scroll Reel Testimonials

  Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.

• Slarivo Freelancer Profile Card

  Freelancer Profile Card A responsive and animated profile card component, ideal for showcasing freelancers, team members, or user profiles. It features a banner, avatar, user details, stats, and a call-to-action, all powered by props.

• Slarivo Spinner

  A lightweight, customizable React spinner component with dynamic sizing and smooth staggered animation for modern UIs

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

  Scroll Areas component from the 21st.dev community.

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

  Range Slider A responsive and accessible price range slider with a histogram visualization. It allows users to select a numeric range with interactive handles and provides clear visual feedback on the selected values and data distribution.

• Slarivo Infinite slider horizontal

  Here is horizontal img slider

• Slarivo Gallery Grid with Lightbox

  Filterable image gallery with animated lightbox and navigation

• Slarivo Sliding Testimonial

  Beautifully designed, fully responsive, expertly crafted Testimonial with sliding animation.

• Slarivo Financial Score Cards

  This is a beautiful financial score card component with animated half-circle progress indicators, strength badges, and staggered entrance animations.

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo Testimonal Slider

  Here is Testimonal Slider component

• Slarivo hero-section

  Animated Blocks Hero

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

  A React hook that manages the state and logic for a slider component with corresponding input fields. Provides validation, range constraints, and synchronized updates between slider and input values. Features - Synchronized slider and input field values - Input validation and number formatting - Range constraints for min/max values - Support for single value or range (two handles) - Reset functionality to default values

• Slarivo Image Reveal

  Here is image reveal component

• Slarivo Sparks Carousel

  Sparks Carousel A responsive carousel component designed to display a collection of curated cards. It features smooth scrolling animations powered by Framer Motion and is fully themeable using shadcn/ui CSS variables.

• Slarivo Progress Bar

  A beautiful segmented progress bar with rounded rectangular segments - filled segments in a terracotta/coral color and unfilled ones in dark gray.

• Slarivo useDebounceCallback

  Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.

• Slarivo Spinner

  A loading spinner component with customizable size and color.

• Slarivo Hero Scrub

  Cinematic scroll-scrubbed hero with an image sequence rendered on canvas. The central card scales from a thumbnail to cover the viewport while scrubbing through your video frames, then shrinks back symmetrically. GSAP ScrollTrigger powered, pin-based choreography, mobile-aware, respects prefers-reduced-motion. Ideal for luxury, automotive, editorial and product landing pages.

• Slarivo Feature Accordion Section

  This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, images, and counts, while an accordion ensures that detailed information can be expanded or collapsed as needed.

• Slarivo Referral Card

  Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.

• Slarivo Testimonial Slider

  Testimonial Slider A modern, animated testimonial slider component that showcases user feedback with an image, quote, rating, and navigation controls. It's designed to be easily integrated and customized by passing an array of testimonial data.

• Slarivo Framer Thumbnail Carousel

  Galleries component from the 21st.dev community.

• Slarivo Executive Impact Carousel

  A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and "Smart Work" logic.

• Slarivo Linear Card

  Here is linear card component

• Slarivo RuixenCarouselWave

  This component is a sleek, GSAP-powered horizontal carousel that showcases Ruixen-style UI cards with a wave-like animation. It highlights one card at the center by dipping it slightly downward and scaling it up, creating a dynamic focus effect. Users can navigate through the cards using arrow buttons, and the carousel loops infinitely for a smooth, continuous experience. Each card includes an image, title, subtitle, and a badge, making it perfect for showcasing features, projects, or templates in a visually engaging way.

• Slarivo Gradient Selector Card

  This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

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

  Here is basic spinning text component

• Slarivo Pricing

  Pricing Plan Selection UI that helps users compare subscription tiers. It presents two options — Basic for individuals and small teams with limited features, and Pro for growing teams with advanced tools. Each plan shows price, features, and a user slider that adjusts cost per user, making pricing transparent. The design highlights the Pro plan with a “Popular” tag and a bold CTA button, guiding users toward the upgrade. It’s ideal for SaaS apps offering tiered subscriptions.

• Slarivo Slider

  An input where the user selects a value from within a given range.

• Slarivo Animated Spinner

  The component includes all the CSS animations and custom properties inline, featuring a dynamic conic gradient that rotates and changes, along with an animated line width effect. You can customize the size by passing a `size` prop, and it maintains all the smooth animations

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, editable channel fields, hue/alpha sliders, and preset swatches. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Job Slider

  The JobSlider component is a modern, responsive carousel designed to showcase trending AI and Computer Vision job roles in an interactive and visually appealing way. Built with Next.js, Shadcn UI, and Tailwind CSS, it adapts seamlessly to both light and dark themes, ensuring a consistent user experience across devices and preferences. The component displays a two-column grid of job cards inside a smooth sliding panel, with intuitive navigation arrows for exploring multiple slides. Each card highlights the role name and the number of available jobs, making it ideal for career portals, hiring platforms, or AI-focused job boards. With its minimal code, smooth transitions, and theme-aware design, the JobSlider enhances both usability and aesthetics for modern web applications.

• Slarivo Battery Indicator

  Interactive battery component with themes and animations

• Slarivo Editable Chip

  An interactive editable chip component with smooth animations for editing.

• Slarivo Box Carousel

  Here is Box Carousel component

• Slarivo Range Slider Input

  This RangeSliderInput component is a reusable input control that combines a dual-handle slider with numeric input fields for selecting a value range. Unlike the default browser number fields, it removes the built-in up/down arrows and replaces them with modern Lucide icons for increment and decrement actions. The component keeps the slider and inputs fully synchronized,

• Slarivo Folder Components

  A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.

• Slarivo Usage Slider Plan Selector

  A seat-based pricing card with a slider that sizes your team and auto-selects the matching plan and monthly total.

• Slarivo Carousel Testimonials

  Full-width swipeable testimonial carousel with autoplay and dot navigation for showcasing customer quotes on landing pages.

• Slarivo Cromia Channels

  Individual editable hue, saturation, brightness, and alpha sliders built with Cromia headless color picker primitives.

• Slarivo Cinematic Product Scroll Section

  A premium e-commerce section featuring scroll-linked grayscale-to-color masks, a cinematic text hero, and an interactive horizontal slider with circular hover reveal cards.

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, editable channel fields, hue/alpha sliders, and preset swatches. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo Field

  Here is Field component

• Slarivo Iso Fader

  Physics-driven iso fader with LED meter and digital readout for smooth, tactile level control.

• Slarivo Login Card

  A Login Card component for switching settings, modes, preferences, and binary states, featuring settings, toggle, slider, card.

• Slarivo Angle Slider

  A Angle Slider component for capturing short text, values, search terms, and configurable data, featuring angle slider, angle-slider, slider, control.

• Slarivo Angle Slider

  A Angle Slider component for capturing short text, values, search terms, and configurable data, featuring angle slider, angle-slider, slider, control.

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo Compare Slider

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

• Slarivo Compare Slider

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

• Slarivo Compare Slider

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

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo Color Generator

  A Color Generator component for capturing short text, values, search terms, and configurable data, featuring color picker, color-picker, palette, slider.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for…

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for…

• Slarivo HeroUI Slider

  Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full…

• Slarivo HeroUI Slider

  Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full…

• Slarivo Exposure Slider

  A camera-style notch ruler you drag instead of a thumb — momentum, masked edge fade, optional progress ring, and any min/max/step you need.

• Slarivo Material Design 3 Expressive Slider

  Material Design 3 Expressive Slider for Shadcn UI & Tailwind. Supports range/centered modes, clip-path icons, spring physics, and tooltips.

• Slarivo Slider with Value Output

  A range slider that displays the currently selected numeric value next to the track.

• Slarivo Field with Slider

  A form field that pairs a label and helper description with a range slider control for selecting a value.

• Slarivo Slider Field (TanStack Form)

  A numeric slider form field wired with TanStack Form and validated against a Zod min/max range, showing the live value and inline error.

• Slarivo iOS slider

  An iOS-style brightness slider that squishes and stretches as you drag, from the official Motion examples catalog.

• Slarivo Image reveal slider

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

• Slarivo Volume Control Slider

  A volume slider with a mute toggle button and a live value readout that switches icons based on level.

• Slarivo Slide To Detonate

  A slide-to-confirm safety gate that requires dragging a handle across a track before the action fires.

• Slarivo Color Slider

  A horizontal or vertical slider for adjusting a single color channel such as hue, saturation, or brightness, built on React Aria Components.

• Slarivo Modern Volume Slider

  A volume slider with a bold rounded track, a thin vertical thumb, and an animated percentage readout for audio and range controls.

• Slarivo Temperature Control Slider

  A temperature control slider with cool, comfortable, and warm zones, color-coded value display, and a hover preview range.

• Slarivo Equalizer Bar Slider

  An interactive bar-style equalizer slider with a hover dip effect and a smooth animated numeric value tooltip.

• Slarivo Cards Rotate Slider

  A Cards Rotate Slider component for browsing sequential content, media, products, or stories, featuring responsive behavior.

• Slarivo ROI Pricing Calculator

  An interactive pricing section that lets visitors drag a slider and enter a per-unit cost to calculate their estimated monthly ROI from using a product.

• Slarivo Parallax Strip Slider

  A Parallax Strip Slider component for browsing sequential content, media, products, or stories, featuring drag interaction, pointer-responsive feedback, click and selection states, responsive behavior.

• Slarivo Price Range Slider

  A dual-thumb price range filter slider that previews a ghost extension when hovering outside the selected range, with animated number values and thumb scaling.

• Slarivo Thumbnail Carousel

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

• Slarivo Infinite Perspective Slider

  Infinitely looping horizontal gallery driven by wheel and drag, cards tilting on a Y-axis perspective as they move, with SplitText caption reveals on hover. Theme-aware, reduced-motion safe, prop-driven.

• Slarivo Ellipse Carousel

  Elliptical card carousel with autoplay, drag interaction, position-based scaling, mobile-specific ellipse tuning, and an optional center label.

• Slarivo Zoom Slider

  A Zoom Slider component for browsing sequential content, media, products, or stories, featuring carousel, slider, gsap, scroll.

• Slarivo Arc Flow Carousel

  A Arc Flow Carousel component for browsing sequential content, media, products, or stories, featuring carousel, slider, gsap, drag.

• Slarivo Dimensional Switch Slider

  3D card-flip carousel with directional text transitions, configurable horizontal or vertical flip axis, custom easing, autoplay and pagination.

• Slarivo Orbit Flip Slider

  A Orbit Flip Slider component for browsing sequential content, media, products, or stories, featuring carousel, slider, gsap, flip.