mango-v4-ui/components/ParticlesBackground.tsx

180 lines
4.5 KiB
TypeScript

import { useCallback } from 'react'
import Particles from 'react-tsparticles'
import { loadFull } from 'tsparticles'
const ParticlesBackground = () => {
const particlesInit = useCallback(async (engine: any) => {
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine)
}, [])
return (
<Particles
id="tsparticles"
init={particlesInit}
// loaded={particlesLoaded}
options={{
fullScreen: false,
interactivity: {
detect_on: 'canvas',
events: {
onDiv: {
selectors: '#repulse',
enable: true,
mode: 'repulse',
},
onHover: {
enable: true,
mode: 'attract',
},
resize: true,
},
},
particles: {
// groups: {
// z5000: {
// number: {
// value: 70,
// },
// zIndex: {
// value: 50,
// },
// },
// z7500: {
// number: {
// value: 30,
// },
// zIndex: {
// value: 75,
// },
// },
// z2500: {
// number: {
// value: 50,
// },
// zIndex: {
// value: 25,
// },
// },
// z1000: {
// number: {
// value: 40,
// },
// zIndex: {
// value: 10,
// },
// },
// },
move: {
angle: 10,
attract: {
rotate: {
x: 600,
y: 1200,
},
},
direction: 'right',
enable: true,
speed: 1,
},
opacity: {
value: 0,
},
},
emitters: [
{
autoPlay: true,
fill: true,
life: {
wait: false,
delay: 0.5,
duration: 1,
},
rate: {
quantity: 1,
delay: { min: 3, max: 12 },
},
startCount: 0,
particles: {
shape: {
type: 'images',
options: {
images: [
{
src: '/icons/mngo.svg',
width: 48,
height: 48,
},
{
src: '/icons/btc.svg',
width: 48,
height: 48,
},
{
src: '/icons/eth.svg',
width: 48,
height: 48,
},
{
src: '/icons/sol.svg',
width: 48,
height: 48,
},
{
src: '/icons/usdc.svg',
width: 48,
height: 48,
},
{
src: '/icons/usdt.svg',
width: 48,
height: 48,
},
{
src: '/icons/msol.svg',
width: 48,
height: 48,
},
],
},
},
rotate: {
value: 0,
random: true,
direction: 'clockwise',
animation: {
enable: true,
speed: 15,
sync: false,
},
},
lineLinked: {
enable: false,
},
opacity: {
value: 1,
},
size: {
value: 24,
random: false,
},
move: {
speed: 3,
random: false,
outMode: 'destroy',
},
},
position: {
x: 0,
},
},
],
}}
/>
)
}
export default ParticlesBackground