Filament Text
Type that switches on like a filament. Each glyph goes white-hot in a quick left-to-right stagger, then cools through the accent ramp to the text colour, its temperature on a critically damped spring.
$149 once · every Pro piece
Customize
visible
mount
manual
last
none
Afterwards only one glyph stays alight, the final full stop by default, breathing slowly; hovering a word switches it on again. Plays on mount, the first time it is in view, or on demand, and takes several lines. The text is read once by screen readers.
Install
npx shadcn@latest add @obsyde/filament-textNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { FilamentText } from '@/components/obsyde/ember/filament-text/FilamentText';
export function Example() {
return (
<FilamentText text="Switched on once." />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/filament-text/FilamentText.tsxcomponentember/filament-text/filament-text-demo.cssstylesember/filament-text/filament-text.cssstylesember/filament-text/FilamentTextDemo.tsxdemoember/effects-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
textText | string | 'Switched on once.' |
triggerTrigger | 'visible' | 'mount' | 'manual' | 'visible' |
sizeSize (px) | number | 72 |
weightWeight | number | 600 |
staggerStagger (ms) | number | 25 |
coolingCooling (ms) | number | 1200 |
emberEmber glyph | 'last' | 'none' | 'last' |
hoverRelightRelight on hover | boolean | true |