SLARIVO / MAPS

Maps Components

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

• Slarivo Map

  A MapLibre-powered map component with theme-aware basemaps, controlled viewport state, and custom style switching.

• Slarivo MapRoute

  A MapLibre route layer component for drawing paths and selectable route options.

• Slarivo MapArc

  A MapLibre arc layer component for curved origin-destination connections with hover details.

• Slarivo Expanded Map

  An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

• Slarivo Expand Map

  Click on this component to get a clean map street view with some details.

• Slarivo Location Map

  An animated location map component with pulsing markers and smooth transitions.

• Slarivo Interactive Map

  An interactive GPS map with multiple visualization styles and custom map markers

• Slarivo LayerMarkers

  A high-performance MapLibre marker layer that renders many clickable point markers from GeoJSON.

• Slarivo MapClusterLayer

  A MapLibre cluster layer for grouped GeoJSON points with clickable clusters, individual point callbacks, and popup support.

• Slarivo Map

  Connect with teams and clients worldwide. Our platform enables seamless collaboration across continents, bringing the world to your workspace.

• Slarivo Radial Orbital Timeline

  A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.

• Slarivo World Map

  A world map with animated lines and dots, programatically generated.

• Slarivo Agent Plan

  An animated task plan for your agent, including subtasks and assigned MCP servers.

• Slarivo Features 9

  features section

• Slarivo Gantt

  Maps component from the 21st.dev community.

• 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 Travel Connect Signin

  This project is "Travel Connect," a modern web application designed for global travelers and digital nomads. It features an elegant login interface with a distinctive world map visualization made of animated dots and route lines.

• Slarivo Spatial Product Showcase

  A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients that adapt to the active item, and a sleek floating control dock. Fully responsive, accessible, and data-driven.

• Slarivo Halide Topo Hero

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

• Slarivo Combined Featured Section

  The combined section component serves as a spotlight area to showcase the core strengths or highlights of our platform. It brings together key offerings

• Slarivo Radar Chart

  Here is Radar Chart component

• Slarivo Location Tag

  A compact, interactive location indicator with a live pulsing dot and smooth text-swap animation. Hover reveals your current local time.

• Slarivo Roadmap Card

  The RoadmapCard component is a minimal, animated product roadmap built with shadcn/ui and Framer Motion. It displays key project milestones in a clean timeline format, supporting light and dark modes out-of-the-box. Features: 📅 Display quarterly milestones with title, description, and status ✨ Animated timeline dots with fade and slide-in effects 🎨 Minimal, modern design with hover scale effect on dots 🌗 Fully theme-aware (light/dark mode compatible) 🔹 Reusable and dynamic via items prop Ideal for showcasing product plans, feature releases, or project timelines in a visually appealing and interactive way.

• Slarivo Hero Section

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

• Slarivo 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 3D Card

  Destination Card – Showcase travel spots. Highlights locations with image, details, and a quick booking option for better trip planning.

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

  A MapLibre arc layer component for curved origin-destination connections with hover details.

• Slarivo Breadcramb

  Displays a hierarchy of links to the current page or resource in an application.

• Slarivo Heatmaps

  here is interactive heatmaps

• Slarivo Vector Pad

  Interactive radar pad with smooth-tracking crosshairs, lock states, and real-time coordinates.

• Slarivo Radar chart

  Here is radar chart example

• Slarivo MarkerPopup

  Marker popups for rich location cards with labels, media, ratings, hours, and actions.

• Slarivo Planner Card

  Route Planner Card A visually polished card component that displays route information, including duration, distance, an animated elevation graph, and a call-to-action. It's designed to be easily customized with props.

• Slarivo Heat Map XL

  Here is heat map xl sized

• Slarivo Heatmap Calendar

  The Heatmap Calendar component is a visually intuitive way to track daily activity using Shadcn UI components. Each day of the current month is displayed as a block whose color intensity reflects the number of events scheduled, allowing users to quickly gauge activity at a glance. Clicking or hovering on a day opens a Popover showing all events for that day, with each event displayed inside a Card. Users can add new events via an input field and button, and each event can be removed using the Lucide Trash2 icon. The design is clean, responsive, and works seamlessly in both light and dark themes, providing a simplified, month-focused view without extra or overlapping dates.

• Slarivo ColorEmotionSelect

  The Color-Emotion Semantic Select is a reusable UI component built with shadcn UI’s Select primitives that lets you visually map options to meaningful colors and emotions. Instead of showing plain text choices, each option carries a color indicator—such as red for “High Priority,” yellow for “Warning,” or blue for “Calm”—and can also include an emoji or icon to express mood or intensity. This makes the dropdown more intuitive, accessible, and quick to scan, especially in dashboards, analytics tools, or design systems where colors already communicate status or priority.

• Slarivo FlightAirport

  Renders a single airport marker with optional labels, custom marker UI, and click callbacks.

• Slarivo Heat Map middle

  Here is heat map middle sized

• Slarivo SDF Dreamscape

  effect with a new one called "SDF Dreamscape," which uses signed distance functions (SDFs) to render a dynamic, fractal-like landscape with intricate details and a more sophisticated color palette. The UI controls have been re-mapped to control different aspects of this new scene

• Slarivo Heat Map

  Here is Heat Map small component

• Slarivo Map

  A MapLibre-powered map component with theme-aware basemaps, controlled viewport state, and custom style switching.

• Slarivo Map

  A MapLibre-powered map component with theme-aware basemaps, controlled viewport state, and custom style switching.

• Slarivo Treemap chart

  here is treemap component

• Slarivo Hexagon map

  Hexagon map large sized

• Slarivo Event Constellation Calendar

  The Event Constellation Calendar is a creative calendar component that visualizes days of the month as glowing “stars” positioned inside a constellation-like map. Each date is placed within a 400×400 canvas, ensuring all stars stay neatly inside the boundary, while connected lines form subtle constellations between consecutive days that have events. Users can navigate between months, add new events, and view or remove existing ones through an interactive popover. The design adapts to both light and dark themes, using soft backgrounds and luminous highlights to maintain readability and aesthetics. This component blends functionality with a visually engaging experience, making it ideal for projects where you want a calendar that feels more dynamic and artistic than traditional grid layouts.

• Slarivo MapControls

  Interactive map controls for zoom, compass, geolocation, and fullscreen actions.

• Slarivo MapRoute

  A MapLibre route layer component for drawing paths and selectable route options.

• Slarivo Luminous Topography

  An animated contour-map background — drifting topographic lines that brighten around the cursor. Canvas-free, pauses when offscreen.

• Slarivo MarkerLabel

  Positioned marker labels for MapLibre marker content.

• Slarivo Timeline

  A timeline component with sticky header and scroll beam follow.

• Slarivo Globe

  An autorotating, interactive, and highly performant globe made using WebGL.

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Futuristic Hero

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

• Slarivo Wireframe Dotted Globe

  interactive 3D globe that allows you to rotate and zoom in on Earth with intuitive mouse controls

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Event Manager

  A comprehensive event management system with full calendar functionality. Features include multiple view modes (month, week, day, and list), drag-and-drop event scheduling, color-coded categories, and a powerful tagging system. The component supports advanced search and filtering by color, tag, or category, with smooth animations and hover effects that display quick event details. Fully responsive across all devices with touch-friendly controls, horizontal scrolling filters on mobile, and an intuitive interface for creating, editing, and organizing events. Perfect for scheduling applications, project management tools, or any system requiring sophisticated calendar functionality.

• Slarivo Glow menu

  Glow menu component

• Slarivo Interactive Selector

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

• Slarivo Team

  Here is Team component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Arc Gallery Hero Component

  "Arc Gallery - Interactive Image Showcase": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design

• Slarivo Animated Card Chart

  Here is Animated Card Chart component

• Slarivo COBE Globe

  A lightweight 5KB WebGL globe with markers, arcs, and CSS Anchor Positioning labels. Drag to rotate, with momentum physics.

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Card

  Displays location-specific highlights with imagery, title, and subtle UI elements like a "like" icon. Ideal for showcasing top destinations, promoting tours, or suggesting user-curated travel picks.

• Slarivo Bar Chart

  Here is Bar Chart component

• Slarivo Referral Card

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

• Slarivo Modern Feature Grid

  A responsive and theme-able grid component to showcase product features, styled with a modern glassmorphism effect and an interactive spotlight background.

• Slarivo Menu Item Card

  Menu Item Card This component displays a food item with its image, price, name, and an interactive "ADD" button. It's designed to be highly reusable and customizable through props.

• Slarivo Tracker Card

  Package Tracker Card This component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, package details, destination, and more.

• Slarivo Bar Visualizer

  Here is Bar Visualizer component

• Slarivo Cuisine Selector Chips

  This code implements an interactive cuisine selector component. It allows users to select multiple cuisines from a predefined list. The component utilizes a functional approach, leveraging React's useState hook for managing selected items. The core functionality involves toggling the selection state of each cuisine when a button is clicked. The component dynamically updates the UI to reflect the user's choices. It enhances user experience with smooth animations and visual feedback powered by Framer Motion. The visual style includes a checkmark that appears when a cuisine is selected, smoothly animating in and out. The styling uses a dark theme and is responsive. The component addresses the need for a user-friendly and visually appealing way to allow users to select multiple options from a list, particularly useful in applications like food delivery apps, recipe websites, or preference settings. The component iterates through a predefined array of cuisines, creating a button for each. Each button uses Framer Motion's animation capabilities for hover, tap, and selection state changes, providing smooth visual feedback. The selected cuisines are stored in an array managed by the useState hook. The toggleCuisine function updates this array, adding or removing cuisines based on user interaction. The Check icon from the lucide-react library is used to visually indicate selected cuisines. The component's animations are carefully configured to ensure a smooth and engaging user experience. It can be applied in various scenarios, such as filtering options, preference settings, or interactive forms where multiple selections are required. For example, a food delivery app could use this component to let users select their preferred cuisines, a recipe website might use it to filter recipes, or a survey could use it to allow multiple-choice answers.

• Slarivo Card

  Travel Route Card A visually engaging card component to display travel route information with a like interaction. It uses framer-motion for smooth, staggered entrance animations and interactive feedback on hover and click.

• Slarivo Folder Components

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

• Slarivo Card

  Location Card A visually engaging card component to display location details with an image background and a 3D tilt effect on hover. It's fully responsive and theme-adaptive.

• Slarivo Trail Grid

  A high-performance, interactive background grid for React. Tracks cursor movement to create a customizable glowing trail effect using pure DOM elements and CSS Grid. Fully responsive with configurable cell sizes, colors, and fade durations.

• Slarivo FlightRoutes

  Renders multiple routes in batch with shared defaults and per-route overrides.

• Slarivo MapMarker

  DOM-based map markers with custom content, tooltips, popups, and draggable marker support.

• Slarivo MapMarker

  DOM-based map markers with custom content, tooltips, popups, and draggable marker support.

• Slarivo CustomLayer

  A MapLibre custom layer control that toggles interactive GeoJSON park polygons over a themed map.

• Slarivo MarkerContent

  Custom marker content rendered inside a MapLibre marker.

• Slarivo Beam Marker

  A vertical light-beam marker with a bracketed label, optional sublabel and coordinates for annotating maps, diagrams or dashboards.

• Slarivo GoldMapPattern

  A golden treasure-map inspired animated background built with CSS gradients, SVG filters, and subtle golden rain.

• Slarivo ArcticMapPattern

  A frosty, hand-drawn arctic map background with icy gradients, SVG distortion, and animated snowfall.

• Slarivo FlightMultiRoute

  Renders connecting multi-leg routes from ordered waypoints, ideal for itinerary visualization.

• Slarivo Expanded Map

  An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

• Slarivo Expanded Map

  An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

• Slarivo Expanded Map

  An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

• Slarivo IslandPattern

  Animated CSS + SVG island/ocean background with rain and hand-drawn wave distortion

• Slarivo MapPopup

  A standalone MapLibre popup component for controlled overlays at specific coordinates.

• Slarivo Astryx Avatar Status Dot

  AvatarStatusDot shows a user's presence state (online, away, busy) as a colored dot anchored to an Avatar, from Meta's Astryx design system. Pass it to Avatar's status slot; variants map to success, neutral, and error colors with an accessible label.

• Slarivo Line Chart

  Here is Line Chart component

• Slarivo Modern Timeline

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

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Card

  Place Card A visually polished card component for displaying travel destinations or listings. It includes an image carousel, rating, tags, and booking information, with smooth animations powered by framer-motion.

• Slarivo Category List

  An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

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

  Here is Radar Chart component

• Slarivo Radar Chart

  Here is Radar Chart component

• Slarivo Activity Chart Card

  Activity Chart Card This component displays activity data in a bar chart format. It's designed to be reusable, accepting props for the title, total value, and chart data. The bars animate into view sequentially for a polished user experience.

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo GitHub calendar

  GitHub-style calendar component for Next.js that displays a contribution-like heatmap.

• Slarivo Trail Card

  Trail Card A visually polished card component to display trail or location information, featuring a prominent image, key stats, and an interactive call-to-action. It includes a subtle hover animation for a modern feel.

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo Project Card

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

• Slarivo Fallback Card

  Here is Fallback Card component

• Slarivo Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• Slarivo Visualize Booking

  Here is bookings vizualizationg component

• Slarivo Project Detail View

  Project Detail View A comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, description, attachments, and a detailed task list. The component is built to be highly reusable and is styled using shadcn/ui theme variables for seamless light and dark mode support. It incorporates animations with framer-motion for a more dynamic user experience.

• Slarivo Member List

  Here is modern Member list by indev ui

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo dock

  Here is dock component

• Slarivo Mini Calendar

  This is a sleek and responsive mini calendar component built using React and TailwindCSS, designed to display weekly views with a focus on minimalism and clarity. The selected day is highlighted with a bold background and primary accent color (blue-600), while adjacent dates remain subtle for visual hierarchy. Navigation arrows allow users to switch between months smoothly. The component is ideal for dashboards, schedulers, or date-picking interfaces.

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Tilt Card

  Here is Tilt Card component

• Slarivo Radar Chart

  Here is Radar Chart comopnent

• Slarivo Contribution Graph

  Here is Contribution Graph component

• Slarivo Dashboard Card With Modal

  A versatile dashboard card component featuring a modal overlay for data management, designed to display user information alongside interactive elements like copy-to-clipboard functionality and update confirmations. This component excels at presenting structured data in a clean, accessible format while providing smooth blur-based transitions that enhance user experience without disrupting workflow. Ideal for administrative interfaces, policy management systems, or any application requiring organized data display with intuitive modal interactions.

• Slarivo Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Feature Accordion Section

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

• Slarivo Linear Card

  Here is linear card component

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Animated Shifting Tab Component

  This code implements a reusable React component that creates an animated tabbed interface with a shifting content overlay. It addresses the need for a visually engaging and interactive way to present different sections of content, such as product details, pricing plans, or blog posts. The component uses several libraries to achieve this: React for the core UI, Framer Motion for animations, and React Icons for providing visual elements. Here's a step-by-step breakdown: 1. **`ShiftingDropDown` Component:** This is the main container, holding the `Tabs` component. 2. **`Tabs` Component:** This manages the selected tab state using `useState` hooks for `selected` (the currently selected tab index) and `dir` (direction of animation, 'l' or 'r'). The `handleSetSelected` function updates these states based on mouse events, determining the animation direction. 3. **`Tab` Component:** Each tab is rendered as a button. The styling changes based on whether it's selected, using CSS classes and the `selected` prop. The `FiChevronDown` icon animates on selection. 4. **`Content` Component:** This displays the content for the selected tab. `AnimatePresence` ensures smooth entrance and exit animations for the content using Framer Motion's `initial`, `animate`, and `exit` properties. The `motion.div` smoothly animates the content's position based on the `dir` prop (left or right). 5. **`Bridge` Component:** A simple visual element that creates a bridge connecting the tab to the content. 6. **`Nub` Component:** This dynamically positioned element visually points to the selected tab. `useEffect` and `getBoundingClientRect` are used to calculate its position relative to the selected tab. 7. **Content Components (`Products`, `Pricing`, `Blog`):** These components render the actual content for each tab, using basic HTML elements and styling. 8. **`TABS` Array:** This array defines the data for each tab, mapping titles to their corresponding content components. Example Scenarios: - Displaying product features, pricing tiers, or blog posts. - Creating an interactive FAQ section. - Presenting different views or options within a dashboard. - Implementing a step-by-step guide or tutorial. The component leverages the power of React's state management and Framer Motion's animation capabilities to create a polished and user-friendly experience. The use of CSS classes and inline styles allows for easy customization and theming.

• Slarivo Parallax Scrolling Text Effect

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

• Slarivo Timeline Component

  A modern glassmorphism timeline for roadmaps, product launches, or history sections.

• Slarivo Card

  Highlight Card A visually rich card component designed to draw attention to key metrics or highlights. It features a gradient background with a subtle dot pattern, a distinctive bookmark-style icon holder, and smooth animations powered by framer-motion. The component is fully customizable through props, allowing for easy reuse throughout an application.

• Slarivo Cicular Navigation Bar

  Here is circular navigation bar component

• Slarivo Tracker Card

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

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Data Card Display

  This React component efficiently displays data in a visually appealing and responsive grid of cards. It's designed to present key metrics or information concisely, making it ideal for dashboards or summary views. The component leverages the shadcn/ui library for styling and accessibility, ensuring a consistent and professional look and feel across light and dark themes. Each card displays a title, value, description, and optionally an icon and an action button. The component handles various scenarios, including cases with no data, and provides clear ARIA attributes for accessibility. The `CardDisplay` component accepts an array of `CardDisplayItem` objects, each defining the content of a single card. Each `CardDisplayItem` includes properties for `id`, `title`, `value`, `description`, an optional `icon` (which can be a React component or function), an optional `actionLabel`, a boolean `isDisabled` flag for the action button, and an `onActionClick` callback function. The component dynamically renders the cards in a responsive grid layout, adjusting the number of columns based on the screen size. It uses the `cn` utility function (likely from shadcn/ui) to efficiently manage CSS classes. For example, it can be used to display key performance indicators (KPIs) on a dashboard, showing metrics like active users, revenue, or task completion rates. Each card could link to a more detailed view using the optional action button. The component's use of ARIA attributes ensures it is accessible to users of assistive technologies. The component gracefully handles the case where no data is provided, displaying a user-friendly message. This allows for flexibility and robustness in different application contexts.

• Slarivo Leaderboard Card

  Paginations component from the 21st.dev community.

• Slarivo Manage Access Component

  Manage Access Component This component provides a complete UI for managing user access to a resource. It's built to be highly reusable, controlled by props for users, access levels, and callback functions.

• Slarivo App Menu Bar

  The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested menus, allowing users to easily access projects, teams, calendar events, notifications, and files. Each menu item is enhanced with clear Lucide icons, and nested submenus are implemented using MenubarSub, ensuring that hover interactions are smooth and the parent menu stays open when navigating into submenus. The component supports multiple levels of navigation without closing unexpectedly, maintains consistent spacing between icons and text, and leverages subtle hover effects for better visual feedback. Its modular structure makes it highly customizable, making it ideal for dashboards, admin panels, or collaborative tools where organized and accessible

• Slarivo Special Card

  Here is Special Card component

• Slarivo Menu

  Here is Menu component

• Slarivo Points Chart

  Charts & Data Viz component from the 21st.dev community.

• Slarivo OTP Input Component

  This code implements a reusable React component for OTP (One-Time Password) input. It addresses the common need for a user-friendly and secure way to input OTPs in web applications. The component enhances the user experience by automatically focusing on the next input field after a digit is entered, handling backspace and arrow key navigation, and preventing non-numeric input. It also provides features for handling paste actions, managing disabled states, and displaying error messages. The OTP input component uses React's useState and useRef hooks for managing component state and DOM references. The useEffect hook ensures that the number of input fields dynamically adjusts based on the 'length' prop. The component accepts several props to customize its behavior and appearance: * `length`: Determines the number of digits in the OTP (defaults to 6). * `onComplete`: A callback function executed when the OTP is complete. * `onValueChange`: A callback function triggered whenever the OTP value changes. * `disabled`: A boolean prop to disable the input fields. * `error`: A boolean prop to indicate an error state. * `errorMessage`: A string prop to display a custom error message. * `className`: A string prop for adding custom CSS classes. The component works by creating an array of input fields using the map function. Each input field is assigned a unique key and a reference using useRef. Event handlers (onChange, onKeyDown, onPaste) manage user input, ensuring only numbers are accepted and automatically moving focus to the next input field. The component also includes input validation, preventing incorrect input and providing feedback to the user. Backspace functionality is implemented to allow users to easily correct mistakes. The `onComplete` callback is called once all input fields are filled and the complete OTP is passed to it. Example Scenarios: * Two-factor authentication: Secure user login by requiring an OTP sent to their email or phone. * Account verification: Verifying user accounts during the signup process. * Password reset: Allowing users to reset their passwords using an OTP. This component is highly customizable and can be easily integrated into any React application to create a more user-friendly OTP input experience.

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

  3d hero section component with interactive animations, 3d elements, parallax, post processing, scroll animation, and animated sidebar menu

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo Interactive 3D Robot

  3D Interative scene with robot Whobee using Spline scene

• Slarivo Scroll Morph Hero

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

• Slarivo The Infinite Grid

  Grid cursor infinity grid

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

  Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.

• Slarivo Circular Gallery

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

• Slarivo Hero Section - Nexus

  A responsive hero section. Features an interactive dot grid background reacting to mouse movement, a sticky header with dropdowns and scroll effects, Framer Motion animations for content entry, and a rotating text headline.

• Slarivo Orbiting Skills

  A dynamic and visually appealing component that displays a set of skills or technologies in an orbiting pattern. Perfect for showcasing expertise, proficiency, or areas of interest in a creative and engaging way.

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

  Elevate your landing page with this interactive React hero component. It captivates users with a unique arrow animation that tracks mouse movement, pointing towards the main call-to-action. Highly customizable, allowing you to define the heading, tagline, button text, and embed rich media (images or videos) in the designated card section. Seamlessly integrates with Tailwind CSS projects and follows modern React best practices for reusability.

• Slarivo Globe Hero

  Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this component adds a visually striking, tech-forward centerpiece that’s fully responsive, themeable, and reusable.

• Slarivo IntegrationHero

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

• Slarivo Card

  Destination Card A visually rich card component designed to showcase travel destinations. It features a background image, a content overlay, and an interactive 3D tilt effect on hover.

• Slarivo lumina-interactive-list

  A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list (01–06) that dynamically updates a featured image preview. It balances "Quiet Luxury" typography with high-impact visuals, creating a "premium" user experience that feels both authoritative and mysterious. It is optimized for developers who want to display "Featured Creations" with an air of exclusivity and artistic depth.

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Globe

  This is a self-contained React component that displays a rotating globe with twinkling stars using Tailwind CSS. It features smooth animations for both the globe and stars, a glowing shadow effect, and fully inline styling for easy integration.

• Slarivo Moving Dot Card

  A dynamic views counter card featuring an animated dot traversing the border, gradient-highlighted count display, and stylized corner lines for a sci-fi UI effect

• 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 Woven Light Hero

  A fully interactive, theme-aware hero section featuring a 3D object woven from thousands of light particles that react to the user's cursor.

• Slarivo Mountain Scene

  A dynamic 3D mountain landscape built with Three.js and React. The terrain is generated using layered Perlin noise for natural undulations, rendered as a solid surface (no wireframe gaps). Interactive point lighting follows mouse movement, creating a vivid, immersive environment with fresnel highlights and animated displacement.

• Slarivo Interactive Logs Table

  Observability logs panel with animated filters, search, and expandable rows

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

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

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Landing Page

  A 3D Interactive Landing page

• Slarivo Globe Pulse

  A dark-themed WebGL globe with animated pulsing rings at marker locations. Concentric rings expand and fade out.

• Slarivo 3d orbit gallery

  3d orbit gallery with nice smooth

• Slarivo Experience Hero

  Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This "Obsidian Vault" design features spatial logic animations, narrative apertures, and an immersive WebGL-ready layout. Optimized for high-conversion with a single-purpose CTA and fully responsive Tailwind structure. Perfect for design engineers who demand Awwwards-level aesthetics without the manual overhead.

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

  A Vercel-style WebGL globe with spinning 3D pyramid markers at edge regions and live traffic stats on arcs.

• Slarivo Isometric Wave Grid Background

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

• Slarivo Immersive Scroll Gallery

  A scroll-based image gallery that creates depth and dimension through dynamic scaling animations. As users scroll, images scale up at different rates while a text overlay fades in, creating an engaging visual narrative. Perfect for landing pages, portfolios, and immersive storytelling experiences. Built with React, TypeScript, and Framer Motion.

• Slarivo Stacked Panels Cursor intereactive component

  Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Globe Interactive

  A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.

• Slarivo Cyber Matrix Hero

  as you move your mouse across the screen, the grid of characters will react to your cursor. The characters near your mouse will glow brighter, change color, and scale up, creating a dynamic "spotlight" or "ripple" effect. This adds the continuous, engaging interactivity you were looking for.

• Slarivo Cosmos 3d orbit gallery

  hero section that showcases a 3d orbit of images and particles resembling the cosmos

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Orbiting Carousel with Animated Icons

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

• Slarivo Globe Polaroids

  A WebGL globe with polaroid-style photo cards anchored to city markers. Photos rotate slightly for a scrapbook feel.

• Slarivo Globe Live Badge

  A WebGL globe with live streaming badges showing real-time viewer counts at each marker location.

• Slarivo Interactive Grid

  Interactive Grid with props

• Slarivo Area Chart

  Here is area chart multiple series medium size

• Slarivo frosted-hover

  Immersive navigation showcase that reveals frosted-glass ripples as you hover a grid of interactive hotspots layered over a hero image. Includes the full SVG filter stack for the shimmering displacement effect.

• Slarivo Globe Analytics

  A WebGL globe with real-time visitor analytics badges. Numbers update live with trend arrows showing growth.

• Slarivo Area Chart

  here is area chart small

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

  A WebGL globe with floating weather emoji markers across the world. Emojis gently bob up and down.

• Slarivo Globe Bars

  A WebGL globe with progress bar cards anchored to city markers showing completion percentages.

• Slarivo Orbiting Circles with Globe

  Full-display orbiting rings of integration icons circling a center particle globe rendered on canvas.

• Slarivo Tilt Card

  Interactive 3D tilt card with perspective hover effect and spotlight.

• Slarivo Interpolation Chart middle

  Here is Interpolation Chart BIG sized

• Slarivo Globe Stickers

  A WebGL globe with emoji stickers anchored to city markers. Stickers float and rotate as the globe spins.

• Slarivo Globe Satellites

  A WebGL globe with satellite emoji markers orbiting at elevated positions above the surface.

• Slarivo Globe Labels

  A WebGL globe with colorful rotated text labels anchored to locations. Each label has a candy-like glossy style.

• Slarivo SatelliteOrbits

  Renders multiple orbital overlays on the same globe with shared animation and marker styling, while keeping per-orbit path configuration configurable in the orbit dataset.

• Slarivo MarkerTooltip

  Hover tooltip content for MapLibre markers.

• Slarivo Kinetic Grid

  An interactive full-screen canvas background of a warping dot grid that bends toward the cursor and ripples outward on click.

• Slarivo Great UI Revision Timeline

  A premium interactive document revision history log timeline featuring Gaussian-weighted dial scale indicators, spring-based sliding position centering, and parsed markdown log lists.

• Slarivo Area Chart Small

  Here is area chart small

• Slarivo you can scroll.

  you can scroll. component

• Slarivo Globe Flights

  A WebGL globe with flight route arcs and airplane emoji markers positioned along the arc paths.

• Slarivo SatelliteOrbit

  Renders a globe-based orbital path with an elevated satellite marker, ground track, and optional animated motion for space or telecom visualizations.

• Slarivo Marquee Along SVG Path

  A marquee that animates its children continuously along any custom SVG path, with hover slowdown, drag, and scroll-velocity controls.

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

  Renders a single route with built-in hover details, animation options, and route style controls.

• Slarivo 3D Globe

  An interactive, textured 3D Earth globe with rotating camera controls and clickable location markers for showcasing global presence or users on a map.