Replaces one phrase with another in a soft, perspective-driven 3D turn.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/perspective-text-swap
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { PerspectiveTextSwap } from "@/components/nextui/perspective-text-swap";23export function HeroHeadline() {4return (5<h1 className="text-4xl font-medium tracking-tight">6<PerspectiveTextSwap7beforeText={"We design and build\nwebsites, brand systems,\nand digital products."}8afterText={"Whether you're launching\na product, rebuilding a\nbrand, or refreshing a site."}9/>10</h1>11);12}
| Prop | Type | Default | Description |
|---|---|---|---|
| beforeText | string | – | The phrase shown before the swap |
| afterText | string | – | The phrase shown after the swap |
| delay | number | 1.8 | Wait before the swap starts, in seconds |
| duration | number | 0.8 | Duration of each line's rotation, in seconds |
| stagger | number | 0.12 | Delay between each line's animation, in seconds |
| perspective | number | 1200 | Camera distance for the 3D turn, in pixels; lower is more dramatic |
| className | string | – | Extra classes applied to the animated text |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.