SLARIVO / GRADIENTS

Gradients Components

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

• Slarivo Gradient Text

  Gradient Text

• Slarivo Gradient Heading

  Gradient Heading Text

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradients

  here is gradients component

• Slarivo Gradient Card

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

• Slarivo Gradient Shadow

  A wrapper that adds an animated, gradient glowing shadow behind its child on hover.

• Slarivo Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Gradient Selector Card

  This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

• Slarivo Graaadeints

  The Beauty of Gradients

• Slarivo Dia Gradient

  Dia Browser's signature aurora glow — a rainbow field anchored to the bottom that rises up on mount via a scaleY transform, unfurling from the floor like an aurora. Zero dependencies, no canvas, no per-frame work. Ships four self-contained renderings of the same idea: DiaGradient (a bell-curve row of tall, heavily-blurred full-rainbow columns — the original footer look), PeakedGradient (stacked smooth bezier peaks, light front to dark back, one soft mountain of colour with a pointiness control and a scroll-driven reveal option), FoldGradient (the bar field on a 3D plane folded away from the viewer via CSS perspective and rotateX, like a glowing floor receding toward a horizon), and DodgeGradient (a vertical black-to-white fade color-dodge-blended over a horizontal rainbow, masked into a dome bloom). Each honours prefers-reduced-motion and is a drop-in background layer.

• Slarivo Spline Scene

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

• Slarivo Aurora Background

  A subtle Aurora or Southern Lights background for your website.

• Slarivo Sparkles

  A configurable sparkles component that can be used as a background or as a standalone component.

• Slarivo Text Shimmer

  Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.

• Slarivo Lamp

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

• Slarivo Background Gradient Animation

  A smooth and elegant background gradient animation that changes the gradient position over time.

• Slarivo Particles

  Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.

• Slarivo Wavy Background

  A cool background effect with waves that move.

• Slarivo Background Beams

  Multiple background beams that follow a path of SVG, makes a good hero section background.

• Slarivo Glow

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

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Animated Gradient Background

  An animated Gradient Background

• Slarivo Animated Gradient With SVG

  An animated multi-color gradient background effect with SVG elements. Animated gradients can be achieved with many different techniques (shaders, CSS gradients, etc.), this component uses simple SVG circles with a blur filter to create the effect. 1. For each color in the colors prop array, the component creates an SVG circle element 2. Each circle is given a random initial position using percentage values 3. The movement of each circle is controlled by 8 CSS variables that define target positions: --tx-1 and --ty-1 for the first position --tx-2 and --ty-2 for the second position And so on for positions 3 and 4 4. These variables are set to random values between -0.5 and 0.5.

• Slarivo Animated Gradient Text

  An animated gradient background which transitions between colors for text. Add the following animations to your tailwind.config.js file: extend: { animation: { gradient: "gradient 8s linear infinite", }, keyframes: { gradient: { to: { backgroundPosition: "var(--bg-size) 0", }, }, },

• Slarivo Gradient Dots

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

• Slarivo Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo Sticky Scroll Reveal

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

• Slarivo Shiny Button

  The component preserves all the original functionality including the animated conic gradients, shimmer effects, dot patterns, and hover states.

• Slarivo AI Loader

  ai loader background and animation

• Slarivo Background Components

  Here is Background Components component

• Slarivo Feature Section with card gradient

  Feature Section with card gradient

• Slarivo Gradient Background

  A smooth, looping gradient background powered by Framer Motion, with optional overlay and center-aligned content. Perfect for creating vibrant hero sections, landing pages, or fullscreen app backdrops.

• Slarivo Gradient Background

  A smooth, looping gradient background powered by Framer Motion, with optional overlay and center-aligned content. Perfect for creating vibrant hero sections, landing pages, or fullscreen app backdrops.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Gradient Tracing

  An animated line component with a moving gradient and optional logos at the endpoints.

• Slarivo Color Picker

  A @shadcn-ui compatible color picker using @uiw/react-color

• Slarivo Noisy Gradient Backgrounds

  A versatile React component for creating stunning, animated gradient backgrounds with an optional, customizable noise overlay. Easily configure gradient origins, a rich array of color stops, and noise parameters to generate unique and vibrant backdrops for your projects. This showcase demonstrates 9 beautiful, full-screen examples ready to inspire your designs. Built with Tailwind CSS in mind.

• Slarivo Dynamic Wave Canvas Background

  Component that creates a dynamic, colorful wave animation as a canvas background. Ideal for visually captivating hero sections, blending smooth animations with deep blues, purples, and gray tones for an engaging dark theme.

• Slarivo Background snippets

  Here is Background snippets component

• Slarivo Button

  Here is modern liquid animated button component

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• 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 Parallax Floating

  Elements float at different speeds based on cursor position, creating a depth illusion through independent parallax layers.

• Slarivo Macbook Pro

  Macbook Pro Mockup

• Slarivo Background Snippets Noise effect11

  Here is Background Snippets Noise effect component

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Backgrounds

  Here is Gradient Background Bottom Blue

• Slarivo Gradient Wave

  Gradient Wave with props

• Slarivo Rotating Gradient Right

  This component creates a smooth, continuously rotating conic gradient glow behind any content. The gradient’s vibrant colors transition seamlessly as it spins, producing a dynamic spotlight effect. Its blurred, oversized shape adds depth and a soft ambient light, making foreground elements stand out.

• Slarivo iPhone 16 Pro

  Mockup of iPhone 16 Pro

• Slarivo Background Gradient Animation

  Background Gradient Animation

• Slarivo Aurora Flow

  animated colorfull hero section ith post processing

• Slarivo Glass Cards

  Neomorphic and glassmorphism stacked cards with smooth GSAP animations and interactive hover effects

• Slarivo Background Gradient Glow

  Here is Background Gradient Glow component

• Slarivo Background Gradient Glow

  Here is Background Gradient Glow component

• Slarivo Neon Orbs

  Neon Orbs Animation

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

  Gradient Mesh waith noise background animation

• Slarivo Gradient bars Background

  A stunning, fully customizable animated gradient bars background component for modern React applications. Perfect for hero sections, landing pages, and eye-catching website backgrounds.

• Slarivo Scratch To Reveal

  The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.

• Slarivo Radial Glow Background

  Here is Radial Glow Background component

• Slarivo Ripple Pulse Loader

  A minimalistic ripple-based loader with concentric circles expanding outward in a smooth pulse effect. The dark, layered gradients create depth while maintaining a sleek, modern aesthetic—ideal for splash screens, transitions, and data-fetching states in premium UIs.

• Slarivo Background Gradient Snippet

  Here is Background Gradient Snippet component

• Slarivo Background Gradient Snippet

  Here is Background Gradient Snippet component

• Slarivo Background Gradient Snippet

  Here is Background Gradient Snippet component

• Slarivo OTP Verify

  OTP verify with GIF

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Animated Gradient

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

• Slarivo Noise Dark Blue Gradient with Squares

  Here is Noise Dark Blue Gradient with Squares component

• Slarivo Gradient Blur

  Gradient Blur with props

• Slarivo Gradient Chat Input

  React AI chat input — a minimal message field that streams animated chat bubbles and reveals a blurred spectrum glow once a conversation starts.

• Slarivo Deep Sea

  Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#000428, #004E92). Features: soft blur finish. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Dreamy Pastel Wash

  Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#DCEBF7, #B9D4EC, #F3D9E4, #F7EFE3). Features: soft blur finish, film grain. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Oceanic Shimmer

  Pure CSS gradient background in the Layered Tide style, made with the 21st.dev Gradient Builder. 4-color palette (#EAF7FB, #7FC6E6, #2E7CC0, #123A6B). Features: film grain. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Marine Horizon

  Pure CSS gradient background in the Orbit Sweep style, made with the 21st.dev Gradient Builder. 4-color palette (#EBF6F7, #A2D7DD, #00A3AF, #274A78). A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Gradient Shimmer

  A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind, no runtime deps. The gradient is background-clipped to the glyphs and swept with the WAAPI at a constant px/s regardless of font size, so every shimmer on the page runs at the same frequency. Ships 8 rich multi-stop presets (sunrise, bubble, peach, tonic, mint, spring, twilight, bay) plus fully custom stops, three easing curves (smooth, gentle, snappy), and tunable duration, spread, angle and pause. Automatically pauses while off-screen, while the tab is hidden, or while the page scrolls, and degrades to a static gradient under prefers-reduced-motion. Great for signalling a running / loading task inline in text.

• Slarivo Animated Gradient

  A full-cover WebGL animated gradient background with configurable presets, noise overlay, and swirl distortion for hero sections and cards.

• Slarivo Coral Gloom

  Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#123A6B, #E4676B, #F4B3C2, #FBF3E7). Features: soft blur finish, film grain. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Silk Blend gradient

  Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#4C6CB3, #B28FCE, #F4B3C2). Features: soft blur finish, film grain, vignette. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Liquid Gradient

  Liquid Gradient component for React.

• Slarivo Background Paths

  Landing Background paths with Gradient Title

• Slarivo Rainbow Button

  An animated button with a rainbow effect.

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

  Beams Bacground animated with colors

• Slarivo Gradient Button

  A beautiful button component with animated gradient background and border effects, inspired by Aaron Iker's implementation of James design concept. Features - Smooth gradient animations on hover - Glowing border effect - Multiple color variants - Fully accessible - CSS-only animations - Dark mode support

• Slarivo AI prompt Box

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

• Slarivo Hero Section Dark

  Hero

• Slarivo Progressive blur

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

• Slarivo 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 Button Colorful with Hover Effect

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

• Slarivo Shine Border

  Shine border is an animated background border effect.

• Slarivo Logo Cloud 3

  Clients component from the 21st.dev community.

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

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

• Slarivo Hero

  sleek Hero section with background paper shaders

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

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

• Slarivo Hover Footer

  Hover Footer animation to our modern React and Next.js-based UI component library! Enhance your projects with this animation.

• Slarivo Hero

  animated hero

• Slarivo Dark Gradient Pricing

  A pricing table component with a glass effect and animated cards, perfect for displaying tiered pricing plans and feature comparisons. Features - Responsive design with mobile-first approach - Animated glass effect with blur transitions - Feature comparison with checkmark indicators - Gradient text and background effects - Customizable pricing tiers and benefits - Motion animations on scroll

• Slarivo Meteors

  A group of beams in the background of a container, sort of like meteors.

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

  Grid cursor infinity grid

• Slarivo ai loader

  A smooth, animated circular loader that gives the impression of thought, processing, or idea formation — like an AI "thinking" or "creating" something in real time.

• Slarivo Glare Card

  A glare effect that happens on hover, as seen on Linear's website

• Slarivo Shine Border

  Shine Border

• Slarivo Cinematic landing Hero

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

• Slarivo Evervault Card

  A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.

• Slarivo Orbiting Circles

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

• Slarivo Text Shimmer Wave

  Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more. You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.

• 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

  minimal hero with modern gradiental background

• Slarivo Background Beams With Collision

  Exploding beams in the background

• Slarivo Background Circles

  Clients component from the 21st.dev community.

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

  Beautiful, grainy hero component for an email-related website

• 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 Glowing Shadow

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

• Slarivo Pulse Beams

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

• Slarivo Logo Cloud 4

  Clients component from the 21st.dev community.

• Slarivo Hover Border Gradient

  A hover effect that expands to the entire container with a gradient border.

• 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 Gradient Blur Bg

  Here is Gradient Blur Bg component

• Slarivo Floating Gradient

  Animated floating gradient background with soft blurred color blobs that drift and scale behind centered content.

• Slarivo Gradient Animation

  An animated background card that smoothly cycles through transitioning color gradients.

• Slarivo Almoayyed

  Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#D7D5D5, #310527, #39051F, #FFFFFF). Features: film grain. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Pipo

  Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 3-color palette (#E6B093, #A3CEFF, #FAF9EF). Features: soft blur finish, film grain. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Sunset Bloom

  Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#2B0A3D, #C1275C, #F8873B, #FDE68A). Features: soft blur finish. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo Deep Horizon

  Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#08243B, #12507A, #2E8FA6, #7DD0C0). Features: soft blur finish. A drop-in, zero-dependency React component for hero sections, cards, and page backgrounds.

• Slarivo useMousePositionRef

  A custom React hook that tracks mouse/touch position using a ref to avoid re-renders. Returns a mutable ref object containing the current position relative to a container or window.

• Slarivo AI Input

  AI Input popover

• Slarivo Login

  A SignIn card component featuring animated buttons, input fields, and social media icons, all enhanced with gradient effects for a modern visual appeal.

• Slarivo Background Gradient

  An animated gradient that sits at the background of a card, button or anything.

• Slarivo Animated Glassy Pricing

  Animated Glassy Pricing

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Text Gradient Scroll

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

• Slarivo 3D Animated Pin

  A gradient pin that animates on hover, perfect for product links.

• Slarivo X Gradient Card

  A nice gradient Card displaying a post from X (Twitter)

• Slarivo Animated sign in

  Animated sign in

• Slarivo Gradient Menu

  Gradient Menu: Button Icon Hover Effects with Text And Gradient Drop Shadow

• Slarivo Full Screen Signup

  Modern and Beautiful full screen Signup form with HextaUI

• Slarivo Button Shiny

  Shiny Button with shadow gradiant

• Slarivo Rainbow Borders Button

  A stunning button component featuring an animated rainbow gradient border with a sleek dark gradient background. The rainbow border cycles through vibrant colors with a smooth animation, creating an eye-catching glow effect. Perfect for call-to-action buttons, gaming interfaces, or any modern web application that needs a bold, dynamic visual element. Built with Tailwind CSS and includes hover animations for enhanced interactivity

• Slarivo Hero 1

  Hero component for AI chat websites.

• Slarivo AI Assistant Interface

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

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo Animated Shiny Text

  Animated Shiny Text

• Slarivo Sign Up

  A stunning, open-source multi-step authentication UI component for modern web applications. Built with React, TypeScript, and Framer Motion, it delivers a visually captivating and highly interactive sign-up experience out-of-the-box. Key features include a sleek glassmorphism design, a fluid animated gradient background, delightful micro-interactions, and rewarding user feedback with loading states and a built-in confetti celebration on success. Perfect for developers looking to elevate their project's user onboarding with a polished and professional auth screen.

• Slarivo Banner

  A versatile notification banner component with gradient background and grid pattern overlay. Originally designed for Dub.co's domain claim notifications. Features - Dismissible banner with close button - Optional icon with circular background - Customizable action button - "Learn more" link support - Responsive layout (mobile/desktop) - Built-in grid pattern background

• Slarivo Hero Section

  Here is Hero section components

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

  A Stylish and Animated Flip Card

• Slarivo Moving Dot Card

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

• Slarivo Starfall portfolio landing

  Starfall portfolio landing page hero

• Slarivo Glow Button

  A clean glowing button that pops off the screen. On hover, a subtle glare slides across the surface, giving it that shiny, futuristic vibe. It also reacts with a soft press animation when clicked, making it feel alive. Works in both light and dark mode without extra setup. Perfect for flashy CTAs like Generate, Start, or Launch.

• Slarivo Grid Background

  Grid Background

• Slarivo Animated Gradient Border

  Animated Border, Border animation, border gradient, animated border gradient, border rotate, border rotate animation, border rotation animation, card

• Slarivo Smooth Button

  A polished button component with gradient candy/destructive variants, sizes, and a subtle press-scale animation.

• Slarivo Liquid Metal Hero

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

• Slarivo Button

  Animated button

• Slarivo Text Color

  Text Color

• Slarivo 3D Folder

  A reusable 3D Folder component

• Slarivo Neon Gradient Card

  A beautiful neon card effect

• Slarivo 3d button

  A 3D button with animated text is a visually dynamic UI element designed to mimic real-world depth and provide interactive feedback through both its structure and the movement of its text.

• 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 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 Not Found Page 2

  Animated 404 page with floating gradient orbs, soft motion effects, and clean centered layout.

• Slarivo Schema Card with Animated Wave Visualizer

  Schema Card with Animated Wave Visualizer. This component renders a full-screen, procedurally generated wave visualizer in the background and overlays a “glassmorphic” database schema card in the center.

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

  Hero Button Expendable

• Slarivo Bounce card features

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

• Slarivo 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 Gradient Card Showcase

  Displays a set of interactive cards with skewed gradient back-panels, glowing blur highlights, and smooth hover transitions

• Slarivo Modern Background Paths

  BackgroundPaths: Dynamic SVG Paths & Animated Hero Section The BackgroundPaths component creates a stunning and subtly animated background using dynamically generated SVG paths. It perfectly complements an engaging, animated hero title and a stylish call-to-action button, making it an excellent choice for a modern header or landing section on any website. What It Is This React component uses framer-motion to generate and animate a series of elegant, flowing SVG paths that gently shift and fade in the background. Overlaying this dynamic backdrop is a customizable title where each letter animates into view with a smooth, spring-like effect. Below the title, a stylish button with interactive hover effects invites user engagement. Key Features Animated SVG Background: Dynamic Paths: The FloatingPaths sub-component creates 36 unique SVG <path> elements. Their shapes, stroke widths, and opacities are all dynamically generated, creating a sense of depth and variation. Continuous Motion: Each path animates infinitely with varying durations, resulting in a mesmerizing, non-repeating flow of lines across the background. Light/Dark Mode Support: The paths automatically adapt their color to match the surrounding text, seamlessly integrating with both light and dark themes. Spring-Animated Hero Title: Letter-by-Letter Entrance: The main title (controlled by the title prop) animates each individual letter into view with a "spring" effect, creating a lively and engaging entrance. Gradient Text: The title text uses a gradient fill that changes based on the theme, providing a modern and polished look. Customizable: Easily change the hero text by passing a different title prop. Stylish Call-to-Action Button: A beautifully designed button, "Discover Excellence," is positioned below the title. It features subtle background gradients, a backdrop-blur effect for a frosted glass look, and a shadow for depth. Interactive Hover Effects: On hover, the button scales slightly, its shadow deepens, and an arrow icon to the right smoothly translates, signaling interactivity. Theme-Aware: The button's colors and hover states work flawlessly in both light and dark modes. Responsive Layout: The component is designed for responsiveness, ensuring the title and button are well-centered and legible across various screen sizes. Framer Motion Integration: Extensive use of framer-motion handles all animations, providing smooth, hardware-accelerated transitions and complex sequence orchestration. Why It's Cool for Developers This component is an excellent demonstration of: Generative SVG Animation: Learn how to programmatically create and animate complex SVG paths for unique background effects. Sophisticated framer-motion Usage: It showcases advanced framer-motion features like pathLength, pathOffset, and spring transitions for precise control over animations. Layered UI Design: See how to combine background elements (SVG paths) with foreground content (text and a button) while maintaining proper z-index for visual hierarchy. Theming and Responsiveness: Implement design that gracefully adapts to different themes and screen sizes. Component Composition: It breaks down a complex UI into smaller, manageable sub-components (FloatingPaths).

• Slarivo Animated Text

  Cool Animated Text

• Slarivo Button

  Here is magic button component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Services Card

  Services Card – Showcase offerings. Modern UI component to present branding, development, or SEO services with clear visuals and descriptions. Ideal for portfolios and business websites.

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Bento

  Beautifully designed, fully responsive, expertly crafted Bento section

• Slarivo ruixen-hero-section-02

  This hero section is a visually striking, interactive introduction component designed to showcase a ruixen UI. It features a dynamic background with soft gradients, animated floating dots, and glowing blur effects to create a futuristic aesthetic.

• Slarivo Hero

  animated hero

• Slarivo argent-loop-infinite-slider

  A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.

• Slarivo Pricing Table

  A sleek, component-based Card system with glass effects, pricing layouts, and flexible sections like header, body, and list items. Perfect for modern SaaS pricing tables, feature lists, or product showcases with consistent, stylish UI.

• Slarivo Process Timeline

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

• Slarivo Footer

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

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

  An empty state component that displays messages when no content is available.

• Slarivo Footer

  Here is Footer component

• Slarivo Glass Blog Card

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

• Slarivo social card

  this is social card

• Slarivo Shiny Button

  this is a really cool shiny button with dotted bg and a hover bg glow with multiple layers

• Slarivo Text Hover Effect

  A text hover effect that animates and outlines gradient on hover, as seen on x.ai

• 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 BG GREDIENT

  BG GREDIENT FOR HEROS OR COMPONENTS

• Slarivo Scrolling animation

  Scrolling animation, Profile images

• Slarivo Contact

  Contact Section Description: A comprehensive and visually appealing contact section component featuring an animated background, a navigation bar, a main title, a contact form with various input types, and social media integration. Designed for reusability, responsiveness, and theme-adaptability using shadcn/ui.

• Slarivo Card

  Product Card A sleek, image-centric card component designed to showcase products with a title, description, price, and brand logo. It features a gradient overlay for text readability and pagination dots for visual flair.

• Slarivo Feature Card

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

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

  https://ui.dalim.in/card

• Slarivo banner

  A stylish banner component for modern UIs, built with accessibility and animation in mind.

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

  Place the element at the top of your root layout to display announcements. By default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. You can disable this feature with: To enable users to close the banner, assign it an ID. The state will be automatically saved.

• Slarivo Button

  button with background blur

• Slarivo Custom Checkbox

  The CustomCheckbox component is a versatile and customizable checkbox element designed for React applications. It supports multiple styles, including default, gradient shadow, transformer, and animated variants. Each variant offers unique visual effects, such as gradient shadows or animations, to enhance user interaction. The component utilizes forwardRef for better integration with React's ref system and is styled using Tailwind CSS classes. This component is ideal for creating interactive and visually appealing checkbox elements in modern web applications.

• Slarivo Neural Noise

  Neural Noise background

• Slarivo Showcase Card

  An elegant Bali Island showcase card with smooth animations, interactive elements, and a gradient text header that presents travel information in a visually appealing dark-themed interface.

• Slarivo Arc Browser like Color Picker

  An intuitive color picker component that generates harmonious color combinations. It features a circular HSL color wheel with dynamic spread control, allowing users to select 1-3 complementary colors simultaneously. The component supports customizable size, spread factors, and luminosity ranges, making it perfect for design systems and color palette generation.

• Slarivo Animated Geometric Card

  Interactive geometric card component with animated shapes, floating particles, and customizable color gradients.

• Slarivo Metamorphic Loader

  A loader that dynamically changes shape from a circle to a rounded square, and vice versa. Credit: https://codepen.io/gayane-gasparyan/pen/GRBvwZX This component is also available on Namer UI: https://namer-ui.netlify.app/

• Slarivo Input

  Prompt Input A comprehensive and visually polished chat input component. It features a dismissible credit banner, an action toolbar, and smooth animations for a premium user experience. The component is built with cva for variant support and framer-motion for animations.

• Slarivo Card

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

• Slarivo Preloader

  Full-screen preloader that exits with a slide-up animation when the page is ready.

• Slarivo Item Card

  Order Item Card A visually polished card component for displaying an order item, featuring interactive controls and smooth animations powered by Framer Motion. It's designed to be easily customizable through props.

• Slarivo Glass Shine Card

  A small glassmorphism card with gradient orbs, animated shine, and gradient‑clipped headline text—great for hero fillers or minimal dashboards.

• Slarivo Hover Card

  Here is hover card component

• Slarivo Shatterable Glass Card

  A glass-style card that you can literally crack and shatter on click—complete with Voronoi-based shards rendered to canvas, wobbling SVG cracks, and dynamic audio feedback via Tone.js.

• Slarivo Fade Arc

  An animated SVG arc spinner with dual gradient fade for indicating loading states.

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, disabled state, selectable color space & channels, a dotted-grid variant, and a custom render function. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo Iridescent Foil

  A holographic foil surface built entirely from layered CSS gradients — a base foil, a soft color film, a pearl sheen, a directional shine, and a specular glare, blended with mix-blend modes. Moving the pointer over the element (or scrolling the page) shifts the iridescent color and specular highlight across the surface via requestAnimationFrame-driven CSS custom properties. Wrap any content as children; element or document scroll-progress modes; dependency-free (ships a CSS module).

• Slarivo Title Slide

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

• Slarivo Morphing Blob Loader

  An animated liquid blob loading spinner with organic morphing shapes, specular highlights, and metallic, iridescent, or themed color variants.

• Slarivo Agent Avatar

  Canvas-based generative pixel avatar for AI agents, deterministic per seed and gently breathing while the agent works. Respects prefers-reduced-motion.

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Line Chart

  Here is Line Chart component

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, image card, image-card, image.

• Slarivo Badge Tag

  A Badge Tag component for labeling status, metadata, categories, and compact counts, featuring badge, tag, pill, gradient.

• Slarivo Hover Card

  A Hover Card component for grouping related information, actions, and media into reusable surfaces, featuring hover card, hover-card, product card, product-card.

• Slarivo Hover Card

  A Hover Card component for explaining controls and compact details on hover or focus, featuring hover card, hover-card, link preview, link-preview.

• Slarivo Floating Panel

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

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, gradient.

• Slarivo Launch Button

  A glowing amber gradient call-to-action button with a lightning-bolt icon, used to trigger a launch or initialize action.

• Slarivo Floating Dots CTA

  A gradient call-to-action button with rising floating dot particles and an animated arrow icon on hover, for signup or primary actions.

• Slarivo Gradient CTA Button

  A pill-shaped call-to-action button with a warm orange gradient, layered inset shadows, and a hover-triggered fill overlay plus a send icon.

• Slarivo Lamp

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

• Slarivo Conic gradient pointer

  An example of creating a dynamic conic gradient with motion values and pointer position.