holi-splash/dist/HoliSplash.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = require("react");
var HoliSplash = function HoliSplash() {
  var canvasRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    var canvas = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext("2d");
    var handleClick = function handleClick(e) {
      var colors = ["#FF3E4D", "#00C9A7", "#FFC93C", "#1B9CFC", "#D980FA"];
      var x = e.clientX;
      var y = e.clientY;
      var color = colors[Math.floor(Math.random() * colors.length)];
      var _loop = function _loop(i) {
        setTimeout(function () {
          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);
      };
      for (var i = 0; i < 10; i++) {
        _loop(i);
      }
    };
    canvas.addEventListener("click", handleClick);
    return function () {
      return canvas.removeEventListener("click", handleClick);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      width: "100%",
      height: "100vh",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      background: "linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1)",
      zIndex: 1
    }
  }, /*#__PURE__*/React.createElement("h1", {
    style: {
      fontSize: "3rem",
      color: "#fff",
      textShadow: "2px 2px 10px rgba(0,0,0,0.2)",
      animation: "glow 1.5s infinite alternate"
    }
  }, "\uD83C\uDF08 Click anywhere to see the magic! \uD83C\uDFA8"), /*#__PURE__*/React.createElement("p", {
    style: {
      color: "#fff",
      fontSize: "1.2rem",
      fontStyle: "italic"
    }
  }, "Spread colors and happiness this Holi! \uD83D\uDE80")), /*#__PURE__*/React.createElement("canvas", {
    ref: canvasRef,
    style: {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100vw",
      height: "100vh",
      zIndex: 0
    }
  }));
};
var _default = exports["default"] = HoliSplash;