Create Sparkling Text Effects With sparkly-text Web Component

Preview:

Description:

sparkly-text is a lightweight web component that allows developers to easily add animated sparkles to text, making it shimmer and shine.

You can customize the number of sparkles, and their size/color to create the perfect effect for your needs. Ideal for headlines, calls to action, or any text element that needs a little extra attention.

See Also:

• Add Magical Star Sparkle Effect To Any Element – sparkle.js
• Simple Celebrate Confetti Animation In JavaScript – Party.js

How to use it:

1. Download and import the sparkly-text web component

<script type="module" src="sparkly-text.js"></script>

2. Wrap your text content into the sparkly-text Custom Element. That’s it.

<sparkly-text>
  sparkly text
</sparkly-text>

3. Specify the numnber of sparkles to generate.

<sparkly-text
  number-of-sparkles="10">
  sparkly text
</sparkly-text>

4. Override the color of sparkles.

<sparkly-text
  style="--sparkly-text-color: black">
  sparkly text
</sparkly-text>

5. Change the size of sparkels.

<sparkly-text
  style="--sparkly-text-size: 3em">
  sparkly text
</sparkly-text>