tatuka-components
Version:
this is a readme text
37 lines • 1.88 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
require("./style.css");
var clsx_1 = tslib_1.__importDefault(require("clsx"));
function TatukaBackground(_a) {
var particleColor = _a.particleColor, particleSize = _a.particleSize, backgroundColor = _a.backgroundColor, animationType = _a.animationType;
var _b = (0, react_1.useState)(false), isRendered = _b[0], setIsRendered = _b[1];
var mouseEffects = [];
(0, react_1.useEffect)(function () {
setIsRendered(true);
// Create 80 objects with random positions
for (var i = 0; i < 120; i++) {
if (typeof window === 'undefined')
return;
var randomX = Math.random() * window.innerWidth;
var randomY = Math.random() * window.innerHeight;
mouseEffects.push({
x: randomX,
y: randomY,
});
}
}, []);
return (react_1.default.createElement("div", { style: {
backgroundColor: backgroundColor || 'black',
}, className: 'tatuka-background' }, isRendered &&
mouseEffects.map(function (mouseEffect, index) { return (react_1.default.createElement("div", { key: index, style: {
boxShadow: "0 0 ".concat(particleSize || '3', "px ").concat(particleSize || 1, "px ").concat(particleColor || 'white'),
backgroundColor: particleColor || 'red',
animationDelay: "".concat(index * 0.05, "s"),
transform: "translate(".concat(mouseEffect.x, "px, ").concat(mouseEffect.y, "px)"),
}, className: (0, clsx_1.default)('particle', animationType || 'rain') })); })));
}
exports.default = react_1.default.memo(TatukaBackground);
//# sourceMappingURL=TatukaBackground.js.map