From 10a24da49c88ce041802972858f1f7a99f0763d7 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Thu, 7 May 2026 14:19:42 +0100 Subject: [PATCH] Improve shine animations --- assets/css/app.css | 13 +++++-------- .../components/stats_components.ex | 6 +++--- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 462a5f09..5f747ab7 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -42,7 +42,7 @@ --font-sans: "InterVariable", sans-serif; --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; - --animate-shine: shine 3s ease infinite; + --animate-shine: shine 3s linear infinite; --animate-equalizer-bar: equalizer-bar 1.2s ease-in-out infinite; @keyframes shake { @@ -66,14 +66,11 @@ } @keyframes shine { - 0%, - 100% { - background-size: 100% 100%; - background-position: left center; + 0% { + background-position: 200% center; } - 50% { - background-size: 200% 200%; - background-position: right center; + 100% { + background-position: -200% center; } } diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex index 51fa64b8..41dd8436 100644 --- a/lib/music_library_web/components/stats_components.ex +++ b/lib/music_library_web/components/stats_components.ex @@ -300,7 +300,7 @@ defmodule MusicLibraryWeb.StatsComponents do :if={@years && same_year?(@years)} class={[ "text-xs/5", - "animate-shine bg-linear-to-r from-red-500 via-red-200 to-red-700 bg-clip-text font-semibold text-transparent" + "animate-shine bg-linear-to-br from-red-700 via-red-300 to-red-700 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]" ]} > {gettext("Today")} @@ -311,9 +311,9 @@ defmodule MusicLibraryWeb.StatsComponents do "text-xs/5", normal_year?(@years) && "text-zinc-500 dark:text-zinc-400", gold_year?(@years) && - "animate-shine bg-linear-to-r from-yellow-500 via-yellow-200 to-yellow-700 bg-clip-text font-semibold text-transparent", + "animate-shine bg-linear-to-br from-yellow-700 via-yellow-300 to-yellow-700 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]", silver_year?(@years) && - "animate-shine bg-linear-to-r from-gray-500 via-gray-200 to-gray-700 bg-clip-text font-semibold text-transparent" + "animate-shine bg-linear-to-br from-gray-600 via-gray-300 to-gray-600 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]" ]} > {ngettext(