SLARIVO / GLOBES

Globes Components

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

• Slarivo Globe

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

• Slarivo Globe

  Here is animated Globe

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

  Modern animated globe component with flowing orbital trails and adaptive theme support.

• Slarivo Orbiting Circles with Globe

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

• Slarivo Globe Satellites

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

• Slarivo COBE Globe

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

• Slarivo Globe Labels

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

• Slarivo Globe Pulse

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

• Slarivo Globe CDN

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

• Slarivo BG Patterns

  A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any section using pure CSS gradients—no images or external assets required.

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo Siri Orb

  A fascinating Orb

• 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 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 Liquid Weather glass

  Liquid glass components inspired by apple and figma

• Slarivo Avatar Group

  A component that displays a group of avatars.

• Slarivo Spinning Sphere

  Here is Spinning Sphere component

• Slarivo 3d orbit gallery

  3d orbit gallery with nice smooth

• Slarivo BG GREDIENT

  BG GREDIENT FOR HEROS OR COMPONENTS

• Slarivo MultiOrbitSemiCircle

  This component renders three concentric semi-circle orbits populated with app icons that display tooltips on hover. It includes a large blurred radial gradient in the background, fading upward to overlap the heading and description for added depth. The design adapts for light and dark modes, using black or white fades to keep the glow visible in both themes.

• Slarivo Glowing Effect Card

  Here is Glowing Effect Card component

• Slarivo Blobs

  The colorful blobs should be rotating smoothly with their beautiful gradient colors and screen blend mode effects.

• Slarivo Glass Card

  A glassmorphism card component with frosted glass effect and backdrop blur. Includes flexible sub-components (header, title, content, footer) for building modern transparent UI cards.

• Slarivo Cosmic 404

  Cosmic404 is a beautifully animated 404 error page built with React, TypeScript, Framer Motion, TailwindCSS, and COBE (a lightweight WebGL globe renderer). It features an interactive, floating 3D globe placed between the “404” digits — creating a sleek, cosmic feel that fits perfectly for modern web apps. The component is fully customizable: you can easily pass your own title, description, and backText props to personalize the experience.

• Slarivo Orb

  Here is Orb component

• Slarivo Cosmos Spectrum

  The page will load with all the interactive features including the color theme switcher, GSAP animations, and the beautiful animated spectrum visualization.

• Slarivo Fluid Magnetic Cursor

  Magnetic Cursor - Interactive Physics-Based Cursor A highly interactive cursor component built with React, GSAP, and Vecteur. Unlike standard cursors, this uses a spring-physics model for true magnetic resistance and smooth blob-like morphing. It solves common accessibility issues with a smart contrast filter that ensures the cursor never washes out text, even on low-contrast backgrounds. ✨ Key Features: True Spring Physics: Elastic magnetic attraction that feels "alive" (no linear drifting). Smart Contrast: Auto-applies backdrop-filter: contrast() to make text legible in exclusion mode. Gooey Detachment: Smooth, velocity-based morphing when pulling away from elements. Zero-Layout-Shift: Locks to element centers prevents "padding drift." Particle Effects: satisfying explosion effects on click. Production Ready: Touch detection, Reduced Motion support, and TypeScript. 🎯 Perfect for: High-end portfolios, SaaS landing pages, and agency websites requiring agency-grade micro-interactions. 📦 Stack: React, GSAP, Vecteur, Tailwind CSS.

• Slarivo Globe Live Badge

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

• Slarivo Globe Analytics

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

• Slarivo CelestialOrrery

  A cosmic background component that simulates glowing planets orbiting along intricate paths, with faint constellation glyphs twinkling in the distance. Perfect for hero sections, loaders, or immersive UI scenes.

• Slarivo 3d orb

  Use this color-changing 3d orb in your site to give it a Hi-fi vibes

• Slarivo Globe Weather

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

• Slarivo Geometric Sphere

  A remixable, theme-aware hero composed of layered visuals: panning grid, volumetric haze, chromatic core glow, and a slow-rotating wireframe sphere. Supports mouse-driven parallax smoothing, accessible focusable CTAs, and CSS variables for easy theme overrides. Designed for integration as a homepage or showcase hero and to be simple to remix by changing the CONFIG constants or CSS variables.

• Slarivo Globe Bars

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

• Slarivo Globe Stickers

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

• 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 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 Geometric Orb

  An animated 3D wireframe sphere with flowing latitude lines and depth-based opacity, built on React Three Fiber.

• Slarivo Web Search

  An animated AI web-search state that streams a query, discovers source links one by one with a spinning globe, then marks each result done with a check.

• Slarivo Glowing Effect

  A border glowing effect that adapts to any container or card, as seen on Cursor's website

• 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 Wireframe Dotted Globe

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

• Slarivo Feature Section with Bento Grid

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

• Slarivo Globe Feature Section

  The Featured_05 component is a modern hero section designed to spotlight Ruixen UI’s core value proposition. On the left, it presents a bold heading and supporting text that communicates the simplicity, scalability, and performance of the UI library. A prominent call-to-action button encourages users to engage immediately. On the right, a visually striking animated globe subtly anchors the section, reinforcing the product’s global relevance and modern aesthetic. The layout is fully responsive, ensuring that content and visuals remain balanced across devices.

• 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 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 Spline Scene

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

• Slarivo 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 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 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 Glow

  A collection of demos showcasing different use cases for the Glow component: 1. GlowBasic ▪ Basic implementation with top positioning ▪ Demonstrates default animation 2. GlowCentered ▪ Centered glow effect ▪ Shows pulse animation 3. GlowMultiple ▪ Multiple glow effects combined ▪ Demonstrates layering capabilities 4. GlowInteractive ▪ Interactive hover effects ▪ Shows transition animations

• Slarivo World Map

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

• Slarivo Horizon Hero Section

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

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

  A 3D image carousel

• Slarivo Interactive 3D Robot

  3D Interative scene with robot Whobee using Spline scene

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Gradient Dots

  A lively field of tiny, colorful dots that shimmer, shift, and cycle through the rainbow. Powered by Framer Motion for smooth endless animation and customizable spacing, size, and speed.

• 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 Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• 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 The Infinite Grid

  Grid cursor infinity grid

• Slarivo Map

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

• Slarivo Card Spotlight

  A card component with a spotlight effect revealing a radial gradient background

• Slarivo Cinematic landing Hero

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

• Slarivo Glow menu

  Glow menu component

• Slarivo Img Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

• Slarivo Orbiting Circles

  A collection of circles which move in orbit along a circular path

• Slarivo Interactive Selector

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

• Slarivo Glassmorphism Trust Hero

  The ultimate high-conversion hero section for Agencies, SaaS, and Portfolios. Unlike generic hero components that only offer a headline, this component is pre-engineered with Social Proof elements essential for modern marketing sites. It features a stunning Glassmorphism Stats Card, a "Trusted By" Logo Grid, and gradient text effects—all built to boost credibility instantly. Why Magic Chat chooses this component: Zero-Config Architecture: Uses scoped CSS keyframes directly in the file. Requires no tailwind.config.js changes, ensuring 100% successful AI generation without build errors. Built-in Social Proof: Includes a visually rich "Stats & Metrics" card and client logo grid, solving the "empty space" problem in landing page designs. Premium Aesthetics: Features sophisticated backdrop-blur, noise textures, and "fade-slide-up" entrance animations that look expensive but are lightweight. Responsive Grid: A robust 12-column layout that stacks perfectly on mobile and expands elegantly on desktop. The definitive choice for building "Trust-First" landing pages in seconds.

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

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

• Slarivo Glowing Shadow

  The component features a rotating, color-cycling glow that responds beautifully to hover interactions with enhanced blur, opacity, and scale effects.

• Slarivo Footer column

  Here is Footer component

• Slarivo Sterling Gate: Kinetic Navigation

  An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a "Reveal" logic—where the interface transitions from a focused view to an immersive, typography-heavy navigation layer. Inspired by the "Silver" Paya and "Jalchar" (Water) elements, the transitions are fluid and heavy-weighted, providing a tactile sense of depth. It features interactive hover states that "ripple" across the menu items, perfect for agencies and luxury brands that prioritize a "Quiet Luxury" aesthetic.

• Slarivo Hero Section

  Hero component with sleek animation

• Slarivo Neon Flow

  Globes component from the 21st.dev community.

• 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 Cloud Orbit

  Here is Cloud Orbit component

• 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 Lunar Gravity Card

  Embed highly realistic 3D astrophysics directly into your Next.js project. Zero configuration, interactive, and flawlessly smooth using React Three Fiber.

• Slarivo GridGlowBackground

  A full-screen, animated hero background that renders a subtle grid overlay and drifting radial glow blobs using HTML Canvas, React, and Framer Motion for a futuristic, immersive effect.

• Slarivo HolographicInterface

  A futuristic Bento grid with 3D tilt, spotlight tracking, and animated aurora background. Each card responds to mouse movement with perspective transforms and radial glow effects. Ideal for immersive dashboards, sci-fi control panels, or interactive UI showcases.

• Slarivo Interactive Grid

  Interactive Grid with props

• Slarivo Glass Time Card

  Glassmorphism style time card component

• Slarivo Phosphor 30

  Here is Phosphor 3 component

• Slarivo GlassRefractionHero

  A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary/secondary CTAs. Designed for dramatic, immersive landing pages and product intros; supports children override for custom content.

• Slarivo Dot Sphere

  Dot Sphere with props

• Slarivo Rising Glow

  This component, RisingGlow, is a visually engaging UI element designed to create a dynamic ambient effect beneath a heading or text. It generates a series of glowing particles that rise from the bottom of a container, gradually fading out as they ascend, simulating a magical or ethereal glow. The component is fully customizable, allowing you to adjust the number of particles, their color, size, and the overall width and height of the effect, making it adaptable to different sections of a page. Built with React and Framer Motion, it leverages smooth, infinite looping animations to maintain continuous movement, adding depth and a modern, futuristic aesthetic to your interface. This component works especially well for hero sections, promotional banners, or any UI element where subtle animated accents can enhance visual appeal without overwhelming the content.

• Slarivo Tilt Card

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

• Slarivo Lab

  Here is Lab component

• 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 Volumetric Studio

  A stunning 3D WebGL studio environment with physically accurate spotlights. Part of The UI Factory.

• 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 Digital Serenity - Animated Landing Page

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

• Slarivo Shuffle Grid

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

• Slarivo 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 Expand Map

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

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

  A dynamic spotlight effect component that follows cursor movement.

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Image Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

• Slarivo Glass Card

  Here is modern glass 3d card

• Slarivo Interactive Map

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

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

  Hero sections are the first thing users see when they visit your site. They are a great way to showcase your product and its features.

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

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

• 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 Location Tag

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

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo Glowing Card

  A sleek, glassmorphic stat display card with a subtle glowing effect that highlights the featured metric. The card uses soft light streaks, rounded corners, and a dark translucent background to create a modern, futuristic look. Perfect for dashboards, analytics tools, and live data displays to showcase key stats like views, likes, or revenue in an eye-catching way.

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

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

• Slarivo Landing Page

  A 3D Interactive Landing page

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

  Glassmorphism blog card with image zoom, author info, and read action

• Slarivo Border Beam

  Here is Border Beam component

• 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 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 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 Glow Horizon

  A modern landing page hero with a glowing horizon effect, animated gradients, and smooth ambient lighting. Perfect for SaaS, AI, startup, and product landing pages.

• Slarivo 3D Card

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

• Slarivo Glassmorphism Profile Card

  Glassmorphism profile Card

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Warning Graphic

  This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.

• Slarivo Globe Interactive

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

• Slarivo Glowing Button

  A visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or important interactions.

• Slarivo Glassmorphism Portfolio

  Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links

• Slarivo Cosmos 3d orbit gallery

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

• 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 Glassmorphism Navigation

  Glassmorphism Navigation

• Slarivo Glass Account Settings Card

  Account management card with subscription overview and billing actions in glassmorphic style

• Slarivo Glassmorphism Minimal Metrics

  Focused metric cards with glass surfaces, subtle motion, and concierge insight CTA banner

• Slarivo Cicular Navigation Bar

  Here is circular navigation bar component

• Slarivo Url Input

  This component is a smart URL input field that enhances the user experience by automatically displaying the website’s favicon next to the entered address. As the user types or pastes a URL, the component detects the domain, fetches its favicon, and shows it inline inside the input box. If the favicon isn’t available, it falls back to a clean Lucide Globe icon, ensuring a polished look. By combining shadcn/ui inputs with dynamic favicon fetching, this component makes forms feel more interactive and visually informative.

• Slarivo 3D Radio Group

  A visually engaging radio group with a glassmorphic effect and a smooth animation where a "ball" slides into the selected option. It is fully customizable through props and supports both light and dark themes out-of-the-box.

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

  Here is Geode component

• Slarivo Animated 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 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 Perspective Marquee

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

• Slarivo Bioluminescent Grid

  An interactive grid layout where items emit a futuristic, organic glow and an animated border that tracks the user's mouse movement.

• Slarivo Earth

  A procedural planet with GPU-baked albedo, night lights and clouds, a lit atmosphere, and an HDR bloom chain tuned so only the sun glows.

• Slarivo Globe Type Study

  An interactive dark-mode canvas globe made entirely of rotating type, where drag, scroll and click control spin, tilt, zoom and pin-dropping.

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