[pull] main from tsparticles:main

utils/configs/src/c/colors.ts

@@ -0,0 +1,109 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const options: ISourceOptions = {
+  key: "colors",
+  name: "Colors",
+  background: {
+    color: "#000",
+  },
+  interactivity: {
+    events: {
+      onHover: {
+        mode: "trail",
+        enable: true,
+      },
+    },
+    modes: {
+      trail: {
+        delay: 0.005,
+        quantity: 5,
+        pauseOnStop: true,
+        particles: {
+          paint: {
+            color: {
+              value: "#ff0000",
+              animation: {
+                enable: true,
+                speed: 400,
+                sync: true,
+              },
+            },
+          },
+          collisions: {
+            enable: false,
+          },
+          links: {
+            enable: false,
+          },
+          move: {
+            outModes: {
+              default: "destroy",
+            },
+            speed: 2,
+          },
+          size: {
+            value: {
+              min: 1,
+              max: 5,
+            },
+            animation: {
+              enable: true,
+              speed: 5,
+              sync: true,
+              startValue: "min",
+              destroy: "max",
+            },
+          },
+        },
+      },
+    },
+  },
+  particles: {
+    paint: {
+      color: {
+        animation: {
+          enable: true,
+          sync: false,
+          speed: 50,
+        },
+        value: "#ff0000",
+      },
+    },
+    links: {
+      color: "random",
+      enable: true,
+    },
+    move: {
+      enable: true,
+    },
+    number: {
+      value: 100,
+      density: {
+        enable: true,
+      },
+    },
+    opacity: {
+      animation: {
+        enable: true,
+        speed: 0.1,
+      },
+      value: {
+        min: 0.3,
+        max: 0.8,
+      },
+    },
+    size: {
+      animation: {
+        enable: true,
+        speed: 3,
+      },
+      value: {
+        min: 1,
+        max: 3,
+      },
+    },
+  },
+  emitters: [],
+};
+
+export default options;

utils/configs/src/c/index.ts

@@ -7,6 +7,7 @@ import collisionsAbsorb from "./collisionsAbsorb.js";
 import collisionsBounce from "./collisionsBounce.js";
 import collisionsDestroy from "./collisionsDestroy.js";
 import colorAnimation from "./colorAnimation.js";
+import colors from "./colors.js";
 import confettiExplosions from "./confettiExplosions.js";
 import connect from "./connect.js";
 import curlNoise from "./curlNoise.js";
@@ -21,6 +22,7 @@ export default {
   collisionsBounce,
   collisionsDestroy,
   colorAnimation,
+  colors,
   confettiExplosions,
   connect,
   curlNoise,

utils/configs/src/t/index.ts

@@ -6,6 +6,7 @@ import tilt from "./tilt.js";
 import trail from "./trail.js";
 import trailImage from "./trailImage.js";
 import triangles from "./triangles.js";
+import tunnel from "./tunnel.js";
 import twinkle from "./twinkle.js";
 
 export default {
@@ -17,5 +18,6 @@ export default {
   trail,
   trailImage,
   triangles,
+  tunnel,
   twinkle,
 };

utils/configs/src/t/tunnel.ts

@@ -0,0 +1,88 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const options: ISourceOptions = {
+  key: "tunnel",
+  name: "Tunnel",
+  particles: {
+    number: {
+      value: 0,
+    },
+    paint: {
+      color: {
+        value: "#ffffff",
+      },
+    },
+    shape: {
+      type: "circle",
+    },
+    opacity: {
+      value: {
+        min: 0.3,
+        max: 0.8,
+      },
+    },
+    size: {
+      value: {
+        min: 1,
+        max: 10,
+      },
+    },
+    move: {
+      enable: true,
+      size: true,
+      speed: 5,
+      direction: "none",
+      outModes: {
+        default: "destroy",
+      },
+    },
+  },
+  background: {
+    color: "#000",
+  },
+  trail: {
+    enable: true,
+    fill: {
+      color: "#000000",
+    },
+    length: 3,
+  },
+  emitters: {
+    direction: "none",
+    rate: {
+      delay: 0.25,
+      quantity: 10,
+    },
+    position: {
+      x: 50,
+      y: 50,
+    },
+    size: {
+      width: 0,
+      height: 0,
+    },
+    spawn: {
+      fill: {
+        color: {
+          value: "#ff0000",
+          animation: {
+            h: {
+              enable: true,
+              speed: 5,
+            },
+            l: {
+              enable: true,
+              speed: 0,
+              offset: {
+                min: 20,
+                max: 80,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default options;

websites/website/docs/.vitepress/config.ts

@@ -18,8 +18,7 @@ const nav: DefaultTheme.NavItem[] = [
       { text: "@tsparticles", link: "https://github.com/tsparticles" },
     ],
   },
-  { text: "Changelog", link: "/changelog" },
-  { text: "Releases", link: "/releases/" },
+  { text: "Versioning & Migration", link: "/migrations/" },
 ];
 
 const baseSidebar: DefaultTheme.Sidebar = {
@@ -66,11 +65,7 @@ const baseSidebar: DefaultTheme.Sidebar = {
       items: [
         { text: "Getting Started", link: "/guide/getting-started" },
         { text: "Installation", link: "/guide/installation" },
-        { text: "Migrations", link: "/guide/migrations" },
-        { text: "Option Rename Matrix", link: "/guide/option-rename-matrix" },
-        { text: "Migrate from v3.x", link: "/guide/migrate-from-v3" },
-        { text: "Migrate from v2.x", link: "/guide/migrate-from-v2" },
-        { text: "Migrate from v1.x", link: "/guide/migrate-from-v1" },
+
         { text: "Bundles", link: "/guide/bundles" },
         { text: "Bundle: Basic", link: "/guide/bundles-basic" },
         { text: "Bundle: Slim", link: "/guide/bundles-slim" },
@@ -239,9 +234,21 @@ const baseSidebar: DefaultTheme.Sidebar = {
       ],
     },
   ],
-  "/migration/": [{ text: "Migration", items: [{ text: "Compatibility & Migrations", link: "/migration/" }] }],
-  "/changelog": [{ text: "Changelog", items: [{ text: "Latest Release", link: "/changelog" }] }],
-  "/releases/": [{ text: "Releases", items: [{ text: "Versioning & Release", link: "/releases/" }] }],
+  "/migrations/": [
+    {
+      text: "Versioning & Migration",
+      items: [
+        { text: "Overview", link: "/migrations/" },
+        { text: "Migrate from v3.x", link: "/migrations/from-v3" },
+        { text: "Migrate from v2.x", link: "/migrations/from-v2" },
+        { text: "Migrate from v1.x", link: "/migrations/from-v1" },
+        { text: "Option Rename Matrix", link: "/migrations/option-rename-matrix" },
+        { text: "Changelog", link: "/migrations/changelog" },
+        { text: "Releases", link: "/migrations/releases" },
+        { text: "particles.js Migration", link: "/migrations/particles-js" },
+      ],
+    },
+  ],
 };
 
 function prefixSidebarItems(items: DefaultTheme.SidebarItem[], prefix: string): DefaultTheme.SidebarItem[] {

websites/website/docs/.vitepress/theme/components/MyHome.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { VPHomeFeatures, VPHomeContent } from "vitepress/theme";
+import RandomDemoHero from "./RandomDemoHero.vue";
+
+const { frontmatter: fm } = useData();
+</script>
+
+<template>
+  <div v-if="fm.hero" class="VPHome">
+    <RandomDemoHero />
+    <VPHomeFeatures />
+    <VPHomeContent>
+      <Content />
+    </VPHomeContent>
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  margin-bottom: 96px;
+}
+
+@media (min-width: 768px) {
+  .VPHome {
+    margin-bottom: 128px;
+  }
+}
+</style>