A simple and customizable JavaScript library that adds animated effects to mouse clicks.
- Supports multiple effect types (hearts, confetti, stars, snow, fire, etc.)
- Customizable effect count, size, and duration
- Lightweight and framework-agnostic
- Fully TypeScript-compatible with proper type declarations
- Works seamlessly with Next.js
npm install @unicorn-poo/pizzazz<script src="https://cdn.jsdelivr.net/npm/@unicorn-poo/pizzazz/dist/index.js"></script>import { addPizzazz } from '@unicorn-poo/pizzazz';
addPizzazz(document, { effectType: 'confetti', count: 10, duration: 1200 });addPizzazz(document, {
effectType: 'fire', // Effect type ('valentines', 'stars', 'bubbles', etc.)
character: '🍕', // Custom character or string to use for the effect (overrides `effectType` if provided)
count: 12, // Number of elements per click
sizeRange: [10, 40], // Randomized effect sizes
duration: 1500 // Animation duration in milliseconds
});const button = document.getElementById('special-button');
addPizzazz(button, { effectType: 'celebration' });In Next.js, it is necessary to use useEffect because addPizzazz interacts with the browser’s DOM, which is only available on the client side. Without this, you may encounter errors due to server-side rendering (SSR).
"use client";
import { useEffect } from 'react';
import addPizzazz from '@unicorn-poo/pizzazz';
export default function ClickEffectComponent() {
useEffect(() => {
addPizzazz(document, { effectType: 'confetti', count: 10 });
}, []);
return <div>🎉 Click anywhere for Pizzazz!</div>;
}Clone the repo:
git clone https://github.com/unicorn-poo/pizzazz.git
cd pizzazz
npm installRun tests:
npm testBuild the package:
npm run buildMIT License. Feel free to use and contribute!