'use client' import { useEffect, useMemo, useState } from "react"; import { Sparkle } from "lucide-react"; import { loadFull } from "tsparticles"; import type { ISourceOptions } from "@tsparticles/engine"; import Particles, { initParticlesEngine } from "@tsparticles/react"; const options: ISourceOptions = { key: "star", name: "Star", particles: { number: { value: 20, density: { enable: false, }, }, color: { value: ["#7c3aed", "#bae6fd", "#a78bfa", "#93c5fd", "#0284c7", "#fafafa", "#38bdf8"], }, shape: { type: "star", options: { star: { sides: 4, }, }, }, opacity: { value: 0.8, }, size: { value: { min: 1, max: 4 }, }, rotate: { value: { min: 0, max: 360, }, enable: true, direction: "clockwise", animation: { enable: true, speed: 10, sync: false, }, }, links: { enable: false, }, reduceDuplicates: true, move: { enable: true, center: { x: 120, y: 45, }, }, }, interactivity: { events: {}, }, smooth: true, fpsLimit: 120, background: { color: "transparent", size: "cover", }, fullScreen: { enable: false, }, detectRetina: true, absorbers: [ { enable: true, opacity: 0, size: { value: 1, density: 1, limit: { radius: 5, mass: 5, }, }, position: { x: 110, y: 45, }, }, ], emitters: [ { autoPlay: true, fill: true, life: { wait: true, }, rate: { quantity: 5, delay: 0.5, }, position: { x: 110, y: 45, }, }, ], }; export default function AiButton() { const [particleState, setParticlesReady] = useState<"loaded" | "ready">(); const [isHovering, setIsHovering] = useState(false); useEffect(() => { initParticlesEngine(async (engine) => { await loadFull(engine); }).then(() => { setParticlesReady("loaded"); }); }, []); const modifiedOptions = useMemo(() => { options.autoPlay = isHovering; return options; }, [isHovering]); return ( ); }

Magic Button with tsparticles

Hover animation

Installation

Install dependencies

Run the project