SLARIVO / TEXT AREAS

Text Areas Components

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

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Here is Textarea component

• Slarivo Textarea

  Retrieve multi-line user input.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Textarea with characters left

  Here is textarea with characters left component

• Slarivo Textarea

  Displays a multi-line text input field with enhanced features like clearable functionality, auto-resizing, and Zod validation support

• Slarivo Input Group

  Here is Input Group component

• Slarivo Smart Textbox

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

• Slarivo Textarea

  Displays a form textarea or a component that looks like a textarea.

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Prompt Input

  An input field that allows users to enter and submit text to an AI model.

• Slarivo Text Marque

  Here is text marquee component

• Slarivo useTextareaResize

  useTextareaResize

• Slarivo Text Color

  Text Color

• Slarivo Text Scramble

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

• 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 Multimodal AI Chat Input

  A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling

• Slarivo layered text

  Layered text with 3D perspective and smooth hover animations

• Slarivo Feedback

  Gather text feedback with an associated emotion.

• Slarivo Wave Text

  A basic Wave Text on Hover

• Slarivo Text Rewind

  Text Areas component from the 21st.dev community.

• Slarivo Special Text

  Animated text with scramble effect.

• Slarivo Text Scroll animation

  Here is text scroll animation

• Slarivo Typewriter Testimonial

  Here is Typewriter Testimonial component

• Slarivo Dynamic Text Slider

  This is a React component that creates a full-screen hero section. It features a unique, interactive headline where the words "Video Editor" are revealed inside a draggable range slider. The slider tilts dynamically as the user moves the handles, and the handles scale up on hover and drag for better visual feedback. The component is designed to be responsive and visually engaging.

• Slarivo Ai Input

  Here is Ai Input component

• Slarivo AI prompt Box

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

• Slarivo Text Rotate

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

• Slarivo Chatgpt Prompt Input

  This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox

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

  Fade in text as you scroll down the page.

• Slarivo AI Input

  A modern, animated textarea input component designed for AI chat interfaces. It features auto-resizing, a voice input toggle, and an animated submit button. Features: • Auto-resizing textarea • Voice input toggle • Animated submit button • Press Enter to submit (Shift+Enter for a new line) • Dark mode support • Customizable height limits • Smooth animations • Mobile responsiveness

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

  Animated Underline Text

• Slarivo Hand Writing Text

  A nice svg hand written text

• Slarivo Typewriter Text

  Animated Text component that types itself out like a typewriter.

• Slarivo AI Input With Search

  A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transitions. Features: • Animated search toggle button • File upload support • Auto-resizing textarea • Dark mode compatibility • Keyboard shortcuts • Framer Motion animations for enhanced user experience • Mobile responsiveness

• Slarivo useAutoResizeTextarea

  A hook that automatically resizes a textarea based on its content

• Slarivo Sticky Scroll Reveal

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

• Slarivo Typewriter Effect

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

• Slarivo Contact Card

  A modern contact card with a clean layout, combining details, icons, and a form section. Perfect for displaying your contact info alongside an inquiry form in one stylish block.

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Claude Style AI Input

  Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional previews for media.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

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

  A class contact page with contact details and form.

• Slarivo Typing Animation

  Characters appearing in typed animation

• Slarivo Chat Input

  AI Chat Input

• Slarivo Prompt Input

  An input field that allows users to enter and submit text to an AI model.

• Slarivo Ruixen Moon Chat

  This RuixenMoonChat component is a visually minimalistic AI chat-style interface designed to sit just below the center of the screen against a full-screen moon-themed background image. The interface is inspired by the first empty-chat look of modern AI tools like ChatGPT, keeping the design lightweight, monochromatic (black, white, and neutral grays), and distraction-free. At the top center, there’s a bold white heading with a short tagline encouraging users to start typing. The main chat input box appears closer to the lower half of the screen and includes an auto-resizing textarea for smooth typing without manual resizing. A row of Quick Action buttons below the input provides ready-to-use prompts such as Generate Code, Launch App, UI Components, and more—ideal for developers exploring new ideas quickly. These buttons are styled as rounded, subtle pills with borders and icons from Lucide to keep the experience consistent and professional. The design avoids scroll bars and dark/light theme toggles, offering a clean black-and-white look that emphasizes the background image and central chat input. Overall, this component works well as a starting point for an AI-powered coding assistant or creative brainstorming tool.

• Slarivo Claude-style Chat Input

  A replica of the Claude AI chat interface featuring a polished, auto-resizing text input, file attachment previews, and quick action chips. Includes smooth animations, dark mode support, and a refined "swoosh" underline aesthetic.

• Slarivo Magic Text

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

• Slarivo Liquid Text

  Liquid Text

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo Scroll Based Velocity

  Scrolling text whose speed changes based on scroll speed

• Slarivo Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

• Slarivo AI Input with Suggestions

  A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness

• Slarivo AI Input With File

  An enhanced chat input component with file upload capabilities. It features an auto-resizing textarea, file attachment preview, and submit button. Features: • File upload with preview • Auto-resizing textarea • File type restrictions • File size limits • Dark mode support • Mobile responsiveness • Keyboard shortcuts • Animated UI elements

• Slarivo Text Particle

  Text Particle

• Slarivo Popover Form

  Popover Form

• Slarivo AI Input

  AI Chats component from the 21st.dev community.

• Slarivo Floating Panel

  A headless, composable floating panel component

• Slarivo Text Cursor Proximity

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

• Slarivo Contact

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

• Slarivo Form

  Here is Form component

• Slarivo Typewriter

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

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

  Here is Field component

• Slarivo Popover

  A versatile popover component for displaying contextual content, forms, and interactive menus with smooth animations. Features: • Smooth open and close animations • Form handling with textarea • Menu-style interactions • Command palette functionality • Project status displays • Click outside detection • Keyboard navigation • Dark mode support • Custom trigger variants • Flexible content layouts • Compound component pattern • Accessibility features Notes: • Built with Framer Motion for smooth animations • Utilizes React Context for state management • Handles click outside and escape key events • Employs a responsive design with a mobile-first approach • Includes TypeScript support with proper types • Integrates seamlessly with Shadcn UI components • Supports custom styling and theming • Optimized for performance with proper hooks usage

• Slarivo Text Marquee

  Animated text marquee component with vertical scrolling.

• Slarivo Promt Input

  Here is Promt Input component

• Slarivo Feedback Widget

  A feedback widget with emoji ratings and a text area inspired from Vercel.

• Slarivo Smart Paste Input

  A chat composer that catches long pastes and files them away as an attachment card instead of flooding the input. Click the card to open a full editor — live character count, edit in place, then Save or Remove.

• Slarivo Scroll Area

  Augments native scroll functionality for custom, cross-browser styling.

• 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 Advanced Ai Chat Input

  Advanced Chat Input A sophisticated chat input component that supports file attachments, custom action icons, and an animated send button. It automatically resizes based on content.

• Slarivo Textarea

  A multi-line text input field with support for custom styling and states.

• Slarivo Ruixen Query Box

  RuixenQueryBox is a modern, interactive chat input component designed for AI-powered interfaces. It features an auto-resizing textarea that expands smoothly as the user types, along with quick access buttons for voice input, sending messages, and uploading files via a popover—similar to GPT-style chat interfaces. The component has a clean white design with a visually appealing gradient background, providing a polished, user-friendly experience for submitting queries and interacting with AI assistants.

• Slarivo Contact Form

  Here is Contact Form component

• 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 Modern animated multi words

  Modern animated multi words

• Slarivo AI Prompt Box

  An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.

• Slarivo Dia Text

  Texts component from the 21st.dev community.

• Slarivo Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Word Counter

  Word Count

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Ruixen Prompt Box

  RuixenPromptBox is a sleek and modern AI-powered text input component designed to enhance user messages effortlessly. It allows users to write or paste text and apply intelligent transformations such as summarization, grammar correction, or compression with a single click. The component features an auto-resizing textarea, ensuring a comfortable typing experience, while the clean black background and white text provide excellent readability. Transform options are displayed as interactive buttons, allowing users to select and visualize the applied transformation instantly. With a convenient send button and smooth interaction, RuixenChatRefiner is perfect for building AI chat interfaces, content refinement tools, or any application where polished text output is essential.

• Slarivo Feedback Card

  Here is Feedback card

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Feedback Widget

  Feedback Widget Description: An interactive UI component for collecting user feedback. It allows users to give a quick "helpful" or "not-helpful" rating, provide an optional detailed comment, and submit their response. The component features smooth entry, exit, and state-change animations.

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

  Here is advanced form layout

• Slarivo Creative Card

  This is a modern, responsive chat card component built with React and Tailwind CSS, fully compatible with both light and dark modes. It features a textarea for user input, dynamic action buttons using Lucide icons, and a submit button with a subtle gradient and hover effects.

• Slarivo Textarea with floating label

  Here is textarea with floating label component

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Feedback Textarea

  Here is feedback textarea component

• Slarivo Required Textarea

  Here is required textarea component

• Slarivo Textarea with button

  Here is textarea with button component

• Slarivo User Feedback Block

  Collects user feedback on the help/support experience with multiple input types.

• Slarivo Auto growing textarea

  Here is auto growing textarea component

• Slarivo Textarea with icon

  Here is textarea with icon component

• Slarivo Textarea

  Multi-line text input component with auto-sizing and validation states.

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo 8-bit Textarea

  Pixel-art textarea from 8bitcn.com — wraps shadcn/ui Textarea with hard-edge pixel borders and Press Start 2P retro font.

• Slarivo Animated hero

  Animated hero with text and two shadcn/ui buttons

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

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

• Slarivo Text Generate Effect

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

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo Hyper Text

  A hyper changing text animation as you hover.

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo 3D Testimonails

  A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.

• Slarivo 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 Shining Text

  Animate text with a shining effect.

• Slarivo AI Input

  AI Input popover

• Slarivo Morphing Text

  A dynamic text morphing component for Magic UI.

• 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 Lets Work Section

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

• Slarivo AI Assistant Interface

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

• Slarivo Animated Shiny Text

  Animated Shiny 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 Animated Text

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

• Slarivo Text Roll

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

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

  Cool Animated Text

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Morphing Text

  Morphing Text Component

• Slarivo Matrix Text

  Matrix Text Animation

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

  Here is Container Text Flip component

• 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 Infinite Text Marquee

  Awesome infinite text scrolling effect using framer-motion

• Slarivo Input

  Here is animated Input component

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

  Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.

• Slarivo Audio Chat

  Polished voice chat component with smooth expand/collapse animations.

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

  Here is Animated Text component

• 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 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 Wavy Text Block

  Wavy Block animates its children in waves pattern on scroll.

• Slarivo CascadeText

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

• Slarivo Potfolio Text

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

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

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

• Slarivo Comic Text

  Here is Comic Text

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Basic

  Here is basic spinning text component

• Slarivo The Typewriter

  Texts component from the 21st.dev community.

• 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 Text Field Basic

  Here is Text Field component

• Slarivo Text Hover Effect

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

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

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Form Fields Skeleton

  Animated shimmer skeleton placeholder for a form layout with labeled input fields, a textarea, and action buttons.

• Slarivo indevuiTextarea

  Here is indevui Text component

• Slarivo Morph Surface

  An animated feedback widget that morphs from a compact pill into an expanded textarea form with smooth spring animations and configurable dimensions, labels, and content.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo ParticleTextCanvas

  A full-screen, canvas-driven particle system that spells out specified text and lets the cursor dynamically repel the letters’ particles. It captures pixel data from bold, gradient-filled text and instantiates particles at those locations, creating an interactive “shatter and reform” effect as you move or leave the cursor. Ideal for hero titles, interactive headings, or animated backgrounds.

• Slarivo Scroll Area

  Here is Scroll Area component

• Slarivo Animated Fuzzy Overlay Effect

  This code implements a visually appealing animated fuzzy overlay effect using React and Framer Motion. It solves the problem of adding a subtle, attention-grabbing background effect without being distracting. The overlay subtly shifts its position, creating a sense of movement and depth. Here's how it works: 1. **`FuzzyOverlayExample` Component:** This is the main component that renders both the content (`ExampleContent`) and the fuzzy overlay (`FuzzyOverlay`). Crucially, it wraps both in a `div` with `relative` positioning and `overflow-hidden` to ensure the overlay is correctly clipped. 2. **`FuzzyOverlay` Component:** This component creates the overlay using `motion.div` from Framer Motion. It utilizes the `initial`, `animate`, and `transition` properties to control the animation. The overlay's image is set using a background image (`black-noise.png` or `noise.png`). The animation smoothly translates the overlay back and forth, creating a subtle, continuous movement. The `pointer-events-none` class prevents the overlay from interfering with user interactions with the content below. The `absolute` positioning and `-inset-[100%]` ensure the overlay extends beyond the visible area, creating the fuzzy effect. The opacity is set to 15% for a subtle look. 3. **`ExampleContent` Component:** This component renders the main content of the page, including text, buttons, and styling. It's a visually simple design to highlight the overlay effect. **Libraries and Concepts:** - React: The JavaScript library for building user interfaces. - Framer Motion: A production-ready motion library for React, providing smooth animations and transitions. **Use Cases:** - Adding a subtle, visually engaging background to websites or applications. - Creating a low-fi, retro aesthetic. - Enhancing the user experience with subtle animations. **Example Scenarios:** - Landing pages: To add visual interest and draw attention to the main content. - Dashboard applications: To create a more dynamic and engaging user interface. - Game interfaces: To add a stylistic element to the UI. Note: The code requires two PNG images (`black-noise.png` and `noise.png`) for the background. You can find links to download these images within the `FuzzyOverlay` component's comments.

• Slarivo Textarea with Character Count

  An auto-resizing textarea with a live character counter that changes color as you approach and reach the limit.

• Slarivo Textarea

  A multi-line text input field with auto-sizing, small/default/large sizes, disabled and invalid states built on Base UI.

• Slarivo Textarea with Label

  A multi-line textarea form field paired with an accessible label for collecting longer text input like messages or comments.

• Slarivo Promt Input with Actions

  A Promt Input with Actions component for collecting longer messages, descriptions, and free-form content, featuring prompt, ai input, ai-input, chat input.

• Slarivo Textarea with Error

  A multi-line textarea input showing an invalid state with a destructive validation error message below it.

• Slarivo Controlled Textarea

  A controlled textarea whose value is managed by React state, ideal for forms and message inputs.

• Slarivo Form Textarea

  A textarea form field wired to TanStack Form with a label, error handling, and validation display.

• Slarivo Support Request Fieldset

  A grouped support-request form fieldset with a legend, labeled subject, description and email fields, and helper text.

• Slarivo Label with Character Counter

  A form field label that shows a live character count for its textarea, updating as the user types.

• Slarivo Support Ticket Form

  A support ticket form with selectable category chips, a message textarea with character count, a loading submit button, and a submitted confirmation state.

• Slarivo Disabled Textarea

  A disabled textarea field with a label, showing a non-editable message input in its resting state.

• Slarivo Textarea With Helper Text

  A textarea input paired with a label and a right-aligned helper text hint below it.

• Slarivo Bjork Textarea

  A styled multi-line text input field with a soft rounded surface and hidden resize handle, for forms and messages.

• Slarivo Autosize Textarea Customize

  A bio form field with an auto-resizing textarea, Zod validation, and a loading submit button.

• Slarivo Field with Textarea

  A form field that pairs a label, a multiline textarea, and a helper description for collecting longer free-text input such as a bio.

• Slarivo Text Area

  A multi-line text input built on React Aria Components with shadcn styling, for use inside a text field with label, description, and validation.