Paper Plane Newsletter
Subscribe and the card folds into a paper plane that loops away on a dashed flight path.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The form folds away, a paper plane follows a CSS offset-path with automatic rotation while its trail draws, then the thank-you state rises in.
Installation
$ npx shadcn@latest add https://guetix.com/r/paper-plane-newsletter.json
Uses the shadcn CLI. It creates components/guetix/paper-plane-newsletter.tsx and installs nothing else.
Usage
example.tsx
import { PaperPlaneNewsletter } from "@/components/guetix/paper-plane-newsletter";
export default function Example() {
return <PaperPlaneNewsletter />;
}
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01offset-path + offset-rotate: auto makes the plane bank along the curve without JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / sub | string | — | Copy. |
| onSubscribe | (email) => Promise<void> | — | Your call. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Labelled input, validation alert, success status.