Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-19 18:28:42 +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;
duration: number;
delay: number;
rotation: number;
}
@customElement("ha-snowflakes")
@@ -50,6 +51,7 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
size: Math.random() * 12 + 8, // Random size between 8-20px
duration: Math.random() * 8 + 8, // Random duration between 8-16s
delay: Math.random() * 8, // Random delay between 0-8s
rotation: Math.random() * 720 - 360, // Random starting rotation -360 to 360deg
});
}
this._snowflakes = snowflakes;
@@ -83,6 +85,7 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
height: ${flake.size}px;
animation-duration: ${flake.duration}s;
animation-delay: ${flake.delay}s;
--rotation: ${flake.rotation}deg;
"
viewBox="0 0 16 16"
fill="none"
@@ -144,19 +147,23 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
@keyframes fall {
0% {
transform: translateY(-10vh) translateX(0);
transform: translateY(-10vh) translateX(0) rotate(var(--rotation));
}
25% {
transform: translateY(30vh) translateX(10px);
transform: translateY(30vh) translateX(10px)
rotate(calc(var(--rotation) + 25deg));
}
50% {
transform: translateY(60vh) translateX(-10px);
transform: translateY(60vh) translateX(-10px)
rotate(calc(var(--rotation) + 50deg));
}
75% {
transform: translateY(85vh) translateX(10px);
transform: translateY(85vh) translateX(10px)
rotate(calc(var(--rotation) + 75deg));
}
100% {
transform: translateY(120vh) translateX(0);
transform: translateY(120vh) translateX(0)
rotate(calc(var(--rotation) + 100deg));
}
}