SLARIVO / ANIMATIONS & EFFECTS

Animations & Effects Components

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

• Slarivo CPU Architecture

  A simple CPU architecture animation

• Slarivo AI Swarm Visualization

  An interactive particle system that visualizes AI behavior with three distinct simulation modes: neural network connections, swarm intelligence, and data clustering. Features adjustable parameters, theme switching, and real-time visualization.

• Slarivo Animated Subscribe Button

  An animated subscribe button useful for showing a micro animation from intial to final result.

• Slarivo Wave Animation

  The component accepts props for wave speed, intensity, colors, particle size, and dimensions.

• Slarivo Product Card

  Product Highlight Card This card uses a combination of CSS gradients and framer-motion to create a visually engaging experience. On hover, the card tilts, a subtle glow follows the cursor, and the product image animates smoothly.

• Slarivo Material Design 3 Ripple

  Animations & Effects component from the 21st.dev community.

• Slarivo Glass Effect

  Small glass CSS effect that I use on my website for a wow effect.

• 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 Logo Particles

  Make your brand logo stand apart with this amazing scatter on hover particle animation.

• Slarivo Gooey Blobs Loader

  An animated loading indicator of organic merging blobs that stretch and squash using an SVG gooey filter.

• Slarivo Animated 3D MacBook Air

  Showcase a stunning, purely CSS-driven 3D animation of a MacBook Air with this React component. Leveraging Tailwind CSS for styling and custom CSS keyframes for complex animations, this component brings a realistic and dynamic laptop to life. It includes animations for full 360-degree rotation, lid opening and closing, a screen reflection effect, and even subtle keyboard key presses. Ideal as a hero element, a sophisticated loader, or just a cool visual flourish for your React applications.

• Slarivo Tilt Effect

  Here is Tilt Effect component

• Slarivo Floating Particles

  The component creates floating particles that move upward with physics simulation, automatic camera rotation, and dual-color particle systems.

• Slarivo Shirt Parallax Card

  The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.

• Slarivo Smoke Effect

  Brings interactive smoke effects to life. As your mouse moves, ethereal particles dance and swirl, adding a touch of magic to any web interface.

• Slarivo Mechanical Waves

  Mechanical Waves with props

• Slarivo Liquid Metal Vortex

  This component uses raymarching to render a swirling vortex of reflective, metallic fluid. The UI allows you to control the vortex's color hue, the speed of its rotation and turbulence, and the complexity of the fluid's surface. The lighting is dynamic and reacts to the fluid's shape, creating realistic metallic sheens.

• Slarivo Desert Drift

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

• Slarivo 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 Keyboard Keys

  Interactive Keyboard Keys which animates on clicking or pressing the key on keyboard.

• Slarivo Liquid Crystal

  t renders a dynamic, noise-based visual with a "warp" effect that reacts to your mouse movements. You can control parameters like hue, speed, noise intensity, and the warp amount in real-time using the sliders. This combines the procedural generation seen in the first example with the mouse interaction from the third.

• Slarivo Animated Geometric Card

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

• Slarivo LoadingBottle

  The LoadingBottle component is a creative SVG-based loading animation that visually represents the outline of a bottle being “drawn” over time. It uses an SVG <path> element combined with a stroke-dasharray and stroke-dashoffset animation to create a smooth tracing effect, making it look as though the bottle is gradually filling in or coming to life. This animation loops continuously, providing an engaging and lightweight visual indicator during loading states. Its minimalistic design and vector-based implementation ensure that it scales cleanly on any screen size, making it ideal for use in modern web applications that want to add a fun, distinctive touch to their loading experience.

• Slarivo Custom Cursor

  The component accepts props for cursor type selection, colors, and sizing, with all styles implemented inline as requested. It includes all six cursor variations: arrow-pointer, big-circle, ring-dot, circle-and-dot, glitch-effect, and motion-blur, each with their unique animations and hover effects.

• Slarivo Wave

  Wave component with props for width, height, speed, tiles, pointer control, and DPR.

• Slarivo Metamorphic Loader

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

• Slarivo Particle Canvas

  The component will use inline styles and include the canvas animation with customizable props.

• Slarivo Animated-card

  This is the hover animated card with cool animation.

• Slarivo 8bit Enemy Health Display

  An 8-bit styled enemy health display built on the retro health-bar primitive. Shows enemy name, level, and a health bar with a percentage overlay, driven by current/max health values.

• Slarivo Dynamic Waveform

  "Dynamic Waveform" component generates a multi-layered, oscillating pattern inspired by audio visualizers and signal monitors. It uses a combination of sine waves and noise to create a constantly evolving and intricate animation. I've included new interactive controls for Wave Complexity, Amplitude, and Frequency, allowing you to transform the visual from simple, smooth waves into a complex, chaotic signal.

• Slarivo Sparkle Card

  Here is Sparkle Card component

• Slarivo Particle Canvas

  Particle Canvas, you can customize this

• Slarivo Fluid Canvas

  A visually enhanced interactive fluid simulation React component rendered on a canvas with mouse-driven effects.

• Slarivo Zoom

  Zoom colored component

• Slarivo Digital Glitch

  "Digital Glitch" effect, reminiscent of retro CRT monitors and cyberpunk visuals. It moves away from the previous organic noise to a more geometric and distorted style. I've built it with the same high-quality, performant structure as before. You now have controls for Glitch Intensity, RGB Shift, and Scanline Density, along with new presets like "Damaged VCR" and "Cyberpunk" to showcase the different effects you can create.

• Slarivo Neon Lighting

  Neon Lighting

• Slarivo 8bit Mana Bar

  An 8-bit styled mana bar built on the retro progress primitive. Shows a smooth blue fill (default) or pixelated squares (retro variant), driven by a 0-100 value.

• Slarivo Sine Wave Dots

  Sine Wave Dots animation

• Slarivo Crypto hero

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

• Slarivo Fluid Dynamics

  You can adjust all the physics parameters, visual settings, and interaction modes without modifying the component code.

• Slarivo FlipHover

  A card component that performs a 3D flip animation on hover, rotating 180 degrees * around the Y-axis while translating upward.

• Slarivo Matrix Ripple

  Matrix Ripple with props

• Slarivo Floating Icons Loader

  The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this component allows full customization: you can specify the number of icons to display, their size, and color, and even pass any React icon component to be used. Each icon follows one of three distinct animation paths, creating a dynamic and lively effect as they float, scale, and rotate smoothly across the container. Its flexible design makes it suitable for a variety of applications, from indicating loading states in dashboards and forms to adding a playful visual touch to creative websites. With full Tailwind CSS compatibility and TypeScript support, it’s easy to integrate and adapt to different themes and projects.

• Slarivo LegionWebDev

  Keyboard which glows on hover

• Slarivo HUD Area Chart

  This is a stylized HUD-style area chart component with an SVG-based sci-fi frame, interactive data hover, and dynamic theming support. It overlays a custom dot-matrix grid, uses a clipped polygon container to shape the graph, and reacts to pointer movement by displaying real-time data feedback in the corner. Perfect for futuristic dashboards, HUDs, gaming overlays, trading UIs, or any app that needs immersive data visualization with retro-tech or cyberpunk aesthetics.

• Slarivo 8-bit Xp Bar

  Pixel-art XP / experience bar from 8bitcn.com — chunky pixel borders, retro fill. Wraps Radix Progress; default and retro variants; flashing 'LEVEL UP!' animation at 100%.

• Slarivo Solar Pulse Loader

  Sleek circular loader with a radiant yellow-orange glow, creating a smooth pulsing effect. Perfect for modern apps seeking a bold, high-contrast loading indicator.

• Slarivo Animated Shape

  This is animated shape

• Slarivo Animated HUD Targeting UI

  The HUD targeting UI is a sophisticated animated component featuring intricate SVG crosshairs with animated targeting patterns, center reticle system, and coordinated motion effects. It supports theme-aware color customization for both light and dark modes, allowing seamless integration across different visual environments. This component is ideal for gaming interfaces, military simulation dashboards, sci-fi themed applications, or any interactive system requiring a high-tech targeting display.

• Slarivo Glass Shine Card

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

• Slarivo Circle Animations Collection

  Here is Circle Animations Collection

• Slarivo MacOS Animated Shortcut Keyboard

  MacOS Keyboard Animated Shortcut Keyboard

• Slarivo Poor Ghost

  Interactive Ghost Character you originally requested. The model has been updated to the glowing, ethereal figure with a flowing tail, and the animation has been changed to a gentle floating motion to match its ghostly nature.

• Slarivo WaveTextCanvas

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

• Slarivo Liquid Reveal

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

• Slarivo Flip Clock

  A flip clock UI that displays real-time or a countdown to a target date with smooth 3D flip digit animations, size and color variants.

• Slarivo Spokes Loader

  An animated spinning spokes loading indicator rendered as a self-contained SVG spinner.

• Slarivo Pendulum component

  Here is animated pendulum component

• Slarivo Shatterable Glass Card

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

• Slarivo Exploding Input

  Input component that spawns particle effects when typing.

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

  Here is Animated Keyboard component

• Slarivo LivingNebula

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

• Slarivo StarShockwaves

  A GPU-driven particle sculpture with shockwave pulses, theme switching, and cinematic bloom, built on Three.js and Tailwind.

• Slarivo Orbit Rotation

  An animated component that rotates customizable tech/brand icons in concentric dotted orbits around a center icon.

• Slarivo Ripple

  An animated SVG ripple loading spinner with expanding concentric circles that fade out, ideal for indicating loading or pending states.

• Slarivo Like Burst

  An animated like button with a heart-burst spark effect and optimistic count updates for social feeds.

• Slarivo Chromatic Lens

  The Chromatic Lens Effect is a high-performance React component that applies real-time, interactive distortions to images using WebGL. It features: Dynamic lens effects (pinch, fisheye, swirl, wobble) Chromatic aberration (RGB color separation) Smooth cursor tracking with configurable physics Drag-based smear effects Customizable tint & blur Built for Framer but compatible with any React environment

• Slarivo animation presence mode

  A reusable component for animation switch

• 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 Logo Trace Loader

  A compact reveal pattern: a self-contained SVG loader traces your logo's outline while work is in progress, then resolves into the filled logo mark when loading completes. A short dashed segment loops around a single continuous contour; when isComplete (or loading turns false) it closes the outline and fades in the filled compound shapes, calling onDone exactly once. Configurable size, stroke width, loop and fill-fade durations; colors follow currentColor; respects reduced motion with timeout fallbacks and a stable footprint.

• Slarivo Comet Spinner

  A rotating comet loading spinner with a bright head and sweeping tail for animated loading and throughput states.

• Slarivo Fade Arc

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

• Slarivo Morphing Infinity

  An animated SVG loading spinner that morphs a circle into an infinity shape and back in a continuous loop.

• Slarivo Snail Timer

  An animated countdown timer where a snail slowly crawls across the screen leaving a dust trail while the remaining seconds tick down.

• Slarivo Radial Animated Doodle

  Features: Fully customizable props: count: Number of animated circles (default: 100) size: Size in vmin units (default: 80) duration: Animation duration in seconds (default: 4) hue: Base hue for color rotation (default: 240) className: Additional CSS classes for styling Responsive design: Uses vmin units to maintain proportions across different screen sizes Performance optimized: Uses CSS custom properties and hardware-accelerated transforms Tailwind integration: Uses Tailwind classes where possible while maintaining the complex CSS animations Key Changes: Component structure: Created a reusable RadialAnimation component with props Tailwind classes: Used Tailwind for layout (flex, items-center, justify-center, etc.) and colors (bg-slate-900) Dynamic generation: Uses Array.from() to generate the circles programmatically

• Slarivo Electric Card

  A reusable UI component for a glowing, electric-style card with a turbulent border effect. It can be used to showcase content in a visually dynamic way.

• Slarivo Iridescent Foil

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

• Slarivo Split Line Path

  here is split line path component

• Slarivo Waveform

  An animated audio waveform visualizer with pulsing bars, glow, scanline overlay and corner brackets for playback and live-signal displays.

• Slarivo Magnetic Drawer

  A physics-based bottom drawer that can be dragged and snaps to configurable magnetic snap points with spring animation.

• Slarivo RewardCategories

  A customizable widget that displays reward categories as interactive artifacts, complete with hover animations and optional confetti celebration on click.

• Slarivo Path morphing

  This is s simple reusable Path morphing component

• Slarivo Shared Element Transition Dialog

  A dependency-free hold-to-delete dialog with shared-element transitions, native dialog semantics, Shadow DOM, and reduced-motion support.

• Slarivo Model Picker

  A dark cockpit-style model and reasoning-effort picker with a three-model matrix, five effort levels, and an animated ULTRA lever.

• Slarivo Concentric Ring

  A layered dual-ring loading spinner with a static outer guide ring and a rotating inner segment that inherits the current text color.

• Slarivo Clock 5 Icon

  An animated clock icon with rotating hands that plays on hover, view, or tap.

• Slarivo Ghost Reveal

  A soft, feathered image reveal for React. Instead of a fade or a hard wipe, a tall cloudy alpha mask slides across the element via animated mask-position, so content bleeds in through a ghostly, feathered edge — like the image is forming out of fog. Zero dependencies (React only). Scroll-triggered once via IntersectionObserver by default, or drive it yourself with a controlled `play` prop. Reveals from any direction (up, down, left, right) using vertical and horizontal feather masks with no element rotation (so nothing clips), tunable softness (scale/mask-size), duration and CSS easing, an onHidden callback for swapping the child exactly when nothing is visible, and a graceful opacity fallback under prefers-reduced-motion.

• Slarivo Fire Ball

  Fire ball mouse pointer action with props

• Slarivo Dash Ring

  An animated circular dash-ring spinner SVG that indicates loading or busy states.

• Slarivo Bars

  An animated bars loading indicator with a configurable number of wave-animated bars.

• Slarivo Hello Vietnamese Effect

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

• Slarivo Text Roll

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

• Slarivo ClickTriggerParticles

  An interactive particle burst effect when clicked. Generates multiple animated particles that radiate outward from the click position with customizable animations and automatic cleanup.

• Slarivo Wave

  An animated wave loading indicator built from bars that pulse vertically to signal a busy or loading state.

• Slarivo Particles

  A 3D interactive particle field rendered with three.js that reacts to mouse movement and supports customizable color, count, and size.

• Slarivo Click Power Up

  An animated button with sprung corner brackets, a diagonal patterned fill, and a power-up tap burst. On hover the brackets push outward and a fill panel arms; on tap it snaps to a teal charged state. Theme-aware via CSS vars, powered by Motion.

• Slarivo AI Message

  Chat message row for user and assistant turns, with copy, retry and vote actions that reveal on hover instead of crowding the bubble. Respects prefers-reduced-motion.

• Slarivo AI Suggestions

  Follow-up suggestion chips that stagger in after a reply and clear themselves once one is chosen. Respects prefers-reduced-motion.

• 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 Spinner Pixel Grid

  An animated pixel-grid loading spinner with 20+ motion variants, square or circle dots, optional neon glow and rainbow hue cycling.

• Slarivo Dot Matrix Loader

  A grid of dots that animate with ripple, wave, or rain patterns to indicate a loading state.

• Slarivo Typing

  An animated typing indicator with vertically bouncing dots that signals live input in chat, search, and collaborative editing surfaces.

• Slarivo Slot Headline

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

• Slarivo Liquid Connector

  A dependency-free SVG path-math component for a continuous liquid card-to-prompt peel interaction with keyboard and reduced-motion support.

• Slarivo IMG Reveals

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

• Slarivo AI Context Meter

  Context window meter whose ring fills and shifts hue at the warning threshold, never changing size. Hover for a token breakdown. Respects prefers-reduced-motion.

• 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 Agent Avatar

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

• Slarivo Glare Cards

  A premium, interactive dashboard component featuring dynamic 3D tilting, cursor-responsive radial glare, and animated data visualizations.

• Slarivo AI Tool Call

  Agent tool-call card that stays collapsed while running and expands to its arguments and result, with success, running and error states. Respects prefers-reduced-motion.

• Slarivo Cinematic Studio Switch

  A hyper-realistic toggle component featuring volumetric god rays, skeuomorphic metal textures, and spring-based physics.

• Slarivo AI Reasoning

  Collapsible model-reasoning trace that times itself while streaming and folds away once the answer lands. Respects prefers-reduced-motion.

• Slarivo AI Citation

  Inline citation pill that opens an origin-aware source card anchored to the pill you clicked, instead of a floating popover. Respects prefers-reduced-motion.

• Slarivo SVG Bands

  A collection of wide, viewBox-2400 SVG section bands and ornamental frame shapes—battlement, zigzag, staircase, steep hero edges, and chamfered panels—for decorating section headers, footers, and dividers.

• Slarivo AI Approval

  Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.

• Slarivo Reveal

  A wrapper that hides its content behind a frosted-glass face and reveals it with a 3D card flip on click.

• Slarivo AI Task List

  Agent plan checklist with nested subtasks and pending, running, done and failed states, each transitioning in place. Respects prefers-reduced-motion.

• Slarivo AI Loader

  Working indicator in dots, bar and grid variants with an optional elapsed timer, tuned so it reads as progress rather than noise. Respects prefers-reduced-motion.

• Slarivo AI Sources

  Collapsible source list for a grounded answer, with per-source snippets that expand in place rather than opening a dialog. 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 Great UI Terminal Loader

  A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.

• Slarivo Perlin Noise

  Classic animated 3D Perlin noise with exposed controls for octaves, persistence, lacunarity and more.

• Slarivo Typing Indicator

  Animated chat typing indicator with a bouncing three-dot bubble and a presence hook that tracks who is typing across one or many users, with a send hand-off and accessible live-region announcements.

• Slarivo Glow Effect

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

• Slarivo Line Chart

  Here is Line Chart component

• Slarivo Parallax Floating

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

• Slarivo Light Pull Theme Switcher

  Pull down to change theme

• Slarivo Party Popper

  A wrapper that fires a GSAP confetti burst of particles and streamers from any trigger element when it is clicked.

• Slarivo ClickTrigger

  An interactive card with click animation effects. When clicked, it displays animated rectangles forming a plus shape that slide outward from the click position and fade way.

• Slarivo CPU Architecture

  An animated CPU architecture diagram with flowing data paths and SVG animations.

• Slarivo Calculator

  A functional calculator with history and proper display formatting.

• Slarivo Neo-Brutalist Kinetic Deck

  A physics-based interactive card system featuring free-form dragging, realistic 3D flips, and a custom context menu. Built with Framer Motion and Tailwind CSS, it uses spring physics to create a tactile, "heavy" feel perfect for retro-modern portfolios or…

• Slarivo Orbs Morph

  Compact animated morph activity indicators for showing agent status without blocking the thread.

• Slarivo Smoky Button

  A WebGL-powered button with customizable, silk-like animated smoke.

• Slarivo Agent Wave Loader

  A loading indicator for AI agent work — a signal arcs across Claude Code, Codex, Gemini, DeepSeek and Kimi marks, lifting each as it passes. Respects prefers-reduced-motion.

• Slarivo Iso Fader

  Physics-driven iso fader with LED meter and digital readout for smooth, tactile level control.

• 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 Orbs Helix

  Compact animated helix activity indicators for showing agent status without blocking the thread.

• Slarivo Confetti

  A Confetti component for adding purposeful motion, feedback, and visual emphasis, featuring confetti, animation, particle, reaction.

• Slarivo Skeleton

  Spinner Loaders component from the 21st.dev community.

• Slarivo Animated Review Card

  A Animated Review Card component for presenting reviews, customer outcomes, and social proof, featuring testimonial card, testimonial-card, review, rating.

• Slarivo Reaction

  A Reaction component for adding purposeful motion, feedback, and visual emphasis, featuring reaction, emoji, click animation, click-animation.

• Slarivo Futuristic File Uploader

  This component has a distinctly futuristic, high-tech vibe with its dark theme, glowing accents, and sleek interface. It's practical and functional while also being visually impressive with a sci-fi aesthetic that would make it stand out in a competition.

• Slarivo Spiral Loader

  Two-phase Lottie spiral loader for streaming agents. Self-contained port from 21st.dev Agent Elements.

• Slarivo Dynamic Button

  An animated button that smoothly resizes its width to fit new content and crossfades its label and icon whenever the action or state changes. Built with motion/react, it uses a spring width transition, a coordinated vertical fade for content swaps, and an…

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo AI Response Text Generate Card

  An AI assistant chat card that animates its response with a word-by-word text-generate effect and regenerates on demand.

• Slarivo Orbs Ring

  Compact animated ring activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Ring

  Compact animated ring activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Ring

  Compact animated ring activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Lens

  Compact animated lens activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Lens

  Compact animated lens activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Lens

  Compact animated lens activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Lens

  Compact animated lens activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Lens

  Compact animated lens activity indicators for showing agent status without blocking the thread.

• Slarivo Starfield

  A Starfield component for adding purposeful motion, feedback, and visual emphasis.

• Slarivo Generative Art

  Generative node splitting, click to generate. Every generation is unique.

• Slarivo sss

  Animations & Effects component from the 21st.dev community.

• Slarivo Void Animation

  This component is fully customizable through props and compatible with modern React applications.

• Slarivo Triangles Falling

  Animated visual effect with floating, rotating triangles that look like they are being sucked into a black.

• Slarivo Network Animation

  A Network Animation component for adding purposeful motion, feedback, and visual emphasis, featuring pointer-responsive feedback.

• Slarivo Xenon component

  A Xenon component component for adding purposeful motion, feedback, and visual emphasis.

• 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 Material Design 3 Expressive Slider

  Material Design 3 Expressive Slider for Shadcn UI & Tailwind. Supports range/centered modes, clip-path icons, spring physics, and tooltips.

• Slarivo Orbs Helix

  Compact animated helix activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Morph

  Compact animated morph activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Helix

  Compact animated helix activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Helix

  Compact animated helix activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Morph

  Compact animated morph activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Morph

  Compact animated morph activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Helix

  Compact animated helix activity indicators for showing agent status without blocking the thread.

• Slarivo Xenon component

  A Xenon component component for adding purposeful motion, feedback, and visual emphasis.

• Slarivo Xenon component

  A Xenon component component for adding purposeful motion, feedback, and visual emphasis.

• Slarivo Sliding Ease

  A Sliding Ease component for adding purposeful motion, feedback, and visual emphasis, featuring animated transitions, pointer-responsive feedback.

• Slarivo Animated Leaves

  The component creates that beautiful expanding leaf animation effect with the blur filters and color mixing.

• Slarivo Xenon component

  A Xenon component component for adding purposeful motion, feedback, and visual emphasis.

• Slarivo Bloom

  A Bloom component for adding purposeful motion, feedback, and visual emphasis, featuring animated transitions.

• Slarivo Wave Text

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

• Slarivo Voxel Topography Grid

  An interactive, high-performance 3D canvas topography grid featuring dynamic wave math, smooth cursor physics, elevation shading, and zero-allocation frame optimization.

• Slarivo Voxel Matrix

  Dynamic 3D isometric heightmap grid oscillating with sine wave harmonics and interactive smooth mouse elevation fields.

• Slarivo Asther Anomaly

  An interactive 3D web experience built with three.js. It renders a rotating, semi-transparent crystalline structure illuminated by dynamic, orbiting lights. The scene includes a deep-space starfield that creates a parallax effect in response to the user's…

• Slarivo Interactive Fluid

  A compact pressure-projected fluid solver with velocity advection, colorful dye, and pointer or touch stirring.

• Slarivo Triangle LED Hero

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

• Slarivo Particles ocean

  A deep-water surface driven by a real inverse FFT. A Phillips spectrum evolves in frequency space, Stockham passes produce a displacement field, and half a million particles ride the waves through an HDR bloom chain.

• Slarivo AI Chat Input

  Interactive AI chat input component with animated diagnostics.

• Slarivo Singularity

  High-density orbital particle accretion disk simulation with Kepler velocity gradients, gravitational lensing, and pulse waves.

• Slarivo Quantum Swarm

  Interactive Fibonacci spiral particle swarm with dynamic constellation lines, pointer physics, and pulse shockwaves.

• Slarivo Quantum Cloud Loader

  A sleek, multi-colored particle loading animation featuring smooth, overlapping quantum-style orbits and glowing depth effects.

• Slarivo Wave Field

  Interactive wave field canvas with pointer influence, freeze/run control, and light/dark mode support.

• Slarivo Helix Chrono Matrix

  An immersive 3D topological fiber matrix with animated traveling nodes, interactive physics, and smooth topology morphing.

• Slarivo Hyperdimensional Voxel Cube

  An interactive, 3D animated voxel lattice with customizable grid density and smooth fluid wave dynamics.

• 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 Launch Button

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

• 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 Floating Dots CTA

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

• Slarivo Spinning Border Button

  A pill-shaped call-to-action button with a conic-gradient border beam that spins into view on hover.

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

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

• Slarivo Binaural Glow Feature Card

  Tarjeta de características para Next.js y Tailwind CSS con animación de luz binaural fluida en el borde, optimizada para dashboards y landing pages en modo oscuro.

• Slarivo Lip-scroll-zoomin-animation

  Lip scroll zoomin animation with GSAP video mask reveal.

• 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 Water Button

  Application where you want button with different feel than an normal.

• Slarivo Animated Drawer

  A bottom drawer built on vaul that smoothly animates its height as it transitions between multiple views, shown here as a crypto wallet settings panel.

• Slarivo Morphing Dialog

  A card that expands into a full-screen modal with a shared-layout morphing animation, opening its image and title into an expanded detail view.

• Slarivo Expand Menu

  An animated expanding menu that reveals action items from a trigger button, with configurable direction, layout, and alignment.

• Slarivo Switchboard Card

  A card with an animated light-grid illustration that renders random or patterned glowing dots above a title and subtitle.

• Slarivo Stacking Cards

  A scroll-driven stack of cards that pin and scale down on top of each other as the user scrolls, built with Motion.

• Slarivo Action Hint

  A particle emitter that shows an ephemeral action-feedback hint above an element and fades it out, for confirming actions like copy, save, or share.

• Slarivo Animate Table Motion

  A data table with staggered row reveal animations, user avatars, and colored category badges built with Framer Motion.

• Slarivo Tabs (Radix UI)

  Accessible tabs built on Radix UI with a spring-animated active underline and a blur-and-height motion transition between panels.

• Slarivo Social Selector

  An animated social platform selector that toggles between X, Bluesky, and Threads with a sliding pill and blur-transitioned handle link.

• Slarivo Loading-animation

  A Loading-animation component for communicating loading, processing, and waiting states, featuring loading, animated loader, animated-loader, dot particle.

• Slarivo Accordion

  An interactive Accordion component with smooth expand/collapse animations.

• Slarivo Animated Link

  An interactive link component supporting 13 premium hover variants including custom clipping masks, SVG sine waves, and text marquee animations.

• Slarivo Terminal Loader

  A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.

• Slarivo UFO Hero

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

• Slarivo Handwriting SVG

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

• Slarivo Swirling Spinner

  An animated SVG loading spinner with a swirling stroke-dash circle that spins and morphs continuously.

• Slarivo Energy Meter

  A segmented energy/power level meter with animated staggered fill, an animated percentage counter, and color-coded critical/warning states in a Tron-style HUD panel.

• Slarivo Quordix Work Hero

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

• Slarivo Follow pointer

  A Motion for React circle that follows the pointer with a soft spring, from the official Motion examples catalog.

• Slarivo Add to basket

  A Motion for React add-to-basket animation that flies a Campus 00s tile into a cart along a curved arc, from the official Motion examples catalog.

• Slarivo Animate Presence modes

  A Motion for React demo of AnimatePresence sync, wait, and popLayout modes, from the official Motion examples catalog.

• Slarivo Path drawing

  A Motion for React SVG path-drawing demo that springs circle, X, and rounded-rect strokes into view, from the official Motion examples catalog.

• Slarivo Loading jumping dots

  A Motion for React loading indicator with three dots that jump in a mirrored stagger, from the official Motion examples catalog.

• Slarivo Enter animation

  A Motion for React circle that springs in from opacity 0 and scale 0, from the official Motion examples catalog.

• Slarivo Loading pulse dots

  A Motion for React loading indicator with three dots that pulse in a reverse stagger, from the official Motion examples catalog.

• Slarivo Gestures

  A Motion for React square that scales up on hover and down on tap, from the official Motion examples catalog.

• Slarivo Drag constraints

  A Motion for React card dragged inside a parent constraint box with light elasticity, from the official Motion examples catalog.

• Slarivo Keyframes

  A Motion for React box that keyframe-animates scale, rotate, and border-radius in a loop, from the official Motion examples catalog.

• Slarivo Along path

  A Motion for React box that travels an SVG path while the stroke draws in, from the official Motion examples catalog.

• Slarivo Bounce easing

  A Motion for React vertical switch that springs on and bounces off, from the official Motion examples catalog.

• Slarivo Lamp

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

• Slarivo Kinetic Particle Fabric

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

• Slarivo Kinetic Matrix

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

• Slarivo Keyframes wildcards

  A Motion for React box that uses null wildcard keyframes on hover so scale can interrupt from the current value, from the official Motion examples catalog.

• Slarivo Reorder items

  A Motion for React layout animation that shuffles four colored squares every second with a spring, from the official Motion examples catalog.

• Slarivo CSS spring

  A Motion for React box that springs between positions with a CSS spring, from the official Motion examples catalog.

• Slarivo Drag: Lock direction

  A Motion for React box that locks drag to one axis, from the official Motion examples catalog.

• Slarivo Color interpolation

  A Motion for React demo comparing browser and Motion color interpolation, from the official Motion examples catalog.

• Slarivo Spinning 3D cube

  An example of using Motion for React's useAnimationFrame hook to animate a 3D cube.

• Slarivo Layout Anchor

  Control which point on a child element stays fixed during a parent's layout animation with layoutAnchor.

• Slarivo SVG viewBox

  A Motion for React SVG that springs its viewBox between a full map and a zoomed beacon, from the official Motion examples catalog.

• Slarivo usePresenceData

  An example of using usePresenceData to pass custom data through AnimatePresence to exiting elements.

• Slarivo Value transform & path drawing

  An example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.

• Slarivo Bobble hover

  A 3x3 grid of tiles that bobble with a spring when hovered, with the bounce scaled to how fast the pointer was moving, using Motion for React.

• Slarivo Headless Dialog

  A renderless, fully-managed dialog primitive with built-in accessibility and keyboard support and animated flip transitions, for building completely custom dialogs and alerts.

• Slarivo Gallery Modal Accordion

  An interactive image gallery where thumbnails expand accordion-style on hover and open into an animated fullscreen modal with title and description.

• Slarivo Collaborative Requests Dropdown

  An animated dropdown for reviewing collaboration requests with an avatar group trigger, per-user approve/reject actions, bulk approve/reject, and an all-caught-up empty state.

• Slarivo Base Collapsible

  An animated collapsible panel that smoothly expands and collapses its content with height and fade transitions when its trigger button is toggled.

• Slarivo Drill-down Submenu Dropdown

  An animated dropdown menu with drill-down nested submenus, search filtering, and directional slide transitions between panels.

• Slarivo Radix Collapsible

  An interactive panel that smoothly expands and collapses its content with a spring-like height and fade animation, built on Radix Collapsible and Motion.

• Slarivo LED Dot Matrix Display

  An LED dot matrix display component with SVG pixels, radial glow, built-in digit and animation presets, and a VU meter mode.

• Slarivo Animated Tabs

  Animated tabs component with a smooth sliding indicator, offering underline, pill, and segment variants with icon support and full keyboard navigation.

• Slarivo Text Animation

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

• Slarivo Stack Loader

  Stack-to-spread image intro loader with GSAP SplitText word animations and staggered image choreography. Reveals your own content underneath once it finishes.

• Slarivo Reveal Text

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

• Slarivo Token Flow

  A Token Flow component for adding purposeful motion, feedback, and visual emphasis, featuring animation, animated transitions, click and selection states, responsive behavior.

• Slarivo Primitive Calendar

  A styled date-picker calendar with animated month/day transitions, built for selecting single dates, ranges, or multiple dates in forms and date pickers.

• Slarivo Draggable Photo Stack

  An interactive draggable photo stack with tactile swipe physics, fan view, shuffle animation, fullscreen previews, and responsive touch controls.

• Slarivo Holo Card

  A holographic foil trading card you tilt with the pointer. The shine is a function of the viewing direction rather than a clock, so hold it still and the rainbow holds still; the colour bands along a diffraction grating the way real foil does, and the…

• Slarivo Kinetic Cyber Audio HUD

  Anime and cyberpunk kinetic HUD music visualizer with HTML5 2D canvas falling sakura petal physics, inertia lerp parallax cursor tracking, laser scanning aura, and audio player.

• Slarivo Shiny Button

  A Shiny Button component for calls to action, controls, and interactive commands, featuring button, css, cta, hover.

• Slarivo Numeric Tunnel

  A Numeric Tunnel component for communicating loading, processing, and waiting states, featuring animated loader, animated-loader, loader, loading animation.

• 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 Fox Mascot Sign In

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

• Slarivo Techstack

  A tilted, overlapping row of app icons that swells under the pointer, opens up to make room, and shares one tooltip that glides between them. Driven by pointer position, not hit-testing, so it never flickers.

• Slarivo Radial Burst

  Orbital revolution animation with cinematic frames revolving smoothly around the core.

• Slarivo Split Axis Convergence

  Adaptive split-axis multi-angle track convergence transforming into cinematic spatial perspective.

• Slarivo Dot Transition

  A Dot Transition component for adding purposeful motion, feedback, and visual emphasis, featuring responsive behavior.

• Slarivo Harmonic Wave

  Harmonic wave motion transforming into spatial cinematic choreography.

• Slarivo Information Drawer

  Team profile grid that opens a full-height detail drawer per member. GSAP-tweened slide + staged bio fade-in, native scroll lock, reduced-motion fallback.

• Slarivo Magnetic Liquid Button

  Tactile magnetic button with cursor physics spring, dynamic spotlight gradient, click ripple wave animations, and 6 aesthetic themes.

• Slarivo Curved Text Loop

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

• Slarivo Toggle Pricing Cards

  An animated pricing section where visitors switch between plan tiers with a segmented toggle and watch the plan card's price, description, and feature list transition smoothly.

• Slarivo Mechanical Keyboard

  A 3D mechanical keyboard you can actually play with.

• Slarivo Hover Expand Gallery

  A row of hairline-separated panels with vertical labels. Hover or tap one and it absorbs the free space to reveal its image while the rest stay rail-width; below 1024px the same list becomes a vertical accordion. Pure CSS flex-grow transition - no…

• Slarivo Milky Way

  A Milky Way component for adding purposeful motion, feedback, and visual emphasis, featuring pointer-responsive feedback, responsive behavior.

• Slarivo Kaleidoscope Symmetry

  Hypnotic animated kaleidoscope symmetry effect with light and dark mode support.

• Slarivo Magic Hour

  A scroll-scrubbed video hero. Scroll owns the timeline - nothing autoplays: progress maps to a target frame and a damped chase writes it to currentTime, with seeks serialized so fast flicks skim instead of queueing. Needs an all-keyframe (GOP 1) MP4.

• Slarivo Zero Melt Preloader

  A page gate with no enter button: a sheet of ice wipes down while a counter runs to zero, then you melt your way in by tracing a circle. Get the shape right and the screen blows out to white and lifts. Raw WebGL2, two fullscreen passes, no three.js.

• Slarivo Tier List Maker

  A polished drag-and-drop tier list builder. Rank avatars into S/A/B/C/D rows, rename and reorder tiers, add or remove rows, and drag anyone back to the bench. Custom pointer-based drag and drop, macOS-style dock magnification on the bench tray, ghost-slot…

• Slarivo Agent Trace

  Waterfall timeline for AI agent runs with a replay scrubber: drag the playhead and spans fill, statuses flip from queued to running to done, token counts tick up. Nested sub-agents, retries, errors. No chart library, keyboard-accessible, theme tokens.

• Slarivo Signature Pad

  Three ways to sign one document: draw with pressure-weighted strokes, type it, or upload a photo. All three hand back the same thing — a trimmed PNG, plus an SVG where the mark is vector. Saved signatures included. Part of Documents & Signing: layro.vercel.app.

• Slarivo Selection Bubble Menu

  A floating toolbar that springs up above any text selection, the pattern from Medium and Notion. Highlight text and format actions appear right where you are looking, follow the selection as you scroll, and flip below when there is no room above. Pressing…

• Slarivo Radio Group (Fluid Hover)

  An animated radio button group whose selection dot springs into place and whose rows light up with a fluid hover highlight that follows the cursor, built on the Base UI radio primitive.

• Slarivo Testimonials with Carousel

  A full-width testimonials section with an animated headline and an auto-advancing avatar carousel for showcasing customer feedback.

• Slarivo Spinning Circle

  An animated circular loading spinner with an optional loading message positioned around it, for indicating a pending or in-progress state.

• Slarivo Animated Dialog

  An accessible Radix dialog with motion-driven enter/exit choreography (scale, slide-up, or fade) that turns into a bottom sheet on mobile and keeps its header/footer pinned while the body scrolls.

• Slarivo Animated List

  A semantic list component whose items fade and slide in with a stagger, animate out cleanly on removal, and reorder smoothly via layout animation — for building live feeds, task lists, or activity logs.

• Slarivo Folder Card

  A folder tile with stacked file previews and a count. The silhouette is one path, so the notch and radii stay true at any size instead of drifting the way a rectangle-plus-tab does. Part of Documents & Signing: layro.vercel.app.

• Slarivo Builder OS Bento

  Animated developer command center with project activity, AI usage, build stack, deployment logs, uptime, collaborators, and current focus. Built with Framer Motion for subtle interactive motion.

• Slarivo Stack Spread

  A Stack Spread component for adding purposeful motion, feedback, and visual emphasis, featuring animation, animated transitions, drag interaction, pointer-responsive feedback.

• Slarivo Compose

  Premium message composer with @ mentions and / slash commands. A transparent textarea over a backdrop highlighter paints colored pills exactly behind matched tokens, with a caret-anchored, keyboard-navigable picker (DiceBear avatars for people, custom…

• Slarivo Integration Card

  An animated card that showcases connected app integrations, with pulsing SVG connector lines linking floating tool logos to a central brand mark, plus a title, description and CTA link.

• Slarivo Ripple Buttons

  A set of five click-triggered button variants (ripple, echo, sonar, ping, flash) that animate a wave or ring from the pointer position, respecting reduced-motion preferences.

• Slarivo FAQ Accordion Reveal

  A centered FAQ section with a pill badge, a word-by-word animated headline, and an accordion of bordered question cards that stagger into view and tint when opened.

• Slarivo Encrypt Button

  A button with a hover-triggered text scramble/decrypt animation and a laser sweep highlight, useful for security or crypto-themed actions like encrypting data.

• Slarivo Hero 12

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

• Slarivo Animated Upvote Toggle

  A Reddit/Product Hunt style upvote toggle button with a bouncing arrow icon and a sliding digit counter animation.

• Slarivo Motion Button

  An animated button with corner brackets and a sliding color panel that reacts to hover and tap/click, useful as an eye-catching call-to-action.

• Slarivo Magnetic Button

  A button that pulls toward the cursor and springs back on leave, used to add a playful hover interaction to CTAs and links.

• Slarivo Animated Verification OTP Input

  A 6-digit one-time-passcode input with an animated rotating particle-sphere avatar, glowing typing feedback per slot, and a success state shown once the code is complete.

• Slarivo Action Dropdown Button Group

  A split button group pairing a primary action button with an adjacent dropdown-trigger button that reveals related actions, complete with hover and open/close micro-animations.

• Slarivo Animated Upvote Button

  An upvote/like button with a ripple effect, upward-flying particles, and a sliding animated count that increments or decrements on click.

• Slarivo Gooey Input

  A search-style input field that expands from a round icon button into a text field using a gooey SVG filter and shared-layout animation.

• Slarivo Blind Pull Toggle

  A dark/light mode toggle styled as a window-blind pull cord, where clicking swings a cord to flip venetian-blind slats revealing the sun or moon icon.

• Slarivo Runway Loader

  An animated progress bar where a small airplane taxis along a runway track and takes off when it reaches 100%, useful for onboarding, file import, or deploy-pipeline loading states.

• Slarivo Coupon Reveal Button

  A button that peels back like a sticker to reveal a hidden coupon code, then copies the code to the clipboard on the next click.

• Slarivo Emoji Burst Button

  A like/react button that launches emoji particles which arc, collide with the button, and settle on top, using a lightweight canvas physics loop.

• Slarivo Feature Problem Cards

  A problem-framing feature section with a badge and serif headline above three animated cards, each showing an icon in a glowing orb with a title and short description.

• Slarivo Permissions Button

  An animated approve/reject button pair with icon micro-interactions, used for permission or access request actions.

• Slarivo Receipt Pricing

  Pricing section whose plans print like thermal receipts: monospace ledger with dot leaders, subtotal, months-free discount line, barcode, serrated edges. Switching monthly/yearly tears the slips off and reprints them. No animation library, theme tokens,…

• Slarivo Hover Stack

  A Hover Stack component for adding purposeful motion, feedback, and visual emphasis, featuring responsive behavior.

• Slarivo Masonry Lightbox

  Responsive masonry image gallery with smooth hover animations and an animated lightbox viewer.

• Slarivo Thumbnail Carousel

  A responsive image carousel with swipe gestures, smooth spring animations, autoplay, and clickable thumbnail navigation.

• Slarivo Type Testimonial

  Hover over an avatar to reveal a testimonial with a smooth typewriter animation and optional voice playback.

• Slarivo Flame Button

  A cursor reactive button with a warm flame glow that follows your mouse.

• Slarivo Adaptive Quality

  Start on a High pipeline and downgrade once to a cheaper Low pipeline when the GPU tier, battery level, or presented FPS say so. The tier swap is prepared off-screen and every signal is advisory.

• Slarivo Particle Orbit

  A shared-device vgpu + TypeGPU experiment: TypeGPU advances light-seeking dust through a radiance field rendered by vgpu, then vgpu draws the same particle buffer zero-copy alongside orbiting lights, HDR bloom, and a CRT finish.

• Slarivo Image Stack Carousel

  An interactive image stack carousel with layered cards, smooth swipe gestures, and fluid transitions. Perfect for portfolios, travel galleries, projects, and visual showcases.

• Slarivo Image Fan Carousel

  A modern image carousel with a stacked fan layout, smooth transitions, and navigation controls. Perfect for travel galleries, portfolios, projects, and visual showcases.

• Slarivo Grainient Images Section

  Stop flat image grids. Gradient tiles rush toward center on scroll, then the headline lands — a gallery with gravity. Preview live, paste into Cursor: https://design-layer.com/en/components/grainient-images-section — More motion that doesn't look like…

• Slarivo Liquid Glass Cursor

  A Liquid Glass Cursor component for adding purposeful motion, feedback, and visual emphasis, featuring animation, animated transitions, pointer-responsive feedback, responsive behavior.

• Slarivo Pixel Arc Loader

  Waiting shouldn't feel empty. A soft landscape behind an arched pixel logo that waves into place — a loader people actually remember. Preview live, paste into Cursor: https://design-layer.com/en/components/pixel-arc-loader — More motion that doesn't look…

• Slarivo Sparkles Title

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

• Slarivo Sparkles Title

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

• Slarivo Flip Card

  A 3D profile card that flips on hover or tap to reveal a bio, stats, and social links.

• Slarivo Product Card

  Animated ecommerce product card with image zoom on hover, pricing with discounts, star ratings, sale badges, wishlist, and an add-to-cart button with feedback animation.

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

  A full-viewport hero: a sheet of silk drifting toward the horizon, shaded by thin-film iridescence. The surface is a simplex-displaced plane with finite-difference normals and the colour is a fresnel-driven ramp - no textures, no environment map, no…

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

  Minimal link button with an animated underline and a rotating arrow icon; use it for inline text links and CTAs that need a bit of motion.

• Slarivo Prism Hero

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

• Slarivo Optimized Black Hole

  A multi-pass black hole that bakes relativistic ray traversal once into a G-buffer, then reuses it for animated disk shading, stars, antialiasing and HDR bloom.

• Slarivo Anti-Aliasing

  One high-contrast scene through Off, MSAA 4×, SSAA 2×, and FXAA — pick a mode and watch the edges.

• Slarivo Instanced Rendering

  One cube mesh + one instance stream, with 125,000 independently animated cubes.

• Slarivo Batch Rendering

  Four primitive ranges in one mesh, recorded once as a render bundle.

• Slarivo Aether Vortex

  Interactive 3D particle vortex canvas with customizable topologies, physics simulation, and smooth parallax dynamics.

• Slarivo Gallery

  A rotating 3D cylindrical image gallery built with three.js that displays a sequence of photos wrapping around an animated carousel.

• Slarivo Neon Sign

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

• Slarivo Action Swap Cascade

  Animated button whose label swaps letter-by-letter — the old text's characters roll away as the new ones drop in, left to right — ideal for copy/copied and other stateful action toggles.

• Slarivo Smooth Drawer

  An animated bottom drawer with spring-staggered content, a pricing block, and shimmer call-to-action button, ideal for upsell and paywall prompts.

• Slarivo Headless Tabs

  Accessible, fully customizable tab interface built on Headless UI with an animated active-tab highlight, focus management and keyboard navigation.

• Slarivo Skeleton shimmer

  A Motion profile card that shimmers for 2.5s then swaps to the loaded Follow card, rebuilt from the official AnimateView 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 Tabs Subtle

  Horizontal tab navigation with proximity-based hover, an animated pill selection indicator, and fluid variable-font-weight transitions, built on Radix Tabs. Ported from Fluid Functionalism by Micka Touillaud.

• Slarivo macOS Dock

  macOS-style magnifying dock: cursor distance drives a raised-cosine size wave across the icons, the hovered tool gets a hairline tooltip, a click bounces the icon off the tray floor, running apps keep a dot underneath, and a Cmd-K slot at the end opens a…

• Slarivo Spinning Circle

  An animated circular loading spinner with an optional loading message positioned around it, for indicating a pending or in-progress state.

• Slarivo Builder OS Bento

  Animated developer command center with project activity, AI usage, build stack, deployment logs, uptime, collaborators, and current focus. Built with Framer Motion for subtle interactive motion.

• Slarivo Shave Reveal Hero

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

• Slarivo Swap

  A component that swaps between two states with click or hover activation and fade, rotate, flip, or scale transitions.

• Slarivo Circular Progress

  A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.

• Slarivo Orbs Ring

  Compact animated ring activity indicators for showing agent status without blocking the thread.

• Slarivo Orbs Ring

  Compact animated ring activity indicators for showing agent status without blocking the thread.

• Slarivo Glass Fractal

  A beveled glass tetrahedron contains a morphing fractal mesh and liquid orb, combining screen-space transmission, studio reflections, soft material lighting and interactive controls.

• Slarivo Phone Scroll Hero

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

• Slarivo Voronoi

  A Voronoi component for adding purposeful motion, feedback, and visual emphasis, featuring pointer-responsive feedback.

• Slarivo Quantum Nebula

  A breathtaking Three.js particle system featuring 50,000 interactive particles with physics-based curl noise simulation and bloom post-processing. This advanced WebGL component creates a living, breathing nebula cloud that responds to mouse interaction…

• Slarivo Nucleus

  A Nucleus component for adding purposeful motion, feedback, and visual emphasis, featuring pointer-responsive feedback.

• Slarivo Anomalou Matter

  A Anomalou Matter component for adding purposeful motion, feedback, and visual emphasis, featuring animated transitions, pointer-responsive feedback.

• Slarivo Caustic Pool

  Shallow water you can stir, lit from above: a WebGL2 wave equation whose bright veins are the real caustics of its own surface. Zero dependencies, five presets, and it keeps moving when you leave it alone.

• Slarivo Interactive Blur Reveal

  WebGL2 fullscreen shader that keeps an image frosted by default and reveals a sharp version wherever the cursor trails, with animated film grain and a subtle vignette.

• Slarivo Home Hero Landing Scroll Animation

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

• Slarivo Spark Badge

  An animated canvas credential badge that dissolves and reforms out of luminous rain and curl-noise embers, for hero sections and background decoration.

• Slarivo Hero Carousel

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