Metal
Liquid dark chrome for small controls. A WebGL tube lies along the element's rounded edge and reflects a procedural studio of near-black and bone bands with one thin accent line, while a highlight slowly orbits it.
$149 once · every Pro piece
Customize
send
input
fill
The pointer bends the ring toward itself and pulls the highlight round; a press dents the metal and it springs back with a wobble. A fill variant turns a round icon button into a chrome bead.
Install
npx shadcn@latest add @obsyde/metalNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Metal } from '@/components/obsyde/ember/metal/Metal';
export function Example() {
return (
<Metal />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/metal/Metal.tsxcomponentember/metal/metal-demo.cssstylesember/metal/metal.cssstylesember/metal/MetalDemo.tsxdemoember/fire-kit/gl.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
exampleElement | 'send' | 'input' | 'fill' | 'send' |
thicknessRing thickness | number | 4 |
reachReach | number | 90 |