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
Installation
CLI
npx @modus-ui/cli add pull-launchManual
- Copy the code from the component tab.
- Create a file at
components/ui/pull-launch.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | any | - | - |
| onSend | any | - | - |
| padColor | string | "hsl(var(--primary))" | - |
| iconColor | string | "hsl(var(--primary-foreground))" | - |
| accentColor | string | "hsl(var(--primary))" | - |
| wellColor | string | "hsl(var(--muted))" | - |
| bandColor | string | "hsl(var(--muted-foreground))" | - |
| size | number | 56 | - |
| strokeWidth | number | 3 | - |
| armAt | number | 48 | - |
| maxPull | number | 160 | - |
| launchSpeed | number | 2600 | - |
| recoil | number | 0.2 | - |
| flight | number | 120 | - |
| particles | number | 14 | - |
| spread | number | 60 | - |
| axis | string | "any" | - |
| tapSends | boolean | true | - |
| disabled | boolean | false | - |
| ariaLabel | string | "Send" | - |
Comments