A small zero-dependency Web Component to add sparkles to text fragments.
<!-- Add sparkles -->
<sparkly-text>Hello sparkles</sparkly-text>
<!-- Increase the number of sparkles -->
<sparkly-text number-of-sparkles="5">Hello sparkles</sparkly-text>
<!-- Color the sparkles -->
<sparkly-text style="--sparkly-text-color: orange">Hello sparkles</sparkly-text>
<!-- Increase the sparkle size -->
<sparkly-text style="--sparkly-text-size: 2.5em">Hello sparkles</sparkly-text>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)
<!-- Host yourself -->
<script type="module" src="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>Big thanks goes to Zach Leatherman for all his fancy components such as table-saw.