Modus UI

Pull Launch

Web (React)

A send button you can pull back like a slingshot and release.

A squircle pad in the primary colour stretches a band across a muted well, then fires a burst of particles when sent. Tapping or Enter sends too.

Pull back and release

Modus / Pull Launch

Installation

CLI

npx @modus-ui/cli add pull-launch

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/pull-launch.tsx.
  3. Paste the code.

Usage

tsx
import { PullLaunch } from "@/components/ui/pull-launch";

export default function Example() {
  return <PullLaunch />;
}

Props

PropTypeDefaultDescription
childrenany--
onSendany--
padColorstring"hsl(var(--primary))"-
iconColorstring"hsl(var(--primary-foreground))"-
accentColorstring"hsl(var(--primary))"-
wellColorstring"hsl(var(--muted))"-
bandColorstring"hsl(var(--muted-foreground))"-
sizenumber56-
strokeWidthnumber3-
armAtnumber48-
maxPullnumber160-
launchSpeednumber2600-
recoilnumber0.2-
flightnumber120-
particlesnumber14-
spreadnumber60-
axisstring"any"-
tapSendsbooleantrue-
disabledbooleanfalse-
ariaLabelstring"Send"-

Comments

  • No comments yet.