diff --git a/package.json b/package.json
index 1b1be4c82f..8dc8f949e4 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,8 @@
"sortablejs": "^1.15.0",
"superstruct": "^1.0.3",
"tinykeys": "^1.1.3",
- "tsparticles": "^1.34.0",
+ "tsparticles-engine": "^2.8.0",
+ "tsparticles-preset-links": "^2.8.0",
"unfetch": "^4.1.0",
"vis-data": "^7.1.2",
"vis-network": "^8.5.4",
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 1dd9b0c7ce..2b81e1a84f 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -13,6 +13,9 @@
color: var(--primary-text-color, #212121);
background-color: #0277bd !important;
}
+ body {
+ height: auto;
+ }
.content {
box-sizing: border-box;
padding: 20px 16px;
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 1c4e6ffbe5..72dabb9d9a 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -72,7 +72,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
const step = this._curStep()!;
if (this._loading || !step) {
- return html` `;
+ return html` `;
}
if (step.step === "user") {
return html`
diff --git a/src/onboarding/particles.ts b/src/onboarding/particles.ts
index e3f49dd2a5..ca10b20259 100644
--- a/src/onboarding/particles.ts
+++ b/src/onboarding/particles.ts
@@ -1,82 +1,88 @@
-import { tsParticles } from "tsparticles";
+import { tsParticles } from "tsparticles-engine";
+import { loadLinksPreset } from "tsparticles-preset-links";
-tsParticles.load("particles", {
- // autoPlay: true,
- fullScreen: {
- enable: true,
- zIndex: -1,
- },
- detectRetina: true,
- fpsLimit: 60,
- motion: {
- disable: false,
- reduce: {
- factor: 4,
- value: true,
+loadLinksPreset(tsParticles).then(() => {
+ tsParticles.load("particles", {
+ preset: "links",
+ background: {
+ opacity: 0,
},
- },
- particles: {
- color: {
- value: "#fff",
- animation: {
- enable: true,
- speed: 50,
- sync: false,
+ fullScreen: {
+ enable: true,
+ zIndex: -1,
+ },
+ detectRetina: true,
+ fpsLimit: 60,
+ motion: {
+ disable: false,
+ reduce: {
+ factor: 4,
+ value: true,
},
},
- links: {
+ particles: {
color: {
- value: "random",
+ value: "#fff",
+ animation: {
+ enable: true,
+ speed: 50,
+ sync: false,
+ },
},
- distance: 100,
- enable: true,
- frequency: 1,
- opacity: 0.7,
- width: 1,
- },
- move: {
- enable: true,
- speed: 0.5,
- },
- number: {
- density: {
+ links: {
+ color: {
+ value: "random",
+ },
+ distance: 100,
enable: true,
- area: 800,
- factor: 1000,
+ frequency: 1,
+ opacity: 0.7,
+ width: 1,
},
- limit: 0,
- value: 50,
- },
- opacity: {
- random: {
+ move: {
enable: true,
- minimumValue: 0.3,
- },
- value: 0.5,
- animation: {
- destroy: "none",
- enable: true,
- minimumValue: 0.3,
speed: 0.5,
- startValue: "random",
- sync: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ area: 800,
+ factor: 1000,
+ },
+ limit: 0,
+ value: 50,
+ },
+ opacity: {
+ random: {
+ enable: true,
+ minimumValue: 0.3,
+ },
+ value: 0.5,
+ animation: {
+ destroy: "none",
+ enable: true,
+ minimumValue: 0.3,
+ speed: 0.5,
+ startValue: "random",
+ sync: false,
+ },
+ },
+ size: {
+ random: {
+ enable: true,
+ minimumValue: 1,
+ },
+ value: 3,
+ animation: {
+ destroy: "none",
+ enable: true,
+ minimumValue: 1,
+ speed: 3,
+ startValue: "random",
+ sync: false,
+ },
},
},
- size: {
- random: {
- enable: true,
- minimumValue: 1,
- },
- value: 3,
- animation: {
- destroy: "none",
- enable: true,
- minimumValue: 1,
- speed: 3,
- startValue: "random",
- sync: false,
- },
- },
- },
- pauseOnBlur: true,
+ pauseOnBlur: true,
+ });
});
diff --git a/yarn.lock b/yarn.lock
index 0e43954a18..fc81797c02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9542,7 +9542,8 @@ fsevents@^1.2.7:
terser-webpack-plugin: ^5.2.4
tinykeys: ^1.1.3
ts-lit-plugin: ^1.2.1
- tsparticles: ^1.34.0
+ tsparticles-engine: ^2.8.0
+ tsparticles-preset-links: ^2.8.0
typescript: ^4.9.5
unfetch: ^4.1.0
vinyl-buffer: ^1.0.1
@@ -12855,13 +12856,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"pathseg@npm:^1.2.1":
- version: 1.2.1
- resolution: "pathseg@npm:1.2.1"
- checksum: c83761317b4789d31162165bd34ebc36b99ef77ebfd971bfbc2e65c3400c72f10cd638224abe818dbd4cc8e72518977c29490963e2d9b3212ba37cbb7b730b16
- languageName: node
- linkType: hard
-
"pathval@npm:^1.1.1":
version: 1.1.1
resolution: "pathval@npm:1.1.1"
@@ -15287,15 +15281,89 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"tsparticles@npm:^1.34.0":
- version: 1.34.0
- resolution: "tsparticles@npm:1.34.0"
+"tsparticles-engine@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-engine@npm:2.8.0"
+ checksum: 100635a3456b62fc74baea157945d731ba6a02ad0e4e352ebbaf14f2a81d6c553e5807c93611c830676d8a0bd1c5e9a16039fbb1139d1e0a9611db175af50257
+ languageName: node
+ linkType: hard
+
+"tsparticles-interaction-particles-links@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-interaction-particles-links@npm:2.8.0"
dependencies:
- pathseg: ^1.2.1
- dependenciesMeta:
- pathseg:
- optional: true
- checksum: 1de222a6298d92721677a118c61e5f04013faacac40e61401cfa027c046dc5b6ac1daddf1fb09e81403a7c315fdcd3fe829b1fb1545a7eafeff78b9e0369f4d8
+ tsparticles-engine: ^2.8.0
+ checksum: ac7ec514ec0c3714b52da9c718c7573ad448d6edcc96ca4b79fa12ab5f1ea4e5d61c197a8460ded66d5c4a44dddd06b9e54bb28658f7aa734a70a1d7013ea9e4
+ languageName: node
+ linkType: hard
+
+"tsparticles-move-base@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-move-base@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: f48155ad80a1a5b971bb30932bdda2b5c8476062516b17641036ed6ad3cacb80abbe6ba338673ff5e9b8f7782851112d426077952e393a9b737133abc09c89a9
+ languageName: node
+ linkType: hard
+
+"tsparticles-preset-links@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-preset-links@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ tsparticles-interaction-particles-links: ^2.8.0
+ tsparticles-move-base: ^2.8.0
+ tsparticles-shape-circle: ^2.8.0
+ tsparticles-updater-color: ^2.8.0
+ tsparticles-updater-opacity: ^2.8.0
+ tsparticles-updater-out-modes: ^2.8.0
+ tsparticles-updater-size: ^2.8.0
+ checksum: 2aa96837ce4ae5def66ee5799b27987bfe52362b35b1e40f8f2ef9f6a8cbd85dc5bb805fc0f8d8aa0896b73da5c25e3219ac803ff2d6e1b4225608ac20f5ea10
+ languageName: node
+ linkType: hard
+
+"tsparticles-shape-circle@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-shape-circle@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: 391a1f018a6a4a01217acfc58f6f2b73b4ded7a7be26b45c05afb4c74d994fc186f5c2ede17a3f3dd70381f4c426c825f1c638d828861fd959c30e39cc191fc0
+ languageName: node
+ linkType: hard
+
+"tsparticles-updater-color@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-updater-color@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: abc99d7aab6508b8023f0d375696d6d39dee096e2bc22d2f6d7b4495433430d7c8f3e5f2503cc25b53be0e698ef4811a87622b192a8a85fb141805fd8d433a54
+ languageName: node
+ linkType: hard
+
+"tsparticles-updater-opacity@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-updater-opacity@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: 5897ad7144f59cecd1d6a69466d01a5d58e5f6ecd912b60f7371aff4321166bdbc5b13e0971b5a08cc2bd4e832008093418d493c2a5307b8087fae1867d2a15f
+ languageName: node
+ linkType: hard
+
+"tsparticles-updater-out-modes@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-updater-out-modes@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: 38564328405f50b8bdfc394f982b135031d6e9b967d9b76eb79984847b49a1507e8258d6a2de873ded3d89c3ef9b09dba767cd08a703c4459df2af1e44de8e77
+ languageName: node
+ linkType: hard
+
+"tsparticles-updater-size@npm:^2.8.0":
+ version: 2.8.0
+ resolution: "tsparticles-updater-size@npm:2.8.0"
+ dependencies:
+ tsparticles-engine: ^2.8.0
+ checksum: 99465600be5353dfb4aa49313f1caa092828068996b333ce2059d8dc8dc75b242d69ab9390886a968b670a4cdf109835078afb365f1b5579e4010d9959b05880
languageName: node
linkType: hard