SLARIVO / HEROES

Heroes Components

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

• Slarivo Hero Section 9

  Modern hero section

• Slarivo Hero Section

  Here is Hero Section component

• Slarivo Hero Section

  Here is Hero Section component

• Slarivo Hero Section Note

  Here is Hero Section component

• Slarivo Hero Section 1

  Modern saas hero section

• Slarivo Hero Section Dark

  Hero

• Slarivo Hero Section

  Here is Hero Section

• Slarivo Hero Section 5

  Modern hero section with video background

• Slarivo Hero Section

  Clean, split-screen hero layout with bold headline, adventure call-to-action, and animated floral imagery for an engaging first impression.

• Slarivo Hero Section 3

  Mobile app hero section

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

  A background effect with a text highlight component, perfect for hero sections.

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

  Modern SaaS hero section

• Slarivo Hero

  Animated Marquee Hero A visually engaging hero section featuring a dynamic text reveal and an infinite, animated marquee of images. Perfect for capturing user attention on a landing page.

• Slarivo Hero

  Hero Section with Appear Animation and Hero Badge

• 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 Stack Feature Section

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

• Slarivo Hero Section

  Hero Section Component This component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons, social proof statistics, and a visually appealing image collage.

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

  Hero component with sleek animation

• Slarivo FlickeringGridHero

  Inspired by magic ui

• Slarivo Hero Minimalism

  Here is Hero section minimalism

• Slarivo Hero Section 6

  Saas Hero section

• 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 particle effect for hero

  A reusable and responsive hero section with a background particle effect on hovering

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

  A React component that creates a smooth-scrolling hero section with parallax background effects. Features responsive images for mobile and desktop, with customizable scroll animations built using Framer Motion.

• Slarivo Hero scroll animation

  Here is scroll animation in hero section

• Slarivo Hero Section

  Here is Hero section components

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

  A pill-shaped component for highlighting key features or messages with optional icons and animations. Features - Optional leading icon - Smooth entrance animation - Dark mode support - Customizable styles and animations - Hover effects

• Slarivo Hero 45

  A hero section with 3 features underneath

• Slarivo Animated Hero Section

  Animated Hero Section Description: A responsive, full-screen hero section with a background image and text elements that animate into view. It features a customizable navigation bar, title, description, and call-to-action buttons, making it highly reusable for various landing pages.

• Slarivo Hero 115

  A hero section with a radial circle background pattern

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Hero Section

  A comprehensive UI component for a landing page hero section. It includes responsive navigation, a headline content area, and a structured application preview section with filters and a data table. Designed to be populated dynamically with data.

• Slarivo Hero 02

  Hero with marquee nad background gradient wave

• Slarivo Revolution Hero

  Hero section with floating side panel navigation and an animated dynamic abstract background

• Slarivo Hero

  Heroes component from the 21st.dev community.

• Slarivo A modern Hero Section

  A modern hero section for your AI Platform

• Slarivo Tailwind CSS Background Snippet

  Tailwind CSS Background Snippet

• Slarivo hero-section

  Animated Blocks Hero

• Slarivo Hero

  Hero Section with Animated Text This component provides a full hero section layout. It features a title, an animated subtitle that cycles through a list of phrases with a typewriter effect, a descriptive paragraph, an information badge, a primary call-to-action button, and a social proof element with stacked avatars.

• Slarivo AetherHero

  Animated Hero Section

• Slarivo Gradient Background 4

  Gradient Background 4

• Slarivo Hero

  Heroes component from the 21st.dev community.

• Slarivo Hero Section 06

  This HeroSection_06 component is a highly interactive and visually dynamic landing section built with Next.js, Tailwind CSS, and custom animations. It combines eye-catching elements like animated orbiting circles, glowing gradients, and animated badges to draw the user’s attention immediately upon landing. The section highlights a compelling headline and subtext, promoting AI-powered growth tools,

• Slarivo Hero Section

  Form Builder Hero A responsive and animated hero section designed to capture user attention with a clean layout, a prominent call-to-action, and subtle animations.

• Slarivo Hero

  Hero Section – Aurora Background A visually immersive hero section with a smooth aurora-style animated background. Enhances first impressions with subtle motion while supporting both light and dark themes. Ideal for landing pages, portfolios, and apps that need a captivating entry point.

• Slarivo Background Paths

  Landing Background paths with Gradient Title

• Slarivo Animated hero

  Animated hero with text and two shadcn/ui buttons

• Slarivo Hero Section

  A powerful hero section component built with shadcn/ui. Create stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Each variant is designed to make a strong first impression while maintaining shadcn's signature aesthetic. Built with Tailwind CSS, this component delivers pixel-perfect, responsive hero sections that adapt beautifully across all devices. The clean, modern design principles ensure your hero section effectively communicates your message while maintaining visual harmony with other shadcn components.

• Slarivo Hero

  A hero section component with animated gradient background and customizable content. Features - Animated gradient background - Customizable title and subtitle - Configurable action buttons - Responsive design - Motion animations - Optional blur effect

• Slarivo Horizon Hero Section

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

• Slarivo Hero 195

  A modern hero section with tabs, animated border and crisp fading background lines framing the hero images.

• Slarivo Hero with Mockup

  A modern, animated hero section with mockup display and gradient effects inspired by Launch UI. It features a large headline, description, dual CTAs, and a floating mockup image. Features: • Responsive design with a mobile-first approach • Staggered fade-in animations • Gradient text and button effects • Floating glow background • Dark mode support • Customizable CTAs • Optimized image loading

• Slarivo Hero

  sleek Hero section with background paper shaders

• Slarivo Hero

  animated hero

• Slarivo Hero Gallery Scroll Animation

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

• Slarivo Cinematic landing Hero

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

• Slarivo Floating Icons Hero Section

  Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, or integration-focused products

• Slarivo Hero Section 2

  Modern marketing hero section

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

  Centered hero with radial gradient background and announcement badge

• Slarivo Hero 1

  minimal hero with modern gradiental background

• Slarivo Minimalist Hero

  Minimalist Hero Section – "Less is More" Bold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal, and clear. Ideal for brands emphasizing simplicity, elegance, or personal identity.

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

  Here is Hero section components

• Slarivo Acme Hero

  Animated hero section and nav

• Slarivo Glowy Waves Hero

  Hero section with glowy waves effect

• Slarivo Halide Topo Hero

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

• Slarivo Liquid Metal Hero

  Liquid metal hero section with nice animations and perfect for any website.

• Slarivo 3D Hero Section Boxes

  3D Hero Section With Animated Boxes

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

  Hero Button Expendable

• Slarivo Illuminated Hero

  A striking hero section with glowing animated text that instantly grabs attention. Perfect for bold headlines, product launches, or landing pages with dramatic flair.

• Slarivo Vercep Hero-1

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

• Slarivo Hero Section

  Financial Hero This component is a responsive hero section designed for SaaS and financial platforms. It features an animated text section on the left and a dynamic, layered card image display on the right, all set against a modern grid background.

• Slarivo Hero Section

  Hero section with staggered text and button reveal

• Slarivo Hero With Video

  Hero With Video and Image, Landing Page, Header

• Slarivo Hero

  animated hero

• 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 Gradient Bar hero section

  Preplex Hero Section This is a hero section made for a waitlist page. The background uses vertical red and black bars that fade upward. The text in the middle says redefining what's possible and below that it says one experience at a time in italics. Under that there is a line that tells people to be the first to know when the product launches and to join the waitlist for early access. At the top right there is a join the waitlist button. In the center above the heading there is a small section with profile images and a number that shows how many people are already on the waitlist. In this case it says 2 point 4 K currently on the waitlist. Below the main heading there is a rounded input field that says enter your email. Next to that there is a button that says join the waitlist. Both of these are centered and placed near the bottom of the hero section. At the very bottom there are small icons for social links like Instagram LinkedIn and GitHub. At the top left the brand name There is a basic menu with links for features vision press and contact. The layout is centered. The text is clear and uses large font sizes.

• Slarivo Diced Hero Section

  A customizable hero section with diced image grid, gradient text, and responsive design for showcasing content. Credit: https://codepen.io/kristen17/pen/GRXgqaB https://codepen.io/t_afif/pen/LEPBYvK Credit for images is available on https://namer-ui.netlify.app/

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

  Floating Food Hero A visually engaging hero section featuring a central text block surrounded by gently floating images. It's designed to be responsive and theme-aware, making it perfect for landing pages of food-related applications.

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

  Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator

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

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

• Slarivo Hero Section

  Hero Section A full-screen, responsive hero section with staggered text and button animations, designed to capture user attention.

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

  A hero section with a full-width landscape image above and a top-aligned tagline paired with a right-aligned serif headline, description, and call-to-action buttons below.

• Slarivo Interactive Hero Backgrounds

  Minimal dark hero section with 3D physics-based floating spheres and a centered email signup for dynamic user engagement.

• Slarivo Editorial Hero

  An editorial hero section with a left tagline, right-aligned headline and copy, optional CTAs, and a full-width image below.

• Slarivo WaterRippleImage

  Immersive hero background that applies animated water ripples to any image, theme-aware out of the box.

• Slarivo Velaris

  A WebGL-powered animated background featuring layered simplex noise, multi-color blending, vignette glow, and subtle film grain effects.

• Slarivo Auralis

  A WebGL animated background with layered simplex noise, glowing light, vignette, and film grain for a dramatic ambient hero effect.

• Slarivo GitHub Stars Animation

  Displays GitHub stargazer avatars with a staggered entrance and an animated count-up star counter for hero and landing sections.

• Slarivo Scroll media expansion hero

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

• Slarivo Hero Video Dialog

  A hero video dialog component.

• Slarivo Hero 2

  Beautiful, grainy hero component for an email-related website

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

  A stunning full-screen hero section featuring a cinematic background image, glassmorphic navigation bar with backdrop blur, animated badge, elegant serif typography, dual call-to-action buttons, and a partner logos grid. Fully responsive with smooth fadeSlideIn animations.

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

  Hero component for AI chat websites.

• Slarivo Aether Flow Hero

  "Aether Flow" hero. It features a mesmerizing, interactive background of flowing light particles that weave and connect with each other. The entire particle system subtly reacts to your cursor, creating gentle swirls in the "aether" as you move your mouse.

• 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 AI Image Generator Hero

  Images component from the 21st.dev community.

• Slarivo PulseFit hero

  A responsive, animated hero component with header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, description, and primary/secondary CTA buttons.

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

  An immersive, cinematic text-animation component featuring high-impact "shutter" slicing effects, full-screen responsive typography, and seamless light/dark mode adaptation.

• Slarivo Hero 3

  Left-aligned hero with dashboard screenshot preview

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

  This component is a visually elegant and content-focused hero section designed for the Ruixen brand, featuring a soft pastel gradient background that transitions from white to peach, pink, and lavender shades. It includes bold, large typography for the main heading — “Innovation Meets Simplicity” — followed by a supporting paragraph that introduces Ruixen as a platform offering cutting-edge, modern digital solutions. The layout ensures readability with responsive text sizes, a subtle design aesthetic, and a structured container with rounded corners and hidden overflow, making it ideal for landing pages or introductory sections of Ruixen’s interface.

• Slarivo Dynamic Animated Hero Section with Gradient

  A visually striking React hero section featuring a gradient-text animation that cycles through vibrant colors, SVG line-drawing effects for geometric shapes, subtle background pattern movement , and a pulsing interactive CTA button

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

  This component is a responsive Hero Section with an animated Card Stack overlay, designed to showcase key features or testimonials in a dynamic and visually engaging way. Built with React, Tailwind CSS, and Framer Motion, it combines a sleek background image with a rotating stack of rectangular cards that automatically cycle every few seconds. Each card contains a title, descriptive paragraph, and illustrative image, along with a footer caption for context. The layout fully supports dark and light themes, maintaining high readability and aesthetic balance across devices. Ideal for landing pages, portfolio sections, or product showcases, this component highlights modern design principles—clean typography, smooth motion, and visual hierarchy—while remaining modular, customizable, and easy to integrate into any Next.js project.

• Slarivo Aero Hero-3

  Texts component from the 21st.dev community.

• Slarivo Focus Hero

  A hyper-responsive, physics-based vector field that guides user attention to a central glassmorphic card.

• Slarivo Aero Hero-2

  Buttons component from the 21st.dev community.

• Slarivo Aero Hero-1

  Buttons component from the 21st.dev community.

• Slarivo Modern Hero section

  MinimalHeroSection – Interactive AI-Powered Hero Banner A visually rich and interactive hero section built with React and Tailwind CSS, featuring an SVG-based animated background that subtly responds to mouse movement. Dynamic SVG Grid – Renders a responsive grid with hover effects and highlighted tiles for visual depth. Mouse-Follow Glow Effect – Creates a radial gradient glow that follows the user’s cursor in real time. Responsive Layout – Fully adaptable to screen sizes with well-spaced typography and content hierarchy. Call-to-Action Focused – Includes a prominent “Get Started Free” button with hover animations to increase engagement. Trust Indicators – Displays key stats (Developer count, Uptime, Enterprise readiness) to build credibility. This component is ideal for modern SaaS or AI startup landing pages, providing a high-quality, interactive first impression while maintaining performance and accessibility.

• Slarivo Quantam Mysh Hero

  A sleek, futuristic hero section component inspired by an AI studio landing page design. It features a dark theme with purple gradients, a badge-style tagline, bold headlines, subtitle text, dual CTA buttons, an infinite scrolling logo carousel with fade effects, and bottom navigation elements. Built responsively with Next.js and Tailwind CSS for easy integration into modern web applications. Ideal for tech or innovation-focused websites.

• Slarivo Flux Card Hero

  FluxCardHero is a dynamic, interactive hero section component that showcases multiple AI platform features through an innovative layered card animation system. The component features a floating glass-morphism navigation bar and automatically cycles through different AI interface mockups including chat conversations, performance analytics, project management, and chat history. Key Features: Floating Navigation: Translucent white navbar with backdrop blur effect, centered and elevated Animated Card Stack: Multi-layered cards with staggered rotations and smooth color transitions Content Morphing: Each card displays different AI platform interfaces (chat, analytics, projects, history) Micro-interactions: Hover effects, scaling animations, and smooth transitions throughout Responsive Design: Adapts seamlessly across desktop and mobile viewports Auto-cycling: Cards automatically transition every 3 seconds with manual navigation dots Glass-morphism UI: Semi-transparent overlays with backdrop blur for modern aesthetics Perfect for AI/SaaS landing pages that want to demonstrate platform versatility while maintaining visual engagement through continuous, subtle animations.

• Slarivo Aurora Hero bg

  A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites. Built following shadcn/ui patterns with full theme support, accessibility features, and TypeScript type safety. The component is fully customizable through props and works seamlessly in both light and dark modes.

• Slarivo Davincho Hero-1

  Animated hero section with parallax background image.

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

  This is the minimal but ux friendly hero section with small and cool animations.

• Slarivo Onboarding / Welcome Screen

  Onboarding / Welcome Screen used to greet new users and introduce the app’s purpose. It features a hero image for visual appeal, a clear welcome title, a short description highlighting the app’s value, and two calls-to-action — a primary button (“Let’s get started”) for new users and a secondary link (“Login Now”) for returning users. It’s ideal for first-time app launches to drive sign-ups or logins.

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Glow Hero Section

  A responsive, futuristic hero section featuring an interactive animated background with support for both light and dark themes.

• Slarivo Aurora Hero bg

  A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites. Built following shadcn/ui patterns with full theme support, accessibility features, and TypeScript type safety. The component is fully customizable through props and works seamlessly in both light and dark modes.

• Slarivo Pixel Rocket Voyager

  A fully interactive, theme-aware hero section featuring a 3D pixel-art rocket that the user can fly through a field of crypto-coin asteroids.

• Slarivo Hero Odyssey

  Hero Section with Lightning effect ( coded ).

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

  Animated ecommerce hero and navbar.

• Slarivo Particle Hero

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

• Slarivo Hero Animated

  Flexible and customizable hero section component with gradient backgrounds and animated content. ## Features - 🎨 Customizable gradient backgrounds - 📱 Responsive design - ✨ Smooth animations - 🎯 Multiple layout options - ♿ Accessible by default

• Slarivo Modern hero section

  HeroGeometric: Elevate Your Digital Vision with Dynamic Shapes The HeroGeometric component creates a striking and modern hero section, combining a sophisticated dark aesthetic with dynamic, animated geometric shapes. It's designed to make a powerful first impression, ideal for showcasing a brand's innovative spirit and digital prowess. What It Is This React component features a full-screen, dark background infused with subtle radial gradients. The main visual appeal comes from several elegantly animated, ethereal shapes that float and rotate behind a central, gradient-filled title. The title itself is designed for impact, with a portion using a unique "Pacifico" font for a touch of distinctiveness. A prominent badge and a descriptive paragraph complete this visually rich and engaging hero section. Key Features Dynamic Geometric Background: Animated Shapes: The ElegantShape sub-component generates multiple "pill-shaped" elements. These shapes are animated with framer-motion to fade in, slide, and rotate into position, then continuously float subtly up and down. Glassmorphism Effect: Each shape features a backdrop-blur effect, a subtle gradient, and a soft border, creating a sophisticated glass-like appearance. Layered Visuals: The shapes are strategically positioned with varying delays and rotations, creating a layered, dynamic, and non-repeating background that adds depth without distraction. Subtle Gradients: The overall background incorporates faint, diffused gradients that add to the high-tech, abstract atmosphere. Animated Hero Title: Staged Entrance: The badge, the first line of the title (title1), the second line (title2), and the descriptive paragraph all animate in sequence from the bottom, creating a smooth and impactful reveal. Gradient Text: The title uses bg-clip-text with gradients, making the text visually pop. title2 specifically uses the elegant "P

• Slarivo Animated Hero

  Bold hero section featuring a red gradient title and animated dot grid that dynamically follows cursor movement. Ideal for creative portfolios, landing pages, and modern minimal websites to engage users instantly.

• Slarivo Crystal Forge Hero

  A unique, theme-aware hero section where users can click to forge beautiful, glowing 3D crystals in an interactive space.

• Slarivo Living Fluid Hero

  A unique, theme-aware hero section featuring an interactive, 3D fluid entity that morphs and flows in response to the user's cursor. It's designed to create a luxurious and memorable introduction.

• Slarivo Quantum Grid Hero

  "Quantum Grid Hero" features an interactive 3D grid of cubes that light up and ripple in response to your cursor's movement. The background is a deep, futuristic dark theme, and the text animates into view with a clean, modern aesthetic. This component is designed to be highly engaging and visually striking.

• Slarivo Festivity Hero

  Interactive 3D sphere animation with dynamic collisions, mouse interactions, and breathing effects. Features a loading animation sequence and responsive particle system perfect for modern hero sections.

• Slarivo Interactive Starfield Hero

  Dark hero section with a cursor-reactive canvas starfield where glowing particles stretch, brighten, and rotate toward the pointer.

• Slarivo Interactive Dot Grid Hero

  Cinematic hero section with a Canvas-rendered dot grid that reacts to cursor proximity, with particles that scale, brighten, and spring back to rest.

• Slarivo Aurora voice Hero

  A full-screen interactive hero component that renders animated simplex-noise ribbons on a <canvas>, creating a dynamic aurora-style background with cursor-driven intensity.

• Slarivo SaaS Template

  Modern Hero Section with Navigation - Dark Theme Landing Page Component A sleek, production-ready hero section with fixed navigation bar, perfect for SaaS landing pages and modern web applications. Features a stunning gradient text headline, announcement badge, and dashboard preview mockup with glowing effects.

• Slarivo Modern Hero

  Modern Hero

• Slarivo Portfolio Hero

  Animated Portfolio Hero Section - Bold Name with Profile Image Overlay A striking, modern portfolio hero component featuring animated blur-in text effects and a profile image overlay. Perfect for developers, designers, and creatives who want to make a bold first impression.

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

  A modern hero section with a dynamic grain gradient background powered by Paper Shaders. Includes a customizable title, subtitle, and call-to-action, and is fully responsive.

• Slarivo Underline Hero Section

  This sleek hero section showcases a modern SaaS landing page that immediately captures attention. The bold headline "A Simple Hero For Your SaaS Success" features elegant typography with the word "SaaS" styled in a decorative Lobster font and adorned with a hand-drawn underline The layout follows conversion-focused best practices with a clear value proposition that speaks directly to SaaS founders and product teams. The compelling copy emphasizes clarity, trust, and scalability—three critical factors for SaaS success. The white "Try for Free" call-to-action button stands out prominently against the dark background, utilizing strategic contrast to drive user engagement and conversions.

• Slarivo Classy Hero

  Classy Hero is a premium hero section with a black-and-white animated background, elegant typography, and interactive elements—perfect for a modern, high-end digital presence.

• Slarivo HeroGridSection

  Modern hero with subtle background grid, stacked avatars & CTA buttons

• Slarivo Credit Card Hero

  The CreditCardHero component is a premium advertising-style showcase designed for modern fintech or banking landing pages. At its core, it combines clean, centered marketing content—a bold headline, descriptive subtext, and a clear call-to-action button—with two floating 3D credit cards that sit outside the content area, one larger at the bottom-left and one smaller at the top-right. The cards subtly tilt with cursor movement, giving the layout depth and a dynamic, interactive feel while ensuring the text remains fully visible and unobstructed. This separation of visuals and copy creates a billboard-like hero section, perfect for capturing user attention in a professional yet engaging way. Its minimal, polished design makes it well-suited for advertising new credit products, digital banking features, or promotional campaigns where trust, style, and clarity are equally important.

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Hero Page

  This component is a modern hero section designed to immediately capture attention and showcase dynamic visual content. The heading combines text and an animated image card to create an interactive, eye-catching effect, where the card smoothly transitions between multiple visuals, giving the impression of motion and life. The text is carefully styled with large, bold, and well-spaced typography to ensure readability while maintaining a modern aesthetic. Below the heading, a card is positioned as a continuation of the visual flow, providing a call-to-action or highlight that aligns with the heading content. The component is fully responsive, using Tailwind CSS for layout and spacing, and Framer Motion for smooth animations. The overall design balances text, visuals, and interactive elements, making it ideal for landing pages, portfolios, or product showcases where first impressions are critical.

• Slarivo Scroll Choreography

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

• Slarivo Aurora Hero bg

  A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites. Built following shadcn/ui patterns with full theme support, accessibility features, and TypeScript type safety. The component is fully customizable through props and works seamlessly in both light and dark modes.

• Slarivo Hero Component

  Pre-built, customizable hero section components for landing pages and websites — ready to drop into your project with minimal setup. Includes responsive layouts, headline/CTA variants, and image/illustration support.

• Slarivo Split Hero With Image Cards

  A split hero section with a serif headline, avatar social proof, and two image cards featuring invertible overlay text and call-to-action buttons.

• Slarivo Growth Hero Section

  Growth Hero Section A responsive hero section component that features a title, descriptive paragraphs, a call-to-action link, and a visually engaging, animated image gallery.

• Slarivo Luminous Topography

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

• Slarivo Dotted Modern

  Hero section with a dotted radial-grid background, animated open-source badge, gradient headline and call-to-action buttons.

• Slarivo Decrypt Text

  Text that resolves out of scrambled glyphs, character by character, with jitter and a terminal variant — SSR-readable and reduced-motion safe.

• Slarivo Ethereal Beams Hero

  *A mesmerizing hero section featuring animated 3D light beams with glassmorphic navigation. Perfect for modern SaaS, creative agencies, and tech startups looking to make a bold first impression.* ## **Key Features Listed:** - Animated 3D light beams background - Glassmorphic pill-shaped navigation - Shimmer button effects - Fully responsive design - Black & white aesthetic ## **Custom Button Component** - Built-in shimmer effect on hover - Three variants: `default`, `outline`, `ghost` - Two sizes: `sm`, `lg` - Fully typed with TypeScript - No external dependencies

• Slarivo Light Saas Hero Section

  A modern, light-themed hero section featuring an interactive plasma background, glassmorphic pill-shaped navigation bar, and compelling AI SaaS value proposition. This component combines elegant design with subtle animations to create an engaging first impression for enterprise users. Key Features: Dynamic plasma background with customizable color and interactivity Frosted glass navigation with gradient logo and responsive menu Persuasive hero content with gradient typography and performance metrics Smooth hover animations and mobile-friendly design Clean, professional aesthetic suitable for B2B AI applications

• Slarivo Idea Generator Hero Section

  A stunning, modern hero section featuring a dark purple gradient background with flowing abstract shapes and glowing effects. The design includes a clean navigation bar, bold typography asking "What should we build today?", and an interactive input field with a glassmorphism effect and lightbulb icon. Built with React and Tailwind CSS, it features smooth animations, responsive design, and premium visual effects including SVG flowing shapes, backdrop blur, and subtle pulse animations. Perfect for creative agencies, development studios, or any platform focused on innovation and idea generation. The component is fully interactive with state management and optimized for all screen sizes. Key Features: Responsive glassmorphism input field Animated SVG flowing shapes Purple gradient color scheme Interactive lightbulb button Smooth hover and pulse effects Mobile-first responsive design Clean, modern typography Professional navigation layout

• Slarivo Hero Parallax

  A scroll effect with rotation, translation and opacity animations.

• Slarivo Hero 03

  Hero banner , designer, product, design code

• Slarivo Coming Soon Countdown

  A coming-soon page section with a live countdown timer and an email signup form.

• Slarivo LampContainer

  A stylized lamp spotlight effect built with Tailwind CSS and Framer Motion. It renders animated conic‐gradient light beams, layered diffusion and blur, a pulsating core glow, and a central orb—perfect for immersive hero sections, intros, or ambient UI backdrops.

• Slarivo Minimalist Hero Fashion

  Minimalist Hero for Fashion brand with minimalist animations.

• Slarivo text effect

  A collection of animated greeting components featuring Samsung's distinctive angular design language with geometric letterforms, spring animations, and tech-forward styling. Includes both English and Vietnamese variants with futuristic accent elements. Technical Features: Spring Animations: Variable stiffness (120-400) and damping (14-22) for realistic motion 3D Effects: RotateX and rotateY transformations for depth Geometric Design: Square line caps and miter joins for sharp, tech-forward appearance Staggered Timing: Precise animation delays for dramatic sequential reveals Color Accents: Samsung-brand blue and cyan highlights Blur Effects: Smooth focus transitions on accent elements Design Philosophy: Angular Aesthetic: Sharp corners and geometric shapes reflecting Samsung's innovation focus Tech-Forward: Futuristic elements like corner brackets and accent lines Brand Identity: Distinct from organic Apple design with bold, industrial styling Scalable: Responsive SVG design that works at any size Accessible: Semantic titles and proper motion handling Usage Examples: Landing page hero animations Brand identity presentations Loading screens with personality Interactive greeting experiences Multilingual applications Tech product launches

• Slarivo Desert Drift

  As you scroll through the night time animation, a 1986 Toyota Corolla drifts on a desert highway, followed by particles and a camera.

• Slarivo Crypto hero

  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 MacOS Animated Shortcut Keyboard

  MacOS Keyboard Animated Shortcut Keyboard

• Slarivo WaveTextCanvas

  A React component that renders bold, “WAVES” lettering as a flowing wave effect on HTML5 canvas. It uses a mask to detect text pixels and draws vertical scanlines that oscillate inside the letters with a larger amplitude and thicker stroke, while lines outside the text ripple subtly in a contrasting color. Perfect for hero titles, interactive headings, or generative text animations.

• Slarivo Liquid Reveal

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo LivingNebula

  A full-screen, canvas-driven star nursery that pulses with creative energy. Particles emit from the center point, drift outward under drag, and fade in and out to simulate a living nebula breathing with cosmic light. Built with HTML5 Canvas and React.

• Slarivo Title Slide

  A centered slide layout with heading, subheading, and meta text for building presentation title screens.

• Slarivo Hello Vietnamese Effect

  An animated SVG component displaying "xin chào" (Vietnamese hello) with Samsung's bold geometric design featuring angular letterforms, diamond shapes, tech accent lines, and sophisticated spring animations Key Features to Highlight: Technical Features: Spring Animations: Variable stiffness (120-400) and damping (14-22) for realistic motion 3D Effects: RotateX and rotateY transformations for depth Geometric Design: Square line caps and miter joins for sharp, tech-forward appearance Staggered Timing: Precise animation delays for dramatic sequential reveals Color Accents: Samsung-brand blue and cyan highlights Blur Effects: Smooth focus transitions on accent elements Design Philosophy: Angular Aesthetic: Sharp corners and geometric shapes reflecting Samsung's innovation focus Tech-Forward: Futuristic elements like corner brackets and accent lines Brand Identity: Distinct from organic Apple design with bold, industrial styling Scalable: Responsive SVG design that works at any size Accessible: Semantic titles and proper motion handling Usage Examples: Landing page hero animations Brand identity presentations Loading screens with personality Interactive greeting experiences Multilingual applications Tech product launches Corporate presentations

• Slarivo Vector Tilt Scene

  A spring-driven 3D tilt glass panel that follows the cursor, for hero cards and feature highlights.

• Slarivo Slot Headline

  Hero title whose last word scrolls like a slot machine through the most popular coding agents

• Slarivo IMG Reveals

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Constellation Grid

  Interactive canvas-based kinetic mesh grid with Hooke's Law physical spring-mass physics, cursor velocity shockwaves, spatial radar readouts, and theme detection.

• Slarivo Blur Out Up

  Words lift out of a soft blur and drift upward into place, staggered 28ms apart over a 0.56s ease-out. Respects prefers-reduced-motion.

• Slarivo Black Hole Hero Section

  A black hole that bends its own light: one ray per pixel walked through curved space, so the halo over the shadow is the far side of the accretion disc, not a drawn ring.

• Slarivo Depth Parallax Words

  Words come forward from different depths with a 70ms stagger and real perspective, so a line arrives with dimension instead of flat. Respects prefers-reduced-motion.

• Slarivo Fluid Flow Grid

  Interactive canvas vector flow field that aligns micro-directional lines along trigonometric wave turbulence and repels smoothly around the cursor.

• Slarivo Container Scroll Animation

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

• Slarivo Etheral Shadow

  Creates an animated, ethereal shadow effect with customizable noise, color, and animation properties, featuring a centered text overlay with responsive typography.

• Slarivo Lamp

  A lamp effect as seen on linear, great for section headers.

• Slarivo Text Rotate

  A text component that switches the rendered text from a list.

• 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 World Map

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

• Slarivo Canvas

  Canvas effect

• Slarivo Flickering Footer

  Flickering Footer Component

• 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 Interactive Image Accordion

  Interactive Image Accordion

• Slarivo Spotlight

  A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.

• Slarivo Retro Grid

  An animated scrolling retro grid effect Add the following animations to your tailwind.config.js file: extend: { animation: { grid: "grid 15s linear infinite", }, keyframes: { grid: { "0%": { transform: "translateY(-50%)" }, "100%": { transform: "translateY(0)" }, }, }, },

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo Typewriter Effect

  Text generates as if it is being typed on the screen.

• Slarivo CTA with Rectangle

  A powerful Call-to-Action component built with shadcn's design system. This component features multiple styles including box layouts and beam effects, all following shadcn's minimalist aesthetic. Each variant is designed to create compelling call-to-action sections that drive user engagement. Built with Tailwind CSS, it ensures responsive design and seamless integration with other shadcn components. The component maintains high accessibility standards while providing flexibility in how you present your calls to action.

• Slarivo Animated Text Cycle

  Component to smoothly animate a list of words. Can be used in Hero sections for example. Built using Framer Motion. Animation can be easily changed in the component.

• 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 Hero with group of images, text and two buttons

  Hero with group of images, text and two shadcn/ui buttons

• Slarivo Interactive Selector

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

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Hero with image, text and two buttons

  Hero with image, text and two shadcn/ui buttons

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

  Statistics Card

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

  Multiple beams that converge into a single point, as seen on Next.js website

• Slarivo About Section

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Spotlight New

  A new spotlight component with left and right spotlight, configurable and customizable.

• Slarivo Parallax Scrolling

  Here is Parallax Scrolling component

• Slarivo Waitlist Hero

  Waitlist Hero Animation

• Slarivo Myna Hero

  Animated hero and navbar

• 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 CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Wave Path

  An interactive SVG wave line that bends and ripples as you move your mouse across it. Smoothly animates back to rest when the cursor leaves, giving a playful liquid-like feel.

• Slarivo Hero with text and two button

  Hero section with text and two button

• Slarivo Gallery

  Gallery

• Slarivo Shuffle Grid

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

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger 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 Neon Flow

  Globes 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 Sticky scroll cards section

  Sticky scroll cards section – React + Tailwind + Framer Motion

• Slarivo Lets Work Section

  A minimal, standout "Let's Work Together" component with a hover effect and smooth micro-interactions

• Slarivo Hero Designali

  Your complete platform for the Design.

• Slarivo Meteors

  A meteor shower effect.

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo Feature 1

  Basic Feature block with heading, description and buttons on left and image on right.

• Slarivo CTA with Glow

  A powerful Call-to-Action component built with shadcn's design system. This component features multiple styles including box layouts and beam effects, all following shadcn's minimalist aesthetic. Each variant is designed to create compelling call-to-action sections that drive user engagement. Built with Tailwind CSS, it ensures responsive design and seamless integration with other shadcn components. The component maintains high accessibility standards while providing flexibility in how you present your calls to action.

• Slarivo Slideshow

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

• Slarivo Starfall portfolio landing

  Starfall portfolio landing page hero

• Slarivo Images Slider

  A full page slider with images that can be navigated with the keyboard.

• Slarivo Svg follow scroll

  Here is svg follow scroll

• Slarivo cta section with gallery

  call to action section with stagger animation and image gallery

• Slarivo Vercel Navbar

  Vercel Navbar with navigation menu

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

  This component is a hero section for RUIXEN UI that introduces the product with a clear heading, supporting text, and call-to-action buttons.

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Interactive Changelog With Dialog

  Interactive Changelog With Dialog

• Slarivo Layer Parallax Hero

  Layer Parallax Hero

• Slarivo Colorful Bento Grid

  A section with live and coming soon pages to show on your landing page, no matter if you're a SaaS (show features) or an Agency.

• 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 Landing Page

  A 3D Interactive Landing page

• Slarivo Carousel

  Here is Carousel component

• Slarivo Carousel

  Here is Carousel component

• Slarivo Animated Video on Scroll

  Animated video on scroll with also reveal text effects

• Slarivo Gradient Wave

  Gradient Wave with props

• Slarivo BG GREDIENT

  BG GREDIENT FOR HEROS OR COMPONENTS

• Slarivo Scrolling animation

  Scrolling animation, Profile images

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

  Vercel Hero with grid pattern

• Slarivo Pricing Section

  Professional pricing section components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases

• Slarivo Simple UI

  This is a simple UI used for generating images and displaying the image list

• Slarivo Matrix Code

  2D barcode called a Data Matrix code, or the visual effect of falling green characters

• Slarivo Neon Orbs

  Neon Orbs Animation

• Slarivo Scroll Hero Section

  Animated Scroll keywords section with loading and scrolling animation

• Slarivo Features

  Profiles component from the 21st.dev community.

• Slarivo Sonic Waveform

  This one is called "Sonic Waveform." It features an interactive, generative audio waveform that ripples and distorts as you move your mouse across the screen. This creates a high-tech, data-visualization feel, as if you're interacting with a live data stream or a soundscape.

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Feature 2

  Basic feature section with heading, description and buttons. Image on left

• Slarivo Ruixen Stats

  A bold, asymmetric analytics section where a hero CountUp figure overlays a live area chart, instantly drawing focus. Floating side stats and a clean CTA create a premium, dashboard-inspired Ruixen UI showcase.

• Slarivo About Section

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Ride Booking Form

  Ride Booking Form This component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easily integrated into any application requiring a booking interface.

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

  Scroll Areas component from the 21st.dev community.

• Slarivo Wilderness

  On Hover Parallax Hero

• 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 Pinky News Letter

  Pinky News Letter with paper design

• Slarivo FinTech Landing Page

  A modern minimal landing page for Fintech startups.

• Slarivo Call To Action

  Here is Call To Action component

• Slarivo Cosmos 3d orbit gallery

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

• 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 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 Personal Landing

  A modern, responsive landing component with avatar, headline, social links, and a live message input with validation and toast notifications. Ideal for personal portfolios or digital profiles.

• Slarivo Hero 04

  Hero banner. creative designer, portfolio

• Slarivo Call to Action

  A centered call-to-action section with a balanced title, description, and optional button.

• Slarivo HeroSection – Enterprise-Ready Landing Page Hero with Dual CTAs

  “Make your product unforgettable at first glance. The HeroSection gives you a bold, responsive, and theme-aware hero block with headline, subtext, and dual CTAs. Perfect for SaaS, startup, or enterprise landing pages — designed with accessibility, shadcn/ui, and dark mode support baked in. Just plug in your copy, and you’ve got a Fortune-500-ready hero section.” ⚡ Why this works: Problem hook: “Make your product unforgettable at first glance.” Solution promise: “Bold, responsive, theme-aware hero block.” Audience targeting: SaaS, startup, enterprise. Tech stack credibility: shadcn/ui, accessibility, dark mode. Viral appeal: “Fortune-500-ready” feels premium and aspirational.

• Slarivo Retro Grid

  A stunning animated retro grid component with customizable colors, scanlines, and neon glow effects. Perfect for synthwave, vaporwave, and cyberpunk UI designs. Features smooth 3D perspective animation, dynamic gradient sky, and interactive color controls. Built with React, TypeScript, and Canvas API. Fully responsive and optimized for performance. Ideal for landing pages, hero sections, and nostalgic 80s-inspired web applications. Easy to integrate with customizable props for grid color, CRT scanlines, and glow effects.

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

  Beautifully designed, fully responsive, expertly crafted Hero examples

• Slarivo CTA Section

  A call-to-action marketing section with a headline, badge, action buttons, and resource cards for documentation and video tutorials.

• Slarivo Team Section

  Animated Team Section This component displays a title, a description, and a list of team members in a visually appealing animated arc layout. It's designed to be highly reusable through props.

• Slarivo Orbiting Avatars

  Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.

• 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 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 Hero with Product Mockup

  Showcase your product in front of users and shine

• Slarivo Animated Section with Gradient and Dynamic Lines

  Animated Dark‐Mode Section with Gradient Heading and Dynamic SVG Lines

• Slarivo Noise Dark Blue Gradient with Squares

  Here is Noise Dark Blue Gradient with Squares component

• Slarivo Hyperdrive hero

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

• Slarivo 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 Fractal Bloom Tree

  brand new hero component for you. This one is called "Fractal Bloom." It features a generative, tree-like fractal that grows and blossoms on the screen. The growth is subtly influenced by your mouse position, creating a unique, organic animation every time.

• Slarivo Glassmorphism Listen App

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

• Slarivo Hero with bg video

  here is progressive hero

• Slarivo Suffle Hero

  ShuffleHero: Dynamic Image Grid with Engaging Headline Elevate your landing pages with ShuffleHero, a captivating React component that combines a compelling headline and call to action with a mesmerizing, auto-shuffling image grid. This component is perfect for drawing immediate attention and showcasing visual content in a dynamic and unique way. Features Dynamic Image Grid: A 4x4 grid of images that automatically shuffles and re-arranges itself every three seconds. This subtle, continuous animation creates an engaging visual effect without being distracting. Smooth Transitions: Powered by Framer Motion, the image shuffling includes smooth, spring-like transitions, ensuring a polished and professional feel as the images re-position. Prominent Call to Action: The hero section includes a clear headline, a supportive paragraph, and a stylish button, designed to immediately convey your message and encourage user interaction. Responsive Layout: The component adapts gracefully to different screen sizes, displaying the text and image grid effectively on both mobile and desktop devices. How it Works ShuffleHero uses a combination of React's state management and Framer Motion for its animations: Image Shuffling Logic: A shuffle utility function randomly reorders the array of image data. useState and useEffect: These React hooks manage the state of the image grid, triggering re-renders and the shuffling animation at regular intervals. motion.div with layout: Framer Motion's motion.div and the layout prop are crucial for animating the position changes of the grid items when the squares state updates, creating the smooth shuffle effect. This component is an excellent choice for websites looking to make a strong visual impact, such as portfolios, creative agencies, or product landing pages that benefit from showcasing a variety of images.

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Content Block

  Here is Content Block component

• Slarivo Circular Flip Card Gallery

  Circular Flip Card Gallery, Hover Animation

• 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 Spark Effect

  Spark Effect

• Slarivo Custom Cursor

  • Smooth cursor movement using spring • Configurable cursor variants "customCursorVariants" • Change cursor variant and text with "useSetCursorVariant()" hook • Change variant with "setCursorVariant()" • Change text with "setCursorText()"

• Slarivo Colourful Text

  A text component with various colours, filter and scale effects.

• Slarivo Hero

  Apple Glow Hero Gradient-glow typography highlighting innovation and intelligence. Perfect for impactful hero sections where bold visuals meet futuristic branding.

• Slarivo Animated Grid

  The component features a customizable grid with color interpolation and staggered border-radius animations. You can adjust the grid size, cell dimensions, and animation timing through props, making it flexible for different use cases.

• Slarivo Web3 Hero Section

  Animated Web3 Hero Section

• 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 Navbar Section 2

  A dark navigation bar with an animated expanding mega-menu dropdown and a light hero section, inspired by the xAI marketing layout.

• Slarivo neurons hero

  It features an interactive visualization of a neural network. As you move your mouse, the neurons near your cursor "fire," sending pulses of light along their connections, creating a beautiful and complex ripple effect through the network.

• Slarivo Sleek Hero with Orb

  Sleek Hero with Orb dark & light mode supported fully responsive with floating header

• Slarivo Animated Feature Spotlight 3D

  The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smooth entrance animations and an interactive 3D hover effect. It combines expressive typography, subtle motion, and layered depth to create a premium visual experience. On hover, the featured image tilts naturally in 3D space with a soft shadow beneath it, giving a realistic floating impression. Built with Shadcn UI, Tailwind CSS, and Framer Motion, this component is fully responsive, reusable, and ideal for landing pages, marketing sections, or feature highlights where visual engagement matters most.

• Slarivo Animated Feature Spotlight 3D

  The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smooth entrance animations and an interactive 3D hover effect. It combines expressive typography, subtle motion, and layered depth to create a premium visual experience. On hover, the featured image tilts naturally in 3D space with a soft shadow beneath it, giving a realistic floating impression. Built with Shadcn UI, Tailwind CSS, and Framer Motion, this component is fully responsive, reusable, and ideal for landing pages, marketing sections, or feature highlights where visual engagement matters most.

• Slarivo Animated Feature Spotlight 3D

  The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smooth entrance animations and an interactive 3D hover effect. It combines expressive typography, subtle motion, and layered depth to create a premium visual experience. On hover, the featured image tilts naturally in 3D space with a soft shadow beneath it, giving a realistic floating impression. Built with Shadcn UI, Tailwind CSS, and Framer Motion, this component is fully responsive, reusable, and ideal for landing pages, marketing sections, or feature highlights where visual engagement matters most.

• Slarivo Grid Hero Animated

  Grid Hero Animated

• Slarivo jelly fish

  Jelly fish effect

• Slarivo Drag cards

  Draggable Cards

• Slarivo Animated Hero

  Beautifully designed, fully responsive, expertly crafted with amazing jelly animation.

• Slarivo Home Section

  This HomeSection component is a responsive, GSAP-animated carousel section that showcases a series of cards with smooth scaling and directional transitions.

• Slarivo Parallax

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

• Slarivo Modern Landing Hero

  Onboarding component from the 21st.dev community.

• Slarivo Hero with Dashboard Mockup

  A left-aligned serif hero section with a media panel showing an image backdrop and a floating dashboard mockup, plus an animated call-to-action.

• Slarivo Ripple Grid

  Ripple Grid

• Slarivo Hero Section

  A visually polished 2D wave that brings a webpage to life. It supports light and dark themes and features dramatic, multi-point lighting.

• Slarivo Real Estate Search Hero

  A centered hero section with a rounded search bar, a masked architecture image that fades into the page, and a split closing statement.

• Slarivo Space box

  Here is space box animated component

• Slarivo The Dialog

  Here is Dialog components

• Slarivo Hero AI Value Proposition

  A hero section that presents an AI product's value proposition with an animated headline, CTA, social proof avatars, and a dashboard mockup preview.

• Slarivo Variable Font Proximity Hero

  A centered hero headline whose letters shift from ultra-light to heavy weight as the cursor moves near them.

• Slarivo Flow Hero-1

  Animated hero section with carousel.

• Slarivo FlickeringGridDemo2

  Inspired by magic ui

• Slarivo Book A Demo 4

  Book A Demo 4 with logos and form

• Slarivo Preview Switch Hero

  A split hero with an icon-rail that switches the product preview, a lead-capture column (badge, ratings, email form, CTAs, avatars), and a full-width logo strip. Responsive and theme-aware.

• Slarivo Cinematic Product Scroll Section

  A premium e-commerce section featuring scroll-linked grayscale-to-color masks, a cinematic text hero, and an interactive horizontal slider with circular hover reveal cards.

• Slarivo Financial Hero Section

  An animated financial SaaS hero section with a sticky nav, headline, CTA buttons, and a dashboard mockup that reveals on scroll.

• Slarivo Hero 03

  A centered hero section with a serif headline, dual call-to-action buttons, and a portrait image that fades into the page below the copy.

• 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 Call to Action 01

  Call to Action with logos and section

• Slarivo Arc Preloader Hero

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

• Slarivo Customer Experience

  An interactive experience section that reveals a floating preview image following the cursor as you hover over each list row.

• Slarivo Logo Timeline

  An animated timeline component with logo markers and Motion-powered transitions.

• Slarivo Volumetric Studio

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

• Slarivo Feature Hero

  A centered hero section with heading, subtext, and a grid of icon-based feature cards highlighting product capabilities.

• Slarivo Feature 01

  Features with cards and image

• Slarivo Integrations Orbit Section

  A marketing integrations section arranging brand logos in animated concentric orbit rings around a central logo, with a heading and call-to-action button.

• Slarivo Centered Hero with Image Fan

  A centered hero section with a highlighted serif headline, description, dual call-to-action buttons, social proof, and a fanned collage of three overlapping images.

• Slarivo DevTool Landing Page

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

• Slarivo ReferAndWinBanner

  A customizable, animated banner component featuring floating paper airplanes and decorative checkmarks—ideal for referral, promotional, or announcement sections.

• Slarivo Book A Demo 2

  Book A Demo 2 with form section

• Slarivo Book A Demo 3

  Book A Demo 3 with logos and form

• Slarivo Circuit Board

  An interactive circuit board layout with labeled nodes and animated electricity pulses that travel along right-angle traces between connected nodes.

• Slarivo Variable Font Hover Hero

  Hero headline with two stacked lines whose variable-font weight and slant axes invert against each other on hover.

• Slarivo Image Mouse Trail

  An interactive hero section that reveals a trail of images following the cursor as the mouse moves across the container.

• Slarivo call to action

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

• Slarivo Hole reveal Hero

  Here is Hole reveal Hero component

• Slarivo SpiralAnimation

  The inspiration comes from Bleuje

• Slarivo Shooting Stars

  A shooting star animation, as seen on figmaplug.in

• Slarivo Particles

  Particles are small, interactive elements that can be used to create a variety of effects.

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Starfield

  The component retains the core functionality of the starfield animation, including props for customization, and uses React with a canvas element for rendering.

• Slarivo Liquid Effect Animation

  Liquid Effect Animation

• Slarivo AuroraBackground

  A multi-layered, animated aurora sky effect built with React, Tailwind CSS, and Framer Motion. It features pulsing radial gradients, drifting blurred color blobs, and twinkling stars to simulate a dynamic polar light. Perfect for hero sections, ambient UI backdrops, or visually rich intros.

• Slarivo Fireworks show

  Firework animation

• Slarivo Retrying

  Retrying Back Gourd Hero

• Slarivo Wave Animation

  The animation creates beautiful flowing waves using different colored bars that oscillate based on sine wave calculations

• Slarivo Animated Canvas

  The component will use a canvas to render the animation with configurable parameters.

• Slarivo Comet Hero

  An animated SVG component recreating the swirling line animation from the Perplexity Comet download page. Features four 3D-rotated circles with gradient strokes (teal, orange, rose, amber) animated via strokeDashOffset. The visual effect comes from carefully tuned rotation angles, gradients, and animation speeds to achieve the signature swirling motion.

• Slarivo Particle Animation

  You can easily adjust the visual appearance by modifying the props, such as changing colors, particle count, or animation timing.

• Slarivo AuroraFlux

  A beautiful hero section with aurora flux animation

• Slarivo Particle canvas

  Particle canvas with colors

• Slarivo SymmetryEngine

  A real-time, interactive fractal world rendered with ray marching and domain folding. This component simulates infinite, self-similar structures using pure mathematical transformations. Mouse movement rotates the camera through folded dimensions, revealing a kaleidoscopic landscape of vibrant color and recursive geometry.

• Slarivo Neon Crystal City

  A one-liner that captures what it is and why it’s cool. e.g. “An infinite ray-marched 3D cityscape with neon glow and mouse-controlled camera.”

• Slarivo Vector Field

  Vector Field with color props

• Slarivo Radial Lines

  The component generates the specified number of lines with rotation angles, all using inline styles. You can customize the line count, colors, thickness, positioning, and container properties.

• Slarivo elixr

  Made for elixr copied

• Slarivo Robot Hero

  An interactive 3D robot companion built with React Three Fiber and Framer Motion. Features a dynamic glass UI, physics-based interactions, and customizable properties.

• Slarivo Product Bounce Card

  The ProductBounceCard is a sleek, animated display card designed to showcase products with a lively and modern 3D bounce effect. Using Framer Motion, it smoothly animates the product image with gentle vertical movement and subtle Y-axis rotation, creating…

• Slarivo The Blueprint of Digital Craft

  In a world of cookie-cutter templates, we return to the fundamentals of great design. At Mysh, we treat every digital project like a custom build, combining the precision of a geometric grid with the creative spark of a fresh sketchbook. From the first…

• Slarivo Interactive Video Portfolio Scroller

  An interactive scroll-driven portfolio showcase featuring synchronized serif typography, a smooth vertical video track with autoplay controls, and mobile/iOS audio fallback support.

• Slarivo Image Stream Hero

  Two rails of images ride out of the vanishing point at the centre and sweep to both edges, growing and turning as they approach. Perspective does the sweep and the growth at once, and the loop never stops.

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

  Analytic edge-glow triangle with LED emitters, floor radiance, and interactive color deploy. Canvas-scoped pointer input drives the lighting while a lil-gui selector chooses highlighted edges.

• Slarivo Handwriting Text

  Animated handwriting text that traces letters as if written by a pen, then fills them in. Use it for headlines, hero sections, and expressive text animations.

• Slarivo Shave Reveal Hero

  Interactive hover-reveal hero — drag a blade across a bearded portrait to shave it, with synthesized sound. Full light/dark theme support and keyboard navigation. Zero dependencies.

• Slarivo Scroll-Locked Video Hero

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

• Slarivo Hero Scroll Video Pin Reveal

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

• Slarivo Inversion Circle Scroll Animation

  Scroll-driven animation: a black circle rises from below the screen to centre then expands to fill the entire viewport. White text is revealed inside via CSS clip-path creating a colour-inversion effect. Includes a scroll-reveal content section that flips…

• Slarivo MacBook Neo Hero

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

• Slarivo Landing scroll animation

  A Landing scroll animation component for introducing a page with a headline, value proposition, and primary action, featuring landing page, landing-page, animated hero section, animated-hero-section.

• Slarivo UFO Hero

  A cinematic, physics-driven hero: a UFO drifts through end-credit text, pushing letters aside and burning them with its tractor beam on click. Fully responsive, built with a custom canvas engine. A memorable landing-page opener for portfolios and agencies.

• Slarivo Hero Section with Device Mockups

  A full-screen hero section with a navbar, animated blur-in headline and CTA buttons, and a desktop dashboard screenshot overlaid with an iPhone device mockup.

• Slarivo Quordix Work Hero

  Full-viewport portfolio hero with magnetic letter physics, variable-weight subtitle words, animated orbit rings, and scroll parallax fade.

• Slarivo Lamp

  Ambient lamp glow with a bright edge line for hero sections.

• Slarivo Kinetic Particle Fabric

  An immersive 3D physics fabric simulation featuring interactive mesh deformations, gravitational shockwave pulses, fluid wave oscillations, and full light/dark mode compatibility.

• Slarivo Kinetic Matrix

  An interactive spring-mass lattice simulation featuring reactive cursor force fields, traveling synaptic data pulses, gravitational shockwave ripples, and adaptive light/dark themes.

• Slarivo Ghibli Robot Hero

  A full-screen hero laid over a hand-painted valley: tall summer clouds, a still lake, a lone robot on the path. The sky is weighted just enough to carry white type without greying the picture, the headline is a serif over a grotesque, and the button is a…

• Slarivo Broken by Design — Shattered Glass Hero

  Impact-fracture hero built from real shattered glass. Sixteen independent fragments per breakpoint react to the cursor with 3D tilt, parallax and specular light. The title is masked into each shard — physically broken across the pane. Fully responsive,…

• Slarivo Fox Mascot Sign In

  A Fox Mascot Sign In component for introducing a page with a headline, value proposition, and primary action, featuring 3d hero, 3d-hero, 3d interactive timeline, 3d-interactive-timeline.

• Slarivo Vibe-to-Prompt AI Input

  A fluid, glowing command interface designed to visually transform vague coding ideas into structured, production-ready prompts. Features a continuous conic-gradient border, physics-based state transitions, and an animated layout shift that snaps…

• 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 Logo Cloud Marquee

  A hero-style logo cloud section with an animated heading and a bidirectional flowing marquee of partner or client logos.

• Slarivo Bento Grid Hero

  A three-tile asymmetric bento grid section with a wide hero tile featuring a headline and CTA button above two feature tiles with icons, used for landing page feature highlights.

• Slarivo Minimal Centered Hero

  A zero-decoration hero section with an eyebrow label, a large tracking-tight headline, a subline, and a pill call-to-action button, for landing page tops.

• Slarivo Hero 12

  A full-bleed image hero section with an oversized title, an optional established/label tag, and a rounded pill call-to-action button anchored to the bottom corner.

• Slarivo Welcome Banner

  A dashboard hero banner that announces a redesigned interface with a headline, short pitch, download CTA and illustration, used as the first widget on an admin/app homepage.

• Slarivo Coming Soon Launch Teaser

  A full-viewport "coming soon" landing section with a badge, animated word-by-word serif headline, sub-copy and a disabled CTA above a glowing sparkle horizon, for a product launch or under-construction page.

• Slarivo Worth Keeping CTA

  A full-bleed closing call-to-action section with a giant monochrome scrolling marquee behind a centered heading, badge, note and seal button.

• Slarivo Stack Tower

  An animated column of stacked words that reads as a rotating 3D cylinder, built with 2D CSS transforms, for hero sections and type specimens.

• Slarivo Product Hero with Demo Panel

  A centered marketing hero section with a headline, dual call-to-action buttons, a full-width photo with a floating chat/demo panel overlaid on it, and a logo strip below.

• Slarivo Full-Bleed Gradient Coming Soon

  A full-screen coming-soon landing section with a gradient and grid backdrop, brand mark, launch badge, an email capture form with a success state, and social icon buttons.

• Slarivo Path Drawing Portfolio Hero

  Your name shouldn't just sit there. It draws itself as a living gradient stroke — a portfolio opener with signature motion. Preview live, paste into Cursor: https://design-layer.com/en/components/path-drawing-portfolio-hero — More motion that doesn't look…

• Slarivo Sakura Editorial Poster

  Make the first scroll feel like opening a poster, not another SaaS hero. Sakura holds the frame — then the title reveals letter by letter from behind the branch. Preview live, paste into Cursor:…

• Slarivo Sparkles Title

  A dark hero section with a headline, grid backdrop and an animated particle sparkles field along a glowing divider.

• Slarivo Sparkles Title

  A hero title section with an animated particle sparkles effect fading out below a grid-lined card and description text.

• Slarivo Airlock Spaceship Hero

  A scroll-locked video hero: the page stops and the wheel scrubs an astronaut out through two spaceship airlock hatches into open space.

• Slarivo Prism Hero

  A scroll-driven hero built around a faceted crystal that genuinely refracts the headline behind it — real transmission with chromatic dispersion, not a blur filter. The headline is rendered to a canvas texture inside the 3D scene, so the glass bends the…

• Slarivo Shave Reveal Hero

  Interactive hover-reveal hero — drag a blade across a bearded portrait to shave it, with synthesized sound. Full light/dark theme support and keyboard navigation. Zero dependencies.

• Slarivo Phone Scroll Hero

  A hero whose 3D-tilted phone mockup flattens and climbs up over the headline as the page scrolls. Theme-aware, with a reduced-motion fallback.

• Slarivo Glyph Portal

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

• Slarivo Sunset Skyline Hero

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

• Slarivo Home Hero Landing Scroll Animation

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

• Slarivo Hero Carousel

  A full-bleed editorial hero driven by a filmstrip: cards share one top edge, the focused card unfurls to full height while its neighbours stay clipped to half, and the whole background re-grades to the focused photo. Wheel, drag, click and arrow keys.