Hotplate
A perfectly regular dot grid that swells and heats under the pointer and rings when struck.
$149 once · every Pro piece
Customize
Near the pointer each dot grows to 3px, warms from white toward the accent and is pushed outward like a lens, on its own loose spring, so the bulge wobbles as it follows. A click sends a ring outward that kicks the dots and flashes them accent on its crest. Still at rest.
Install
npx shadcn@latest add @obsyde/hotplateNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Hotplate } from '@/components/obsyde/ember/hotplate/Hotplate';
export function Example() {
return (
<Hotplate />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/hotplate/Hotplate.tsxcomponentember/hotplate/hotplate-demo.cssstylesember/hotplate/hotplate.cssstylesember/hotplate/HotplateDemo.tsxdemoember/effects-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
spacingSpacing (px) | number | 18 |
reachReach (px) | number | 140 |