ComponentsLight
Ember text
Letters land hot and cool down to the text color.
Installation
$ npx shadcn@latest add @textlab/ember-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { EmberText } from "@/components/textlab/ember-text/ember-text";
<EmberText as="h2" text="Forged in fire" />Variants
embersteeliceProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "ember" | "steel" | "ice" | "ember" | White-hot to red, blue-white steel, or cyan frost. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| stagger | number | 0.045 | Seconds between parts. |
| duration | number | 1.6 | Seconds a letter takes to cool. |
| 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
- Titles for craft, hardware and energy brands.
- Dark sections where warmth should arrive with the words.
Skip it
- Light backgrounds with the ice variant; the frost disappears.
- Paragraphs.
Accessibility and motion
Accessibility
- The glow is a decorative copy; the title is read once.
- The settled color is the inherited text color, so contrast is unchanged.
Motion
- Each letter settles a short drop with a long-tailed ease-out.
- Heat fades through four stops over 1.6 s, brightest right as it lands.
Reduced motion. The title appears in its normal color.
Performance
- Two motion spans per letter; nothing runs after the last one cools.