Echo Text
Free
A headline with trailing copies that fade out behind it, breathe in a slow loop and swing toward the pointer.
Say it again
Move the pointer around the text
Customize
4
8px
Direction
Outline echoes
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/echo-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/echo-text.tsx.
Usage
import { EchoText } from "@/components/ui/echo-text";
<EchoText text="Say it again" count={4} direction="down-right" className="text-7xl font-black uppercase" />Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. |
| count | number | 4 | Number of trailing copies. |
| offset | number | 8 | Pixels between one echo and the next. |
| direction | "up" | "down" | "left" | "right" | "up-left" | "up-right" | "down-left" | "down-right" | "down-right" | Where the echoes trail at rest. |
| colors | string[] | ["#ff784f", "#ffc24a"] | Echo colors, used in turn from the nearest echo outward. |
| variant | "solid" | "outline" | "outline" | Solid copies or outlined ones. |
| speed | number | 3 | Seconds for one breath in and out. |
| followPointer | boolean | true | On hover, the echoes swing toward the pointer. |
| className | string | — | Extra classes for the headline. |
Dependencies: motion