Pluckable String

Installation

npx kinetic-ui-cli@latest add pluckable-string

How It Works

The PluckableString is an incredibly satisfying micro-interaction. It uses framer-motion to track the relative Y coordinate of your mouse as it drags across a container. We map this Y coordinate directly into the control point of an SVG Quadratic Bezier Curve (Q). When the mouse leaves the container, the Y coordinate is snapped back to the center using a spring configuration with extremely low damping, causing the control point to rapidly oscillate and simulate a vibrating string.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { PluckableString } from "@/components/creative/pluckable-string";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { PluckableString } from "@/components/creative/pluckable-string";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <PluckableString
        strokeWidth{10}
        strokeColor="example"
      />
    </div>
  );
}