SLARIVO / STEPPERS

Steppers Components

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

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  Display content divided into a steps sequence.

• Slarivo Animated Stepper

  A draggable stepper component that lets users increment or decrement a number by dragging up or down. It includes smooth animations, clamping between min and max values, and works with both mouse and touch input.

• 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 Onboarding Stepper Progress

  An onboarding progress tracker with a step counter, percentage completion bar, and back/next navigation buttons.

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Step Card

  The Professional Step Card is a clean, enterprise-ready multi-step form component built strictly with shadcn UI components. It guides users through sequential steps—like Email → Password → 2FA—using subtle slide transitions that maintain a polished and professional look. Fully compatible with both light and dark themes, it includes Back/Next navigation and supports easy integration via an onComplete callback. Designed for real-world use, this component can be reused across login flows, onboarding processes, or any multi-step form without unnecessary animations or playful effects, ensuring a smooth and efficient user experience.

• Slarivo MultiStep Button

  The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as forms, onboarding flows, or confirmations, clearly indicating progress with labels like “Step 1: Fill Info → Step 2: Confirm → Step 3: Done.” The button supports configurable sizes (sm, md, lg) and seamlessly handles clicks to advance through steps, offering an intuitive and visually clear user experience. Its design leverages shadcn/ui primitives, ensuring accessibility, smooth transitions, and a modern, cohesive look in any interface.

• Slarivo Accordion

  A vertically stacked set of interactive headings that each reveal a section of content.

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Multistep Form

  Here is Multistep Form component

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Steps

  Here is Steps component

• Slarivo Dialog

  Enhanced shadcn/ui dialog

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

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Shine Border

  Shine Border

• Slarivo Animated Feature Carousel

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

• Slarivo Sign Up

  A stunning, open-source multi-step authentication UI component for modern web applications. Built with React, TypeScript, and Framer Motion, it delivers a visually captivating and highly interactive sign-up experience out-of-the-box. Key features include a sleek glassmorphism design, a fluid animated gradient background, delightful micro-interactions, and rewarding user feedback with loading states and a built-in confetti celebration on success. Perfect for developers looking to elevate their project's user onboarding with a polished and professional auth screen.

• Slarivo Progress Indicator

  This fluid steps animation is perfect for progress indicators or onboarding flows! 🚀✨

• Slarivo How It Works

  How It Works Section Step-by-step process layout with icons and concise explanations. Guides users from query entry to store contact in a structured flow. Ideal for onboarding, tutorials, or service explanation pages.

• Slarivo Checkout Block

  A comprehensive multi-step checkout process with shipping, payment, and order review.

• Slarivo Multi-Step Form

  Multi-Step Form A responsive and animated container for multi-step forms, providing progress tracking, navigation, and a clean layout. It uses framer-motion for smooth step transitions.

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Process Timeline

  process section with scroll trigger animations showing process step depending on current scroll position

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Onboard Card

  Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators.

• Slarivo Multistep Form

  An exceptional multi-step form component that designers will love!

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

  Make your own product tour with shadcn/tour.

• Slarivo Dialog Stack

  Stacked dialog component inspired by Radix UI Dialog. Accessible. Customizable. Open Source. Pre-styled for shadcn/ui. Features • Stacked dialog interface with smooth transitions • Keyboard navigation support • Accessible by default • Customizable styling • Previous/Next navigation controls • Responsive design • Fully typed with TypeScript Props DialogStack • open?: boolean - Controls the open state • onOpenChange?: (open: boolean) => void - Callback when open state changes • clickable?: boolean - Enables clicking on previous dialogs to navigate back DialogStackTrigger • asChild?: boolean - Merges props onto child element instead of rendering button DialogStackContent • className?: string - Additional CSS classes • children: ReactNode - Dialog content • index?: number - Dialog position in stack (auto-populated) • offset?: number - Visual offset between stacked dialogs DialogStackNext/Previous • asChild?: boolean - Merges props onto child element • children?: ReactNode - Button content • className?: string - Additional CSS classes Example Use Cases • Multi-step forms • Onboarding flows • Wizards • Sequential content presentation • Guided tutorials

• Slarivo Order tracking

  Order tracking

• Slarivo Timeline Rail

  Here is Timeline Rail component

• Slarivo Progress

  Progress bar component built on Radix UI with smooth value transitions.

• Slarivo Enable 2FA Card

  A structured Two-Factor Authentication Card that guides users through enabling 2FA with step-by-step instructions. Download app, scan QR code, and enter the verification code, featuring a clean layout and built-in OTP input for a secure and user-friendly experience.

• Slarivo AI Planning

  AI Planning Workflow

• Slarivo Tracker Card

  Proposal Tracker Card This component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in step data dynamically. Animations are included using framer-motion to enhance the user experience.

• Slarivo Onboarding Dialog

  A multi-step onboarding dialog with carousel navigation, animated progress dots, and cross-fading content. Built with Embla Carousel and 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 Tour Popover

  This Tour Popover component delivers a professional, guided onboarding flow using shadcn/ui’s Popover, Button, Progress, and Separator components. Each step is presented inside a compact popover with a clear icon, title, and description, making the information easy to follow without overwhelming the user. A progress bar at the bottom visually tracks how far along the tour the user is, while navigation controls (Back, Next, Restart) provide a smooth and intuitive way to move through the steps. By using professional Lucide icons like Home, Settings, HelpCircle, and Keyboard, the tour feels polished and business-ready, making it ideal for SaaS dashboards, admin panels, or any app where structured onboarding and contextual guidance are important.

• Slarivo Process Pillars

  Process Pillars is a visually intuitive component that represents a typical product development lifecycle. It uses a segmented progress bar style to display five distinct phases. Each phase is represented with a partial fill to visually communicate stage-wise progression. Use Case: Ideal for portfolio sites, agency websites, SaaS dashboards, onboarding flows, or any platform that needs to communicate a linear process or workflow.

• Slarivo Card

  Animated Steps Tracker Card This component provides a visually engaging way to display step-count data for a given period. It features a fluid counter animation for the total steps and a staggered bar chart animation, making data presentation dynamic and modern. It is fully themeable using shadcn/ui CSS variables.

• Slarivo Multiple Form

  Features Progress Indicator: Visual steps tracker with completed, current, and pending steps Form Validation: Client-side validation with clear error messages Smooth Animations: Page transitions using Framer Motion Responsive Design: Fully responsive layout that works on all screen sizes Dark Mode Support: Styling that adapts to both light and dark modes Accessibility: Proper labeling and semantic HTML for screen readers Modern UI: Clean design with Tailwind CSS styling Step Navigation: Move forward/backward between form steps Data Review: Final step to review all entered information Success State: Completion confirmation with next steps Dependencies React Tailwind CSS Framer Motion (for animations) This multi-step form component demonstrates modern React patterns and Tailwind styling techniques, creating an engaging and user-friendly form experience.

• Slarivo Multi Step Login

  The Multi-Step Login component is a clean, user-friendly authentication flow built entirely with shadcn UI. By splitting login into three distinct steps—email entry, password or OTP input, and 2FA verification—it reduces cognitive load and guides users through the process smoothly. A visual step indicator at the top clearly communicates progress, while the use of familiar shadcn UI components (Button, Input, Label) ensures consistency and accessibility. Fully responsive and theme-aware, this component provides a modern, polished experience that improves usability and enhances user confidence during login.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo How It Works

  A visual step-by-step process section with pinned, connected cards showing how something works.

• Slarivo How It Works Timeline

  A vertical timeline that stacks numbered onboarding steps down the page, each with a bordered icon circle, a connecting line, a bold title, and supporting copy.

• Slarivo 8bit Timeline Horizontal

  An 8-bit styled horizontal timeline block with numbered checkpoints on a dashed track. Renders steps horizontally on desktop and stacks vertically on mobile, with a retro pixel-font title and description. Fully prop-driven via title, description, and steps.

• Slarivo Checkout Steps Breadcrumb

  A checkout progress breadcrumb with numbered step circles, completed-step checkmarks, and back/continue navigation buttons.

• Slarivo Card

  Interactive Card A visually engaging card component that features an icon group with hover animations, a step indicator, title, and description. It's designed to be reusable and adapt seamlessly to light and dark themes.

• Slarivo How It Works Steps

  A three-step "how it works" section with numbered, icon-badged cards explaining a process from setup to results.

• Slarivo Steps Breadcrumb

  A breadcrumb navigation that displays a horizontal sequence of icon steps connected by short lines to show progress through a multi-stage flow.

• Slarivo Steps

  Here is Steps component

• Slarivo Scroll Reveal

  Elements animate into view when they enter the viewport. Supports any Motion variant, configurable thresholds, and a once-only mode.

• Slarivo Rising ball

  A single ball moves toward a staircase-like structure. It pauses briefly, then begins climbing — bouncing up one step at a time. Each bounce is rhythmic and smooth, creating a loop. After reaching the top, the ball resets to the bottom and starts again.

• Slarivo Number Flow

  An animated numeric stepper with rolling, blur-transitioned digits and increment/decrement buttons for counters and quantity inputs.

• Slarivo Stacking Cards

  Cards pin to the top and scale down as subsequent cards scroll underneath, creating a layered stacking effect.

• Slarivo Ball Model Picker

  A pinball-style reasoning effort picker with fixed-step physics, elastic peg collisions, glowing trails, and six landing outcomes.

• Slarivo Quantity

  A composable quantity stepper with animated value transitions and min/max limits for e-commerce product controls.

• Slarivo Task Steps

  An animated vertical checklist that shows a multi-step task's progress with pending, active, done and error states.

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

  Multiple background beams that follow a path of SVG, makes a good hero section background.

• Slarivo Typewriter

  A component that types out a text, one letter at a time. As a text, either a string or an array of strings can be passed to the component. The component will automatically split the text into an array of characters, and animate each letter one by one. If you pass an array of strings, the component will animate one text, delete it, then continue animating the next one. The component will loop through the texts if you set the loop prop to true. The cursor at the end of the text is optional. You can use a character or even a svg node if you like. There is a prop to customize the cursor animation, where you have to define the two motion variants as initial and animate. Ideally, the component should respect multiple lines. If you experience otherwise, please let me know.:)

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Spinner

  Spinner Loaders component from the 21st.dev community.

• Slarivo 3D Carousel

  A 3D image carousel

• Slarivo Interactive 3D Robot

  3D Interative scene with robot Whobee using Spline scene

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

  Here is Sidebar Component

• Slarivo 3D Testimonails

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

• Slarivo Carousel

  A customizable carousel with microinteractions and slider.

• Slarivo Star button

  The StarButton is a visually striking button that features a radial light animation with a starry background.

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

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

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo Stacking card

  Here is scroll stacking card

• Slarivo Stack Feature Section

  This component is a React + Tailwind CSS hero section with a heading, subtext, and call-to-action buttons on the left, plus an animated multi-orbit icon display on the right.

• Slarivo Parallax Scrolling

  Here is Parallax Scrolling component

• Slarivo Luma Spin

  Luma Spin is a loader component

• Slarivo Hero Section

  Hero component with sleek animation

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

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger animation

• Slarivo Sticky Scroll

  Here is Sticky Scroll component

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

  An animated feature carousel with smooth slide transitions.

• Slarivo Stacked Cards Interaction

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

• Slarivo Tetris Loader

  A minimalist, high-contrast Tetris-inspired loading animation built with React and TypeScript. This component delivers a clean, pure black-and-white aesthetic with full dark mode support, creating a striking visual loading experience. Key Features: Pure Monochrome Design: Exclusively uses black and white colors - no grays or intermediate shades Dark Mode Native: Seamlessly switches between black-on-white (light) and white-on-black (dark) themes Authentic Tetris Mechanics: All 7 Tetriminos with proper rotation, stacking, and line clearing Configurable Options: Size: Small (8×16), Medium (10×20), or Large (10×20 with bigger blocks) Speed: Slow (150ms), Normal (80ms), or Fast (40ms) drop rates Loading Text: Customizable message or hide completely Smooth Performance: 60fps animations using requestAnimationFrame Auto-Reset: Intelligently clears the grid when pieces stack too high

• Slarivo Card Carousel

  Here is Card Carousel component

• 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 Halide Topo Hero

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

• Slarivo Progressive Carousel

  Timelines component from the 21st.dev community.

• Slarivo Animated Counter

  A simple animated counter component.

• Slarivo Animated Loading Skeleton

  Animated Loading Skeleton

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

  this a animated lever switch can be toggled on and off just like a lever or gear of a machine

• 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 snow-ball-loading-spinner

  An animated spinner which gives a feel like rolling snow ball.

• 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 Vertical Image Stack

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

• Slarivo 3D Marquee

  Here is 3D Marquee component

• Slarivo Flip Links

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

• Slarivo Apple Liquid glass switcher

  Here is Apple Liquid glass switcher component

• Slarivo DevTool Landing Page

  A high-craft landing page block designed for developer tools. Features an interactive code-stepper hero and hover-to-reveal diagnostic feature cards.

• Slarivo Tracing Beam

  A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• 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 PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

• Slarivo Smooth Scroll

  Here is Smooth Scroll card

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Border Beam

  Here is Border Beam component

• Slarivo Animated State Icons

  12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, download→done, send→fly, toggle switch, eye→hidden, volume→mute. Each cycles on its own timer with spring physics and smooth transitions. Import individually and control the toggle programmatically.

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

  Animated Roadmap This component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of milestones with different statuses and positions.

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

• Slarivo Micro Expander

  Here is Micro Expander component

• Slarivo Scroll Hero Section

  Animated Scroll keywords section with loading and scrolling animation

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

  a beautiful asmr mouse hover react bg

• 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 Cursor Wander Card

  A modern, interactive crypto card component that responds to cursor movement, creating a subtle 3D tilt effect. Ideal for fintech and Web3 dashboards, this reusable UI card enhances user experience with smooth motion and futuristic design. Built using Tailwind CSS and React for easy integration.

• Slarivo Flip Gallery

  Flip animation

• Slarivo Spinner

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

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

  Scroll Areas component from the 21st.dev community.

• Slarivo Cursor Follower

  Here is smooth follower cursor componentt

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo CoreSpin Loader

  Designed to fit seamlessly into dashboards, SaaS products, AI interfaces, and developer tools, CoreSpin Loader delivers a premium visual experience while remaining lightweight and performant.

• Slarivo Motion Button

  An animated CTA button with expanding circle background and arrow icon on hover.

• Slarivo Connoisseur Stack Interactor

  A high-performance, motion-managed section designed to showcase complex professional hierarchies with technical elegance. Built for users who value "Smart Work" over brute force.

• Slarivo Interactive Hover Button

  A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.

• Slarivo Morphing Spinner

  A minimal and unique loading spinner that smoothly transitions between geometric shapes.

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Orbiting Carousel with Animated Icons

  This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing attention and adding a playful touch to your UI.

• Slarivo book slider

  click to scroll

• Slarivo Team Showcase

  Team Showcase A responsive and animated component to showcase team members or featured profiles in a visually engaging, overlapping card layout. It features staggered entrance animations for the cards and subtle hover effects.

• Slarivo Scroll trigger animations

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

• Slarivo Aero Hero-1

  Buttons component from the 21st.dev community.

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

  A visually complex loading spinner with threads weaving around a central pulsing node

• Slarivo Feedback Slider

  Here is colored feedback slider component

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

  This new concept is called "Hyperdrive." It features an interactive starfield that reacts to your mouse. As you move your cursor towards the center of the screen, the stars streak past, creating a "warp speed" effect. The further your mouse is from the center, the calmer the starfield becomes. This creates a powerful sense of depth and motion.

• Slarivo Parallax Scrolling Text Effect

  This code implements a captivating parallax scrolling effect on a text element using Framer Motion. It leverages scroll position and velocity to dynamically alter the text's skew and horizontal position, creating a visually engaging user experience. The effect is achieved by using Framer Motion's hooks: `useScroll`, `useVelocity`, and `useTransform` to map scroll progress and velocity to CSS transformations. `useSpring` adds a smooth, springy animation to the transformations, enhancing the visual appeal. The code defines a section with a significant height (`h-[1000vh]`) to provide ample scroll space. A `motion.p` element contains the text; its `skewX` and `x` styles are dynamically updated based on the scroll position and velocity. The `offset` property in `useScroll` ensures the effect starts and ends at specific points within the section. The `useTransform` hook maps the scroll velocity to a skew angle, creating a tilting effect as the user scrolls, and maps the scroll progress to a horizontal displacement, adding a parallax effect. The `useSpring` hook applies spring physics to both the skew and horizontal displacement, resulting in a smooth and natural animation. This technique can be applied to various scenarios, including hero sections, website headers, and other interactive elements to enhance user engagement and create a more dynamic visual experience. For example, imagine a website promoting a new product; this effect could be used to highlight the product title or tagline as the user scrolls down the page. The effect is highly customizable; by adjusting the parameters of `useTransform` and `useSpring`, developers can tailor the animation to match their specific design requirements. Framer Motion's declarative approach simplifies the implementation of complex animations, making this a relatively straightforward solution for developers of all skill levels.

• Slarivo Spider Cursor

  Spider Cursor

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

  iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

• Slarivo sneak

  Interactive 3D Text Effect A WebGL text component that creates a dynamic ripple effect when you hover over it. The text "bubbles up" from the surface based on mouse proximity, with smooth animations and automatic light/dark theme support. Features 3D displacement shaders, crisp SVG text rendering, and responsive design. Perfect for modern, interactive hero sections.

• Slarivo StackFlow Integrator

  Glassmorphic, diamond-layout tech-stack showcase with subtle hover motion—drop-in, dual-mode, zero config.

• Slarivo Scroll Portrait Wall

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

• Slarivo 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 8-bit Step Area Chart

  A retro 8-bit step area chart block with hoverable data points and pixel styling.

• Slarivo tech-curosr

  stylish following tech cursor component for modern UIs, built with accessibility and animation in mind.

• Slarivo Scroll Choreography

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

• Slarivo Mouse Following Line

  Mouse-Following Line Field Animation A dynamic grid of lines that react and rotate smoothly toward cursor movement, creating an engaging motion effect. Perfect for interactive backgrounds, modern websites, or eye-catching hero sections.

• Slarivo Premium Verification Widget

  A sleek, animated verification component featuring a rotating gradient ring, smooth state transitions, and polished micro-interactions.

• Slarivo Onboarding Steps Carousel

  A compact multi-step onboarding carousel with a progress bar, per-step icons, and Back/Next navigation that finishes on the last step.

• Slarivo Circular Carousel

  An animated orbital carousel that arcs cards along a curved track with smooth active-card transitions, autoplay, dot indicators, and keyboard navigation.

• Slarivo Multi-step Wizard

  Features This multi-step onboarding wizard includes: Responsive Design - Works beautifully on mobile and desktop Progress Tracking - Visual step indicator with completed checkmarks Form Validation - Client-side validation with error messages Smooth Transitions - Step transitions with directional animations Dark Mode Support - Styled for both light and dark themes Accessibility - Proper labels, focus states, and semantic HTML Complete Form Flow - Personal info → Company details → Preferences → Completion To use this component, you'll need to install Framer Motion for the animations: bash npm install framer-motion The component handles a complete user onboarding flow with validation at each step and a final completion screen that summarizes the collected information.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo Interactive Tech Stack Builder

  A highly interactive, 2.5D gamified onboarding component. Let users physically build their skill stack block by block. Features smooth physics, glassmorphism icons, and Framer Motion animations. Perfect for developer portfolios, SaaS setup flows, or premium profile pages.

• Slarivo Reshaped Progress indicator

  Dot-based step indicator that takes a total amount of steps and the current activeIndex as a controlled component. Pairs with Carousel and Pagination for syncing scroll or navigation state, and supports a media color for static dark backgrounds.

• Slarivo Progress Tracker

  A multi-step progress tracker that shows real-time status (pending, in-progress, completed, failed) for each step of an operation, with an elapsed-time badge and a receipt summary state.

• Slarivo AI Chain of Thought

  Collapsible component that visualizes AI reasoning as step-by-step thinking with status indicators, search results, and images.

• Slarivo Wizard Steps

  An animated multi-step wizard with a clickable progress rail, direction-aware panel transitions, keyboard navigation, and a completion state.

• Slarivo Energy Beam

  Dynamic energy beam effect using Unicorn Studio's WebGL engine. Perfect for futuristic backgrounds and immersive UI experiences with pulsing, flowing energy animations.

• Slarivo Ethereal

  scrolling hero section with animted webgl background and navigation bar. Includes post processing

• Slarivo Arc Preloader Hero

  A cycle of short declarative beats- Quiet, Sharp, Calm, Crafted - fades through a calm white surface, then a curved black curtain rises from below to reveal the landing. The boundary stays a single smooth arc the whole way up, never a flat slide.

• Slarivo MacBook Neo Hero

  Scroll-driven image-sequence hero with floating glass step cards. Pin the page, scrub through hundreds of frames as the user scrolls, and reveal contextual cards at each segment. Inspired by Apple's product pages.

• Slarivo Alqemist How It Works

  Alqemist how-it-works section with six implementation steps from project setup to owned infrastructure.