Browse components
Echo Text
A headline trailed by fading echo copies that lag behind it, drifting on a loop or chasing the pointer.
Installation
npx shadcn@latest add @glint-ui/echo-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/echo-text.json
Usage
import { EchoText } from "@/components/ui/echo-text";
<EchoText text="ECHO" mode="pointer" className="text-8xl font-black" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "ECHO" | Text to echo. |
| echoes | number | 7 | Number of trailing copies. |
| lag | number | 0.1 | How fast each echo catches up; lower is a longer trail. |
| mode | "loop" | "pointer" | "loop" | Drift on a loop, or follow the pointer. |
| amplitude | number | 60 | Maximum travel of the lead text, in px. |
| color | string | "#fafafa" | Lead text color. |
| echoColor | string | "#a3e635" | Echo color. |
| outline | boolean | true | Draw echoes as outlines instead of solid copies. |
| className | string | — | Extra classes for the root element. |