Molten Edge
A border that behaves like a metal wire.
$149 once · every Pro piece
Customize
It heats where the pointer comes near, cools slowly behind it, and the heat smears along the wire. A press sends a hot wave both ways round the perimeter. Keyboard focus warms the whole edge. Works for any radius, from a card to a pill.
Install
npx shadcn@latest add @obsyde/molten-edgeNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { MoltenEdge } from '@/components/obsyde/ember/molten-edge/MoltenEdge';
export function Example() {
return (
<MoltenEdge />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/molten-edge/MoltenEdge.tsxcomponentember/molten-edge/molten-edge-demo.cssstylesember/molten-edge/molten-edge.cssstylesember/molten-edge/MoltenEdgeDemo.tsxdemoember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
reachReach | number | 120 |
coolingCooling half-life (s) | number | 0.9 |
radiusCard radius | number | 14 |