SLARIVO / CURSORS

Cursors Components

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

• Slarivo Cursor

  An animated cursor component that follow the mouse pointer with smooth animations.

• Slarivo Cursor

  Cursors component from the 21st.dev community.

• Slarivo Cursor

  A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

• Slarivo Custom Cursor

  A smooth custom cursor that follows the pointer with spring physics and morphs into a larger ring when hovering interactive targets.

• Slarivo Cursor

  Here is advanced cursor component

• Slarivo Cursor

  A Fun Cursor Animation

• Slarivo Cursor Follower

  Here is smooth follower cursor componentt

• Slarivo Cursor Spotlight

  A container that dims its background and reveals a bright radial spotlight that follows the cursor on hover.

• Slarivo Custom Cursor

  Cursors component from the 21st.dev community.

• Slarivo tech-curosr

  stylish following tech cursor component for modern UIs, built with accessibility and animation in mind.

• Slarivo Input

  Upgaraded shadcn/ui Input

• 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 Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo The Infinite Grid

  Grid cursor infinity grid

• Slarivo Aether Flow Hero

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

• Slarivo Spotlight

  A dynamic spotlight effect component that follows cursor movement.

• Slarivo Spotlight

  A dynamic spotlight effect component that follows cursor movement.

• Slarivo Magnetic

  A magnetic effect for elements that allows them to be attracted to the mouse cursor.

• Slarivo Magnetic

  A magnetic effect for elements that allows them to be attracted to the mouse cursor.

• Slarivo Morphing Cursor

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

• Slarivo Pointer Highlight

  Here is Pointer Highlight component

• Slarivo useMouseVector

  A custom React hook that tracks mouse/touch movement and calculates motion vectors. Provides both position coordinates and movement vectors relative to a container or the window.

• Slarivo Inverted Cursor

  A smooth, customizable React cursor component that replaces the native cursor with a circular, inverted color cursor. It smoothly follows the mouse pointer, hides when the cursor leaves the viewport, and supports adjustable size via props. Built with TypeScript, React hooks, and CSS blend modes for a modern interactive UI effect.

• Slarivo HoverPeek Link Preview

  An interactive link preview component. Displays a preview card on hover, supporting dynamic website screenshots . Features smooth animations (card flip, optional mouse follow) and magnifying lens effect for inspecting the preview content.

• Slarivo Text Cursor Proximity

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

• Slarivo Tubes Curor

  A fullscreen WebGL cursor animation built with Three.js that renders animated colorful tube trails and reactive lights; click to randomize tube and light colors. Ideal as an interactive hero background or pointer effect for landing pages and portfolios

• Slarivo Services with Animated Hover Modal

  A responsive services component that displays a list of offerings. On hover, a modal follows the cursor, revealing project images with smooth scaling and transition effects. Built with GSAP for cursor‑following animations and Framer Motion for scale transitions.

• Slarivo Typewriter

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

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo TubeCursor

  An interactive background component that renders glowing animated tubes powered by Three.js. Designed for Next.js + React, it features customizable tube colors, light palettes, intensity, and text overlays. Includes an option to randomize colors on click for a dynamic user experience.

• Slarivo Spotlight Card

  advanced React component designed to create an engaging and modern card interface. It features a unique spotlight glow effect that intelligently tracks the mouse pointer across the screen, highlighting the card with a configurable hue. Part of the EaseMize UI library, it supports several preset glow colors, predefined responsive sizes ('sm', 'md', 'lg'), and allows for completely custom dimensions via width, height, or className props. The underlying CSS leverages custom properties for a highly dynamic and performant visual effect.

• Slarivo Parallax Floating

  A component that creates a parallax floating effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

• Slarivo Nav Header

  This is a modern, interactive navigation header component built with React, TypeScript, and Framer Motion. Here's a breakdown of its functionality and design: 1. **Main Features**: - An animated navigation menu with a sliding cursor effect - Hover interactions that move a black background pill behind menu items - Mix-blend-difference effect that makes text appear white over the black background - Responsive design with different sizes for mobile/desktop - Rounded pill-style container with a border 2. **Component Structure**: - `Header`: The main component that manages position state - `Tab`: A subcomponent for individual menu items - `Cursor`: An animated motion component that slides behind the active tab 3. **Technical Implementation**: - Uses Framer Motion for smooth animations - Implements mouse event handlers for interactive effects - Uses refs to measure and position elements - Responsive styling with Tailwind CSS - Client-side component (marked with "use client")

• Slarivo Pixel Trail

  You can customize the individual pixels by passing a pixelClassName prop. 1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them as you move your cursor. Each pixel is represented by a single div element, so perf may be impacted when using a large number of pixels, especially on the first render. 2. Keep the z-index of the effect's container lower than the rest of your content, so the pointer-events will captured by all of your other elements.

• Slarivo useMousePositionRef

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

• Slarivo Project Showcase

  A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.

• Slarivo Image Trail

  A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

• Slarivo Ink Reveal

  A canvas overlay that lets users brush away a colored mask to reveal content underneath. Mouse movement creates organic, wobbly ink stamps that expand and fade, producing a natural paint-stroke feel. Fully customizable — control brush size, mask color, lifetime, wobble, and more.

• Slarivo Cursor

  A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

• Slarivo Fluid Magnetic Cursor

  Magnetic Cursor - Interactive Physics-Based Cursor A highly interactive cursor component built with React, GSAP, and Vecteur. Unlike standard cursors, this uses a spring-physics model for true magnetic resistance and smooth blob-like morphing. It solves common accessibility issues with a smart contrast filter that ensures the cursor never washes out text, even on low-contrast backgrounds. ✨ Key Features: True Spring Physics: Elastic magnetic attraction that feels "alive" (no linear drifting). Smart Contrast: Auto-applies backdrop-filter: contrast() to make text legible in exclusion mode. Gooey Detachment: Smooth, velocity-based morphing when pulling away from elements. Zero-Layout-Shift: Locks to element centers prevents "padding drift." Particle Effects: satisfying explosion effects on click. Production Ready: Touch detection, Reduced Motion support, and TypeScript. 🎯 Perfect for: High-end portfolios, SaaS landing pages, and agency websites requiring agency-grade micro-interactions. 📦 Stack: React, GSAP, Vecteur, Tailwind CSS.

• Slarivo useMousePosition

  Hooks component from the 21st.dev community.

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Pointer

  A component that displays a pointer when hovering over an element

• Slarivo Interactive Hover Links

  Interactive hover links with fluid cursor tracking, animated typography, and floating preview images.

• Slarivo Spotlight Cursor

  Here is spotlight cursor effect

• Slarivo Cloud Watch Form

  This Interactive Cartoon Form component is a playful, engaging form built with Next.js, TypeScript, and Shadcn UI. It features a cartoon face whose eyes follow the user’s cursor, creating a sense of interactivity and liveliness. The eyes naturally blink periodically, enhancing the realistic feel of the animation. When the user focuses on the password field, the eyes “close” to mimic privacy, represented by a black line, and reopen once typing is done. The form itself uses Shadcn UI components for inputs, labels, and buttons, and is set against a stylish semi-transparent, blurred background, giving it a modern “glass” effect. This combination of animation and UI design makes filling out the form a fun, visually appealing experience while remaining fully functional.

• Slarivo Kinetic Team Hybrid

  A responsive, Framer Motion–powered team roster featuring a global cursor-follow preview on desktop and tap-to-expand accordion images on mobile for a cinematic talent showcase.

• Slarivo Liquid Glass

  Here is Liquid Glass component

• Slarivo Image Cursor Trail

  A unique interactive component

• 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 Pixel Trail

  A beautiful smooth cursor pixel trail effect.

• Slarivo Elastic Line

  A wobbly svg line with a spring cursor interaction. This component is made with a simple svg quadratic curve, with 2+1 points. The start and end points of the curve positioned at the two edges of the parent container, either horizontally or vertically, depending on the isVertical prop. This means, the line will always be centered in the container, and it will always fill up the entire container, so make sure to position your container properly. The third point of the line is the control point, named Q, which is positioned at the center of the container by default. When the cursor moves close to the line (within grabThreshold), the control point will be controlled by the cursor's position. When the distance between them is greater than the releaseThreshold prop, the control point is animated back to the center of the container, with the help of motion's animate function. For better readability — the calculation of the control point's position, and the signal it's grabbed — done in a separate hook, called useElasticLineEvents. To achiave the elastic effect we use a springy transition by default, but feel free to experiment with other type of animations, easings, durations, etc. The compoment also have an animateInTransition prop, which is used when the line is initially rendered. If you want to skip this, just set the transiton's duration to 0.

• Slarivo Mouse Following Eyes

  Animated eyes that follow the mouse cursor.

• Slarivo Particle Animation

  Interactive particle animation with mouse tracking, gooey SVG effects, and animated text. Features a custom cursor that emits particles on movement, creating a dynamic mask reveal effect with scaling typography.

• Slarivo Variable Font And Cursor

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

• Slarivo Backed By YC

  A sleek glassmorphism “Backed by YC” pill with a subtle moving glow that follows the cursor—ready to drop straight into landing pages

• Slarivo SVG Follower

  the SVG Follower component to the main page with a nice centered layout and updated the color palette to use modern hex colors.

• Slarivo Spider Cursor

  Spider Cursor

• Slarivo Mouse trail

  Interactive GSAP-powered flair trail that spawns floating images along the cursor path for playful motion graphics effects.

• Slarivo Cursor Follow

  A cursor-follow component that displays context-sensitive text when hovering over elements. Demo shows two images with different hover texts.

• Slarivo Magic Cursor

  The Magical Mouse component creates a magical mouse effect. It supports hover effects, color changes, and pixel shape customization.

• Slarivo SVG Mask Effect

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

• Slarivo Interactive 3D Character

  An interactive 3D character built with Zdog.js and GSAP. It follows the mouse cursor and features idle animations like breathing and looking around.

• Slarivo Image Reveal

  A responsive image hover component that creates a smooth circular reveal effect with a blurred overlay mask that follows the mouse cursor.

• Slarivo Interactive Light

  he component replicates the original behavior: the lamp follows your mouse cursor with a glowing effect, includes the grid background with radial highlight, supports

• Slarivo Image Spotlight

  A React TypeScript component that creates an engaging spotlight effect on images.. The image appears blurred by default, but reveals sharp details in a circular area that follows the user's mouse cursor. Includes subtle 3D perspective transforms for enhanced visual appeal.

• Slarivo Smooth Cursor

  Here is Smooth Cursor component

• Slarivo Mouse follow animations

  Here is mouse follow animations

• Slarivo Liquid Cursor

  Here is Liquid Cursor component

• Slarivo Custom Cursor

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

• Slarivo Draw With Cursor

  A React component that adds an interactive drawing effect following the user's mouse cursor within a specified area.

• Slarivo Cursor Dither Trail

  A fluid, single-colour dither tail that follows the cursor. 100 % canvas-based, zero dependencies, fully customizable (colour, dot size, fade speed). Perfect for splash pages, hero sections, the pixel art retro feel or playful engagement.

• Slarivo Spotlight Background

  This component creates a smooth circular spotlight effect that dynamically follows the user’s cursor. Unlike scattered or fuzzy glow effects, this version uses a clean radial gradient to form a crisp yet soft circle that expands and contracts based on cursor movement. When the cursor is in motion, the circle becomes slightly smaller, and when idle, it gently grows larger, creating a natural breathing-like interaction. The effect provides a modern and elegant way to bring focus and interactivity to any page background, making it suitable for both dark and light themes. It’s lightweight, reusable, and ideal for hero sections, portfolios, or interactive landing pages where subtle motion enhances the user experience without overwhelming the content.

• Slarivo Tidal Cursor

  Fun Reactive Cursor

• Slarivo CrystalTrailBackground

  A full-screen, canvas-driven background where crystalline polygons sprout along the cursor’s path and fade over time. Built with React, it translates mouse speed into shimmering crystal bursts—ideal for ambient hero sections, generative art showcases, or interactive UI overlays.

• Slarivo Mouse Spark

  The MouseSpark component is a visually appealing, interactive cursor particle effect for web applications. It automatically adjusts to light and dark themes, seamlessly blending with white or black backgrounds. When the user moves their mouse, colorful particles are spawned at the cursor position, leaving smooth, fading trails that create a dynamic, sparkling effect. The component is fully responsive, covering the entire viewport and adapting to window resizing, while remaining non-intrusive with pointer-events disabled so it doesn’t interfere with user interactions. Designed for elegance and performance, it continuously removes old particles to ensure smooth animation, providing a modern and engaging visual enhancement for websites or applications without requiring any props or configuration.

• Slarivo LivingVineBackground

  A full-screen, interactive vine simulation that traces the mouse path and autonomously sprouts tendril branches. Built on HTML canvas, this generative art piece evokes organic growth patterns and evolving motion. Ideal for hero backgrounds, ambient UI overlays, or digital art installations.

• Slarivo Pixel Cursor

  A cursor trailing component that has a pixelated effect

• Slarivo Arrow Cursor

  Here is arrow cursor demo component

• Slarivo Cursor Gradient

  Here is gradient cursor effect

• Slarivo Eye Tracking

  A pair of animated eyes whose pupils follow the cursor, with blink, dilation and realistic, cartoon, minimal and cyber style variants.

• Slarivo Variable Font Proximity Hero

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

• Slarivo GlitchCursor

  A full-screen, canvas-powered glitch field that reacts to user input. Mouse movement spawns drifting glitch blocks in cyan/blue tones, and clicking unleashes a full-screen scanline data corruption effect. Perfect for cyberpunk and digital-art hero backgrounds or immersive UI overlays.

• Slarivo CrystalCursor

  An interactive canvas-driven background where crystalline structures sprout and extend toward the mouse pointer. Clicking triggers a dynamic shatter effect, bursting crystals into particles for a fractal animation. Perfect for immersive hero sections, ambient overlays, or generative art pieces.

• Slarivo Pixel Canvas

  An interactive pixel grid on a canvas that lights up around the cursor and leaves a smooth, color-shifting trail that decays over time.

• Slarivo Cursor Overlay

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

• Slarivo Typewriter

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

• Slarivo Color Picker

  The component features a full-screen canvas with a rainbow gradient overlay, displays the hex color value that follows your mouse cursor, and shows a notification when you click to copy a color to your clipboard.

• Slarivo Liquid Cursor

  Pointer-following liquid cursor effect: a fixed full-screen canvas overlay paints colored particles along the mouse path and runs them through an SVG gooey filter for a smooth, blob-like trail.

• Slarivo Customer Experience

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

• Slarivo Torch Reveal

  A cursor-tracked torch that wipes a hidden layer into view through a soft mask — hover to light up the surface underneath.

• Slarivo Lens Card

  A magnifying lens that follows the cursor across a live surface, with chromatic fringing and grid bend at the rim — then drifts on its own when you leave.

• Slarivo Momentum lines

  Momentum Lines is an interactive visual component that brings fluidity to cursor movement. As you move your cursor, vertical lines gently follow along with a soft, gliding motion — like they're catching up with just the right amount of momentum.

• Slarivo Text Cursor Proximity Scale

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

• Slarivo Inverted Cursor

  A custom cursor component with color inversion effect using mix-blend-mode.

• Slarivo Holographic Wall

  An interactive black wall of Pharaonic hieroglyphs that glow golden and scale up around a radial light following the cursor.

• Slarivo Parallax Floating Symbols

  Abstract symbols that drift at different depths and follow the cursor for a layered parallax hover effect.

• Slarivo Sentinel Core Eye

  An interactive, cybernetic eye that tracks your cursor's movement across the screen. It features a dynamic iris, a periodic blinking animation, and glowing circuit details to create a high-tech, futuristic interface.

• Slarivo HalftoneTrail

  HilftoneTrail component

• Slarivo Image Trail

  A cursor trail that spawns and cycles through a configurable image array as you move the pointer, with fade-blur transitions and an optional magnetic repulsion effect.

• Slarivo Fluid Cursor Trail

  Canvas particle trail that follows the cursor as a fixed overlay, with customizable color, particle count, and physics.

• Slarivo Cursor Trail

  A cursor trail effect that spawns and animates a stream of images interpolated along the mouse movement path.

• Slarivo Cursor Image Trail

  An interactive effect that spawns a trail of images or icons following the cursor with spring-physics fade, scale, and rotation.

• Slarivo AI Streaming Text

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

• Slarivo Image Mouse Trail

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

• Slarivo Magnet Lines

  An interactive grid of lines that rotate to point toward the cursor, creating a magnetic field effect.

• 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 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 Fluid Canvas

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

• Slarivo Fire Ball

  Fire ball mouse pointer action with props

• Slarivo Floating Tooltip

  A cursor-following tooltip that floats near the pointer with springy motion, supporting a title, description, and style variants.

• Slarivo Cursor: Adaptive caret size

  A Motion for React custom cursor that adapts its caret size to hovered text, from the official Motion examples catalog.

• Slarivo Cursor: Multi-follow

  A Motion for React multi-follow cursor with stacked rings at different springs, from the official Motion examples catalog.

• Slarivo Cursor: Custom content

  A Motion for React cursor that swaps in custom content over a hover zone, from the official Motion examples catalog.

• Slarivo Cursor: Floating target

  A Motion for React floating target that drifts away from the pointer, from the official Motion examples catalog.

• Slarivo Variable Font Proximity Nav

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

• Slarivo Variable Font Cursor Proximity Dual

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

• Slarivo 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 Flame Button

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