Frost
A pane of hoarfrost over live content. The ice is one marbled texture of milky swirls, clear pockets and fine grain, and the content under it is refracted along those swirls, so text shows through doubled and smeared.
$149 once · every Pro piece
The pointer is heat: it melts a clear hole with a wet, irregular edge that follows the ice, a thin warm rim and a slight lens just inside it, and leaves a melted path behind. The frost creeps back in along its own veins, crystals first and fog after. The content stays clickable, and keyboard focus melts a clearing around the focused control.
Install
npx shadcn@latest add @obsyde/frostNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Frost } from '@/components/obsyde/ember/frost/Frost';
export function Example() {
return (
<Frost />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/frost/Frost.tsxcomponentember/frost/frost-demo.cssstylesember/frost/frost.cssstylesember/frost/FrostDemo.tsxdemoember/fire-kit/gl.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
regrowRegrow (s) | number | 2.8 |
brushBrush (px) | number | 150 |
opacityOpacity | number | 1 |