Text with trailing echo copies that stagger in, fade out with distance and breathe slowly. Hover or focus spreads them apart.
Hover to spread the echo
npx shadcn@latest add https://hyperblur.dev/r/text-echo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-echo.tsx.
import { TextEcho } from "@/components/hyperblur/text-echo"
<TextEcho className="text-6xl font-bold">Delay</TextEcho>| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The text to repeat. |
| echoes | number | 5 | Number of trailing copies, from 1 to 12. |
| distance | number | 7 | Pixel offset between consecutive copies. |
| angle | number | 35 | Direction of the trail in degrees. 0 points right, 90 points down. |
| fade | number | 0.75 | Opacity of the nearest echo. Farther copies fade from it. |
| spread | number | 2.2 | Multiplier applied to the distance on hover and focus. |
| stagger | number | 80 | Delay between echoes when they appear, in milliseconds. |
| variant | "solid" | "outline" | "outline" | Whether echoes are filled or only outlined. |
| accent | string | "#2f7bff" | Color of the echoes. |