Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: make silk animation longer and more erratic

Browse Source 
Increased duration to 25s with 7 irregularly spaced keyframe stops
to make the loop less predictable. WeeklyQ offset at -11s for
desync. Same CPU cost — still just background-position interpolation.
This commit is contained in:
vicrodh committed 2026-02-20 01:09:26 -06:00
1 parent e0770eb4fa
commit 376c789f8e
3 files changed
+23 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/views/DynamicSuggestView.svelte
+7 -3
View File
@@ -409,13 +409,17 @@
radial-gradient(ellipse at 20% 80%, rgba(255, 140, 0, 0.5) 0%, transparent 60%),
linear-gradient(135deg, #e8a020 0%, #d4781a 30%, #c45e18 60%, #a04010 100%);
background-size: 200% 200%;
animation: silk-shift 10s ease-in-out infinite alternate;
animation: silk-shift 25s ease-in-out infinite alternate;
}
@keyframes silk-shift {
0% { background-position: 0% 0%; }
50% { background-position: 100% 50%; }
100% { background-position: 30% 100%; }
14% { background-position: 80% 25%; }
31% { background-position: 20% 70%; }
47% { background-position: 95% 40%; }
62% { background-position: 10% 90%; }
78% { background-position: 65% 15%; }
100% { background-position: 35% 60%; }
}
.metadata {
src/lib/components/views/HomeView.svelte
+9 -5
View File
@@ -1886,7 +1886,7 @@
radial-gradient(ellipse at 20% 80%, rgba(255, 140, 0, 0.5) 0%, transparent 60%),
linear-gradient(135deg, #e8a020 0%, #d4781a 30%, #c45e18 60%, #a04010 100%);
background-size: 200% 200%;
animation: silk-shift 10s ease-in-out infinite alternate;
animation: silk-shift 25s ease-in-out infinite alternate;
}
.mix-gradient-weekly {
@@ -1898,14 +1898,18 @@
radial-gradient(ellipse at 20% 70%, rgba(130, 80, 200, 0.5) 0%, transparent 60%),
linear-gradient(135deg, #b060d0 0%, #8040b0 30%, #6030a0 60%, #402080 100%);
background-size: 200% 200%;
animation: silk-shift 10s ease-in-out infinite alternate;
animation-delay: -5s;
animation: silk-shift 25s ease-in-out infinite alternate;
animation-delay: -11s;
}
@keyframes silk-shift {
0% { background-position: 0% 0%; }
50% { background-position: 100% 50%; }
100% { background-position: 30% 100%; }
14% { background-position: 80% 25%; }
31% { background-position: 20% 70%; }
47% { background-position: 95% 40%; }
62% { background-position: 10% 90%; }
78% { background-position: 65% 15%; }
100% { background-position: 35% 60%; }
}
.mix-card-badge {
src/lib/components/views/WeeklySuggestView.svelte
+7 -3
View File
@@ -409,13 +409,17 @@
radial-gradient(ellipse at 20% 70%, rgba(130, 80, 200, 0.5) 0%, transparent 60%),
linear-gradient(135deg, #b060d0 0%, #8040b0 30%, #6030a0 60%, #402080 100%);
background-size: 200% 200%;
animation: silk-shift 10s ease-in-out infinite alternate;
animation: silk-shift 25s ease-in-out infinite alternate;
}
@keyframes silk-shift {
0% { background-position: 0% 0%; }
50% { background-position: 100% 50%; }
100% { background-position: 30% 100%; }
14% { background-position: 80% 25%; }
31% { background-position: 20% 70%; }
47% { background-position: 95% 40%; }
62% { background-position: 10% 90%; }
78% { background-position: 65% 15%; }
100% { background-position: 35% 60%; }
}
.metadata {