184 Components
Warp Text
TextCinematic sci-fi typography animation inspired by spaceship hyperspace jumps with directional motion blur, velocity scale stretch, and photonic light trail echoes.
HYPERSPACE DRIVE
Direction:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/warp-text.json"
Props
TypeScript props supported by <WarpText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "WARP SPEED" | Text content to animate through hyperspace warp. |
| direction | "forward" | "left" | "right" | "up" | "down" | "forward" | Directional trajectory of the warp acceleration. |
| speed | number | 1 | Speed multiplier for the warp acceleration. |
| duration | number | 1.1 | Base animation duration in seconds. |
| delay | number | 0 | Delay before the animation starts in seconds. |
| blur | boolean | true | Whether to apply directional motion blur during travel. |
| glow | boolean | true | Whether to render photonic bloom and glow highlights. |
| trail | boolean | true | Whether to render velocity motion trail echoes. |
| loop | boolean | false | Whether to cycle the warp animation continuously. |
| trigger | "mount" | "viewport" | "hover" | "manual" | "mount" | Condition that triggers the warp jump animation. |
| split | "character" | "word" | "line" | "character" | How text is partitioned for sequential stagger. |
| glowColor | string | "rgba(56, 189, 248, 0.75)" | Custom glow accent color. |
Key Features
- Cinematic directional acceleration supporting forward, left, right, up, and down warp trajectories.
- Integrated motion blur, photonic glow bloom, and trailing ghost echoes.
- Granular splitting control by character, word, or line with preserved whitespace boundaries.
- Continuous velocity loop mode and interactive trigger options (mount, viewport, hover).
- Screen-reader accessible: single accessible text label with aria-hidden animated tokens.
Keyboard & Accessibility
- Includes sr-only complete text phrase so screen readers read the sentence smoothly rather than spelling out characters.
- Fully respects prefers-reduced-motion by replacing high-speed blur/scaling with a gentle opacity fade.
- Non-layout shifting transforms ensure zero Cumulative Layout Shift (CLS).