sparkly-text

A small zero-dependency Web Component to add sparkles to text fragments.

Examples

<!-- Add sparkles  -->
<sparkly-text>Hello world</sparkly-text>

<!-- Increase the number of sparkles  -->
<sparkly-text number-of-sparkles="5">Hello world</sparkly-text>

<!-- Color the sparkles  -->
<sparkly-text style="--sparkly-text-color: orange">Hello world</sparkly-text>

<!-- Add rainbow colors   -->
<sparkly-text style="--sparkly-text-color: rainbow">Hello world</sparkly-text>

<!-- Increase the sparkle size  -->
<sparkly-text style="--sparkly-text-size: 2.5em">Hello world</sparkly-text>

Installation

You have a few options (choose one of these):

• Install via npm: npm install @stefanjudis/sparkly-text
• Download the source manually from GitHub into your project.
• Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

<!-- Host yourself -->
<script type="module" src="https://raw.githubusercontent.com/stefanjudis/sparkly-text/main/sparkly-text.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@stefanjudis/sparkly-text"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@stefanjudis/sparkly-text"></script>

Kudos

Big thanks goes to Zach Leatherman for all his fancy components such as table-saw.