Interactive background

A free Carrd plugin template to embed an interactive background of particles & polygons with physics effect.

Tutorial on how to customize the interactive background here.

💜 Powered by particles.js. Template made by @jasonleow.

Tutorial

How to customize the interactive background:CHANGING BACKGROUND COLOR
- To change background color, go to the Embed element, under Code field.
- Find the <style> tag, look for this code:<style>
#particles-js {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>- Change the color hex code of background-color: #000000; to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING COLOR OF PARTICLE
- To change color of the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag:<script>
particlesJS("particles-js", {
particles: {
number: {
value: 50,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},- Change the color hex code of color: { #ffffff },; to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING COLOR OF PARTICLE LINE LINKS
- To change color of the line linking the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag, and find the line_linkedproperty:line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},- Change the color hex code of color: "#ffffff", to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING SHAPES OF THE PARTICLES
- To change shapes of the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag, and find the shapeproperty:shape: {
type: ["circle", "triangle", "image", "edge", "polygon", "star"],
stroke: {
width: 0,
color: "#ffffff"
},- Delete the shapes you do not want, e.g. if you just want circle and star, you delete the values till it looks like this:shape: {
type: ["circle", "star"],
...- To use an image, delete the values till it's like that:shape: {
type: ["image"],
...- Scroll down and add the direct URL of the image here (should end with a .jpg, .png or .svg). Adjust the width and height for size of image.image: {
src: "https://plugins.carrd.co/assets/images/favicon.png",
width: 100,
height: 100
}---------------------------------------------------------------------------------DOCUMENTATION FOR PARTICLES.JS
- For more info, read the documentation for particles.js here:https://github.com/VincentGarreau/particles.js