Documentation

Burned Text Effect

Two SVG engines in one component: the classic char-edge burn, plus glow with two constructions — soft nested bloom (thermal) and chromatic rings (VHS). Tone follows the surface behind the text — light or dark — not the page theme.

Usage

1import {2  BurnedText,3  CLASSIC_BURN_SETTINGS,4  THERMAL_PRESET,5  VHS_PRESET,6} from '@/components/ui/burned-text'7 8{/* Classic burn — original color-matrix char */}9<BurnedText10  text="Burned Text"11  engine="classic"12  tone="light"13  classic={CLASSIC_BURN_SETTINGS}14/>15 16{/* Thermal — soft nested heat bloom */}17<BurnedText18  text="HOT"19  engine="glow"20  glowStyle="bloom"21  core={THERMAL_PRESET.core}22  layers={THERMAL_PRESET.layers}23/>24 25{/* VHS — chromatic offset rings */}26<BurnedText27  text="PRO"28  engine="glow"29  glowStyle="rings"30  core={VHS_PRESET.core}31  layers={VHS_PRESET.layers}32/>Language: jsx

Props

BurnedText

• text (string): Text to render.
• fontSize (number, default: 64): Font size in pixels. Classic blur and glow spreads scale with this value.
• fontFamily / fontWeight / tracking: Type controls. Non-generic families load from Google Fonts.
• engine ("classic" | "glow", default: "classic"): Classic = original burn filter; glow = stacked color layers.
• glowStyle ("bloom" | "rings", default: "bloom"): Bloom = thermal inset bands (erode → punch → soften); rings = annular outward blurs (VHS).
• tone ("light" | "dark", default: "light"): Pick from the canvas behind the glyphs. Light classic multiplies into paper; dark classic inverts to ash and screens so char blacks dissolve on slate/ink.
• classic (ClassicBurnSettings): contrast, brightness, secondBlurAmount, secondBrightness, optional filterValues matrix.
• core / layers: Used when engine="glow". Layers are outer-first. For thermal bloom, spread is inset depth from the glyph edge (larger = hotter / further in).
• className (string, optional): Extra classes on the SVG.

Helpers: toneFromCanvas(hex), CLASSIC_BURN_SETTINGS, THERMAL_PRESET, VHS_PRESET.

How It Works

1. Classic — blur → dilate → contrast/brightness → second blur → color matrix (dark: invert + hue-rotate, luminance-key the char fringe, then CSS screen).
2. Glow bloom — each thermal band shrinks in from the glyph edge (erode → alpha punch → soften blur), stacked cold→hot like burn’s bite.
3. Glow rings — soft outer fringe plus annular mid/inner bands with chromatic offsets (VHS tracking).
4. Type — after document.fonts.load, getBBox() sizes the SVG; the demo stage stays fixed and scales the SVG with CSS so the canvas does not grow with font size.

DialKit on this page is demo-only: Look picks Burn / Thermal / VHS, the Version dropdown + + save snapshots to localStorage, and canvas swatches drive tone from background luminance. The clipboard control is Copy prompt — it pastes an agent-ready install (npx shadcn@latest add …/r/burned-text.json) plus the exact BurnedText props for the look you dialed, not DialKit’s “update useDialKit” scaffold.