Use on your site

Script tag (IIFE)

Global FlameText — same script this page loads. Replace the host URL if you self-host the files.

<script src="https://codebystella.github.io/flame-text/flame-text.iife.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    FlameText.mount('#hero', { temperature: 0.65, intensity: 1 })
  })
</script>

ES module (import URL)

Works in browsers that support type="module" and cross-origin module requests.

<script type="module">
  import { mount } from 'https://codebystella.github.io/flame-text/flame-text.js'
  mount('#hero', { temperature: 0.65, intensity: 1 })
</script>

npm (bundler)

Publish to npm is separate from this site; when published:

npm install @codebystella/flame-text

import { mount } from '@codebystella/flame-text'

npm-backed CDN

After the package is on npm, you can use jsDelivr or unpkg, e.g.:

https://cdn.jsdelivr.net/npm/@codebystella/flame-text@0.1.0/dist/flame-text.iife.js

Interactive showcase below uses the same flame-text.iife.js as the embed examples. The canvas is transparent except for flame pixels.

Full plume above and around the glyph — yellow-white core, orange body, wispy smoke tips (ember-style fill + transparent canvas).

志

Words

https://github.com/CodeByStella/flame-text