Blaze
Fire along the bottom edge of a container.
$149 once · every Pro piece
Customize
Flames, a glowing ember bed and slow dark smoke come from one WebGL shader; heat distortion rises into the content above through an SVG displacement filter that fades out on its way up. It burns on its own and never reacts to the pointer.
Install
npx shadcn@latest add @obsyde/blazeNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Blaze } from '@/components/obsyde/ember/blaze/Blaze';
export function Example() {
return (
<Blaze />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/blaze/Blaze.tsxcomponentember/blaze/blaze-demo.cssstylesember/blaze/blaze.cssstylesember/blaze/BlazeDemo.tsxdemoember/fire-kit/shimmer.tsxsharedember/fire-kit/sparks.tssharedember/fire-kit/gl.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
heightFlame height | number | 110 |
intensityIntensity | number | 0.8 |
smokeSmoke | number | 0.6 |
distortionDistortion | number | 0.6 |