Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 12:13:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

it's the bubbles

Browse source
This commit is contained in:
Oscar Beaumont 2022-09-22 12:49:38 +08:00
parent 5d27e21b3b
commit 57ca822d84
1 changed files with 57 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
apps/landing/src/components/Bubbles.tsx
View file

@ -1,64 +1,64 @@
import Particles from 'react-tsparticles';
import { useCallback } from 'react';
import { Particles } from 'react-tsparticles';
import { loadFull } from 'tsparticles';
const options: NonNullable<React.ComponentProps<typeof Particles>['options']> = {
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: false,
mode: 'push'
},
resize: false
}
},
particles: {
color: {
value: '#ffffff'
},
collisions: {
enable: false
},
move: {
direction: 'top',
enable: true,
outModes: {
default: 'destroy'
},
random: false,
speed: 0.2,
straight: true
},
number: {
density: {
enable: true,
area: 900
},
value: 100
},
opacity: {
value: 0.1
},
shape: {
type: 'circle'
},
size: {
value: { min: 0.5, max: 3 }
}
},
detectRetina: true
};
export const Bubbles = () => {
const particlesInit = async (main: any) => {
await loadFull(main);
};
const particlesInit = useCallback<NonNullable<React.ComponentProps<typeof Particles>['init']>>(
async (engine) => {
await loadFull(engine);
},
[]
);
return (
//@ts-ignore
<Particles
id="tsparticles"
className="absolute z-0"
init={particlesInit}
options={{
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: false,
mode: 'push'
},
resize: false
}
},
particles: {
color: {
value: '#ffffff'
},
collisions: {
enable: false
},
move: {
direction: 'top',
enable: true,
outModes: {
default: 'destroy'
},
random: false,
speed: 0.2,
straight: true
},
number: {
density: {
enable: true,
area: 900
},
value: 100
},
opacity: {
value: 0.1
},
shape: {
type: 'circle'
},
size: {
value: { min: 0.5, max: 3 }
}
},
detectRetina: true
}}
/>
<Particles id="tsparticles" className="absolute z-0" init={particlesInit} options={options} />
);
};