Sparkles

A configurable sparkles component that can be used as a background or as a standalone component.

Installation
Props

Frankternity

Installation

To install, just include the following JavaScript somewhere on your page:

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>

<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/sparkles.iife.js"
></script>

Important notes

Make sure your project is using either Frankenstyle or FrankenstyleKit.
The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
When using multiple Frankternity components, the core file only needs to be loaded once.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

Prop Name	Type	Description
`id`	`string`	The ID of the sparkles component
`className`	`string`	The class name applied to the sparkles component
`stl`	`object`	Additional inline styles to be applied to the sparkles component.
`background`	`string`	The background color of the sparkles component
`particleSize`	`number`	The size of the particles
`minSize`	`number`	The minimum size of the particles
`maxSize`	`number`	The maximum size of the particles
`speed`	`number`	The speed of the particles
`particleColor`	`string`	The color of the particles
`particleDensity`	`number`	The density of the particles

Sparkles

Table of contents

Frankternity

Installation

Important notes

Props