ComponentsKinetic
Echo text
Every change leaves fading echoes behind.
Installation
$ npx shadcn@latest add @textlab/echo-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { EchoText } from "@/components/textlab/echo-text/echo-text";
<EchoText text={status} variant="ghost" />Variants
trailghostProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "trail" | "ghost" | "trail" | A row of offset copies that fade in sequence, or a single bloom outward. |
| echoes | number | 4 | Copies per change, for trail. |
| live | boolean | true | Announce changes politely. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Status words, scores and mode labels where the change matters.
- Expressive headlines that cycle.
Skip it
- Values that change many times a second; echoes pile up.
- Dense UI where trailing copies would overlap neighbours.
Accessibility and motion
Accessibility
- The new text is announced politely; echoes are aria-hidden.
- Echoes never block pointer events.
Motion
- Echoes drift down and right, each a beat behind the last, and fade over about 0.7 s.
- Only the last three changes keep echoes, so rapid updates stay clean.
Reduced motion. The text swaps in place with no echoes.
Performance
- A few short-lived motion spans per change, removed when they finish.