Beautiful, fun falling sparkle animation JavaScript library
// Current configuration
const sparkles = new SparkleFall({
interval: 800,
wind: 0,
maxSparkles: 50,
minSize: 10,
maxSize: 30,
sparkles: ['āØ', 'ā', 'š«', 'š'],
colors: null
});
Install SparkleFall with npm:
npm install sparklefall
Or use CDN:
<link rel="stylesheet" href="https://unpkg.com/sparklefall@latest/dist/sparklefall.css">
<script src="https://unpkg.com/sparklefall@latest/dist/sparklefall.min.js"></script>
Include the default CSS (choose one):
ESM (Vite/Webpack):
import 'sparklefall/styles.css';
import SparkleFall from 'sparklefall';
const sparkles = new SparkleFall({ injectStyles: true });
CDN:
<link rel="stylesheet" href="https://unpkg.com/sparklefall@latest/dist/sparklefall.css">
<script src="https://unpkg.com/sparklefall@latest/dist/sparklefall.min.js"></script>
<script>const s = new SparkleFall({ injectStyles: true });</script>
SparkleFall works with your favorite framework:
npm install react-sparklefall
npm install ngx-sparklefall
Full TypeScript support included!
Install and import the CSS once, then use the component:
import 'sparklefall/styles.css';
import { SparkleFall } from 'react-sparklefall';
export default function App() {
return (
<SparkleFall maxSparkles={50}>
<h1>āØ Hello!</h1>
</SparkleFall>
);
}
Import the CSS in global styles and use the standalone component:
/* styles.css */
@import 'sparklefall/styles.css';
/* app.component.ts */
import { Component } from '@angular/core';
import { SparkleFallComponent } from 'ngx-sparklefall';
@Component({
selector: 'app-root',
standalone: true,
imports: [SparkleFallComponent],
template: `<sparkle-fall [maxSparkles]="50"></sparkle-fall>`
})
export class AppComponent {}