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

"use client"
 
import { Button } from "@/components/ui/button"
import MouseStringConnection from "@/registry/landing-page/mouse-string-connection"
 
export function Component() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <MouseStringConnection
        strokeWidth={2}
        dashArray={[10, 4]}
        curveIntensity={0.5}
      >
        <Button size="lg">Get Started</Button>
      </MouseStringConnection>
    </div>
  )
}

API Reference

Props