Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Add small rotation to snowflakes (#28308)

Browse Source
This commit is contained in:
Aidan Timson
2025-12-03 13:12:08 +00:00
committed by GitHub
parent cd34447603
commit 5a40627676
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ha-snowflakes.ts
View File

@@ -10,6 +10,7 @@ interface Snowflake {
size: number; size: number;
duration: number; duration: number;
delay: number; delay: number;
rotation: number;
} }
@customElement("ha-snowflakes") @customElement("ha-snowflakes")
@@ -50,6 +51,7 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
size: Math.random() * 12 + 8, // Random size between 8-20px size: Math.random() * 12 + 8, // Random size between 8-20px
duration: Math.random() * 8 + 8, // Random duration between 8-16s duration: Math.random() * 8 + 8, // Random duration between 8-16s
delay: Math.random() * 8, // Random delay between 0-8s delay: Math.random() * 8, // Random delay between 0-8s
rotation: Math.random() * 720 - 360, // Random starting rotation -360 to 360deg
}); });
} }
this._snowflakes = snowflakes; this._snowflakes = snowflakes;
@@ -83,6 +85,7 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
height: ${flake.size}px; height: ${flake.size}px;
animation-duration: ${flake.duration}s; animation-duration: ${flake.duration}s;
animation-delay: ${flake.delay}s; animation-delay: ${flake.delay}s;
--rotation: ${flake.rotation}deg;
" "
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
@@ -144,19 +147,23 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
@keyframes fall { @keyframes fall {
0% { 0% {
transform: translateY(-10vh) translateX(0); transform: translateY(-10vh) translateX(0) rotate(var(--rotation));
} }
25% { 25% {
transform: translateY(30vh) translateX(10px); transform: translateY(30vh) translateX(10px)
rotate(calc(var(--rotation) + 25deg));
} }
50% { 50% {
transform: translateY(60vh) translateX(-10px); transform: translateY(60vh) translateX(-10px)
rotate(calc(var(--rotation) + 50deg));
} }
75% { 75% {
transform: translateY(85vh) translateX(10px); transform: translateY(85vh) translateX(10px)
rotate(calc(var(--rotation) + 75deg));
} }
100% { 100% {
transform: translateY(120vh) translateX(0); transform: translateY(120vh) translateX(0)
rotate(calc(var(--rotation) + 100deg));
} }
} }