SLARIVO / TEXTS

Texts Components

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

• Slarivo Animated Text

  Smoothly animate frequently–updating text, like text from a chatbot.

• Slarivo Animated Text

  Here is Animated Text component

• Slarivo Animated Text

  Cool Animated Text

• Slarivo Animated Glitch Text

  Animated Glitch Text

• Slarivo Dynamic Text

  Animated text that rapidly cycles through greetings in different languages with a smooth slide-and-fade transition.

• Slarivo Animated Shiny Text

  Animated Shiny Text

• Slarivo Hyper Text

  An animated text effect that scrambles and cycles through random characters before revealing the final text on hover or load.

• Slarivo Squiggly Text

  An animated text wrapper that applies a wobbling squiggly effect using SVG turbulence and displacement filters.

• Slarivo Rolling Text

  An animated text component that vertically rolls through a sequence of status messages with smooth transitions.

• Slarivo Fluid Ink Morph

  Animated text that dissolves in from a fluid, ink-like turbulence and settles into crisp letters while shifting color.

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

  Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.

• Slarivo Sparkles Text

  A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

• Slarivo Blur Fade

  Blur fade in and out animation. Used to smoothly fade in and out content.

• Slarivo Animated AI Chat

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

• Slarivo Text Generate Effect

  A cool text effect that fades in text on page load, one by one.

• Slarivo ParticleTextEffect

  A dynamic text animation component that renders words using interactive particles with fluid motion and color transitions, allowing particle destruction through right-click mouse interaction.

• Slarivo Vapour Text Effect

  A React component that creates text vaporization animations using Canvas, with customizable text cycling and particle effects.

• Slarivo Hand Writing Text

  A nice svg hand written text

• Slarivo Typewriter Text

  Animated Text component that types itself out like a typewriter.

• Slarivo Hyper Text

  A hyper changing text animation as you hover.

• Slarivo Text Scramble

  Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.

• 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 Typing Animation

  Characters appearing in typed animation

• Slarivo Shining Text

  Animate text with a shining effect.

• Slarivo Morphing Text

  A dynamic text morphing component for Magic UI.

• Slarivo Magic Text

  Simple animated text component that reveals as we scroll down the page.

• Slarivo Animated sign in

  Animated sign in

• Slarivo Animated Card Chart

  Here is Animated Card Chart component

• Slarivo Liquid Text

  Liquid Text

• Slarivo Shimmer Text

  Text with animated shimmer highlight effect.

• Slarivo Outline Text

  Renders large outlined text that adapts to light/dark mode.

• Slarivo Line Shadow Text

  A line shadow text component for Magic UI

• Slarivo Text

  Display text using well-defined typographic styles.

• Slarivo Velocity Text

  Bring some fluid & motion physics to your text to make it feel real. A framer motion enhanced spring animation for text on scroll.

• Slarivo Vertical Text

  Vertical display text

• Slarivo Scramble text

  Here is Scramble text component

• Slarivo Rainbow Text Effect

  Text with the stunning rainbow shadow effect

• Slarivo Blockquote Typography

  A styled blockquote for quotations with a left border and italic text, following typography conventions.

• Slarivo Word cloud

  here is a word cloud data

• Slarivo Text Aimation

  Text Animation component to make the shadow colors match the text color with lower opacity,

• Slarivo Typography

  Texts component from the 21st.dev community.

• Slarivo Highlight Text

  Inline text highlight that draws a skewed colored background behind words, with preset color variants and custom background support.

• Slarivo Text Skeleton

  A text placeholder skeleton with stacked lines to show a loading state for paragraphs of content.

• Slarivo Receding Text Plane

  A slab of copy raked away from the viewer on a short lens. Near lines swell past the frame edges, far lines fold toward a horizon that was never drawn — no scroll, no animation, one CSS transform.

• Slarivo Coming Soon Text

  Coming Soon Text

• Slarivo Highlight Leaf

  A text highlighter leaf that renders marked inline text with a customizable highlight color inside a Plate editor.

• Slarivo Inline Loading Status

  Inline loading text paired with a spinner to show multiple status states like checking, connected and reconnecting.

• Slarivo Shimmer Text

  Animated shimmer text that ripples a light wave across each character with a 3D transform, useful for loading and generating states.

• Slarivo Inline Code Typography

  Inline code snippet styled with a monospace font and muted background for use within body text.

• 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 Paragraph Typography

  A styled paragraph text element with balanced line height for readable body copy.

• Slarivo Text Reveal

  Animated text that reveals word by word or character by character with a staggered blur-and-slide effect, optionally triggered when it scrolls into view.

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

  Upgaraded shadcn/ui Input

• Slarivo Text Shimmer

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

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

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

• Slarivo Text Rotate

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

• Slarivo Text Rotate

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

• Slarivo Text Rotate

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

• Slarivo Text Rotate

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

• Slarivo Gooey Text Morphing

  A fluid text morphing component that creates smooth, gooey transitions between words. This component is designed to work seamlessly with shadcn/ui themes, providing an engaging visual effect for hero sections, loading states, or interactive text displays. Features - Smooth morphing transitions between text phrases - Customizable animation timing - Gooey effect using SVG filters - Automatic theme adaptation with shadcn/ui - Responsive text sizing - Fully customizable styling - TypeScript support Props - `texts` - Array of strings to cycle through - `morphTime` - Duration of morphing animation in seconds (default: 1) - `cooldownTime` - Pause duration between morphs in seconds (default: 0.25) - `className` - Additional classes for container - `textClassName` - Additional classes for text elements (overrides theme text color if specified)

• 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 Number Ticker

  Animate numbers to count up or down to a target number

• Slarivo Vertical Cut Reveal

  A text component that reveals the text with a cut reveal effect. First, the text gets split into smaller chunks based on the splitBy prop: • words: Splits into individual words (e.g., "Hello world" → ["Hello", "world"]) • characters: Splits into individual characters (e.g., "Hi" → ["H", "i"]) • lines: Splits by newline characters (\n) • string: Splits by any custom string delimiter Each text piece is wrapped in two <span> elements: • An outer <span> acts as a container, set to position: relative and overflow: hidden. • An inner <span> holds the actual text, initially positioned off-screen using y: 100 (or -100 if reverse is true). When the animation kicks off: • The inner <span> elements smoothly transition from their off-screen position (y: 100) to their final position (y: 0). • This creates a "cutting" or "revealing" effect as each text piece slides into view. You can stagger the animation from different directions (first, last, center, or random) using the staggerFrom prop. A key detail is that the component always keeps word boundaries, even when splitting by characters. Here are two reasons why: 1. When dealing with multi-line text, each line starts its own reveal animation. So, if you have text that spans multiple lines, each line animates independently from its own baseline, instead of all elements animating from one point (like the bottom of the entire paragraph). 2. In characters mode, characters from the same word stick together in a word container. This stops unwanted line breaks in the middle of words. If a word needs to wrap to the next line, it wraps as a complete unit, keeping some characters from one line and others from the next. This keeps the text flowing and readable while still allowing character-by-character animation within each word.

• Slarivo Typewriter

  A component that types out a text, one letter at a time. As a text, either a string or an array of strings can be passed to the component. The component will automatically split the text into an array of characters, and animate each letter one by one. If you pass an array of strings, the component will animate one text, delete it, then continue animating the next one. The component will loop through the texts if you set the loop prop to true. The cursor at the end of the text is optional. You can use a character or even a svg node if you like. There is a prop to customize the cursor animation, where you have to define the two motion variants as initial and animate. Ideally, the component should respect multiple lines. If you experience otherwise, please let me know.:)

• Slarivo Canvas

  Canvas effect

• Slarivo Animated Shiny Text

  A light glare effect which pans across text making it appear as if it is shimmering.

• Slarivo Shine Border

  Shine border is an animated background border effect.

• Slarivo Placeholders And Vanish Input

  Sliding in placeholders and vanish effect of input on submit

• Slarivo Flickering Footer

  Flickering Footer Component

• Slarivo Text Reveal

  Fade in text as you scroll down the page.

• 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 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 Animated Underline Text

  Animated Underline Text

• Slarivo Hero Highlight

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

• Slarivo Interactive 3D Robot

  3D Interative scene with robot Whobee using Spline scene

• Slarivo Typewriter Effect

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

• Slarivo Gradient Text

  Gradient Text

• Slarivo Hover Footer

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

• Slarivo Feature with Image Comparison

  Feature block with Image Comparison

• Slarivo Evervault Card

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

• Slarivo Flip Words

  A component that flips through a list of words

• 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 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 Word Rotate

  A vertical rotation of words.

• Slarivo Background Beams With Collision

  Exploding beams in the background

• 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

  Hero Section with Appear Animation and Hero Badge

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo Commits Grid

  Transforms any text into a GitHub-style commits grid, visually representing the text as contribution blocks.

• Slarivo Spotlight New

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

• Slarivo Parallax Scrolling

  Here is Parallax Scrolling component

• Slarivo Link Preview

  Dynamic link previews for your anchor tags

• Slarivo Text Loop

  Text animation that transitions between multiple items, creating an engaging looping effect

• 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 Gradual Spacing

  Word animation for gradual spacing between letters

• 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 Number Flow

  A React component to transition, localize, and format numbers. Dependency-free. Accessible. Customizable.

• Slarivo Marquee Effect

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

• Slarivo Digital Serenity - Animated Landing Page

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

• Slarivo Animated Gallery

  Animated Gallery with scroll trigger animation

• Slarivo Response Stream

  A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.

• Slarivo Hero Designali

  Your complete platform for the Design.

• Slarivo Word Pull Up

  Text animation for words to pull up

• 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 Text Parallax Content (scroll)

  TextParallaxContent: Engaging Scroll-Triggered Narratives Unleash a dynamic storytelling experience on your website with TextParallaxContent, a versatile React component designed to blend captivating visuals with compelling narratives. This component creates an immersive scrolling effect where text overlays animate in and out, while a "sticky" image scales and fades, providing a truly engaging user journey. Features Interactive Parallax Effect: As users scroll, a large background image remains "sticky" in the viewport while subtly scaling down and fading out. Simultaneously, a headline and subheading animate into view, crossfade, and then exit, creating a powerful visual and textual interplay. Modular Content Blocks: The component is designed to be easily repeatable. You can stack multiple TextParallaxContent instances to create a series of distinct narrative sections, each with its own image and text, allowing you to tell a sequential story or highlight different aspects of your product or service. Customizable Content: Each instance accepts imgUrl, subheading, and heading props, along with children for additional customizable content below the main parallax section. This allows for flexible integration of more detailed information, calls to action, or other elements. Smooth Animations: Built with Framer Motion, all animations are fluid and performant, ensuring a seamless and delightful user experience. Responsive Design: The component adapts beautifully to various screen sizes, maintaining its visual impact on both desktop and mobile devices. How it Works TextParallaxContent leverages Framer Motion's powerful useScroll and useTransform hooks to link scroll progress to various CSS properties: StickyImage: This sub-component uses useTransform to control the scale and opacity of the image based on scroll position, creating the "sticky" and fading effect. OverlayCopy: This sub-component also uses useTransform to animate the y position and opacity of the text overlays, making them slide and fade in and out as they pass through the viewport. useRef: Used to target specific DOM elements for scroll tracking, ensuring precise animation triggers. TextParallaxContent is ideal for "about us" sections, product features, service descriptions, or any part of your site where you want to combine strong imagery with a narrative flow that unfolds as the user scrolls.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Apple Hello Effect

  Create a "Hello" writing effect inspired by Apple using Motion for React.

• Slarivo Loader

  A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

• Slarivo Scroll Velocity Text

  A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.

• Slarivo Scroll Velocity Text

  A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.

• Slarivo Scroll Velocity Text

  A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.

• Slarivo Scroll Based Velocity

  Scrolling text whose speed changes based on scroll speed

• Slarivo Hero scroll animation

  Here is scroll animation in hero section

• Slarivo Hover Text Glow

  Hover Text Glow

• Slarivo Preloader

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

• Slarivo Modern Animated Hero Section

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

• Slarivo Blur In

  An animated text component that blurs in the text.

• Slarivo Svg follow scroll

  Here is svg follow scroll

• Slarivo Text Marque

  Here is text marquee component

• Slarivo Marquee

  Inspired by https://x.com/dollargill

• Slarivo Letter Swap

  A text component that swaps the letters vertically on hover. There are two types of animations available for this component: 1) Forward animation — plays the animation timeline once forward, when you hover over the text. 2) Ping Pong animation — plays the animation timeline in a ping pong fashion. It plays once forward when you hover over the text, and once in the opposite direction when you hover away from the text.

• Slarivo Animated Counter

  A simple animated counter component.

• Slarivo Text Color

  Text Color

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

  A text roll component that rotates each character, fully customizable for nice text animations.

• Slarivo Word Fade In

  Text animation which fades in word by word

• Slarivo Text Scramble

  A component of text which changes its nature and randomises and finally settles down and shows a scramble effect.

• Slarivo In view

  Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

• Slarivo In view

  Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

• Slarivo Reveal Text

  Animated text component that reveals each letter with a spring-in effect, hover-triggered image masking, and a timed overlay sweep for cinematic emphasis. Perfect for hero sections, splash screens, or landing pages where you want bold, interactive branding with visual flair.

• Slarivo Text Reveal Card

  Mousemove effect to reveal text content at the bottom of the card.

• Slarivo Interactive Text Particle

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

• Slarivo Toolbar

  A text editor toolbar component with toggles

• 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 layered text

  Layered text with 3D perspective and smooth hover animations

• Slarivo Morphing Text

  Morphing Text Component

• Slarivo Profile Card

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

• Slarivo Matrix Text

  Matrix Text Animation

• Slarivo Call to Action

  Here is Call to Action components

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

  Text flipping character animation

• Slarivo Wave Text

  A basic Wave Text on Hover

• Slarivo Animated Counter

  A counter that animates in response to React state changes.

• Slarivo Morphing Cursor

  An exceptional cursor-follow component with smooth morphing, color inversion, and magnetic effects.

• Slarivo Pointer Highlight

  Here is Pointer Highlight component

• Slarivo Loader

  A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

• Slarivo Text Rewind

  Text Areas component from the 21st.dev community.

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

  A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.

• Slarivo Flip Links

  Get your site some awwwards level link hover animation with pure css, no framer motion.

• Slarivo Container Text Flip

  Here is Container Text Flip component

• Slarivo Special Text

  Animated text with scramble effect.

• Slarivo Text Cursor Proximity

  A text component that animates the letters based on the cursor proximity

• Slarivo Text Scroll animation

  Here is text scroll animation

• Slarivo Gooey Marquee

  The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.

• Slarivo textRevealFAQs

  The FAQs component is designed to provide clear and organized answers to common questions about Ruixen UI. It features a bold heading, a brief introductory text, and a link to the support team for additional help. The layout is responsive, with extra guidance visible on larger screens, making it easy for users to quickly find relevant information and get assistance when needed.

• Slarivo Count Animation

  The count animation component is designed to create a captivating user experience by animating numerical values as they increase or decrease. This effect draws the user's attention to important data, making the information more dynamic and engaging. Whether it's displaying statistics, financial figures, or progress counters, the smooth animation of numbers adds a sense of liveliness and interactivity to your interface. This example was created using Tailwind CSS and Framer Motion.

• Slarivo Canvas Effect

  Canvas Effect Chat Box

• Slarivo Magic Text Reveal

  A responsive particle-based text reveal component that disperses text into animated particles and reforms on hover with smooth transitions.

• Slarivo Text Hover Effect

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

• Slarivo Blurred Stagger Text

  A stagger effect for text with a blur filter.

• 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 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 Random Letter Swap

  A text component that randomly swaps the letters vertically on hover. There are two types of animations available for this component: 1. Forward animation — plays the animation timeline once forward. 2. Ping Pong animation — plays the animation timeline in a ping pong fashion.

• Slarivo Progressive Blur

  Here is Progressive Blur

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

• Slarivo Infinite Text Marquee

  Awesome infinite text scrolling effect using framer-motion

• Slarivo BlurTextAnimation

  Elegant blur animation that brings your words to life with cinematic transitions.

• Slarivo Spinning Text

  Easily animate text circularly. Customize the animation with variants and transitions.

• Slarivo Gradient Heading

  Gradient Heading Text

• Slarivo Fade Text

  Characters appearing from faded view

• Slarivo Hover Preview

  Hover Preview Component that displays image previews above text links when hovering.

• Slarivo Loader

  Minimalist loading animation featuring 3D cubes with rotating letters, creating a smooth sequential reveal effect that conveys progress in a clean, modern style.

• Slarivo Featured Image Section

  This feature section highlights Ruixen’s core strengths with an interactive tab layout. Each tab showcases a unique capability—like a user-friendly dashboard, smart keyword generation, and one-click SEO optimization. Designed with clean visuals and intuitive icons, it helps users quickly understand Ruixen’s value.

• Slarivo Underline Animation

  A component that animates a text underline. These underline animations work differently from typical CSS underline animations. Instead of animating the CSS text-decoration-line: underline property, they create a separate div element positioned absolutely below the text. This div acts as the underline and its dimensions are calculated relative to the font size: - The height is controlled by underlineHeightRatio (defaults to 10% of font size) - The padding below text is controlled by underlinePaddingRatio (defaults to 1% of font size) The three variants work as follows: - Center: The underline grows outward from the center point - Comes In Goes Out: The underline enters from one side, then exits from the other side - Goes Out Comes In: The underline exits from one side, then re-enters from the opposite side

• Slarivo Blur Text Effect

  A letter-by-letter animation that fades in each character with upward motion and blur removal for a soft, clean reveal. Ideal for expressive entrances or subtle emphasis in UI.

• Slarivo Scroll Hero Section

  Animated Scroll keywords section with loading and scrolling animation

• Slarivo Typewriter

  a fully-featured typewriter component with typing and word-changing effects!

• Slarivo LoadingLines

  The LoadingLines component is a vibrant, text-based loading animation that displays the word “Generating” with each letter glowing in sequence to create a smooth wave effect. Built using React, TypeScript, and Tailwind CSS, it combines modern styling with custom keyframe animations to produce a visually appealing loader. The letters scale slightly, glow with a white highlight, and fade in and out as they animate, giving the impression of continuous motion. Behind the text, a masked gradient made of colorful radial patterns slides back and forth, adding depth and energy to the animation. This component is lightweight, reusable, and ideal for situations such as AI-driven content generation screens, creative dashboards, or any UI that needs an engaging “in-progress” indicator to enhance the user experience.

• Slarivo Scroll Reel Testimonials

  Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.

• Slarivo Text Block Animation

  A GSAP-powered React component that reveals text line-by-line with a smooth colored block wipe animation, supporting scroll triggers and customizable timing.

• Slarivo Sliding Number

  Here is Sliding Number component

• Slarivo Pattern Text

  A bold patterned text component with an animated shadow effect for standout headings. Perfect for hero sections, titles, or anywhere you want striking typography.

• Slarivo Rotating Text

  Animated word rotator for hero headings — cycles through an array of words with 5 built-in animation modes: slide, fade, blur, flip, and drop. Inline-friendly — drop it inside any heading. Auto-sizes to the widest word to prevent layout shift. Configurable interval and animation style.

• Slarivo Animated Underline

  Animate text with an underline effect.

• Slarivo Hero Section

  Here is Hero Section

• Slarivo Text Marquee

  Animated text marquee component with vertical scrolling.

• Slarivo Animated Text

  Here is Animated Text component

• Slarivo Text Reveal

  Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.

• Slarivo Text Reveal

  Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.

• Slarivo Text Reveal

  Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.

• 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 Emoji Rating

  A minimal emoji rating component with smooth blur/scale text transitions and grayscale-to-color hover effects.

• 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 Text Stagger Hover

  - Splitted text with orchestrated delay animations ## Props · animation: opacity (by default) | top | bottom | left | right | z | blur · staggerDirection: start (by default) | middle | end · as: semantic html tag (default <span>)

• Slarivo Composer Input

  Composer Input A versatile and responsive composer component for rich text input, file attachments, and actions. Styled with shadcn/ui principles, it's ideal for chat applications, comment sections, and content creation forms.

• Slarivo Animated Hero Section UI

  This code creates an animated hero section for a website, designed to grab user attention and showcase key features. It addresses the need for an engaging and visually appealing introduction to a website, particularly for applications that want to highlight speed and ease of use. The section incorporates several key elements: a navigation bar at the top, a visually striking layout using subtle background lines and gradients, and animated text and buttons using the `motion` library. The hero section features a large headline, a concise description, and calls to action (buttons). The animation is implemented using `motion.span` to apply staggered transitions to individual words, creating a smooth reveal effect. The other elements, like the description and buttons, also have subtle animations for a cohesive user experience. Here's how it works: 1. **Structure:** The main component, `HeroSectionOne`, uses flexbox for layout, positioning elements absolutely to create the visual lines. A `Navbar` component is included for navigation. 2. **Animation:** The `motion` library from Framer Motion is used to animate the headline, description, buttons, and an image preview. Each element has its own animation properties, defining opacity, position, and transition timing. The animations are staggered to create a more dynamic feel. 3. **Styling:** The code employs CSS classes for styling, utilizing tailwind for rapid UI development. It includes dark mode support using the `dark` modifier classes. 4. **Components:** The code is organized into two components: `HeroSectionOne` (main section) and `Navbar` (navigation). This code could be applied to various websites and applications, especially those focusing on software, AI, or web development, where highlighting speed and ease of use is important. It can be integrated into any project that uses React and Tailwind CSS. The design is modern, clean, and easily customizable to fit different branding guidelines. Example scenarios include landing pages for SaaS applications, product demos, and marketing websites.

• Slarivo Scroll and Swap Text

  A text component that swaps the letters vertically on scroll. The trick here is similar to the Letter Swap Hover component—duplicate the text, then wrapping the them in a container with relative position, then stack the elements vertically. We use useScroll hook from motion to track the scroll position of the container, and use the scrollYProgress value to offset the vertical position of the elements (by setting the y property of the element).

• Slarivo Text Glitch Effect

  Interactive text component with smooth physics-based animations and hover-triggered scrambling effects. Features elegant grayscale styling with cyberpunk-inspired text decoding animations.

• Slarivo Animated Number

  Easily animate numbers.

• Slarivo Bubble Text

  Bubble Text Hover Animation

• Slarivo Text Disperse

  A playful hover effect that scatters each letter in unique directions with smooth motion. Great for adding personality and interactivity to headings or standout text.

• Slarivo HyperText with Decryption

  Interactive hypertext bio card where specific keywords decrypt into animated highlights on hover, perfect for personal sites or “about me” sections.

• Slarivo Animated Loading SVG + Text Shimmer

  An animated loading breadcrumb component with a spinning SVG loader icon, shimmer text effect, and chevron. Perfect for indicating loading states in a visually appealing way.

• 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 Scramble Hover

  A text component that scrambles the text on hover. For the scrambling effect, you can use either the original characters, or another set of characters specified in the characters prop.

• Slarivo Feature Highlight

  Feature Highlight Component This component animates a list of features, a title, and an icon into view with a staggered effect. It's built to be highly reusable—you can pass any text, icons, or custom elements as props.

• Slarivo Wavy Text Block

  Wavy Block animates its children in waves pattern on scroll.

• Slarivo Text Arc Effect

  Text curving tool for creative typography. Bends text along circular or custom arc paths. Ideal for creating logos, badges, or decorative text elements with some customizable animated motion.

• Slarivo CascadeText

  A fluid cascading navigation item where characters transition sequentially to create a wave-like hover motion.

• Slarivo Variable Font Hover By Random Letter

  A text component that animates the font variation settings of letters in a random order. Works only with variable fonts.

• Slarivo Potfolio Text

  Elegant animated text component with the rotating diamond visual replacing the "o" character.

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

  Interactive text displacement effect using Three.js shaders. Mouse interaction creates dynamic 3D deformation with real-time shadow rendering.

• Slarivo Container Text Scroll

  The ContainerTextScroll component is a dynamic React/Next.js UI element designed to create visually engaging scroll-based animations for text content. It leverages framer-motion to animate the text’s position, scale, and tilt as the user scrolls, creating a smooth parallax-like effect. The component is fully responsive, adjusting animation parameters for mobile and desktop screens, and allows placing titles or paragraphs directly over images or backgrounds. It is ideal for hero sections, landing pages, or any interface where immersive, interactive scrolling experiences are desired. By combining motion, scaling, and rotation effects, ContainerTextScroll helps developers deliver modern, eye-catching UI with minimal setup.

• Slarivo Text Explode

  Text explode effect

• Slarivo Css Link

  Here is Css Link

• Slarivo Aero Hero-3

  Texts component from the 21st.dev community.

• Slarivo Text Reveal

  A cinematic, blur-in text reveal featuring a premium inverted-contrast theme.

• Slarivo VHS Hero Section

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

• Slarivo Pixel Broke Button

  A glitchy pixel-styled button that mimics a broken or distorted look. Ideal for creative projects, retro game UIs, or playful error states, it adds a unique visual effect that stands out from traditional button designs.

• Slarivo Cursor Driven Particles Typography

  Interactive particle-based typography rendered on canvas. Text is constructed from dynamic particles that disperse on cursor interaction and smoothly return with spring physics. Fully customizable density, dispersion strength, return speed, size, and color. Perfect for hero sections, landing pages, and creative portfolios.

• Slarivo Hero Section

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

• Slarivo Testimonial

  Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase customer confidence

• Slarivo Draw Random Underline

  Here is Draw Random Underline component

• Slarivo Progressive Flux Loader

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

• Slarivo Particle Text

  Interactive particle text effect with custom fluid dynamics, post processing, advanced animation and animated gradient. Particles can be configured to expand from mouse or attract to mouse. Additionally mouse clicks create explosive force. Highly customizable

• Slarivo SVG Path Drawing Text Animation

  A smooth SVG text animation component that creates a mesmerizing path drawing effect

• Slarivo Next Reveal

  A bold, 3D mechanical flip animation with high-contrast theme inversion.

• Slarivo Animated Reveal Text

  Animated Reveal Text

• Slarivo Typing Effect

  A text component that types out words one character at a time with a blinking cursor, cycling through a list of strings.

• Slarivo Variable Font And Cursor

  A text component that animates the font variation settings based on the cursor position. Works only with variable fonts.

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Hover Text Effect

  A text hover effect that animates and outlines gradient on hover. animate your own way

• Slarivo Lightning Text

  Lightning Text Animation

• Slarivo Hover Link Animation

  Hover Link Animation

• Slarivo Circle unique load

  A beautiful laoding component rotate regular and changes color and loading state text with diffrent symbols.

• Slarivo NeonRGBTextEffect

  A neon text effect component featuring RGB channel splitting, inspired by TikTok's signature glitch aesthetic. Unlike TikTok's dynamic, bouncing RGB separation, this implementation opts for a more subtle and elegant static approach. Using WebGL shaders, it splits the text into red, green, and blue channels with slight horizontal offsets, creating a sophisticated neon glow effect through additive blending. The result is a modern, minimalist take on the glitch effect that maintains visual clarity while adding a touch of digital sophistication.

• Slarivo Whisper Text

  A scroll-triggered animation that reveals words with a smooth, staggered fade and slide, like a whisper on screen. Perfect for subtle UI transitions. Named “Whisper” for its soft and delicate entrance, quiet yet expressive.

• Slarivo Animated SVG Background

  This React component generates an animated background using multiple SVG paths with varying colors and animations. The animation involves a dash offset effect creating the illusion of lines drawing and fading. It uses the `motion` library for smooth animations and accepts optional props to customize the animation duration.

• Slarivo Parallax Scrolling Text Effect

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

• Slarivo Dia Text

  Texts component from the 21st.dev community.

• Slarivo Text Animation

  Text Animation

• Slarivo Split Text

  Here is Split Text component

• Slarivo Split Text

  Here is Split Text component

• Slarivo Reveal Text

  This component displays animated, theme-adaptive text with a ripple reveal effect on hover.

• Slarivo Shimmering Text

  Here is Shimmering Text component

• Slarivo Skeleton

  Texts component from the 21st.dev community.

• Slarivo loading animation

  This is a visually striking loading animation where letters dynamically fly into place to form words, creating a high-energy, futuristic feel. It's perfect for a loading screen or as an engaging intro element. The entire component is self-contained in a single HTML file and uses CSS and JavaScript to achieve the effect.

• Slarivo Davincho Hero-1

  Animated hero section with parallax background image.

• Slarivo stagger text

  Animated component built with motion and tailwind.css to animate a series of letters with a staggered effect. ### Props - `words`: An array of strings representing the words to be animated. - `stagger`: Optional, A number representing the delay between the animations of each letter, if not provided it will be 0.05s between each letter. - `transition`: Optional, object defining the transition properties for the animation. - `direction`: Optional, A string indicating the direction of the animation, if not provided it will animate from bottom. - `className`: An optional string to apply additional tailwind classes. - `props`: any prop associated with "<div>" element. ### Behavior - When the component is in view, it triggers the animation to change from the `hidden` state to the `visible` state in an orchestration pattern. ### Example Usage ```tsx <StaggerText words={['Hello', 'world']} stagger={0.1} transition={{ duration: 0.5 }} direction=""top" className="my-custom-class" />

• Slarivo Text roll navigation

  Here is Text roll navigation

• Slarivo Underline To Background

  A text component that animates a text underline into a text background. The component creates a separate div element positioned absolutely below the text (instead of the regular underline elements with CSS pseudo-elements). It animates the height from a thin line (controlled by underlineHeightRatio) to cover the full text height, effectively becoming a background. Simultaneously, it transitions the text color to maintain contrast against the expanding background.

• Slarivo Comic Text

  Here is Comic Text

• Slarivo Text Reveal Animation

  This component animates each letter of "Animations" sequentially using a staggered effect based on its index. Clicking the button resets the state to replay the animation.

• Slarivo Text Glow Hover

  Here is Text Glow Hover component

• Slarivo Basic

  Here is basic spinning text component

• Slarivo SVG Mask Effect

  A mask reveal effect — move the cursor to reveal hidden content beneath. Built with Framer Motion mask animations.

• Slarivo The Typewriter

  Texts component from the 21st.dev community.

• Slarivo Text Morph

  Animates text by morphing shared letters between words, creating fluid transitions

• Slarivo Daybreak Text Reveal

  Here is Text Reveal component

• Slarivo Looping words with GSAP

  Here is Looping words with GSAP

• 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 Animated SVG Text Path

  lets you effortlessly bring text to life by animating it along any SVG path within your React applications. This component, part of the EaseMize UI library, leverages the GreenSock Animation Platform (GSAP) for high-performance, smooth animations. Customize the text, animation duration, direction (forwards/reversed), font size, letter spacing, the SVG path data, viewBox, and rotation. It's designed to be highly flexible, allowing developers to add sophisticated text-on-a-path animations with ease.

• Slarivo VaporizeAnimationText

  Based animated canvas component that transforms text into particles with vaporizing, fading, and dynamic effects.

• Slarivo Response

  Here is Response component

• Slarivo Word Loader

  An animated loader that cycles through a set of words, showing each with a blur-fade-in effect, then fades out before showing the next.

• Slarivo Text Hover Effect

  Interactive SVG text animation using GSAP - reveals a colorful gradient that follows cursor or touch movement.

• Slarivo Dance Text Animation

  A dynamic text effect with layered animations that create a mesmerizing dance-like motion

• Slarivo Black Hole Vortex Animation

  This React component uses Framer Motion and SVG to create a captivating black hole animation. It features a central vortex that pulls in surrounding particles in a smooth, spiraling motion. The scene is completed with an elegant, animated title that appears letter by letter, making it a perfect hero section or background for a website.

• Slarivo Scroll Swap Text

  Text that swaps in and out vertically as its scrollable container is navigated, with the current line sliding up while a clone rises into place.

• Slarivo Colourful Text

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

• Slarivo Animated Scan Loader

  A reusable React component styled with Tailwind CSS, featuring a dynamic "Scan" text effect with a futuristic scanning animation. The component includes a smooth hover color transition and animated pseudo-elements that create a glowing, moving scan line effect, ideal for loading states or interactive UI elements. Customizable and easy to integrate into any React project.

• Slarivo Hover Button

  Here is simple minimalistic hover button

• Slarivo Interactive String

  An interactive canvas of glowing strings that respond to mouse movement with elegant animations.

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Animated Text

  The component splits the text into individual spans, applies staggered animation delays from the center outward, and includes the font weight animation. You can customize the font size, weight range, animation duration, and delay multiplier through props.

• Slarivo Hero

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

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

  Beautiful Text Scramble effect

• Slarivo Reading Text Reveal

  A beautiful scroll-based text reveal component for React that progressively highlights words as you scroll. Perfect for storytelling, landing pages, and engaging narratives. Features smooth animations, dark mode support, and fully customizable content. Built with TypeScript and Tailwind CSS.

• Slarivo Marker Highlight

  A typography primitive that mimics a marker stroke sweeping behind a word while the highlighted text shifts to a contrasting color.

• Slarivo Glow

  Glow Effect

• Slarivo Scramble text

  Here is Scramble text component

• Slarivo Scramble text

  Here is Scramble text component

• Slarivo Scale Letter

  Component displays interactive text where individual letters animate with 3D effects, scaling

• 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 Fancy Text Hover

  Text with fancy hover animation effects powered by GSAP.

• Slarivo Reveal

  A wrapper that fades and un-blurs its content into view when it scrolls onscreen, with optional staggered delay.

• Slarivo Breathing Text

  A text component that animates the font variation settings of letters in a breathing effect continuously. Works only with variable fonts. This component is designed to work exclusively with variable fonts. Please refer to the Variable Font Hover By Letter documentation for more details.

• Slarivo comment reply

  this is a comment reply component designed for modern and minimilist social apps

• Slarivo Grid Hero Animated

  Grid Hero Animated

• Slarivo Diagram Card

  A mousemove effect that reveals text content by dragging the cursor across the card. As seen on Diagram's website.

• Slarivo jelly fish

  Jelly fish effect

• Slarivo Variable Font Hover By Letter

  A text component that animates the font variation settings of letters. Works only with variable fonts. This component is designed to work exclusively with variable fonts. Variable fonts are a modern font technology that allows a single font file to contain multiple variations of a typeface — these variations can be adjusted along different axes, such as weight, width, or slant, etc.

• Slarivo Svg Text

  Display text with animated SVG backgrounds. Perfect for creating dynamic text effects with custom SVG graphics and animations.

• Slarivo Drag cards

  Draggable Cards

• Slarivo Word Rotate

  A text animation component that smoothly rotates through an array of words with customizable duration and motion effects.

• Slarivo parallax text scroll

  A reusable component for parallax text scroll

• Slarivo Gradient Wave Text

  Apple-style animated gradient text with wave effect.

• Slarivo Highlighted Text

  Text with sliding background highlight animation using mix-blend-mode.

• Slarivo Smart Textbox

  Rich text input with @mentions and AI autocomplete. Inline tag chips, ghost text suggestions. Keyboard-first, fully customizable.

• Slarivo Skeleton

  Skeleton loading placeholder with avatar, title, text, and media variants.

• Slarivo Text Generate Effect

  Animated text that fades and blurs in word by word, as if being generated by AI.

• Slarivo Scroll Animation

  Here is text scroll animation

• Slarivo slide glow button

  a animation which reveals glow text "Himawari" on hover

• Slarivo Text Roll

  An animated text component that reveals letters with a smooth vertical roll effect on hover, built with Motion.

• Slarivo Shimmer Text

  Texts component from the 21st.dev community.

• Slarivo Random Letter Swap

  Text component whose letters swap vertically in random order on hover for a glitchy effect.

• Slarivo Toolbar

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

• Slarivo Draw Line Text

  Here is drawing line text component

• Slarivo Animated Infinity Background

  It uses Framer Motion to generate a captivating animation of endlessly drawing and fading SVG infinity loops. The component centers on an animated title with a letter-by-letter reveal effect and supports an optional subtitle.

• Slarivo Shimmer Bg Text

  A large "Hover Me" text with a shimmering gradient effect on hover

• Slarivo Corner Frame Scramble Text

  A flexible and elegant text component wrapped in a corner frame with a scramble animation effect. Built with Tailwind CSS and Framer Motion, it visually enhances dynamic text values like stats, counters, or identifiers while maintaining accessibility and styling consistency.

• Slarivo Split Text Effect

  A Vercel and Rauno inspired split text effect for your website.

• Slarivo Blur Reveal

  Here is Blur Reveal component

• Slarivo Splitting Text

  Animated text that splits into characters, words, or lines with staggered entrance presets like fade, slide, blur, and scale.

• Slarivo Space box

  Here is space box animated component

• Slarivo Text Shimmer

  Shimmering status text for streaming agents. Tune duration, spread, and delay; renders any element via the as prop. From 21st.dev Agent Elements.

• Slarivo Text Shimmer

  Shimmering status text for streaming agents. Tune duration, spread, and delay; renders any element via the as prop. From 21st.dev Agent Elements.

• Slarivo Text Shimmer

  Shimmering status text for streaming agents. Tune duration, spread, and delay; renders any element via the as prop. From 21st.dev Agent Elements.

• Slarivo Infinite Ribbon

  Texts component from the 21st.dev community.

• Slarivo Bold on hover

  When you hover over this text, each letter will become bolder, creating a new minimal text effect

• Slarivo Hover Text Reveal

  This lightweight React component, styled with Tailwind CSS and animated with GSAP (via CDN), creates a captivating effect where text characters gradually reveal themselves as the user's pointer hovers nearby. It's perfect for 'secret codes,' playful CTAs, or any text you want to make engaging.

• Slarivo Scroll-linked spring animation

  This is a simple Scroll-linked spring animation component

• Slarivo Loop Animation Hook

  Here is Loop animation hook

• Slarivo Squiggly Underline

  Navigation links with animated squiggly SVG underline on the active item. Built with Framer Motion.

• Slarivo Perspective Highlight

  A 3D card that tilts toward your cursor. As it rotates, highlighted text rises forward, creating a layered depth effect. Includes three color variants for highlights, full dark mode support, and respects prefers-reduced-motion.

• 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 Animated Typewriter Text

  Animated Typewriter Text

• Slarivo Markdown

  Render markdown with headings, lists, tables, blockquotes, code fences, and safe external links. State-friendly for streaming text. Self-contained port from 21st.dev Agent Elements (uses react-markdown + remark-gfm in place of streamdown + @streamdown/code).

• Slarivo Markdown

  Render markdown with headings, lists, tables, blockquotes, code fences, and safe external links. State-friendly for streaming text. Self-contained port from 21st.dev Agent Elements (uses react-markdown + remark-gfm in place of streamdown + @streamdown/code).

• 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 Text Along Path

  An SVG component that animates text flowing along a custom path, with auto-loop or scroll-driven motion.

• Slarivo Text Along Path

  An SVG component that animates text flowing along a custom path, with auto-loop or scroll-driven motion.

• Slarivo Text Along Path

  An SVG component that animates text flowing along a custom path, with auto-loop or scroll-driven motion.

• Slarivo Text Along Path

  An SVG component that animates text flowing along a custom path, with auto-loop or scroll-driven motion.

• Slarivo Cursor Overlay

  A visual overlay that renders cursor positions and selection highlights on top of a Plate rich-text editor, keeping selections visible during drag & drop and when the editor loses focus.

• Slarivo Code Leaf

  An inline code leaf for the Plate editor that renders code snippets with monospace, muted-background styling.

• Slarivo Typewriter

  Animated typewriter text effect that types out a base string then cycles through a rotating list of phrases with a blinking cursor.

• Slarivo Mouse Quadrant Tracker

  You can easily change the text, color hue, shadow intensity, or font size by modifying these prop values.

• Slarivo Text Flipping Board

  A split-flap display that animates text with mechanical flip transitions, inspired by Vestaboard message boards.

• Slarivo Scroll Area with Sheet

  A scrollable content area placed inside a slide-out sheet, ideal for showing long text such as a privacy policy without overflowing the panel.

• Slarivo Infinite Marquee

  A seamlessly looping horizontal text strip that scrolls endlessly, with optional outline/stroke styling.

• Slarivo Animated Text with Staggered Effect

  This React code creates a reusable component that renders animated text with a staggered character appearance. It uses CSS animations and keyframes to achieve a visually appealing effect, layering two text elements for a 'sketch' and 'solid' look. The component is responsive and handles spacing dynamically.

• Slarivo Text Wave Animation

  Text Animation

• Slarivo Animated Link

  React animated link: Hover reveals an underline that wipes in from the left, the right, or grows from the center, while a diagonal arrow lifts into view.

• 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 Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Text Gradient

  Animated text component whose gradient colors flow continuously through the letters using background-clip, with customizable color stops, angle, and speed.

• Slarivo Blur In Text

  Animated text that reveals itself with a blur-in effect, word by word or character by character.

• Slarivo Typewriter Loop

  A looping typewriter headline that cycles through words with animated gradient text, colored backgrounds, and a blinking cursor.

• Slarivo Fluid Text Morph

  An interactive headline that smoothly morphs between predefined word pairs on hover and cycles through them on click, leveraging Framer Motion’s spring animations and AnimatePresence for fluid letter-by-letter transitions.

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

  GradientRevealText is an interactive and visually appealing text component designed for modern web interfaces. It allows text to be highlighted with a smooth gradient reveal in multiple directions—left-to-right, right-to-left, top-to-bottom, or bottom-to-top. The component supports hover, in-view, or automatic triggers, and developers can customize the gradient, transition duration, delay, and rounded edges. Importantly, when the gradient is applied, the text color automatically changes to white, ensuring high contrast and readability, while reverting to black when inactive. Lightweight, flexible, and reusable, GradientRevealText is ideal for headings, hero sections, buttons, and any UI element that needs an attention-grabbing, dynamic effect.

• Slarivo Blur Reveal

  Animated text component that reveals characters one by one with a blur-to-focus effect.

• Slarivo Spinning Text

  Animates text in a circular motion with customizable speed, direction, radius, and transitions for dynamic circular typography effects.

• Slarivo Spinning Text

  Animates text in a circular motion with customizable speed, direction, radius, and transitions for dynamic circular typography effects.

• Slarivo AI Text Loading

  An animated loading indicator that cycles through status text with a shimmering gradient sweep, ideal for AI thinking or processing states.

• Slarivo Stagger Text

  Text that reveals a staggered vertical roll animation on hover, one character at a time.

• Slarivo Text Reveal Block

  A line-by-line text reveal that wipes each line with a colored block using GSAP SplitText and ScrollTrigger.

• Slarivo Text Underline

  An animated inline link with a CSS-only underline that slides through on hover.

• Slarivo Text Scroll Read

  A scroll-driven text component that reveals words with a gradient clip mask as the user scrolls through the section.

• Slarivo Image Text

  Large heading text filled with an animated image mask that pans and can cycle between multiple photos.

• Slarivo Drag And Draw

  Here is beautiful drawing with drag component

• Slarivo you can scroll.

  you can scroll. component

• Slarivo NeonLoader

  A flickering neon sign "Loading" animation built with React and CSS.

• Slarivo Inline Highlight

  Animates one word inside a sentence from a base color to a brand color.

• Slarivo Blur Reveal Deck

  A beautiful and interactive card deck carousel for React and Tailwind CSS. Users can swipe or click through a stacked deck of cards where the top card smoothly falls away to reveal the next one. Each card change triggers a clean, animated text blur-reveal effect.

• Slarivo Slot Text

  Dependency-free text-roll animation for tiny, tactile UI labels. Each character sits in its own clipped cell and slides to its new glyph with a springy overshoot — the new glyph enters from one side while the old slides out the other, chasing it by a stagger step. Pure CSS transforms, GPU-composited. Thin React wrapper over the slot-text package (npm i slot-text); supports direction, stagger, bounce and a chromatic color sweep.

• Slarivo Slot Text

  Dependency-free text-roll animation for tiny, tactile UI labels. Each character sits in its own clipped cell and slides to its new glyph with a springy overshoot — the new glyph enters from one side while the old slides out the other, chasing it by a stagger step. Pure CSS transforms, GPU-composited. Thin React wrapper over the slot-text package (npm i slot-text); supports direction, stagger, bounce and a chromatic color sweep.

• Slarivo Slide Up Text

  Text animation that reveals content by sliding words, characters, or lines up from the bottom with a staggered effect.

• Slarivo Reveal Text

  Animated text reveal component with directional entrances (up, down, left, right), configurable delay, view-triggered animation, and reduced-motion support.

• Slarivo Encrypted Text

  A text component that scrambles into gibberish and gradually decrypts to reveal the real characters when it scrolls into view.

• Slarivo Vertical Cut Reveal

  Animated text that reveals each character, word, or line with a vertical clip-path wipe and configurable stagger.

• Slarivo Random Letter Swap Navigation

  A horizontal navigation menu whose links shuffle their letters in a glitchy random-swap animation on hover.

• Slarivo Text Cursor Proximity Scale

  Animated text where each character grows in scale as the cursor approaches, with a linear proximity falloff.

• Slarivo Vertical Cut Reveal Characters

  A logotype text-reveal block that animates each character with a vertical cut wipe, staggered outward from the center.

• Slarivo Scroll Text Marquee

  A scroll-controlled text marquee whose speed and direction respond dynamically to scroll velocity for an interactive animated headline effect.

• Slarivo Sliced Text

  An animated text that splits into two horizontal halves and slices apart on hover.

• Slarivo Fade In Text

  Text that animates into view by fading in word by word or character by character.

• Slarivo Dia Text

  An animated text component that cycles through a list of words with a spring slide-up transition and a gradient sweep reveal.

• Slarivo Word Carousel Text

  An inline text animation that cycles through a list of words with a smooth vertical fade-and-slide transition.

• Slarivo Motion Blur Text

  Animated text effect that renders a directional motion blur using layered text shadows.

• Slarivo Text Shimmer Animation

  An animated text effect that sweeps a multi-color gradient shimmer across the characters for emphasis or highlights.

• Slarivo Bouncing Text

  Animated text that splits into individual characters and bounces them into place in sequence.

• Slarivo Gif Text

  Animated text that uses a GIF as the fill color via background-clip, with a loading state.

• Slarivo Editor

  A container component for building rich-text editors with Plate — it provides the editable content area, styling variants, and a static read-only view.

• Slarivo Text Loop

  Cycles through an array of children with smooth enter and exit transitions, swapping content on a configurable interval.

• Slarivo Text Loop

  Cycles through an array of children with smooth enter and exit transitions, swapping content on a configurable interval.

• Slarivo Text Loop

  Cycles through an array of children with smooth enter and exit transitions, swapping content on a configurable interval.

• Slarivo Animate Digits

  A number display where each digit blur-slides on change, animating only the digits that actually change — ideal for timers, counters, and live metrics.

• Slarivo Editor

  A container component for building rich-text editors with Plate — it provides the editable content area, styling variants, and a static read-only view.

• Slarivo Text Loop

  An animated text loop that rotates through words with a typewriter-style reveal and gradient effect beside static text.

• Slarivo Formatting Toolbar

  A rich-text formatting toolbar with toggle buttons that applies strikethrough, inline code, blockquote, and link styles with a live markdown preview.

• Slarivo Shuffle Button

  Here is Shuffle Button component

• Slarivo Particle TextEffect

  You can customize the text by passing a `text` prop, and clicking anywhere will restart the mesmerizing animation.

• Slarivo Scramble Text

  A small text component that masks its content with encrypted characters, then reveals the real value one character at a time. On mount (or whenever the text changes) it runs a decrypt-style animation from scrambled symbols to the final string, with a configurable interval, grapheme-aware segmentation via Intl.Segmenter, an accessible live-region fallback, and respect for reduced-motion preferences.

• Slarivo Code Block

  An animated code block that types out syntax-highlighted source character by character as it comes into view.

• Slarivo Random Letter Swap CTA Buttons

  A pair of call-to-action buttons whose labels shuffle letters in random order on hover for a glitchy text effect.

• Slarivo Morph Text

  Cycling headline words that morph between phrases with a goo-filter blur transition.

• Slarivo Slide Up Text

  Animated text that reveals itself by sliding up word by word or character by character.

• Slarivo Split Reveal Text

  Animated text that reveals with a vertical split effect, sliding each half in from the center on mount.

• Slarivo Text Scramble

  Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.

• Slarivo Text Scramble

  Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.

• Slarivo Text Scramble

  Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.

• Slarivo Text Roll

  Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.

• Slarivo Text Roll

  Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.

• Slarivo Text Roll

  Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.

• Slarivo Text Morph

  An animated text component that rotates through a list of words with a per-character blur-and-fade transition.

• Slarivo Dia Text Reveal

  Animated text that reveals with a gradient sweep and chromatic wash, with optional multi-phrase cycling, powered by Motion.

• Slarivo Link Element

  A Plate editor element that renders inline hyperlinks with primary-colored underline styling and hover states.

• Slarivo Block Selection

  A visual overlay that highlights selected blocks in a Plate rich-text editor.

• Slarivo BeUI Text Animation

  Texts component from the 21st.dev community.

• Slarivo Variable Font Hover Nav

  A horizontal navigation menu whose link letters animate from thin to bold outward from the center on hover using variable font weight.

• 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 Spinning Circular Text

  Text arranged in a circle with a continuous spinning animation, with adjustable character spacing and font size.

• Slarivo Typewriter Text

  Animated text that reveals character by character with a typewriter effect, with configurable speed, optional looping, and reduced-motion support.

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Text Highlighter

  Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and color.

• Slarivo Typewriter

  An animated typewriter title that types, pauses, deletes and loops through a sequence of words with a blinking cursor and natural typing variance.

• Slarivo Shiny Text

  An animated text with a shimmering light sweep effect that continuously moves across the letters.

• Slarivo Animated Gradient Text

  A text element with a smoothly animated color gradient that continuously shifts between two hues.

• Slarivo Orbital Letters

  Animated text where each letter drifts and orbits on spring physics before settling into place, with a hover replay.

• Slarivo Hover Highlight Text

  Animated heading where a cursor-tracked spotlight reveals an outlined version of the text beneath a faint base layer, using spring physics for a smooth cinematic hover effect.

• Slarivo Animated Select Headline

  A hero heading that cycles through keyword variants with blur-fade transitions, highlighting the active word with an accent gradient.

• Slarivo Split Flap Display

  An animated split-flap (airport departure board) display that flips through characters to reveal text or label/value rows.

• Slarivo AI Streaming Text

  Animated text that streams in character-by-character or word-by-word with a blinking cursor, simulating an AI typewriter response.

• Slarivo Tracking In

  Animated text heading where the letter-spacing collapses from wide to normal while blur clears, with a springy easing.

• Slarivo Strikethrough Replace

  An animated text component that draws a strike line across old text then reveals replacement text in its place.

• Slarivo Text Wavy

  Animated text that loops each letter through changing size, weight and color to create an infinite wavy effect.

• Slarivo Gradient Text Fill

  Text component whose letters are filled with animated moving color orbs for a 3D gradient effect on any background.

• Slarivo Text Reveal Card

  Interactive spotlight card with a mouse-follow glow and a cursor-driven text reveal at the bottom for features, case studies, and portfolio sections.

• Slarivo SVG Text Draw

  Animated SVG text that draws each letter stroke by stroke to reveal a word.

• Slarivo Mouse Wave Text

  Interactive text that ripples with a wave-like bounce effect as the mouse moves across the screen.

• Slarivo Squash Text

  Animated heading whose characters bounce and squash into place with a playful, dynamic GSAP effect.

• Slarivo Top Down Letters

  Animated text where each letter cascades in from above with a staggered fade for video and hero title effects.

• Slarivo Soft Blur In

  Per-character text reveal that fades each letter in with a soft blur and gentle upward motion for an Apple keynote-style hero title entrance.

• Slarivo Short Slide Right

  An animated text component that glides swapping phrases in from the left as one compact unit while words reveal in sequence through an opacity stagger.

• Slarivo Fade Through

  A text animation component that cycles through phrases with a Material-style crossfade, fading old text out and new text in for hero headlines and rotating taglines.

• Slarivo Micro Scale Fade

  A text animation component that reveals whole words or short headings with a calm, tiny scale-and-fade pop.

• Slarivo Short Slide Down

  A looping text animation where each word drops in from above onto its own centered line, stacking downward into a multi-line composition.

• Slarivo Spring Scale In

  A per-word text reveal that scales each word in with a soft spring overshoot for an iOS app icon-style pop.

• Slarivo Animate Count

  An animated number display that transitions between values with a blur and slide effect for counters and metrics.

• Slarivo Count Up

  An animated number counter that springs to its target value when it enters the viewport, with support for decimals, thousands separators, count direction, and per-digit slide, fade, and blur effects.

• Slarivo Blockquote Element

  A blockquote element for the Plate rich-text editor that renders quoted content with an italic, left-bordered style.

• Slarivo Drilldown Menu

  A list that drills into itself. The row you click stays put, fades to a grey breadcrumb with a return arrow, and its children arrive one indent deeper — no sliding panels.

• Slarivo Glitch Text

  Glitch text

• Slarivo Animated Highlight Text

  inline highlights whose SVG icons draw themselves in on hover, with a pointer cursor and an image tooltip per word.

• Slarivo Number Ticker

  An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.

• Slarivo Slide Up Reveal

  Animated text component that reveals content by sliding it up, with configurable word, character, or line splitting and stagger.

• Slarivo Blur Out Up

  Animated text where words blur and drift upward while fading out, staggered per word, with a smooth blur fade-in entrance.

• Slarivo Text Morph

  Shared-layout character morphing between two strings — individual letters animate to their new positions with spring physics.

• Slarivo Text Morph

  Shared-layout character morphing between two strings — individual letters animate to their new positions with spring physics.

• Slarivo Text Morph

  Shared-layout character morphing between two strings — individual letters animate to their new positions with spring physics.

• Slarivo Per Word Crossfade

  Per-word text reveal that fades each word in with a subtle upward drift for a calm, keynote-style heading entrance.

• Slarivo Shared Axis Y

  An animated text component that swaps phrases with a per-word hard-cut staircase transition for sharp, editorial word cycling.

• Slarivo Bottom Up Letters

  A per-character text reveal where letters rise up from below in a staggered staircase, built with Motion.

• Slarivo Glitch Text Loader

  Animated glitch text loader with RGB channel splitting, clip-path distortion, and random character scrambling.

• Slarivo Keyboard Input Leaf

  A styled keyboard-shortcut leaf that renders selected text as a keycap-styled kbd element in a Plate editor.

• Slarivo Shutter Text

  Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.

• Slarivo Shutter Text

  Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.

• Slarivo Shutter Text

  Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.

• Slarivo Shutter Text

  Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.

• Slarivo Letter Morph

  Letter Morph Motoko UI

• Slarivo Text Inertia

  Texts component from the 21st.dev community.

• Slarivo Animated Signature

  A reusable SVG path component for drawing handwritten marks and signatures. It self-draws any path with a stroke-dashoffset reveal — configurable path, viewBox, size, stroke width, duration, delay, and easing — and respects reduced-motion preferences. Dependency-free; color follows currentColor.

• Slarivo Words Stagger

  Word-by-word text reveal animation that staggers each word in with blur, upward transform, and opacity for an elegant entrance effect.

• Slarivo Variable Font Hover CTA

  A stack of call-to-action links whose letters animate their variable font weight on hover, each using a different stagger origin.

• Slarivo Text Highlight Direction Picker

  Animated text highlight with buttons that sweep the highlight behind the text left, right, top-down, or bottom-up on demand.

• Slarivo Pixel Heading Word

  An interactive heading that swaps or cycles through Geist pixel font styles on hover or focus.

• Slarivo Swoosh Text

  Bold italic text with a layered colorful drop-shadow that swooshes away on hover.

• Slarivo Glitch Text

  An animated glitch text effect with configurable color schemes, intensity, and size for headings and hero titles.

• Slarivo Tag Element

  A pill-shaped tag element for the Plate editor that renders selectable, styleable inline labels with focus and read-only link states.

• Slarivo Typewriter Effect

  Character-by-character typewriter text animation with a blinking cursor, optional deleting, looping across phrases, and semantic heading support.

• Slarivo Scramble Text

  A hover-triggered text effect that scrambles and restores its characters with smooth GSAP motion.

• Slarivo Text Blink

  A text component that gently pulses its opacity to signal an in-place loading or activity state for short labels.

• Slarivo Caption

  A text field for adding editable captions to media elements like images, videos, and files in a rich-text editor.

• Slarivo Terminal Decode Loader

  An animated loading indicator that cycles through random symbol, binary, or hex characters before resolving into readable text, like a terminal decoding cipher.

• Slarivo Heading Element

  A rich-text editor heading element supporting levels H1 through H6 for the Plate editor.

• Slarivo Spinning Text With Icon

  Circular text that rotates around a centered icon and speeds up on hover, useful for badges, seals, and hero accents.

• Slarivo Streaming Text

  A token-by-token streaming text effect with a blinking caret, skip and replay controls, and reduced-motion support for AI chat responses.

• Slarivo Gradient Shimmer Text

  A zero-dependency text shimmer that sweeps a multi-stop gradient highlight across your text using the Web Animations API, with built-in palettes, easing presets, and off-screen/reduced-motion pausing. Ported to React from the original gradient-shimmer by @mona_biasia.

• Slarivo Separator

  Visually or semantically separates content.

• Slarivo Code Block

  A component for displaying code snippets with syntax highlighting and customizable styling.

• Slarivo Code block

  Code block

• Slarivo Snippet

  Display a snippet of copyable code for the command line.

• Slarivo Hero 03

  Hero banner , designer, product, design code

• Slarivo Code Editor Sheet

  A sleek, accessible code editor sheet powered by shadcn/ui, Ace Editor, and Radix UI supporting multiple languages with syntax highlighting and theme switching. Easily integrate customizable, interactive code editing into your web applications.

• Slarivo Code Block

  Here is Code Block component

• Slarivo Blog Cards

  Minimal, text-focused preview of a journal or blog entry. It typically includes a title, publication date, and short description, styled with subtle hover animations and a dashed separator for a clean, editorial aesthetic.

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

  A component used to display inline code, with ability to copy the content by a button.

• Slarivo Color Palette

  Branding Card A visually polished card to showcase brand typography and color palettes, featuring fluid animations.

• Slarivo Content With Illustration

  Content With Illustration This component displays a section with textual content alongside an illustration. It's built to be responsive, adapting from a stacked layout on mobile to a two-column layout on larger screens. The text highlighting and icon animation add a dynamic, polished touch.

• Slarivo Code Snippet

  Code Snippet

• Slarivo Code Block

  Code Block component used across Vercel and Next.js.

• Slarivo Text Reveal (Mask)

  A scroll-triggered text reveal that masks and slides words up line-by-line, word-by-word, or character-by-character, with support for inline emphasis.

• Slarivo Code Editor

  Live code editor with multiple language support and built in JavaScript evaluation

• Slarivo Text Reveal

  A text reveal effect component made with gsap and tailwind css

• Slarivo 8-bit Demo Shell

  Fake terminal demo shell that renders a sequence of command, output, and comment lines with a blinking cursor, in the 8-bit retro style.

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

  Here is hover card component

• Slarivo MetallicBusinessCard

  A premium, reflective 3D metallic business card component that dynamically responds to mouse movement with realistic lighting and tilt effects. It supports multiple metal finishes (gold, silver, bronze, platinum) and intelligently adjusts text color and glow for perfect readability on each surface.

• Slarivo Text Repel

  Interactive heading text whose individual letters push away from or pull toward the cursor with springy motion.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo Synced Lyric Captions

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

• Slarivo Collapsible

  A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log output. Controlled or uncontrolled via open / defaultOpen, with data-panel-open styling hooks. Ships Collapsible, CollapsibleTrigger and CollapsiblePanel (also exported as CollapsibleContent).

• Slarivo Masked Slide Reveal

  Animated typography where words slide up out of an invisible horizontal mask, one after another.

• Slarivo Title Slide

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

• Slarivo Text Roll

  A per-character vertical text roll animation for animating label swaps and micro-interactions between two short strings.

• Slarivo Tracking In

  Letter-spacing collapses and blur clears with a springy entrance.

• Slarivo AI Diff

  Proposed code edit where added lines wipe in from the left and rejected lines collapse to nothing, with accept and reject actions. Respects prefers-reduced-motion.

• Slarivo Glitch Text Animation

  Interactive cybernetic typography component featuring RGB chromatic shift, character cipher scramble animations, scanline CRT overlays, and focus dimming on hover.

• Slarivo Liquid Grid Text

  Interactive 3D text displacement component using Framer Motion.

• Slarivo Slot Headline

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

• Slarivo AI Artifact

  Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading, with copy built in. Respects prefers-reduced-motion.

• Slarivo AI Response

  Streaming answer body that reveals text as it arrives and anchors inline citation markers to their sources. Respects prefers-reduced-motion.

• Slarivo Show More

  An expandable text block that clamps to a set number of lines and springs open to reveal the rest, animating height without reflowing the text.

• Slarivo Code Block

  A component for displaying code snippets with syntax highlighting and customizable styling.

• Slarivo Code Block

  A component for displaying code snippets with syntax highlighting and customizable styling.

• Slarivo Copy to clipboard

  A Copy to clipboard component for headlines, typography, readable content, and animated copy, featuring clipboard, copy, code block, code-block.

• Slarivo Masked Slide Reveal

  Words slide up out of an invisible horizontal mask, one after another.

• Slarivo Astryx Blockquote

  Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <blockquote> markup and supports an optional cite attribution rendered in a…

• Slarivo Flip Disk Matrix

  An interactive electromechanical flip-disk matrix component built with React and Tailwind CSS that renders real-time clocks, custom text, wave animations, and noise patterns with 3D perspective effects.

• Slarivo File Diff

  A compact code file diff viewer showing added and removed lines with line numbers, a header filename, and add/remove counts.

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, shadcn/ui, typography, form handling.

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, outline, shadcn/ui, typography.

• Slarivo Code

  A component used to display inline code, with ability to copy the content by a button.

• Slarivo Code

  A component used to display inline code, with ability to copy the content by a button.

• Slarivo Code

  A component used to display inline code, with ability to copy the content by a button.

• Slarivo Code Snippet

  A Code Snippet component for headlines, typography, readable content, and animated copy, featuring code snippet, code-snippet, code block, code-block.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Collapsible

  A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log output. Controlled or uncontrolled via open / defaultOpen, with data-panel-open…

• Slarivo Color Generator

  A Color Generator component for capturing short text, values, search terms, and configurable data, featuring color picker, color-picker, palette, slider.

• Slarivo Code Block

  A compact code snippet block with a filename header, line numbers and a copy-to-clipboard button, ideal for showing code output in AI chat interfaces.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Animated Card 1

  An animated hover card that can showcase almost anything—it all comes down to the caption you choose.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo Bash Tool

  Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.

• Slarivo Astryx Blockquote

  Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <blockquote> markup and supports an optional cite attribution rendered in a…

• Slarivo Astryx Blockquote

  Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <blockquote> markup and supports an optional cite attribution rendered in a…

• Slarivo Scroll Burn Text

  A manifesto that comes at the reader and burns off. Each block grows toward the lens, splits into red and cyan at the edges and is eaten away glyph by glyph from the middle out, uncovering the next block standing behind it.

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

  An interactive 3D perspective horizon terrain with tilt parallax, cursor dampening, and continuous sine-wave displacement built on HTML5 Canvas.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

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

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

• Slarivo Ball Study

  An interactive canvas animation of glyphs arranged on a spinning sphere that accelerates on hover and scatters clicked letters before they regrow.

• Slarivo Particle Wordmark

  An animated particle-storm wordmark effect that renders a brand name as a shimmering field of dots and squares inside an isolated iframe, for footers or hero sections.

• Slarivo Dot Text

  Canvas-powered dot matrix typography with dynamic text cycling, scramble and fade transitions, and customizable LED grid styles.

• Slarivo ImgText Reveal Scroll Animation

  Scroll-driven text and inline image reveal animation using GSAP ScrollTrigger with floating magnetic cursor hover preview.

• Slarivo OTP Verification Field

  A form field with a six-digit one-time passcode (OTP) input, separator, helper description and validation error message for verification flows.

• Slarivo text-animation

  A text-animation component for headlines, typography, readable content, and animated copy, featuring text animation, text-animation, hover effect, hover-effect.

• Slarivo text-scramble

  A text-scramble component for headlines, typography, readable content, and animated copy, featuring scramble, text effect, text-effect, text animation.

• Slarivo List

  Renders ordered and to-do list items with checkboxes inside a Plate rich-text editor.

• Slarivo TOC Base Kit

  A Plate editor plugin kit that registers a static table-of-contents element for server-side rendering of document headings.

• Slarivo Math Base Kit

  Plate editor plugin kit that adds static, read-only rendering of block and inline LaTeX equations for server-side and RSC content.

• Slarivo Handwriting SVG

  An SVG that draws itself on mount, rendering custom paths or converting text into animated handwriting strokes.

• Slarivo AI Response Writer

  An auto-scrolling text display that smoothly keeps the latest streamed AI response always visible as new text arrives.

• Slarivo Scroll word reveal

  A Motion for React scroll scene that reveals each word as you scroll, from the official Motion examples catalog.

• Slarivo Characters remaining

  An example of creating a character counter with spring animations in Motion for React.

• Slarivo Typewriter

  A typewriter that types Hello world! with a blinking hue-1 caret, rebuilt from the official Motion example using motion/react.

• Slarivo Fill text

  An example of creating a text fill loading animation with Motion for React.

• Slarivo Variable Font Proximity Nav

  A navigation menu whose items thicken their variable font weight as the cursor approaches, using an exponential proximity falloff.

• Slarivo Variable Font Cursor Proximity Dual

  Two mirrored lines of text whose variable-font weight and slant axes flip based on cursor distance with gaussian falloff.

• Slarivo Text Animation

  Responsive editorial block-wipe line reveal animation powered by GSAP and SplitText.

• Slarivo Reveal Text

  Fluid responsive blur-and-stagger text reveal animation using Framer Motion.

• Slarivo Silhouette Wrap

  A paragraph that parts around a silhouette and closes back up underneath it. Canvas measureText and Intl.Segmenter set every line around an SVG shape or an image's own outline, re-typesetting as it chases your cursor. Zero dependencies - React is the only…

• Slarivo Curved Text Loop

  Interactive SVG curved path text marquee with real-time drag velocity manipulation and infinite loop.

• Slarivo Text Blur Reveal

  A headline text component that blurs and fades in word by word or letter by letter as it scrolls into view.

• Slarivo Variable Text Proximity

  A Variable Text Proximity component for headlines, typography, readable content, and animated copy, featuring pointer-responsive feedback, theme-aware styling.

• Slarivo Gallery Grid with Captions

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

• Slarivo Text Fall Button

  A button whose label characters drop and settle into place with an elastic GSAP animation on hover, click, or page load.

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

  A text component that scrambles and decodes its characters into place on mount, retrigger, or hover, for a hacker-style reveal effect.

• 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 Dancing Letters

  Interactive text where each letter plays a unique physics-based animation on hover or click.

• Slarivo Flickering Text

  Headline with a broken-neon-sign flicker: characters stutter between on and off states before stabilising. Theme-aware, respects reduced motion.

• Slarivo Pixel Text Fill

  Headline that fills in via a pixelated dissolve, each glyph resolving from a coarse pixel grid to crisp type. Theme-aware, respects reduced motion.

• Slarivo Drop Text

  Headline whose characters fall and bounce into place with a staggered gravity drop. Theme-aware, respects reduced motion.

• Slarivo Chromatic Text

  Headline with an animated RGB split / chromatic-aberration effect on each character. Theme-aware, respects reduced motion.

• Slarivo Glow Text Reveal

  A Glow Text Reveal component for headlines, typography, readable content, and animated copy, featuring text, glow, terminal, typewriter.

• Slarivo Typing Text

  Multi-line terminal-style typewriter with sequential, cascade, and loop variants, configurable cursor styles, blur/rotate/scale entrance, and RTL support. Theme-aware, respects reduced motion.

• Slarivo Rolling Text

  Headline where each letter spins vertically through a reel of duplicates like a slot machine before landing on the final word. Deterministic, theme-aware, respects reduced motion.

• Slarivo Focus Text

  A Focus Text component for headlines, typography, readable content, and animated copy, featuring click and selection states.

• Slarivo Text Convergence

  A Text Convergence component for headlines, typography, readable content, and animated copy, featuring animated transitions, responsive behavior, theme-aware styling.

• Slarivo Depth Flip Text

  Perspective text effect that flips each phrase to the next on a 3D hinge with staggered per-character motion and an optional crossfade.

• Slarivo Scramble Link Button

  Link button that scrambles its label into random glyphs on hover before resolving, with an optional underline and arrow icon.

• Slarivo Neon Sign

  An animated glass-blown neon typography sign rendered on canvas, with a subtle flicker and breathing glow for hero headings.

• Slarivo Split text

  Headline words spring in from opacity 0 and y 10 with a 0.05 stagger, rebuilt from the official Motion splitText example using motion/react.

• Slarivo Scramble text: Hover

  Hover me text that scrambles through random glyphs then settles, rebuilt from the official Motion example using motion/react.

• Slarivo Scramble text

  Text that scrambles through random characters when transitioning between words, rebuilt from the official Motion example using motion/react.

• Slarivo Status

  A pill-shaped status badge with a pulsing indicator dot and color variants for signaling online, error, warning, info, and idle states.

• Slarivo Canvas Text

  An animated text component that renders colorful curved lines on a canvas, clipped to the shape of the given text.

• 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 Cinematic List

  Expandable destination list where each row reveals a full-width cinematic background image and travel metadata on hover.