Playground Configs

Use this page for demos with richer option objects (not only preset names), based on examples from tsparticles/utils/configs.

Ready demoSynced

Absorbers ConfigAmong Us ConfigBackground Mask ConfigBackground Mask Image ConfigBasic ConfigBig ConfigBig Blend ConfigBig Blend Combo ConfigBig Blend Particle ConfigBlack Hole ConfigBubble ConfigCards ConfigCards Rolling ConfigCard Suits ConfigChars ConfigClick Pause ConfigCollisions Absorb ConfigCollisions Bounce ConfigCollisions Destroy ConfigColor Animation ConfigConfetti Explosions ConfigConnect ConfigCurl Noise ConfigData Images ConfigDelay ConfigDelay Color ConfigDelay Opacity ConfigDelay Size ConfigDelay Stroke Color ConfigDestroy ConfigDestroy Explode ConfigDisappearing ConfigDiv Events ConfigEffect Bubble ConfigEffect Filter ConfigEffect Particles ConfigEffect Trail ConfigEffect Trail Transform ConfigEmitter ConfigEmitter Absorber ConfigEmitter Angled ConfigEmitter Images ConfigEmitter Image Shape ConfigEmitter Paths ConfigEmitter Shapes ConfigEmitter Spawn Color ConfigEmitter Text Shape ConfigEmitter Text Stroke Shape ConfigFalling Confetti ConfigFireworks ConfigFireworks2 ConfigFireworks3 ConfigFireworks Mask ConfigFontawesome ConfigForward ConfigGifs ConfigGrab Random Color ConfigGradients ConfigGravity ConfigGroups ConfigGrowing ConfigHexagon Path ConfigHollowknight ConfigHyperspace ConfigImage Mask ConfigImages ConfigImages Directions ConfigInfection ConfigLch ConfigLife ConfigLight Hover ConfigLink Triangles ConfigLocal Polygon Mask ConfigManual ConfigMatrix ConfigMotion Disable ConfigMotion Reduce ConfigMouse Attract ConfigMouse Bounce ConfigMouse Cannon ConfigMouse Destroy ConfigMouse Destroy Explode ConfigMouse Drag ConfigMouse Drag Momentum ConfigMouse Follow ConfigMouse Particle ConfigMouse Particle2 ConfigMouse Trail ConfigMouse Trail Noise ConfigMove Angle ConfigMove Distance ConfigMove Inside ConfigMove Outside ConfigMultiple Click Emitters ConfigMultiple Polygon Masks ConfigNamed Colors ConfigNasa ConfigNo Clear ConfigNo Config ConfigNoise Planes Fractal ConfigNoise Planes Perlin ConfigNoise Planes Simplex ConfigNyancat ConfigNyancat2 ConfigOklch ConfigOrbit ConfigParallax ConfigPath Branches ConfigPath Branches Inertia ConfigPath Brownian ConfigPath Grid ConfigPath Levy ConfigPath Maze ConfigPath Polygon Mask ConfigPath Spiral ConfigPath Svg ConfigPath Zig Zag ConfigPlanes ConfigPlasma ConfigPoisson ConfigPolygon Mask ConfigPolygons ConfigPop ConfigRandom ConfigRandom Shapes ConfigReact Bubbles ConfigReact Defaults ConfigReact Multiple Images ConfigReact Night Sky ConfigReact Polygon Mask ConfigReact Simple ConfigReact Snow ConfigReduce Duplicates ConfigRepulse ConfigRepulse Back ConfigRepulse Bounce ConfigRepulse Circ ConfigRepulse Cubic ConfigRepulse Elastic ConfigRepulse Expo ConfigRepulse Gaussian ConfigRepulse Quart ConfigRepulse Quint ConfigRepulse Sigmoid ConfigRepulse Sine ConfigRepulse Smoothstep ConfigResponsive ConfigRing ConfigSea Anemone ConfigShadow ConfigShape Arrow ConfigShape Cog ConfigShape Emoji ConfigShape Emoji Padding ConfigShape Heart ConfigShape Infinity ConfigShape Multiline Text ConfigShape Options ConfigShape Path ConfigShape Rounded Polygon ConfigShape Rounded Rect ConfigShape Spiral ConfigShape Squircle ConfigSlow ConfigSnow ConfigSounds Audio ConfigSounds Loop ConfigSounds Melodies ConfigSounds Melody Loop ConfigSounds Notes ConfigSpeed Decay ConfigSpin ConfigStar ConfigStroke Animation ConfigStyle ConfigSvg Replace ConfigText Mask ConfigText Mask Multiline ConfigThemes ConfigTilt ConfigTrail ConfigTrail Image ConfigTriangles ConfigTwinkle ConfigVibrate ConfigVirus ConfigWarp ConfigWobble ConfigWobble Big ConfigZ Index Config

Showing full config demos.

Configuration preset for absorbers.

Recipe: open docs

Press Start to run the demo.

1066 chars

{ "key": "absorbers", "name": "Absorbers", "particles": { "number": { "value": 300 }, "collisions": { "enable": true }, "paint": { "fill": { "color": { "value": "#ffffff" }, "enable": true } }, "shape": { "type": "circle" }, "opacity": { "value": { "min": 0.1, "max": 1 } }, "size": { "value": { "min": 1, "max": 2 } }, "move": { "enable": true, "speed": 0.5, "direction": "top", "straight": true, "warp": true } }, "interactivity": { "events": { "onClick": { "enable": true, "mode": "push" } }, "modes": { "push": { "quantity": 10 } } }, "absorbers": { "draggable": true, "size": { "value": { "min": 5, "max": 10 }, "limit": 10 }, "position": { "x": 50, "y": 50 } }, "background": { "color": "#0d47a1" } }