An interactive cursor effect that draws animated dashed lines with arrows from the mouse to target elements, perfect for guiding user attention.
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"23import { Button } from "@/components/ui/button"4import MouseStringConnection from "@/registry/landing-page/mouse-string-connection"56export function Component() {7 return (8 <div className="flex items-center justify-center min-h-screen">9 <MouseStringConnection10 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
Prop | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | Target element to connect cursor to (required) |
strokeColor | string | "hsl(var(--foreground) / 0.75)" | Color of the connection line |
strokeWidth | number | 1 | Width of the connection line in pixels |
dashArray | [number, number] | [10, 4] | Dash pattern for the line [dash, gap] |
maxOpacity | number | 0.75 | Maximum opacity of the connection line |
curveIntensity | number | 0.5 | Intensity of the curve (0 = straight, 1 = very curved) |
arrowSize | number | 10 | Size of the arrow head in pixels |
fadeDistance | number | 750 | Distance in pixels where line starts to fade |
disabled | boolean | false | Whether to disable the connection effect |
className | string | "" | Additional CSS classes for the wrapper |