Warp CTA
The final CTA in deep space: hover the button and the stars stretch into warp; click to jump.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A canvas starfield with perspective projection. Speed eases toward a target, and each streak runs from a star's previous position to its current one, so warp looks right at any speed.
Installation
$ npx shadcn@latest add https://guetix.com/r/warp-cta.json
Uses the shadcn CLI. It creates components/guetix/warp-cta.tsx and installs nothing else.
Usage
example.tsx
import { WarpCta } from "@/components/guetix/warp-cta";
export default function Example() {
return <WarpCta />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / sub / cta | string | — | Copy. |
| onClick | () => void | — | CTA handler. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The canvas is decorative; keyboard focus also triggers warp; reduced motion shows static stars.