SLARIVO / VIDEOS

Videos Components

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

• Slarivo Video Player

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

• Slarivo Video Player

  A retro sci-fi HUD-style video player frame with bracket corners, scanline overlay, transport controls, and an elapsed-time readout.

• Slarivo Video Player

  A modern, customizable video player component with full controls and keyboard shortcuts.

• Slarivo Video Player Pro

  The VideoPlayerPro component is a fully featured, modern video player built with React and TypeScript, designed for a seamless user experience. It supports play, pause, and restart controls, a smoothly updating progress timeline, volume control with an interactive slider, and a settings popover for playback speed and captions. The player also includes fullscreen functionality and a responsive, sleek UI with a semi-transparent backdrop that blends with the video content. Leveraging Framer Motion for smooth animations and Radix UI components for accessibility, this component ensures both functionality and aesthetic appeal, making it ideal for embedding high-quality video experiences in web applications.

• Slarivo Video Modal

  Example component for demonstrating Video Modal component

• Slarivo Video Player

  Here is Video Player component

• Slarivo Audio Player

  Here is Audio Player component

• Slarivo YouTube Video Player

  An expandable YouTube video player that shows a thumbnail with a play button and opens into a full-screen modal iframe with smooth animations.

• Slarivo HLS Video Player

  A headless HLS video player with native HLS detection, adaptive resolution control, and error handling.

• Slarivo Video Thumbnail Player

  Clean and immersive. Full-width thumbnail with centered play button and bottom-left overlay text. Communicates professionalism and storytelling. Perfect for product intros, company overviews, or explainer videos.

• Slarivo AI Voice Input

  A voice input component with an animated visualizer and recording timer. It includes a demo mode, customizable visualizer, and recording callbacks. Features: • Animated audio visualizer • Recording timer display • Demo/preview mode • Start/stop callbacks • Dark mode support • Customizable visualizer bars • Mobile responsive

• Slarivo Hero Video Dialog

  A hero video dialog component.

• Slarivo About

  Here is About section component

• Slarivo Slideshow

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

• Slarivo File Viewer

  TypeScript-based React component, inspired by Supabase UI, for navigating file trees and previewing code with Shiki syntax highlighting. Perfect for documentation or dev tools, it offers file selection, code copying, and GitHub integration.

• Slarivo Preloader

  he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.

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

  Here is modern glass 3d card

• Slarivo Morphing Dialog

  A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.

• Slarivo Stories Carousel

  Here is Stories Carousel component

• Slarivo Cinematic Theme Switcher

  Videos component from the 21st.dev community.

• Slarivo Audio Player

  An audio player component made with framer motion and tailwind css.

• Slarivo Hero With Video

  Hero With Video and Image, Landing Page, Header

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Card Fan Carousel

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

• Slarivo Hero Video

  ✔️ ContainerScroll component props: accepts react html attributes ✔️ ContainerStagger component: staggers/delayed the animated children by default <<transition staggerChildren is set to 0.2>> accepts html motion props ✔️ ContainerAnimated component: (⚠️ to get orchestrated animations make sure to make it inside <ContainerStagger /> component) accepts "animation" prop define the animation set type: "left" | "right" | "top" | "bottom" | "z" | "blur" | undefined (set to opacity by default), accepts html motion props ✔️ ContainerInset component: { translateYRange?: [string, string] 👉 default:["-25%", "50%"] insetYRange?: [number, number] 👉 default: [35, 0] insetXRange?: [number, number] 👉 default:👉 default :[35, 0] roundednessRange?: [number, number] 👉 default: [1000, 16] } ⚠️ <ContainerInset /> can be used only inside <ContainerScroll /> component

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

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Story

  - story similar to IG and facebook, you can also use it as a autoplay carousel

• Slarivo PDF Viewer

  A basic PDF viewer, using shadcn components + react-pdf

• Slarivo FeaturedCrmDemoSection

  This component displays a CRM preview card that can switch between a thumbnail image and an autoplaying video. It uses a play button overlay that appears on hover to start the video. The card layout is responsive, filling available height and width while maintaining rounded corners for a polished look.

• Slarivo HoverPlayCard

  This HoverPlay Video Card component is a clean and interactive media element built with Shadcn UI. It enhances the video viewing experience by blending hover and click interactions into one intuitive design. When a user hovers over the card, the video automatically starts playing in a muted state, giving a quick preview without disrupting the browsing flow. On mouse leave, the video pauses, maintaining focus on the card. A subtle play/pause button overlay ensures users can take control — clicking the button will start or stop playback regardless of hover, and once clicked, the video continues with sound enabled. The design adapts seamlessly to both light and dark themes.

• Slarivo Kinetic Dots Loader

  A Simple Kinetic Dots Play Loader Component.

• Slarivo Music Reactive Hero Section

  A modern, minimal and bold hero section with a dynamic audio reactive visualization background. Includes built in audio player with play / pause controls and beautiful post processing effects including film grain, subtle film emulation, chromatic aberration and bloom. Everything is customizable and multiple aspects, from the wave color to the film grain intensity, are reactive to the audio.

• Slarivo Thumbnail button video player

  The ThumbnailButton component displays a video thumbnail that, when clicked, opens a modal video player. It supports both YouTube embeds (via youtubeId) and direct video URLs (via videoUrl), and it gracefully handles missing thumbnail or video sources by falling back to sensible defaults.

• Slarivo Spotify Card

  A modern, interactive Spotify-like music player component with premium UI features, playback controls, and animated visualizations.

• Slarivo Animated Download

  Animated Download with a sci-fi HUD (heads-up display) style theme. Completely customizable.

• Slarivo Particle Wave

  A dynamic and interactive background component for React that renders a mesmerizing wave of particles. Built with three.js for high-performance, GPU-accelerated animation, this component provides a beautiful and engaging visual experience. It's fully responsive and theme-aware, automatically switching between light and dark modes to match your application's design. As part of the EaseMize UI library, it's easy to integrate and great to customize.

• Slarivo Animated 3D Card

  This is animated 3D card

• Slarivo Side Panel Video

  Here is Video Side Panel component

• Slarivo Avatar Picker

  Animated avatar picker.

• Slarivo Video Upload Card

  A video upload card component that provides an interactive drop zone for video files with a dramatic vending machine-style animation where the uploaded video appears to drop in from above the dashed border area. The component supports drag-and-drop functionality, click-to-upload, and displays video previews with play controls, making it ideal for content creation and media management interfaces. It can be integrated into dashboards, forms, or media libraries to enhance user experience with smooth, engaging animations while maintaining accessibility standards.

• Slarivo WaveformPlayer

  The Waveform Player component provides a sleek, responsive audio player with a visual waveform representation. Users can see the current play position and click or drag anywhere on the waveform to seek through the audio. Designed with light and dark themes in mind, the waveform bars and progress overlay automatically adjust their colors to maintain clear visibility in both modes. Its compact size, minimal spacing, and clean black-and-white design make it suitable for modern web apps, podcasts, or music platforms, providing a polished and intuitive listening experience.

• Slarivo 3d-card

  this is the card with 3d animation.

• Slarivo Music Player

  Minimal Music Player A clean, modern music player with album art focus, intuitive controls, and smooth playback experience. Ideal for streaming platforms, playlists, or showcasing audio content with style.

• Slarivo Media Button

  MediaButton is a reusable React component that displays a button with a smooth hover effect revealing a looping .mp4, .webm, or .gif background, with a dark overlay to keep the text readable.

• Slarivo Glassmorphism Listen App

  Music streaming block with glassmorphism player, curated highlights, and animated controls

• Slarivo musicCard

  a music card

• Slarivo Hero

  This Hero component is a visually engaging introduction section designed for an animal-themed website. It features a soft, curved light-green gradient background that gently fades in on load, creating a calm and natural atmosphere. At the top, a badge highlights the theme — “Discover the Animal World”. The main heading and supporting paragraph invite users to explore fascinating creatures and learn about wildlife. Action buttons guide visitors to start exploring or access animal data, while an embedded video player showcases captivating animal footage, making the experience more immersive and interactive.

• Slarivo MusicPlayerCard

  A sleek, responsive music player card built in React. Displays album art, track details, volume bars, and full playback controls (play/pause, skip, time slider).

• 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 AI prompt Box

  AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording

• Slarivo Hero Section 5

  Modern hero section with video background

• Slarivo Zoom Parallax

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

• Slarivo Parallax Floating

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

• Slarivo 3D Carousel

  A 3D image carousel

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• 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 Feature Section with Bento Grid

  Feature section with Bento Grid, like product pics, YouTube videos, and a globe.

• Slarivo Cinematic landing Hero

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

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Animated Loader

  Cool Animated Loader

• Slarivo layout preloader

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

• Slarivo Avatar Uploader

  An interactive avatar uploader with image cropping and preview that supports custom aspect ratios, size limits, and file validation. Perfect for profile pictures, user onboarding flows, and account settings pages.

• Slarivo PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

• Slarivo Portfolio Gallery

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

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

• Slarivo Animated Hero Section

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

• Slarivo story-viewer

  Timelines component from the 21st.dev community.

• Slarivo Thumbnail Carousel

  A reusable and responsive thumbnail carousel

• Slarivo Glass Video Hero

  A premium landing hero featuring a full-screen video background, glassmorphism navigation bar, responsive mobile menu with focus trap, and interactive full-bleed height toggle. Designed for SaaS, travel, and modern product landing pages. Includes accessibility improvements, smooth transitions, and mobile-first responsive layout. Built using React, Tailwind CSS, and Lucide icons.

• Slarivo Image Player

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

• Slarivo Polaroid flick-through

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

• Slarivo Clipped Shape image

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

• Slarivo Music Portfolio

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

• Slarivo PrismaHero

  A full-screen cinematic hero section with a background video, animated word reveal, and minimal floating navbar—designed to highlight a creative brand with strong visual storytelling and smooth motion interactions.

• Slarivo MultiMedia Testimonial

  The TestimonialCard component is a responsive, theme-adaptive UI element built with shadcn/ui that elegantly displays client testimonials. It supports text, images, and videos within a unified card layout featuring smooth transitions and dark/light mode compatibility. Each card includes a header, scrollable content area, and profile section, while video testimonials open inside a modal dialog with auto-play and reset controls. Designed for scalability, every card manages its own state independently—preventing global re-renders or hydration issues—making it ideal for showcasing multiple user reviews or success stories in modern web applications.

• Slarivo VHS Hero Section

  Hero section ith an ethereal VHS retro aesthetic. Includes interactive animations, text effects and call to action

• Slarivo Onboarding Checklist

  Onboarding Checklist Description: A visually engaging card component that displays a checklist of required items alongside a video guide. It's designed to prepare users for an onboarding process, ensuring they have all necessary documents and information ready. The component is fully responsive, theme-adaptive, and includes subtle animations to enhance user experience.

• Slarivo Clip-Path Image

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

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

  Galleries component from the 21st.dev community.

• Slarivo Hover Image Gallery

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

• Slarivo Bar Visualizer

  Here is Bar Visualizer component

• Slarivo Welcome

  Workspace Welcome This component provides a welcoming dashboard view for users, featuring a personalized greeting, quick action buttons, and an introductory video card. It's designed to be easily configured via props.

• Slarivo Media Provider

  Headless media player provider that creates a per-instance Zustand store, typed event emitter, and feature setup for building custom video and audio player UIs.

• Slarivo Social Stories

  Here is social stories component

• Slarivo Animated Live Visitor

  Animated Avatars Live Visitor Counter

• Slarivo PDF Viewer

  A scrollable PDF viewer with toolbar, zoom, rotate, search, text selection, thumbnail navigation, upload and download. Powered by EmbedPDF with PDFium-backed page rendering.

• Slarivo Video Generator Card

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

• Slarivo Music Player Widget

  A sleek modern music player with an audio-reactive dot-grid visualizer, spinning disc, smooth cover/track crossfades, and a Web Audio API beat-sync oscillator. Zero external animation dependencies, pure CSS keyframes and requestAnimationFrame.

• Slarivo Music Player Card

  Music Player Card A visually polished and interactive music player card component. It features a glassmorphism effect, animated progress bar, and theme-adaptive styling, making it suitable for modern web applications.

• Slarivo Toolbar

  A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup and ToolbarSeparator. Each part uses the render prop so it can compose with buttons, toggle groups and inputs while keeping a single roving-tabindex focus model. Demos compose it with the Button, Tooltip and ToggleGroup components (shipped alongside).

• Slarivo RetroDvdTv

  A fun retro TV component with a classic DVD logo bouncing around the screen. Resize it, change colors, tweak the speed — and relive the 2000s!

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Floating Panel

  Here is Floating Panel component

• Slarivo YouTube Embed

  Responsive YouTube video embed with an aspect-ratio container and a loading spinner shown until the iframe finishes loading.

• Slarivo Video Ambient

  A video player card that projects a blurred, color-matched ambient glow behind the video like YouTube's ambient mode.

• Slarivo Player Layout

  Composable structural containers for building a video player UI — a media frame plus overlay and top/bottom control layers with proper pointer-event layering.

• Slarivo Animated hero

  Animated hero with text and two shadcn/ui buttons

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

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

• Slarivo Animated AI Chat

  An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.

• Slarivo Futuristic Hero

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

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo Interactive 3D Robot

  3D Interative scene with robot Whobee using Spline scene

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo image auto slider

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

• Slarivo Interactive Selector

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

• Slarivo Carousel

  A customizable carousel with microinteractions and slider.

• Slarivo Galaxy Interactive Hero Section

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

• Slarivo CardStack

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

• Slarivo Parallax Scrolling

  Here is Parallax Scrolling component

• Slarivo Luma Spin

  Luma Spin is a loader component

• Slarivo Animated Feature Carousel

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

• Slarivo Animated Testimonials

  A clean animated testimonials section

• Slarivo Project Showcase

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

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger animation

• Slarivo 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 Image Gallery

  Here is Image Gallery component

• Slarivo features

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

• Slarivo Carousel card

  UI component for card with carousel effects

• Slarivo Focus Rail

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

• Slarivo Bento Gallery

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

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo Animated Glow Card

  A React component that renders a visually striking card with an animated, glowing border effect. This component uses an SVG filter (feColorMatrix) to achieve the customizable glow, enhancing UI elements with a modern and interactive feel. It includes a CardCanvas to house the SVG filter definition and a Card component for the main content display, complete with border elements. Ideal for drawing attention to featured content, calls to action, or simply adding a touch of dynamic visual flair to your application.

• Slarivo Apple Liquid glass switcher

  Here is Apple Liquid glass switcher component

• Slarivo Animated Tabs

  Interactive tabs animated using clip path and framer motion

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Modern Hero

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

• Slarivo Modern Animated Hero Section

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

• Slarivo Button

  Here is modern liquid animated button component

• Slarivo Slide Button

  Here is Slide Button component

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

  A versatile and engaging UI component that allows users to explore content in a more immersive way.

• Slarivo Glass Testimonial swiper

  Interactive 3D Testimonial Stack Component for React - A premium, drag-enabled testimonial carousel featuring stacked card animations, glass morphism effects, and smooth transitions. This React TypeScript component displays customer reviews in an engaging 3D stack layout with touch/mouse drag navigation, automatic pagination dots, and responsive design. Perfect for showcasing client feedback, user reviews, product testimonials, and social proof on modern web applications. Key Features: Interactive Drag Navigation - Users can swipe/drag cards for intuitive navigation 3D Stacked Animation - Cards stack behind the active testimonial with scaling and opacity effects Glass Morphism Design - Modern frosted glass aesthetic with backdrop blur effects Responsive Layout - Mobile-first design that adapts to all screen sizes TypeScript Support - Fully typed interfaces for better developer experience Customizable Styling - Avatar gradients, tags, stats, and color schemes Accessible Controls - ARIA labels and keyboard navigation support Performance Optimized - Efficient rendering with useCallback and ref management

• Slarivo Framer Carousel

  Carousels component from the 21st.dev community.

• Slarivo File Upload Card

  File Upload Card This component provides a complete UI for file uploads, including drag-and-drop functionality, progress tracking, and status indicators. It is built to be reusable and customizable through props.

• Slarivo Interactive Text Particle

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

• Slarivo Bounce card features

  BouncyCardsFeatures: Engaging Feature Showcase with Interactive Cards Showcase your product or service features in a fun and interactive way with BouncyCardsFeatures. This React component presents key selling points within visually appealing cards that "bounce" and rotate on hover, drawing attention and making your offerings stand out. Features Interactive Hover Effects: Each feature card reacts to user interaction with a subtle "bounce" and rotation on hover, creating a dynamic and engaging experience. Visually Distinctive Cards: The component uses a grid layout to arrange various sized cards, each with a vibrant, gradient-filled "feature demo" area that animates upwards and rotates on hover, emphasizing your product's capabilities. Clear Call to Action: A prominent headline immediately communicates your value proposition, complemented by a Learn more button that also includes subtle hover and tap animations. Responsive Grid Layout: The feature cards are arranged in a responsive grid that adapts gracefully to different screen sizes, ensuring optimal presentation on both mobile and desktop. Customizable Content: Easily populate each card with a title and integrate your own feature demos or descriptive content within the gradient-filled area. How it Works BouncyCardsFeatures leverages Framer Motion to deliver its smooth and playful animations: motion.div for Cards: The BounceCard component uses motion.div with whileHover props to apply the scaling and rotation effects when a user hovers over a card. CSS Transitions for Internal Elements: The FEATURE DEMO HERE element within each card uses standard CSS transitions to animate its translateY and rotate properties on the parent's group hover state, creating the distinct "pop-up" effect. This component is perfect for product pages, service descriptions, or any section where you want to highlight key features in an engaging, modern, and memorable way.

• Slarivo Card

  Travel Card This component encapsulates the visual representation of a travel destination. It is highly reusable, accepting props for the image, logo, text content, and pricing, making it adaptable for any similar use case. The advanced animation on hover provides a modern, interactive user experience.

• Slarivo Interactive Neural Vortex Background

  This code creates a dynamic, immersive WebGL background featuring a swirling, organic "neuro" effect that reacts to user interaction

• Slarivo Profile Card

  This is a high-fidelity Animated Profile Card component designed for user discovery or social interactions. It includes layered blur effects, animated reveal of bio/stats, motion-enhanced name rendering (letter-by-letter), and an interactive follow button. It adapts to theme and motion preferences, making it production-ready for profile previews in social apps, team dashboards, or creator platforms. Perfect for social networks, SaaS teams, influencer marketplaces, or any UI needing rich identity previews with motion-driven engagement.

• Slarivo Sparkles

  Animated floating particles component.

• Slarivo Particle Animation

  he component includes all styling inline and maintains the interactive mouse/touch controls that adjust the animation progress based on cursor position around the circular path.

• Slarivo Tubelight Navbar

  A sleek and modern navigation bar component with smooth animations and a dynamic indicator. Perfect for primary navigation in web applications. Features - Animated tab indicator with glowing effect - Responsive design (mobile & desktop views) - Icons for mobile view, text for desktop - Dark/Light theme support - Frosted glass effect for active state - Smooth transitions between tabs - Built with Framer Motion for fluid animations

• Slarivo Spotlight Card

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

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Modern Animated Sign In

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

• Slarivo Modern Mobile Menu

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

• Slarivo Limelight Nav

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

• Slarivo Futurastic Hero Section

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

• Slarivo macOS Dock

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

• Slarivo Full Screen Scroll FX

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

• Slarivo Logo Cloud 4

  Clients component from the 21st.dev community.

• Slarivo Gaming Login

  A futuristic, gaming-themed NexusGate login UI built with React and TypeScript.

• Slarivo Modern & Stunning sign in

  Dark theme modern and stunning sign-in component.

• Slarivo Marquee Effect

  The marquee component is designed to create a dynamic user experience by continuously scrolling text horizontally. This effect is perfect for highlighting important information, announcements, or news headlines that need to catch the user's attention. The smooth scrolling animation adds movement and liveliness to the interface, making important content more noticeable to users. This example was created using Tailwind CSS and Framer Motion.

• Slarivo Gradient Card

  A premium 3D interactive card with smooth motion animations, and a sophisticated purple-blue glow that creates an immersive, futuristic UI experience.

• Slarivo AI Assistant Interface

  An AI chat interface, with input, file uploads, suggestions and an animated logo

• 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 3D Adaptive Navigation Bar

  A stunning 3D navigation component with ultra-realistic depth, lighting, and material effects. Features: • Premium 3D design with photorealistic shadows and gradients • Smooth hover-to-expand interaction with staggered animations • Click-to-select behavior with automatic collapse • Elegant text transitions with subtle lighting pulses • Fully responsive and optimized for modern web apps • Built with React, TypeScript, and Framer Motion

• Slarivo flow-gradient-heroSection

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

• Slarivo 3D Gallery Photography

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

• 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 Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Infinite Drag + Scroll Gallery

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

• Slarivo 3D Animation

  A responsive and cinematic hero section component that displays text scrolling along the walls of a 3D animated hallway. It includes a reflection, parallax effects, and customizable imagery.

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo HolographicCard

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

• Slarivo Pixel perfect Hero

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

• Slarivo Project Card

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

• Slarivo Elegant Carousel

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

• Slarivo Vertical Image Stack

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

• Slarivo 3D Marquee

  Here is 3D Marquee component

• Slarivo Reveal Wave Image

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

• Slarivo Smooth Scroll

  Here is Smooth Scroll card

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Animated Video on Scroll

  Animated video on scroll with also reveal text effects

• Slarivo Dynamic Text Slider

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

• Slarivo Interactive Scrolling Story Component

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

• Slarivo Scroll Card

  Here is scrolling stacking card

• Slarivo Feature Card

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

• Slarivo Tubes Curor

  A fullscreen WebGL cursor animation built with Three.js that renders animated colorful tube trails and reactive lights; click to randomize tube and light colors. Ideal as an interactive hero background or pointer effect for landing pages and portfolios

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Icon 3D Hover

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

• Slarivo Particle Hero

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

• Slarivo Cube Loader

  A 3D cube loader built with React and CSS, featuring a glowing core, breathing translucent faces, and a smooth infinite spin, paired with minimal “Loading” microcopy for futuristic wait states.

• Slarivo Modern Payment Form

  This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users can quickly initiate their preferred transaction flow. The modal includes styled input fields for billing and card details, enhancing readability and usability. The layout is visually structured to guide users through the payment process step-by-step, offering both form validation and interactive feedback cues.

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

  Animated text marquee component with vertical scrolling.

• Slarivo Animated Gradient

  Animated gradient background with presets and customizable swirl effects using WebGL.

• Slarivo 3D Marquee

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

• Slarivo Apple Tahoe Liquid Glass Button

  A high-fidelity Liquid Glass Button engineered for shadcn/ui and Tailwind CSS. It features a hyper-realistic glassmorphism engine driven by an inline WebP SVG displacement map (feDisplacementMap) and backdrop-filter refraction. It utilizes an isolated z-index lens layer to guarantee zero text-ghosting, while an intricate, multi-layered box-shadow stack handles dynamic light and dark reflections. Features fluid scale transforms, oklch color mix customization, and auto-scaling filters. Zero-dependency, fully accessible, and single-file portable.

• 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 Animated Profile Card

  Here is Animated Profile Card component

• 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 Progressive Flux Loader

  A glowing flux progress bar with phase labels that fly in letter by letter.

• Slarivo Particle Animation

  Interactive particle animation with mouse tracking, gooey SVG effects, and animated text. Features a custom cursor that emits particles on movement, creating a dynamic mask reveal effect with scaling typography.

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Playing Card

  An interactive component inspired by a playing card, featuring a dynamic background. This component is also available on Namer UI: https://namer-ui.netlify.app Watered-down Vue version: https://namer-ui-for-vue.netlify.app/ Credit: https://ui.aceternity.com/components/canvas-reveal-effect

• Slarivo Linear Card

  Here is linear card component

• Slarivo Perspective Marquee

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

• Slarivo Davincho Hero-1

  Animated hero section with parallax background image.

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

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

• Slarivo clipped-video-tab

  A cinematic clipped video section built with React, TailwindCSS, and Framer Motion for modern UI experiences.

• Slarivo Animated Banner

  A reusable animated banner pattern built from a short muted video loop with a poster fallback, a gradient overlay that fades from a solid color on the text side to transparent over the image, an extra hover/focus depth overlay, and a compact content layer with a title, balanced subtitle, call to action, and a live DD:HH:MM:SS countdown. Fully prop-driven (video, poster, title, subtitle, CTA, deadline, overlay color) and dependency-free.

• 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 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 Audio Upload Card

  The AudioUploadCard component provides an interactive drag-and-drop interface for audio file uploads with animated visual feedback. It features a customizable upload area that transforms during file selection, showing a waveform visualization and filename display when an audio file is uploaded. The component supports both drag-and-drop and click-to-upload functionality, making it ideal for applications requiring audio transcription, voice recording, or media management workflows.

• Slarivo Podcast Card Player

  The Podcast Card Player is a sleek, theme-aware component designed to display podcast episodes in a compact card layout. Each card includes an image, title, and episode information, along with an inline audio player featuring play/pause functionality, a progress bar, and a live timestamp. Built using Shadcn UI, it provides a clean and consistent design that adapts seamlessly to both light and dark themes. This component is perfect for podcast apps, media sections, or content platforms where users can quickly browse and listen to episodes without leaving the page. Its modular design also allows easy configuration for multiple cards or different audio sources.

• Slarivo Card

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

• Slarivo MusicEqualizer Upload

  The Music Equalizer Upload component is a dynamic and visually engaging file upload interface designed specifically for audio files. Each uploaded file is represented with its name and an animated equalizer, where bars bounce rhythmically to indicate ongoing upload progress—perfect for music or media applications. Users can select multiple audio files either by clicking the upload button or dragging files into the input area. Only audio files are accepted, ensuring file-type integrity, while non-audio files are automatically ignored. Each file can be individually removed using a dedicated trash icon without affecting other uploads. Built with Shadcn UI, Lucide icons, and Framer Motion, this component supports both light and dark themes and offers smooth entry and removal animations, making audio uploads visually appealing and highly interactive.

• Slarivo Synced Lyric Captions

  A timed caption player that reveals script lines bottom-to-top in sync with a timer or audio track, with play/pause, skip, volume, playback speed, and a clickable progress bar.

• Slarivo Waveform

  An animated audio waveform visualizer with pulsing bars, glow, scanline overlay and corner brackets for playback and live-signal displays.

• Slarivo Wave

  An animated wave loading indicator built from bars that pulse vertically to signal a busy or loading state.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring floating, panel, audio player, audio-player.

• Slarivo Astryx Aspect Ratio

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

• Slarivo Scroll-Triggered Video Hero

  A robust hero section that transitions between video chapters based on viewport position. Uses sticky positioning for performance, with z-index layering for smooth cross-fades. Includes a synchronized progress indicator and accessible text overlays.

• 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 Lip-scroll-zoomin-animation

  Lip scroll zoomin animation with GSAP video mask reveal.

• 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 Signal Bars Loader

  An audio waveform loading indicator with configurable bars that pulse rhythmically in equalizer, waveform, or heartbeat styles.

• Slarivo Volume Control Slider

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

• Slarivo Modern Volume Slider

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

• Slarivo Equalizer Bar Slider

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

• Slarivo Kinetic Cyber Audio HUD

  Anime and cyberpunk kinetic HUD music visualizer with HTML5 2D canvas falling sakura petal physics, inertia lerp parallax cursor tracking, laser scanning aura, and audio player.

• Slarivo Magic Hour

  A scroll-scrubbed video hero. Scroll owns the timeline - nothing autoplays: progress maps to a target frame and a damped chase writes it to currentTime, with seeks serialized so fast flicks skim instead of queueing. Needs an all-keyframe (GOP 1) MP4.

• Slarivo Gallery Grid with Captions

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

• Slarivo Music Video Pin Stack

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