Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Mouse String Connection
Mouse String Connection

An interactive cursor effect that draws animated dashed lines with arrows from the mouse to target elements, perfect for guiding user attention.

10 views
3 downloads
Loading...
Desktop Only

This component only works on desktop devices with a mouse cursor. The effect is automatically disabled on mobile and touch devices.

Overview

The Mouse String Connection component creates an engaging visual connection between the user's cursor and important interface elements, making it perfect for guiding attention to call-to-action buttons and key features. It enhances user experience with smooth animations and customizable styling, helping reduce cognitive load and improve conversion rates. Essential for landing pages and interactive demonstrations where directing user focus is critical.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/mouse-string-connection.json

Usage

1"use client"
2
3import { Button } from "@/components/ui/button"
4import MouseStringConnection from "@/registry/landing-page/mouse-string-connection"
5
6export function Component() {
7 return (
8 <div className="flex items-center justify-center min-h-screen">
9 <MouseStringConnection
10 strokeWidth={2}
11 dashArray={[10, 4]}
12 curveIntensity={0.5}
13 >
14 <Button size="lg">Get Started</Button>
15 </MouseStringConnection>
16 </div>
17 )
18}

API Reference

Props

PropTypeDefaultDescription
childrenReactNode-Target element to connect cursor to (required)
strokeColorstring"hsl(var(--foreground) / 0.75)"Color of the connection line
strokeWidthnumber1Width of the connection line in pixels
dashArray[number, number][10, 4]Dash pattern for the line [dash, gap]
maxOpacitynumber0.75Maximum opacity of the connection line
curveIntensitynumber0.5Intensity of the curve (0 = straight, 1 = very curved)
arrowSizenumber10Size of the arrow head in pixels
fadeDistancenumber750Distance in pixels where line starts to fade
disabledbooleanfalseWhether to disable the connection effect
classNamestring""Additional CSS classes for the wrapper