Sparticles

Sparticlesjavascript particles in canvas High Performance Particles in Canvas.For those occasions when you 👏 just 👏 gotta 👏 have 👏 sparkles,snow, or stars on your homepage!installationparametersoptionsmethodsstylingperformancewhy?installationDepending on how your project looks,you may want to include a direct link to the script andthen initialise the sparkles,or you may wantto import the module in to your application for a more modern approach.vanillafirstly make sure you've downloaded the latest version of the scriptto your application directory (if you are running on a CMS you might alsoneed to upload the file to your server). The file you'll want to use is; dist/sparticles.min.jsto make sure it downloads the fastest for your users.After you've downloaded, or uploaded, the sparticles.min.js file to thecorrect place, you'll then need to include it in your web page;">script src="../path/to/sparticles.min.js">script>And finally, you should then be able to initialise the Sparticles byrunning this code in your javascript;(make sure this code runs after you've included the script above.) window.onload = function() { let myElement = document.getElementById("myDiv"); let mySparticles = new Sparticles(myElement, { count: 100 }, 400); }">script> window.onload = function() { let myElement = document.getElementById("myDiv"); let mySparticles = new Sparticles(myElement, { count: 100 }, 400); }script>jqueryFor jQuery sites, you may follow all of the steps above, but replacethe third step with something like below; let $el = $("#myDiv"); let mySparticles = new Sparticles($el[0], { count: 100 }, 400);">script> let $el = $("#myDiv"); let mySparticles = new Sparticles($el[0], { count: 100 }, 400);script>app / bundlerIf you're running a more modern type of application with something like Svelte or VueJs;First you will want to install the module with NPM;yarn add --dev sparticles# or npm, if you prefernpm install --save-dev sparticlesThen import the module in to the app where you want to use itimport Sparticles from "sparticles";Finally initialise with vanillaJSnew Sparticles(node, { count: 100 }, 400);If you're using SvelteJS specifically, then your single-file componentwould look a little like this; import Sparticles from "sparticles"; let sparticles, options = { color: "gold", shape: "star", speed: 50 }; function addSparticles(node) { new Sparticles(node, options, 400); }">script> import Sparticles from "sparticles"; let sparticles, options = { color: "gold", shape: "star", speed: 50 }; function addSparticles(node) { new Sparticles(node, options, 400); }script>main use:addSparticles>main>usageProviding that the script/module has been properly included, then it can be initialisedby running the Sparticles() constructor;let mySparticles = new Sparticles();parametersWhen initialising the Sparticles instance there are some parameters that can be supplied.parametertypedefaultdescriptionnodeHTMLElementdocument.bodythe element in the DOM which the Sparticles will append tooptionsObject{}an object with all the options for the instancewidthNumbernode.clientWidththe width of the canvas elementheightNumbernode.clientWidththe height of the canvas element (defaults to width)Leave the width/height properties empty to make the canvas resize to fit it's nodeSupply nothing and get a default Sparticle instance on the let mySparticles = new

None;" in* modern browsers to put the particles on top of all our content*/@supports ( pointer-events: none ) { .sparticles-container { z-index: 2; pointer-events: none; }}">/** * we need to make sure the background doesn't have a * background color as we want to place the container * behind it on the z-axis! */html { background: black; }body { background: transparent; }.sparticles-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; /** * z-index: -1; this makes the still interactive * by placing the sparticles behind the content */ z-index: -1; }/*** we could a;so use "pointer-events: none;" in* modern browsers to put the particles on top of all our content*/@supports ( pointer-events: none ) { .sparticles-container { z-index: 2; pointer-events: none; }}Finally we can initiate the Sparticles with the .sparticles-containeras the DOM element it's bound to:let container = document.querySelector(".sparticles-container");let mySparticles = new Sparticles( container, { color: "red" });// no need for width/height as the canvas will fill // the container which is fixed to the viewport sizeperformanceSparticles is really quite fast!It was designed to be the smallest (within reason) and fastest performingparticles script with such a large feature set!Some other popular particle scripts will eat up to 50% of your CPU torender 1,000 particles. Sparticles will do the same while only using 9%and will run at a buttery 120fps if your device can refresh that fast!Sparticles was built because other offerings in the space were eitherdoing way too much and adding too many kb to load, or they were justtoo slow and unable to serve enough particles to lower end deviceswithout chugging along jankily!I used to get a lot of requests from Editorial/Content teams who wantedsnow/sparkles/whatever on their home page during events, and I either hadto reject because the plugins were killing our user's devices or acceptand live knowing I've failed the users/customers! 😢 ~~ so Sparticles should fix that!mobileℹ It's quite easy to achieve 120fps+ with over 1,000 particles on a decent computer!⚠ But please remember your users are not all running super-computers with GPUs, theyare probably on a mobile phone.Please avoid running heavy animations on phones! If you really have to then I'd advise reducing the particles down to 100 or less for a mobile device!Please take care of your mobile users! They are probably your primary user if you'rerunning a commercial or non-tech website! use a script like below to determine the amountof particles based on their device; let myElement = document.getElementById("myDiv"); // PLEASE DON'T PUSH A TON OF ANIMATION ON MOBILES! let count = (/Mobi|Android/i.test(navigator.userAgent)) ? 100 : 500; let mySparticles = new Sparticles(myElement, { count: count }, 400);why "Sparticles" ?particles + [ speed ⚡ | snow ❄ | sparkles ✨ | stars

270)glowType: NumberDefault: 0Range: 0 - 50Glow (or shadow) effect around the particle. This will not affect images.twinkleType: BooleanDefault: falseApply a "twinkle" effect to the particle when changing alpha. This works best with a higher alphaSpeed andalphaVariance value.colorType: String / ArrayDefault: "random"Values: any valid css/html color stringA CSS/HTML color string to apply across all particles.If an array of colors ([ "#ff0", "red", "hsl(10,50%,50%)" ]) is given, then each particle willbe assigned a random color from the array. Additionally "random" can be used to assign any random color.randomColorType: FunctionDefault: randomHSL()Arguments: index, totalCustom function to use when generating random colors. The default function will return a fairlypleasant hsl() color with a high saturation and medium lightness. This can be overridden to suityour environment better. The two arguments (index, total) are Integers and allow for a littlepsuedo-randomizing.example:randomColor: function( index, total ) { return `hsl( ${index}, 80%, ${total - index}% )`;}randomColorCountType: NumberDefault: 3Range: 1 - 50How many random colors to generate when color is random. The more colors generatedthe more chance there is of a performance penalty. It should be OK up to 50.shapeType: String / ArrayDefault: "circle"Values: "circle", "square", "triangle", "line", "diamond", "star" or "image"Determine the shape of all the particles.If an array of shapes ([ "circle", "star", "diamond" ]) is given, then each particle willbe assigned a random shape form the array. Additionally "image" can be used to define a customparticle shape from an image when combined with imageUrl.imageUrlType: String / ArrayDefault: ""Values: a valid url, or data-uriDetermine the custom image to be used for all the particles.If an array of urls ([ " " ]) is given, then each particlewill be assigned a random image as it's shape from the array.This image should be a square (1:1)ℹ imageUrl only has an effect if a shape in the array is; "image".ℹ imageUrl can accept svg, but the root needs a width/height. (see issue);methodsa few public methods can be accessed by storing a reference to the Sparticles instanceand executed like so;let mySparticles = new Sparticles();mySparticles.destroy();methoddescriptiondestroy()destroy the Sparticles instance and remove event listenerssetCanvasSize( width, height )set the new size of the canvasresetSparticles()reset all the particles on the canvasstylingIf the Sparticles are simply going to be placed in a container (like a ) then the onlystyling that should be necessary is to set the width/height of the canvas using thewidth and height parameters.To place the Sparticles in the background of a web-page, you'll need to add acontainer to the which the canvas can sit in, then position it fixed: ">html> body> div class="sparticles-container">div> body>html>Then we set up the CSS styling for the Sparticles container depending on oursituation: still interactive * by placing the sparticles behind the content */ z-index: -1; }/*** we could a;so use "pointer-events:

Sense. Other, higher-pitched vibration modes should produce related but substantially more massive families of particles, dubbed superparticles, or sparticles. String theory predicts that all subatomic particles have such partners. For example, the electron should have a superpartner dubbed the selectron, while each quark has a superpartner called a squark. No one has yet detected a sparticle, perhaps because existing particle accelerators are too feeble.Some physicists expect the Large Hadron Collider to be powerful enough to reveal sparticles. The heart of the collider is a 17-mile-long circular tunnel straddling the border of France and Switzerland. There, two beams of protons will circulate in opposite directions. When engineers flip a switch in 2007, a 12,000-ampere pulse of electrical power will slam down huge coils of electromagnets, creating fields 100,000 times more powerful than Earth’s. The magnets will bend particles along a circular path as they accelerate to 99.999999 percent the speed of light and attain energies approaching 14 trillion electron volts, trillions of times more powerful than the energy released by dynamite.Before the Large Hadron Collider goes hunting for sparticles, it will first test the boundaries of the standard model of particle physics, the reigning theory of how subatomic particles behave (see “Catch Me if You Can” by Karen Wright, Discover, July 2005). The standard model is perhaps the most successful quantum theory, explaining every subatomic interaction witnessed so far, but it merely whets the appetite of string theorists. They believe the standard model is contrived, ugly, and incomplete because it contains at least 19 adjustable parameters, three near-identical copies of subatomic particles, and no description of gravity.Superstring theory holds that the standard model describes only the lowest vibration modes of the strings. In this view, the standard model does a good job describing the world we know, yet it is unfinished. Nevertheless, the standard model has worked as a viable theory for decades. The discovery of sparticles would mark its first failure to adequately explain the tiny quantum world and would unleash an avalanche of new tests by experimental particle physicists, who sometimes deride string theory as too abstract. Sparticles would not, however, seal the deal on string theory. Some physics theories explain the existence of sparticle-like particles without resorting to strings.The Large Hadron Collider could support string theory in other ways. For instance, it might create miniature black holes predicted by one version of the theory; these in turn would produce telltale showers of subatomic particles as they disintegrated. (Physicists say the black holes are so small they pose no danger of swallowing up Switzerland and the rest of Earth.) The collider may also be powerful enough to test one of the most bizarre predictions of string theory—that there are