Skip to content
uicoolkit

  • Components

  • Docs

↑↓ navigate↵ open/ anywhere
Menu

Browse

InteractionsVisualsPatternsFlows
GitHub

Burning Text

FreeNewSample

WebGL flames rise from the real glyphs, tapering and swaying like a campfire, while the letters glow and embers drift up. The whole palette derives from one color, so a blue flame is one prop away.

Original
  • text
  • shader
  • hero
  • fire

cool

Customize

Flame
Accent
Motion
Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet
npx shadcn@latest add @uicoolkit/burning-text

Install commands go live when this item ships to the registry.

Dependencies

    Use with an agent

    Copy a prompt with this component, your current preview settings and links to its docs.

    Add the UICoolKit "Burning Text" component (burning-text) to this project.
Docs: https://uicoolkit.com/components/burning-text
Agent docs: https://uicoolkit.com/components/burning-text.md
Install: npx shadcn@latest add @uicoolkit/burning-text
Preview settings to match: accent Ember, radius 12px, motion on, flame campfire.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)
    burning-text.tsx
    <h1>
  Ship <BurningText>cool</BurningText> products faster.
</h1>