import { ReactNode } from 'react';
/**
 * Adapted from Canvas UI by David Haz (DavidHDev).
 * Source: https://github.com/DavidHDev/canvas-ui
 * License: MIT + Commons Clause.
 */
export interface FlameWrapOptions {
    /** Flame color as [r, g, b] in 0-1 range. */
    color?: [number, number, number];
    /** Overall brightness of the fire (0 to 3). */
    intensity?: number;
    /** Reach of the flames above the top edge in CSS pixels. */
    height?: number;
    /** Reach of the glow on the sides and bottom in CSS pixels. */
    spread?: number;
    /** Corner radius of the burning outline in CSS pixels. Match your content. */
    radius?: number;
    /** Animation speed multiplier for the whole effect. */
    speed?: number;
    /** Flame detail from 0 (broad licks) to 1 (fine licks). */
    scale?: number;
    /** Amplitude of the turbulence waves shaping the flames (0 to 1). */
    turbulence?: number;
    /** Frequency multiplier of the turbulence waves (0.2 to 3). */
    turbulenceScale?: number;
    /** How far from the edges the heat warps the content, in CSS pixels. */
    turbulenceReach?: number;
    /** Brightness of the spark highlights (0 to 3). 0 disables them. */
    sparks?: number;
    /** Size multiplier for individual sparks (0.2 to 3). */
    sparkSize?: number;
    /** How many sparks fly at once (0.3 to 2.5). */
    sparkDensity?: number;
    /** How fast sparks rise and flicker (0.1 to 3). */
    sparkSpeed?: number;
    /** Strength of the molten glow hugging the edges (0 to 3). */
    rim?: number;
    /** How far the flames eat into the content silhouette in CSS pixels. */
    melt?: number;
    /** Heat shimmer displacement of the content near the edges in CSS pixels. */
    distortion?: number;
    /** Amount of smoke drifting off the flames (0 to 2). */
    smoke?: number;
    /** Brightness of the glowing ember line on the burnt edges (0 to 2). */
    ember?: number;
    /** Darkness of the charred band on the content edges (0 to 2). */
    scorch?: number;
}
export interface FlameWrapElements {
    /** Canvas with layoutsubtree that hosts the HTML content. */
    source: HTMLCanvasElement;
    /** The element inside the source canvas that gets captured. */
    content: HTMLElement;
    /** Canvas the WebGL effect renders to. */
    output: HTMLCanvasElement;
}
export interface FlameWrapInstance {
    /** Update effect options live. */
    setOptions: (options: FlameWrapOptions) => void;
    /** Re-read canvas size. Call when the element is resized. */
    resize: () => void;
    /** Stop the loop and release all GPU resources. */
    destroy: () => void;
}
/**
 * Attributes that turn a canvas into an HTML-in-Canvas host, and the matching
 * opt-in for the element that gets drawn.
 */
export interface HtmlInCanvasMarkup {
    canvas: Record<string, string>;
    element: Record<string, string>;
}
/**
 * Chrome 156 renames the experimental boolean `layoutsubtree` to the
 * standardized `content="drawable"`, and the element handed to
 * `drawElementImage()` now declares itself with its own `drawable` attribute
 * (WICG html-in-canvas issue #169). Browsers advertise the new spelling with a
 * reflected `content` IDL attribute, so the shape is read off the prototype
 * rather than sniffed from a version string: every release only ever sees the
 * attribute it understands.
 */
export declare function htmlInCanvasMarkup(): HtmlInCanvasMarkup;
export declare function supportsHtmlInCanvas(): boolean;
export declare function createFlameWrap(elements: FlameWrapElements, options?: FlameWrapOptions): FlameWrapInstance | null;
export interface FlameWrapProps extends FlameWrapOptions {
    children: ReactNode;
    className?: string;
    style?: React.CSSProperties;
}