Thermal
A surface that remembers where the pointer has been, seen through a 1-bit thermal camera.
$149 once · every Pro piece
Customize
The pointer lays heat into a low-resolution field (more when it moves slowly), which diffuses a little and cools on a half-life. Every cell is either off or on by an 8×8 ordered dither, coloured deep at the fringe, accent in the body and white at the core. A click sends a ring of heat outward. At rest nothing is drawn and the loop is stopped.
Install
npx shadcn@latest add @obsyde/thermalNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Thermal } from '@/components/obsyde/ember/thermal/Thermal';
export function Example() {
return (
<Thermal />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/thermal/Thermal.tsxcomponentember/thermal/thermal-demo.cssstylesember/thermal/thermal.cssstylesember/thermal/ThermalDemo.tsxdemoember/effects-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
cellCell (px) | number | 5 |
coolingCooling half-life (s) | number | 1.6 |
radiusRadius (px) | number | 44 |