holi-splash/src/HoliSplash.js

A React component that adds a Holi color splash effect on clicks 🎨

import { useEffect, useRef } from "react";

const HoliSplash = () => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        const ctx = canvas.getContext("2d");

        const handleClick = (e) => {
            const colors = ["#FF3E4D", "#00C9A7", "#FFC93C", "#1B9CFC", "#D980FA"];
            const x = e.clientX;
            const y = e.clientY;
            const color = colors[Math.floor(Math.random() * colors.length)];

            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    ctx.beginPath();
                    ctx.arc(x, y, 30 + i * 5, 0, Math.PI * 2);
                    ctx.fillStyle = color;
                    ctx.globalAlpha = 1 - i * 0.1;
                    ctx.fill();
                }, i * 50);
            }
        };

        canvas.addEventListener("click", handleClick);
        return () => canvas.removeEventListener("click", handleClick);
    }, []);

    return (
        <>
            <div style={{
                width: "100%",
                height: "100vh",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                background: "linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1)",
                zIndex: 1
            }}>
                <h1 style={{
                    fontSize: "3rem",
                    color: "#fff",
                    textShadow: "2px 2px 10px rgba(0,0,0,0.2)",
                    animation: "glow 1.5s infinite alternate"
                }}>
                    🌈 Click anywhere to see the magic! 🎨
                </h1>
                <p style={{ color: "#fff", fontSize: "1.2rem", fontStyle: "italic" }}>
                    Spread colors and happiness this Holi! 🚀
                </p>
            </div>

            <canvas
                ref={canvasRef}
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100vw",
                    height: "100vh",
                    zIndex: 0
                }}
            />
        </>
    );
};

export default HoliSplash;