Web Sling Button, animated React component

A call-to-action button on a dark stage where the cursor is a web-shooter. Click anywhere and a line of silk splats onto the button in a burst of flung fibres and glue; hold and pull and it drags and tilts the button on stretching silk beaded with glue knots. Let go and the line dangles and swings, and pull too far and it snaps and frays.

Free
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Click anywhere to shoot a web. Hold and pull. Pull too hard and it snaps.

Props

Prop	Type	Default	What it does
label	string	"Get started"	Text on the button.
onClick	() => void	—	Called when the button itself is clicked.
height	number	460	Height of the stage, in px.
snapAt	number	2.3	How far a line can be stretched, as a multiple of its length, before it snaps.
autoplay	boolean	false	A ghost shoots, pulls and snaps lines in a loop until a real pointer arrives. Pauses off screen and never runs under reduced motion.
className	string	—	Extra classes for the stage.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry
Run this once per project. It writes the Nexus UI entry into components.json for you:
```
npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"
```
Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.
3
Add the component
Run this from your project root. It adds the component, the helpers it imports and its npm packages.
```
npx shadcn@latest add @nexus-labs/web-sling-button
```
4
Check what was added
With a project made as in the Quick Start (a src/ folder), these files land in it:
components/
web-sling-button/
index.ts
web-sling-button.tsx
5
Copying by hand? Skip the registry
Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:
```
npm install framer-motion
```
Then show the source and create each file at the path it gives:

Use it in a page

Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

// src/app/page.tsx
import { WebSlingButton } from "@/components/web-sling-button";

export default function Page() {
  return (
    <main>
      <WebSlingButton />
    </main>
  );
}

Web Sling Button, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

More inputs & controls