add moving background to react app

Solutions on MaxInterview for add moving background to react app by the best coders in the world

showing results for - "add moving background to react app"
Amélie
07 Jun 2019
1<Particles
2        id="tsparticles"
3        options={{
4          background: {
5            color: {
6              value: "#0d47a1",
7            },
8          },
9          fpsLimit: 60,
10          interactivity: {
11            detectsOn: "canvas",
12            events: {
13              onClick: {
14                enable: true,
15                mode: "push",
16              },
17              onHover: {
18                enable: true,
19                mode: "repulse",
20              },
21              resize: true,
22            },
23            modes: {
24              bubble: {
25                distance: 400,
26                duration: 2,
27                opacity: 0.8,
28                size: 40,
29              },
30              push: {
31                quantity: 4,
32              },
33              repulse: {
34                distance: 200,
35                duration: 0.4,
36              },
37            },
38          },
39          particles: {
40            color: {
41              value: "#ffffff",
42            },
43            links: {
44              color: "#ffffff",
45              distance: 150,
46              enable: true,
47              opacity: 0.5,
48              width: 1,
49            },
50            collisions: {
51              enable: true,
52            },
53            move: {
54              direction: "none",
55              enable: true,
56              outMode: "bounce",
57              random: false,
58              speed: 6,
59              straight: false,
60            },
61            number: {
62              density: {
63                enable: true,
64                value_area: 800,
65              },
66              value: 80,
67            },
68            opacity: {
69              value: 0.5,
70            },
71            shape: {
72              type: "circle",
73            },
74            size: {
75              random: true,
76              value: 5,
77            },
78          },
79          detectRetina: true,
80        }}
81      />
82