SLARIVO / SCROLL AREAS

Scroll Areas Components

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

• Slarivo Scroll Area

  Augments native scroll functionality for custom, cross-browser styling.

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Scroll Area with Sheet

  A scrollable content area placed inside a slide-out sheet, ideal for showing long text such as a privacy policy without overflowing the panel.

• Slarivo Scroll Area

  A scrollable container that lets users scroll through a long list of items, such as a user or contacts list, within a fixed height.

• Slarivo Scroll Area

  Augments native scroll functionality for custom, cross-browser styling.

• Slarivo Scroll Area

  A customizable scroll area component with smooth scrolling and accessible scrollbars.

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Scroll Area

  A scrollable container with custom, styled scrollbars built on Base UI.

• Slarivo Chat Scroll Area

  A scrollable chat conversation panel with avatars, message bubbles, timestamps and a message input that auto-scrolls to the latest message.

• Slarivo XScroll

  Responsive Horizontal Scroll Area

• Slarivo Container Scroll Animation

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

• Slarivo Scroll media expansion hero

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

• Slarivo Table

  Shadcn table with enhanced appearance

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Parallax Scrolling

  Here is Parallax Scrolling component

• Slarivo Text Gradient Scroll

  The text gradient scroll component is designed to enhance user interaction by providing a visually dynamic effect as the user scrolls through the text. Unlike static text, this effect offers a more engaging visual experience with smooth color transitions that change as the text is scrolled. The animated gradient shifts add a modern and interactive touch to the user experience. This example was created using Tailwind CSS and Framer Motion.

• Slarivo Sticky Scroll

  Here is Sticky Scroll component

• Slarivo Parallax Grid Scroll

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

• Slarivo Scroll Velocity

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

• Slarivo Scroll Based Velocity

  Scrolling text whose speed changes based on scroll speed

• Slarivo Scroll Progress

  Animated scroll progress for your web pages.

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

  Here is Area Chart component

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

• Slarivo Sticky Section Tabs

  A container component that displays child sections with sticky headers. As the user scrolls, the header for the current section sticks below a defined navigation height, providing clear context and navigation for long content pages.

• Slarivo Timeline

  A timeline component with sticky header and scroll beam follow.

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

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Progressive blur

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

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Marquee

  An infinite scrolling component that can be used to display text, images, or videos. Add the following animations to your tailwind.config.js file: extend: { animation: { marquee: "marquee var(--duration) linear infinite", "marquee-vertical": "marquee-vertical var(--duration) linear infinite", }, keyframes: { marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(calc(-100% - var(--gap)))" }, }, "marquee-vertical": { from: { transform: "translateY(0)" }, to: { transform: "translateY(calc(-100% - var(--gap)))" }, }, }, },

• Slarivo Text Reveal

  Fade in text as you scroll down the page.

• Slarivo Sticky Scroll Reveal

  A sticky container that sticks while scrolling, text reveals on scroll

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

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

• Slarivo Hero Gallery Scroll Animation

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

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Cases with Infinite Scroll

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

• Slarivo Magic Text

  Simple animated text component that reveals as we scroll down the page.

• Slarivo Infinite Moving Cards

  A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger animation

• 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 Scroll Velocity Text

  A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.

• Slarivo Logo Cloud

  Here is Logo Cloud Blocks

• Slarivo Hero scroll animation

  Here is scroll animation in hero section

• Slarivo Scroll Cards

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

• Slarivo Feature Section

  Here are three lines you can use for this Featured Section: A clean two-column layout highlighting features with icons and descriptions on the left, and a smooth scrollable options list on the right. Designed with shadcn/ui cards, borders, and fade effects, ensuring both clarity and modern aesthetics. Perfect for showcasing key product highlights or services while keeping user engagement with continuous scrolling options.

• Slarivo Svg follow scroll

  Here is svg follow scroll

• Slarivo Marquee

  Marquee, Scroll infinite

• Slarivo Logo Carousel

  Showcase your partners and build social proof with the Infinite Logo Carousel. This component is designed to be a flexible, plug-and-play solution for displaying a seamless, looping reel of brand logos. Key Features: Effortless Integration: Drop it into any React project. Works perfectly with the shadcn/ui ecosystem. Smooth Autoplay: Set it and forget it. The carousel loops infinitely with a configurable interval. Animated Title: Features a built-in TextRoll animation to give your section title a touch of modern flair. Highly Customizable: Easily adjust the number of logos, sizing, spacing, and animation speed directly through props. You can use the reliable default logos or pass in your own array. Perfect for "Trusted By" sections, client showcases, or any time you need to display a collection of brand logos in a clean and professional manner.

• Slarivo In view

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

• Slarivo In view

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

• Slarivo Brand Scoller

  An infinite scroller for brands or logos.

• Slarivo Scroll X Carousel

  - Carousel transforms on x direction according to current scroll position.

• Slarivo Scroll X Carousel

  - Carousel transforms on x direction according to current scroll position.

• Slarivo Marquee

  Marquees component from the 21st.dev community.

• Slarivo FeaturesDetail

  This FeaturesDetail component showcases product features through an animated, auto-sliding dashboard carousel with smooth GSAP transitions. It combines scroll-triggered effects and interactive tab navigation for a visually engaging feature preview.

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

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

• Slarivo Footer

  A modern, sticky footer built with Framer Motion, featuring smooth animations, reusable components, and a responsive grid layout. Includes dynamic navigation links, social media icons with hover effects, and a gradient background with animated blobs for a visually engaging, scroll-triggered design.

• Slarivo Glass Calendar

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

• Slarivo Smooth Scroll

  Here is Smooth Scroll card

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Video Scroll Hero

  The Video Scroll Hero component creates an engaging scroll-triggered video scaling effect where a video starts at a very small size (25% scale) and smoothly expands to full size as users scroll down the page. The video remains fixed in the center of the screen during scaling, providing a cinematic experience that draws attention to the content while maintaining smooth performance through direct CSS transforms. This component is perfect for hero sections, product showcases, or any landing page where you want to create an immersive first impression that encourages users to explore further content below.

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

  Here is Progressive Blur

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

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

  A GSAP-powered React component that reveals text line-by-line with a smooth colored block wipe animation, supporting scroll triggers and customizable timing.

• Slarivo Stack Card

  This is a simple Stack Card

• Slarivo Story scroll

  Scroll Areas component from the 21st.dev community.

• Slarivo Text Marquee

  Animated text marquee component with vertical scrolling.

• Slarivo Scroll FAQ Accordion

  ScrollFAQAccordion is a modern, scroll-driven FAQ accordion built with React, Radix UI, Framer Motion, and GSAP. Unlike traditional accordions, it automatically opens each FAQ item as the user scrolls, providing a smooth, interactive, and visually engaging experience. Manual clicks are disabled to maintain a fully scroll-triggered behavior, while motion animations and responsive styling ensure each question and answer appears seamlessly. This component is perfect for landing pages, product documentation, or any interface where you want to guide users through content progressively as they scroll.

• Slarivo Infinite slider horizontal

  Here is horizontal img slider

• Slarivo Scroll and Swap Text

  A text component that swaps the letters vertically on scroll. The trick here is similar to the Letter Swap Hover component—duplicate the text, then wrapping the them in a container with relative position, then stack the elements vertically. We use useScroll hook from motion to track the scroll position of the container, and use the scrollYProgress value to offset the vertical position of the elements (by setting the y property of the element).

• Slarivo Horizontal Scroll Carousel

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

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Scroll Progress Bar

  The Scroll Progress Bar component enhances user experience by providing a visually dynamic indicator as the user scrolls through the page. It visually informs users how much of the page has been scrolled, making it especially useful for longer content. Unlike static progress bars, this animated indicator offers a more modern and interactive experience. The scroll bar can be configured as a circular or linear bar and can be positioned in specific corners of the page, such as the bottom-right or top-left. Built using Framer Motion and Tailwind CSS, the Scroll Progress Bar ensures smooth transitions and an aesthetically pleasing design.

• Slarivo Progressive Blur

  Here is Progressive Blur component

• Slarivo Hero Section

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

• Slarivo Wavy Text Block

  Wavy Block animates its children in waves pattern on scroll.

• Slarivo Economic Calendar

  Economic Calendar Description: A responsive, horizontally-scrolling component to display a series of economic events. It features controls for navigation and uses framer-motion for smooth loading and interaction animations. The component is themed using shadcn/ui variables for seamless light and dark mode support.

• Slarivo Fixed Header Footer Table

  This Fixed Header and Footer Table component is a highly practical and user-friendly UI element built with Shadcn UI. It ensures that the table header remains fixed at the top and the footer stays visible at the bottom, while the rows in the middle can scroll independently. This layout is especially useful when working with long datasets, as users can always see the column titles for context and the footer for totals or summary information without losing track while scrolling. By separating the header, body, and footer into distinct sections with a scrollable middle, the component improves readability and usability in dashboards, financial reports, admin panels, and data-heavy applications. Its clean design, responsiveness, and clarity make it a versatile table structure for modern web apps.

• Slarivo TimePicker

  A simple and intuitive time picker that lets users easily select hours, minutes, and seconds. It supports both 12-hour (AM/PM) and 24-hour formats, with smooth scrolling and clear options. You can also set minimum and maximum times to guide user input.

• Slarivo Wheel Pagination

  This Wheel Pagination component provides a modern, interactive way to navigate through multiple pages. Unlike traditional numeric pagination, it shows a range of page numbers at once, highlighting the active page with scale and color, making it immediately recognizable. Users can scroll over the pagination area with the mouse wheel to move between pages, while previous/next arrows offer an alternative click-based navigation. The component intelligently keeps the active page centered within the visible range and supports a customizable number of visible pages, ensuring usability even with dozens or hundreds of pages. Fully compatible with light and dark themes, it also includes an onChange callback, allowing parent components to track the active page, making it ideal for dashboards, data-heavy applications, and modern UI interfaces that require a tactile, visually engaging pagination experience.

• Slarivo Testimonials Carousel

  The Testimonials Carousel component is a modern, dynamic way to showcase customer feedback in a visually appealing manner. It displays testimonial cards that scroll infinitely in either direction, providing a continuous loop of client reviews. Each card contains the user’s feedback, their image, name, and role, with the option to highlight specific keywords for emphasis. The component ensures that all text remains neatly contained within the card, maintaining readability and design consistency. Users can configure key aspects such as the scroll speed, card height, and direction of movement, allowing seamless integration into different layouts. With full support for both light and dark themes, this component enhances the presentation of user testimonials while creating an engaging and interactive user experience.

• Slarivo Scroll trigger animations

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

• Slarivo Scroll trigger animations

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

• Slarivo Scroll trigger animations

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

• Slarivo Scroll trigger animations

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

• Slarivo Scroll trigger animations

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

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Robot Flyby

  As you scroll through the animation, a door will open and a robot will fly down the spaceships hallway.

• Slarivo Date Wheel Picker

  Date Pickers component from the 21st.dev community.

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroll Button

  A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content with a single click.

• 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 Parallax Scrolling Effect

  Component implements a parallax scrolling effect on a webpage. It features a background image that zooms out and blurs as the user scrolls down, creating a sense of depth.

• Slarivo Whisper Text

  A scroll-triggered animation that reveals words with a smooth, staggered fade and slide, like a whisper on screen. Perfect for subtle UI transitions. Named “Whisper” for its soft and delicate entrance, quiet yet expressive.

• Slarivo Alice Scroll Story

  An immersive scroll-triggered storytelling component featuring Alice's Adventures in Wonderland with GSAP animations, parallax effects, and dynamic text reveals. Perfect for creating engaging narrative experiences with smooth scroll-based interactions.

• Slarivo Privacy Policy Modal

  This component is a Privacy Policy modal built using ShadCN UI and React. It displays a scrollable privacy policy that users must read before accepting. The content is dynamically rendered from a JavaScript array of sections, making it easy to update or extend. As users scroll, a progress bar visually indicates how much of the content has been read. The “Accept” button is disabled until the user has scrolled to the bottom, encouraging them to review the entire policy. The modal is fully responsive, with a clean layout separating the header, scrollable content, and footer buttons, and adapts to both light and dark modes.

• Slarivo Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo ScrollTiltedGrid

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

• Slarivo Wheel Picker

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

• Slarivo Scroll Progress

  Here is animated scrolling progress bar

• Slarivo Masonry Grid with Scroll Animation

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

• Slarivo Dynamic Island TOC

  A sleek Dynamic Island-inspired Table of Contents component for React and Next.js with animated expansion, scroll spy tracking, reading progress, smooth scrolling, automatic heading detection, and support for custom TOC elements.

• Slarivo Kinetic Scroll Gallery

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

• Slarivo 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 Scroll Swap Text

  Text that swaps in and out vertically as its scrollable container is navigated, with the current line sliding up while a clone rises into place.

• Slarivo Parallax Motion

  A reusable parallax motion component

• Slarivo Stock Trends Carousel

  StockTrendsCarousel A responsive and animated carousel to display trending stock information. It features a clean header, a horizontally scrollable list of stock cards, and a navigation button.

• Slarivo Reading Text Reveal

  A beautiful scroll-based text reveal component for React that progressively highlights words as you scroll. Perfect for storytelling, landing pages, and engaging narratives. Features smooth animations, dark mode support, and fully customizable content. Built with TypeScript and Tailwind CSS.

• Slarivo Scramble text

  Here is Scramble text 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 Scroll Reveal

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

• Slarivo Scroll Animation

  Here is text scroll animation

• Slarivo Infinity Brand

  Here is smooth component of inifiity brands

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Parallax

  - parallax effect for multiple items, can be customized through 'start (start of animation)' and 'end (end of the animation)'

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Scroll Progress

  A minimal scroll progress indicator that tracks how far a user has scrolled down a page or container. Fully theme-aware and built with composability in mind, it supports both horizontal and vertical directions and works seamlessly in light and dark mode.

• Slarivo Infinite scroll container

  to used to manage large list and to automatically trigger next request when reaching the bottom of page #### Props - `items`: Array of data - `isPending`: Boolean for loading state - `itemsCount`: Total number of items available on the server ("COUNT" aggregation function in sql) - `loadMore`: Function to call when more items need to be loaded - `className`: Optional CSS class names - `children`: React children elements

• Slarivo ListBox

  Here is ListBox component

• Slarivo Product Carousel

  Product Carousel This component displays a horizontally scrollable list of products with a title and navigation controls. It's built to be highly reusable, accepting all content and configuration via props.

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo Infinite Ribbon

  Texts component from the 21st.dev community.

• Slarivo Edge Blur

  Stacked backdrop-blur layers with a gradient mask that create soft, fading blur along the top or bottom edge of a scrollable panel or screen.

• Slarivo Product Packs Pricing

  A two-tier pricing section comparing a free demo pack and a paid full pack, with feature rows and scroll-triggered blur-in animations.

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

  Here is Dialog component

• Slarivo Scroll-linked spring animation

  This is a simple Scroll-linked spring animation component

• Slarivo Scroll Image Tunnel

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

• Slarivo Sidebar 1

  A searchable component navigation sidebar with grouped, scrollable sections and item counts.

• Slarivo Hide On Scroll

  A scrollable container with a top bar that slides away as you scroll down and reveals itself when you scroll back up, with a matching useHideOnScroll hook.

• Slarivo Flow Hero-1

  Animated hero section with carousel.

• Slarivo AI Suggestions

  A horizontally scrollable row of AI prompt suggestion chips that animate in and out, for chat and prompt input interfaces.

• Slarivo Load More

  A load-more button with automatic infinite-scroll via IntersectionObserver, animated idle/loading/error/end states, and a bounded auto-load limit before it hands control back to the user.

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

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

• Slarivo Infinite List

  A bias-based infinite scroll wrapper and hook that manages pagination and masks child items for progressive "load more" lists.

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

  A full-page scroll-driven section that translates a row of image panels horizontally as the user scrolls vertically.

• Slarivo Sketchbook Reveal Card

  A scroll-triggered reveal card that hand-draws a wobbling SVG border, animates a lightbulb icon, text lines, and a button into view as you scroll.

• Slarivo Scroll Fade Effect

  Fade content edges as you scroll, for both vertical and horizontal layouts.

• Slarivo Smart Hover Auth Layout

  A dual-panel authentication layout featuring a 4-quadrant cursor-aware marquee reveal and an infinite scrolling testimonial grid.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Scroll 01

  A scroll-driven section with sticky media on one side that swaps images as the reader scrolls through the accompanying text content.

• Slarivo Text Reveal Block

  A line-by-line text reveal that wipes each line with a colored block using GSAP SplitText and ScrollTrigger.

• Slarivo Text Scroll Read

  A scroll-driven text component that reveals words with a gradient clip mask as the user scrolls through the section.

• Slarivo Collection Surfer

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

• Slarivo New Items Pill

  A floating pill that appears when new items arrive in a scrollable feed and jumps you back to the newest items on click, with an accompanying scroll hook.

• Slarivo you can scroll.

  you can scroll. component

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo BeUI Marquee

  Scroll Areas component from the 21st.dev community.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo HeroUI Scroll Shadow

  HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

• Slarivo Scroll Area File Explorer

  A scrollable file explorer list with type icons, size badges, sticky column headers, and a custom scroll area.

• Slarivo Logo Marquee

  An infinite horizontal marquee that scrolls a row of brand logos with mask-faded edges and hover-to-slow speed control.

• Slarivo Reveal Text

  Animated text reveal component with directional entrances (up, down, left, right), configurable delay, view-triggered animation, and reduced-motion support.

• Slarivo Encrypted Text

  A text component that scrambles into gibberish and gradually decrypts to reveal the real characters when it scrolls into view.

• Slarivo CSS Image Stacking

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

• Slarivo Notification Scroll Area

  A scrollable container that displays a long list of notifications grouped by date with sticky date headers.

• Slarivo Horizontal Scroll Gallery

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

• Slarivo Blurred Marquee

  An infinite logo marquee slider with progressively blurred mask edges and hover-controlled scroll speed.

• Slarivo Community Testimonial

  A responsive, accessible React testimonials section with looping horizontal scrollers, reusable TestimonialCard components, staggered entrance animations, hover-to-pause behavior, and a soft radial background for a polished, product-facing presentation.

• Slarivo 8-bit Scroll Area

  Pixel-art scroll area from 8bitcn.com — overflow container with retro chunky scrollbar styling.

• Slarivo Scroll Progress

  A spring-animated progress bar that tracks scroll position — works for the full page or a scrollable container element.

• Slarivo Scroll Progress

  A spring-animated progress bar that tracks scroll position — works for the full page or a scrollable container element.

• Slarivo Scroll Progress

  A spring-animated progress bar that tracks scroll position — works for the full page or a scrollable container element.

• Slarivo Autoscroll Slider

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

• Slarivo Infinite Moving Cards

  A horizontally scrolling marquee of cards with seamless infinite looping, direction and speed controls, pause on hover, and edge fade masks — ideal for testimonials, logo strips, and showcase rails.

• Slarivo Infinite Circular Scroll

  A vertical list of cards that loops seamlessly as you scroll, with the scrollbar hidden for a continuous circular feel.

• Slarivo LogoScroller

  LogoScroller is a reusable React component that creates a smooth, infinitely scrolling horizontal carousel of brand names or logos. It's perfect for showcasing partners, sponsors, clients, or technologies your product integrates with. The scroll speed is customizable, and the animation pauses on hover for accessibility and control.

• Slarivo MultiLogoScroller

  VerticalLogoScroller is a reusable React component that creates a smooth, infinitely scrolling vertical carousel of brand names or logos. It supports both upward and downward scroll directions, customizable speed, and hover-to-pause interaction. Ideal for showcasing partners, clients, sponsors, or technologies in a compact, animated format.

• Slarivo Scroll Animation

  Scroll Areas component from the 21st.dev community.

• Slarivo Scroll Fade List

  A scrollable list with gradient fade edges that appear to signal there is more content above or below. The top and bottom fades grow and shrink based on scroll position (measured on scroll and via a ResizeObserver, batched with requestAnimationFrame), leaving a stable scrollbar gutter. It is fully generic over the item type via getKey/items/renderItem, with a configurable max fade height and a themeable background color. Dependency-free.

• Slarivo Line Draw SVG

  An SVG path that animates drawing itself on scroll, hover, or mount, with built-in diamond, circle, star, heart, and arrow presets.

• Slarivo Horizontal Depth Fade

  A scroll-driven horizontal image strip that keeps the centered image in sharp focus while blurring, dimming and desaturating the others for a cinematic depth-of-field effect.

• Slarivo Infinite Grid

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

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Simple Carousel

  A draggable, scroll-aware marquee that continuously scrolls any elements horizontally or vertically with hover slowdown and custom easing.

• Slarivo Scroll Reveal Content A

  A scroll-driven section that reveals three numbered content blocks with a growing vertical progress line and synchronized image transitions as the user scrolls.

• Slarivo Scroll Bars

  An animated ruler-style scroll progress indicator that moves an accent marker across a row of bars as the page scrolls.

• Slarivo Scroll Blur

  A scrollable container that fades content into blurred gradient edges on the top, bottom, left, and right, with optional scroll-snap item helpers.

• Slarivo Scroller

  A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

• Slarivo Scroller

  A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

• Slarivo Scroller

  A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

• Slarivo Scroller

  A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

• Slarivo Scroll-Linked Video Scrubber

  A scroll-driven video component that pins to the viewport and scrubs the video's timeline forward or backward as the user scrolls, mapping scroll progress to playback position.

• Slarivo Stacking Cards

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

• Slarivo Stacking Cards

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

• Slarivo Parallax Image

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

• Slarivo Scroll Autoplay

  A scroll-driven sequence that cross-fades between stacked items based on scroll position, like an autoplaying slideshow controlled by the user's scroll.

• Slarivo Linear Carousel

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

• Slarivo Shutter Text

  Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.

• Slarivo Reading Progress

  A scroll-driven reading progress bar with an estimated time-left readout and a completion checkmark, plus a useReadingProgress hook for tracking how far through an article the reader has scrolled.

• Slarivo Sticky Header

  A scroll-condensing sticky header that shrinks its title from a large expanded state into a compact bar as its scroll container is scrolled, with optional subtitle, leading slot and actions.

• Slarivo Explorations with GSAP and Scroll Trigger

  Here is Explorations with GSAP and Scroll Trigger component

• Slarivo ReUI Scrollspy

  ReUI Scrollspy with the first 2 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Reveal Image Mask

  An editorial image reveal component that elegantly masks and blooms images into full frame using scroll-driven Framer Motion transitions.

• Slarivo ReUI Scrollspy

  ReUI Scrollspy with the first 2 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Scroll-Locked Video Hero

  A Scroll-Locked Video Hero component for introducing a page with a headline, value proposition, and primary action, featuring hero, video, scroll, apple.

• Slarivo Hero Scroll Video Pin Reveal

  A cinematic hero section with GSAP SplitText kinetic word reveal, clip-path badges, and an expanding full-screen drone video pin animation across mobile, tablet, and desktop.

• Slarivo ImgText Reveal Scroll Animation

  Scroll-driven text and inline image reveal animation using GSAP ScrollTrigger with floating magnetic cursor hover preview.

• Slarivo Scrollable Card Stack

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

• Slarivo Stacking Cards

  A scroll-driven stack of cards that pin and scale down on top of each other as the user scrolls, built with Motion.

• Slarivo Sheet with Scrollable Content

  A side sheet (drawer) that opens from the right with a long, vertically scrollable body — ideal for terms & conditions, policies, or any lengthy content with header and footer actions.

• 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 Scroll word reveal

  A Motion for React scroll scene that reveals each word as you scroll, from the official Motion examples catalog.

• Slarivo Scroll-linked spring animation

  An example of linking an animation to scroll using Motion for React's useScroll hook and smoothing it with useSpring.

• Slarivo Element scroll-linked animation

  An example of a scroll-linked animation using a specific element's scroll position using Motion for React's useScroll hook.

• Slarivo Track element within viewport

  An example of tracking an element within the viewport using Motion for React's useScroll hook.

• Slarivo Scroll Direction: Hide Header

  A sticky header that hides when scrolling down and reappears when scrolling up. Uses useMotionValueEvent to detect scroll direction.

• Slarivo Scroll Horizontal Gallery

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

• Slarivo Tile Scrollbar

  A scrollbar built out of tiles on a tilted tray: the page is cut into equal slices, passed tiles press flat and darken, the current one stands proud and fills left to right. Click a tile to jump or drag to scrub. Zero dependencies, no Tailwind - every rule…

• Slarivo Music Video Pin Stack

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

• Slarivo Thread

  A scrollable chat message container that automatically sticks to the bottom as new messages arrive and shows a jump-to-bottom button when the user scrolls up.

• Slarivo Sticky Content Wrapper

  Split-screen sticky scroll: content on one side steps through headings, copy and a CTA while the paired image scales and swaps on the other. Theme-aware, snap-aware, mobile stack fallback, prop-driven.

• Slarivo Horizontal Feature Reveal

  Vertical scroll drives a horizontal editorial track: number, title and copy reveal with SplitText line masks while each image parallaxes. Theme-aware, mobile fallback stack, prop-driven content.

• Slarivo Circular Split Roll

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

• Slarivo Zoom Slider

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

• Slarivo Glyph Portal

  Choose a letter, then scroll through it into your next section. A self-contained React component for gradients, images, video, and canvas backgrounds, with native scroll and a complete reduced-motion layout.

• Slarivo Sunset Skyline Hero

  A full-screen anime-style scroll-locked hero: scrolling forward pushes the camera through a window onto a Tokyo skyline at sunset, scrolling back closes it again — ending on a giant Japanese brand mark behind a transparent skyline cutout, topped with a…

• Slarivo Home Hero Landing Scroll Animation

  Hero landing section with a 4-phase GSAP ScrollTrigger scroll animation: icons cascade up with stagger, scale and fly to center, fly to nav header placeholders, then headline text segments reveal randomly on scrub. Built with Swiper background slideshow…