1. Components
  2. Sparkles

Components

Sparkles

Renders a sparkles animation on any headline or button.

Basic Usage

To import the component, use:

+page.svelte 
        <script lang="ts">
    import Sparkles from "$lib/components/Sparkles.svelte";
</script>

//headline
<Sparkles>
Get SvelteShip
</Sparkles>

//checkout button
 <Sparkles>
    <CheckoutButton classes="btn btn-wide btn-lg btn-outline btn-primary btn-sm px-6 mt-3 mx-2">Buy Now</CheckoutButton>
</Sparkles>


//The amount of sparkles can be adjusted like on line 21
```size: random(20, 25)```,
Previous <- Hero with Image
Next Checkout Button ->