Breakdance4fun Logo

How to add sparkles to your text

Where sparkles dance and web designs breakdance

Sparkly Text is a lightweight web component allowing developers to integrate eye-catching animated sparkles, making any text element shine. Customize the count, size, and colors of the sparkles to create the perfect touch for website headlines, calls-to-action or other text that needs a touch of magic.

Step 1

Download the file sparkly-text.js file and upload it in your website, in order to load it locally (for example in the /wp-content/uploads/ directory)

Step 2

In a Code Block or with a Snippet Manager, add this code:

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

Step 3

You can now add the new html tag to any text field, whether it's the Text element, the Heading, Dual Heading, Menu Builder, Form Builder...

<sparkly-text>I LOVE MIKE</sparkly-text>

In a Dual Heading element like the example at the top of his page:

Sparkles Dual Heading

You can easily change the color, change the size and the number of sparkles:

<!-- Increase the number of sparkles -->
<sparkly-text number-of-sparkles="5">Vote for Mike</sparkly-text>

<!-- Color the sparkles -->
<sparkly-text style="--sparkly-text-color: orange">Mike says Hi!</sparkly-text>

<!-- Increase the sparkle size -->
<sparkly-text style="--sparkly-text-size: 2.5em">I AM YOUR FATHER</sparkly-text>