diff --git a/package.json b/package.json index f57b523722..d897135776 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,7 @@ "sortablejs": "^1.10.2", "superstruct": "^0.10.13", "tinykeys": "^1.1.1", + "tsparticles": "^1.19.2", "unfetch": "^4.1.0", "vis-data": "^7.1.1", "vis-network": "^8.5.4", diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index b4bf31b620..e38f06a4d5 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -7,24 +7,16 @@ - +
- + Home Assistant
@@ -76,4 +92,4 @@ })(); - \ No newline at end of file + diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index a460ab60d5..8bd4e25210 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -121,6 +121,9 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { import("./onboarding-core-config"); registerServiceWorker(this, false); this.addEventListener("onboarding-step", (ev) => this._handleStepDone(ev)); + if (window.innerWidth > 450) { + import("./particles"); + } } protected updated(changedProps: PropertyValues) { diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index bb3f27ba2e..63cff1ca6e 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -206,7 +206,7 @@ class OnboardingCreateUser extends LitElement { } .action { - margin: 32px 0; + margin: 32px 0 16px; text-align: center; } `; diff --git a/src/onboarding/particles.ts b/src/onboarding/particles.ts new file mode 100644 index 0000000000..e3f49dd2a5 --- /dev/null +++ b/src/onboarding/particles.ts @@ -0,0 +1,82 @@ +import { tsParticles } from "tsparticles"; + +tsParticles.load("particles", { + // autoPlay: true, + fullScreen: { + enable: true, + zIndex: -1, + }, + detectRetina: true, + fpsLimit: 60, + motion: { + disable: false, + reduce: { + factor: 4, + value: true, + }, + }, + particles: { + color: { + value: "#fff", + animation: { + enable: true, + speed: 50, + sync: false, + }, + }, + links: { + color: { + value: "random", + }, + distance: 100, + enable: true, + frequency: 1, + opacity: 0.7, + width: 1, + }, + move: { + enable: true, + speed: 0.5, + }, + 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, + }, + }, + }, + pauseOnBlur: true, +}); diff --git a/yarn.lock b/yarn.lock index 0e99fa45a0..f2806a4f66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11209,6 +11209,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +pathseg@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/pathseg/-/pathseg-1.2.0.tgz#22af051e28037671e7799e296fe96c5dcbe53acd" + integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw== + pathval@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0" @@ -13399,6 +13404,13 @@ tslib@^2.0.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== +tsparticles@^1.19.2: + version "1.19.2" + resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.19.2.tgz#056d26149e67155e99efbfb1ea8f521fcc66520c" + integrity sha512-DqoseKpYxXAsmpUmXcqf4d7QK7zEcLcrcxjGB4qA6hn9XonVo1oa9hf1XaCgO/H23Dh4Ia31Z4DcSAgsqSt5Xg== + optionalDependencies: + pathseg "^1.2.0" + tsscmp@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"