Molten Text
Display type filled with slowly flowing metal.
$149 once · every Pro piece
Customize
A WebGL shader reads the glyphs from a texture with two blurred copies for a rounded bevel, reflects a striped environment through it as dark chrome, and runs a narrow hot core band through the letters from a drifting noise field. Moving the pointer stirs a swirl into the flow; without WebGL the text keeps a static metal gradient with one thin hot line.
Install
npx shadcn@latest add @obsyde/molten-textNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { MoltenText } from '@/components/obsyde/ember/molten-text/MoltenText';
export function Example() {
return (
<MoltenText text="Molten" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/molten-text/MoltenText.tsxcomponentember/molten-text/molten-text-demo.cssstylesember/molten-text/molten-text.cssstylesember/molten-text/MoltenTextDemo.tsxdemoember/type-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
textText | string | 'Molten' |
heatHeat | number | 0.45 |
speedFlow speed | number | 1 |
sizeSize (px) | number | 148 |
weightWeight | number | 800 |
interactiveStir with pointer | boolean | true |