Flame Wrap

Wraps any element in a border of fire. The outline burns molten, flames lick off the top edge and run short down the sides, and sparks drift away.

$149 once · every Pro piece

Customize

Wrapped element

card

button

Intensity

Flame height

Sparks

Lit

Trigger

always

hover

Card radius

One WebGL canvas behind the element draws domain-warped noise masked by a rounded-rect distance field; the element stays real DOM with a faint heat shimmer at its edges. Lit, it catches at the bottom edge and climbs; put out, it dies back down on a spring.

Install

npx shadcn@latest add @obsyde/flame-wrap

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { FlameWrap } from '@/components/obsyde/ember/flame-wrap/FlameWrap';

export function Example() {
  return (
    <FlameWrap />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/flame-wrap/FlameWrap.tsxcomponent
ember/flame-wrap/flame-wrap-demo.cssstyles
ember/flame-wrap/flame-wrap.cssstyles
ember/flame-wrap/FlameWrapDemo.tsxdemo
ember/fire-kit/shimmer.tsxshared
ember/fire-kit/sparks.tsshared
ember/fire-kit/gl.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`content`Wrapped element	`'card' \| 'button'`	`'card'`
`intensity`Intensity	`number`	`0.8`
`height`Flame height	`number`	`56`
`sparks`Sparks	`boolean`	`true`
`active`Lit	`boolean`	`true`
`trigger`Trigger	`'always' \| 'hover'`	`'always'`
`radius`Card radius	`number`	`14`