Trendshift - Ask AI

base on A lightweight JavaScript library for creating particles ## particles.js ### A lightweight JavaScript library for creating particles. ------------------------------ ### `Demo / Generator` <a href="http://vincentgarreau.com/particles.js/" target="_blank"><img src="http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg" alt="particles.js generator" /></a> Configure, export, and share your particles.js configuration on CodePen: http://vincentgarreau.com/particles.js/ CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso ------------------------------- ### `Usage` Load particles.js and configure the particles: **index.html** ```html <div id="particles-js"></div> <script src="particles.js"></script> ``` **app.js** ```javascript /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); }); ``` **particles.json** ```javascript { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 10, "random": true, "anim": { "enable": false, "speed": 80, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 300, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 12, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 800, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 800, "size": 80, "duration": 2, "opacity": 0.8, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } ``` ------------------------------- ### `Options` key | option type / notes | example ----|---------|------ `particles.number.value` | number | `40` `particles.number.density.enable` | boolean | `true` / `false` `particles.number.density.value_area` | number | `800` `particles.color.value` | HEX (string) RGB (object) HSL (object) array selection (HEX) random (string) | `"#b61924"` `{r:182, g:25, b:36}` `{h:356, s:76, l:41}` `["#b61924", "#333333", "999999"]` `"random"` `particles.shape.type` | string array selection | `"circle"` `"edge"` `"triangle"` `"polygon"` `"star"` `"image"` `["circle", "triangle", "image"]` `particles.shape.stroke.width` | number | `2` `particles.shape.stroke.color` | HEX (string) | `"#222222"` `particles.shape.polygon.nb_slides` | number | `5` `particles.shape.image.src` | path link svg / png / gif / jpg | `"assets/img/yop.svg"` `"http://mywebsite.com/assets/img/yop.png"` `particles.shape.image.width` | number (for aspect ratio) | `100` `particles.shape.image.height` | number (for aspect ratio) | `100` `particles.opacity.value` | number (0 to 1) | `0.75` `particles.opacity.random` | boolean | `true` / `false` `particles.opacity.anim.enable` | boolean | `true` / `false` `particles.opacity.anim.speed` | number | `3` `particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25` `particles.opacity.anim.sync` | boolean | `true` / `false` `particles.size.value` | number | `20` `particles.size.random` | boolean | `true` / `false` `particles.size.anim.enable` | boolean | `true` / `false` `particles.size.anim.speed` | number | `3` `particles.size.anim.size_min` | number | `0.25` `particles.size.anim.sync` | boolean | `true` / `false` `particles.line_linked.enable` | boolean | `true` / `false` `particles.line_linked.distance` | number | `150` `particles.line_linked.color` | HEX (string) | `#ffffff` `particles.line_linked.opacity` | number (0 to 1) | `0.5` `particles.line_linked.width` | number | `1.5` `particles.move.enable` | boolean | `true` / `false` `particles.move.speed` | number | `4` `particles.move.direction` | string | `"none"` `"top"` `"top-right"` `"right"` `"bottom-right"` `"bottom"` `"bottom-left"` `"left"` `"top-left"` `particles.move.random` | boolean | `true` / `false` `particles.move.straight` | boolean | `true` / `false` `particles.move.out_mode` | string (out of canvas) | `"out"` `"bounce"` `particles.move.bounce` | boolean (between particles) | `true` / `false` `particles.move.attract.enable` | boolean | `true` / `false` `particles.move.attract.rotateX` | number | `3000` `particles.move.attract.rotateY` | number | `1500` `interactivity.detect_on` | string | `"canvas", "window"` `interactivity.events.onhover.enable` | boolean | `true` / `false` `interactivity.events.onhover.mode` | string array selection | `"grab"` `"bubble"` `"repulse"` `["grab", "bubble"]` `interactivity.events.onclick.enable` | boolean | `true` / `false` `interactivity.events.onclick.mode` | string array selection | `"push"` `"remove"` `"bubble"` `"repulse"` `["push", "repulse"]` `interactivity.events.resize` | boolean | `true` / `false` `interactivity.events.modes.grab.distance` | number | `100` `interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75` `interactivity.events.modes.bubble.distance` | number | `100` `interactivity.events.modes.bubble.size` | number | `40` `interactivity.events.modes.bubble.duration` | number (second) | `0.4` `interactivity.events.modes.repulse.distance` | number | `200` `interactivity.events.modes.repulse.duration` | number (second) | `1.2` `interactivity.events.modes.push.particles_nb` | number | `4` `interactivity.events.modes.push.particles_nb` | number | `4` `retina_detect` | boolean | `true` / `false` ------------------------------- ### `Packages install` ##### ***npm*** https://www.npmjs.com/package/particles.js ``` npm install particles.js ``` ##### ***Bower*** ``` bower install particles.js --save ``` ##### ***Rails Assets*** ``` gem 'rails-assets-particles.js' ``` ##### ***Meteor*** https://atmospherejs.com/newswim/particles ``` meteor add newswim:particles ``` ------------------------------- ### `Hosting / CDN` ***Please use this host or your own to load particles.js on your projects*** http://www.jsdelivr.com/#!particles.js ", Assign "at most 3 tags" to the expected json: {"id":"5543","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"

AI prompts

AI prompts