tatuka-components
Version:
this is a readme text
34 lines • 1.69 kB
JavaScript
'use client';
import React, { useEffect, useState } from 'react';
import "../../../../dist/style/styles.css";
import clsx from 'clsx';
function TatukaBackground(_a) {
var particleColor = _a.particleColor, particleSize = _a.particleSize, backgroundColor = _a.backgroundColor, animationType = _a.animationType;
var _b = useState(false), isRendered = _b[0], setIsRendered = _b[1];
var mouseEffects = [];
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.createElement("div", { style: {
backgroundColor: backgroundColor || 'black',
}, className: 'tatuka-background' }, isRendered &&
mouseEffects.map(function (mouseEffect, index) { return (React.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: clsx('particle', animationType || 'rain') })); })));
}
export default React.memo(TatukaBackground);
//# sourceMappingURL=TatukaBackground.js.map