Slingshot Send, animated React component

A chat composer whose send button is a slingshot: pull the stone back to stretch the bands and let go, and your message flies along an arc and lands in the thread with a squash. Enter in the field, or Enter or Space on the focused stone, still sends it.

Pro
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.

MayaOnline

Are we still on for tonight?

Yes! Where do you want to go?

That ramen place on 5th?

Props

Prop	Type	Default	What it does
name	string	"Maya"	Name in the thread header; its first letter is the avatar.
onSend	(text: string) => void	—	Called with the trimmed text when a message is fired. Nothing is ever sent over the network by the component.
autoReply	boolean	true	Adds a canned reply from the other person about a second after each message lands.
autoplay	boolean	false	Types, pulls back and fires messages by itself until someone touches the component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/slingshot-send
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
slingshot-send/
index.ts
slingshot-send.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { SlingshotSend } from "@/components/slingshot-send";

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

Slingshot Send, animated React component

Play with it

Props

More inputs & controls