Convection
A background of rising heat drawn only as contour lines.
$149 once · every Pro piece
Customize
A single-pass WebGL shader evaluates a domain-warped noise field that drifts slowly upward and draws each level as a 1px line, white at 9%, black between. The field runs warm toward the bottom edge, where the top band of lines takes the accent ramp; the pointer adds a local heat source that bends the contours around it. Falls back to a few static hairlines without WebGL.
Install
npx shadcn@latest add @obsyde/convectionNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Convection } from '@/components/obsyde/ember/convection/Convection';
export function Example() {
return (
<Convection />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/convection/Convection.tsxcomponentember/convection/convection-demo.cssstylesember/convection/convection.cssstylesember/convection/ConvectionDemo.tsxdemoember/effects-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
speedSpeed | number | 1 |
densityContour levels | number | 14 |
interactiveInteractive | boolean | true |