88 lines
1.6 KiB
TypeScript
88 lines
1.6 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import Particles from 'react-tsparticles';
|
|
import type { Engine } from 'tsparticles-engine';
|
|
import { loadFull } from 'tsparticles';
|
|
|
|
const InteractiveBackground = () => {
|
|
const particlesInit = useCallback(async (engine: Engine) => {
|
|
await loadFull(engine);
|
|
}, []);
|
|
|
|
const particlesOptions = {
|
|
fpsLimit: 60,
|
|
interactivity: {
|
|
events: {
|
|
onHover: {
|
|
enable: true,
|
|
mode: 'repulse',
|
|
},
|
|
resize: true,
|
|
},
|
|
modes: {
|
|
repulse: {
|
|
distance: 100,
|
|
duration: 0.4,
|
|
},
|
|
},
|
|
},
|
|
particles: {
|
|
color: {
|
|
value: '#aaaaaa',
|
|
},
|
|
links: {
|
|
color: '#bbbbbb',
|
|
distance: 150,
|
|
enable: true,
|
|
opacity: 0.5,
|
|
width: 1,
|
|
},
|
|
collisions: {
|
|
enable: true,
|
|
},
|
|
move: {
|
|
direction: 'none',
|
|
enable: true,
|
|
outModes: {
|
|
default: 'bounce',
|
|
},
|
|
random: false,
|
|
speed: 2,
|
|
straight: false,
|
|
},
|
|
number: {
|
|
density: {
|
|
enable: true,
|
|
area: 800,
|
|
},
|
|
value: 80,
|
|
},
|
|
opacity: {
|
|
value: 0.5,
|
|
},
|
|
shape: {
|
|
type: 'circle',
|
|
},
|
|
size: {
|
|
value: { min: 1, max: 5 },
|
|
},
|
|
},
|
|
detectRetina: true,
|
|
};
|
|
|
|
return (
|
|
<Particles
|
|
id="tsparticles"
|
|
init={particlesInit}
|
|
options={particlesOptions}
|
|
style={{
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: -1,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default InteractiveBackground;
|