diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts index a3b8b096f..b86364f0a 100644 --- a/src/client/FlagInput.ts +++ b/src/client/FlagInput.ts @@ -209,7 +209,7 @@ export const ColorShortNames: Record = { "silver-glow": "svg", // glowing silver animation "copper-glow": "cpg", // glowing copper animation neon: "nn", // neon green pulse animation - glitch: "gl", // fast glitch effect + lava: "lf", // lava animation water: "wt", // soft blue breathing animation }; @@ -340,7 +340,7 @@ export function checkPermission(): [string[], string[], LockReasonMap, number] { "silver-glow", "copper-glow", "neon", - "glitch", + "lava", "water", ], "flag_input.reason.supporters", @@ -581,7 +581,7 @@ const animationDurations: Record = { "silver-glow": 3000, "gold-glow": 3000, neon: 3000, - glitch: 600, + lava: 6000, water: 6200, }; diff --git a/src/client/styles/core/flag-anime.css b/src/client/styles/core/flag-anime.css index 3be986326..47a42d183 100644 --- a/src/client/styles/core/flag-anime.css +++ b/src/client/styles/core/flag-anime.css @@ -147,31 +147,6 @@ will-change: transform, opacity, filter; } -@keyframes glitch { - 0%, - 100% { - background-color: #ff00ff; - } - 20% { - background-color: #00ffff; - } - 40% { - background-color: #ffff00; - } - 60% { - background-color: #00ffff; - transform: translateX(1px); - } - 80% { - background-color: #ff0000; - transform: translateX(-1px); - } -} - -.flag-color-glitch { - animation: glitch 0.6s steps(1, end) infinite; -} - @keyframes waterFlicker { 0% { transform: translateY(0px) scale(1); @@ -221,3 +196,41 @@ animation: waterFlicker 6.2s ease-in-out infinite; will-change: transform, opacity, filter; } + +@keyframes lavaFlow { + 0% { + background-color: #ff4500; + filter: brightness(1.1); + transform: scale(1); + } + 20% { + background-color: #ff6347; + filter: brightness(1.2); + transform: scale(1.02); + } + 40% { + background-color: #ff8c00; + filter: brightness(1.3); + transform: scale(1.03); + } + 60% { + background-color: #ff4500; + filter: brightness(1.4); + transform: scale(1.01); + } + 80% { + background-color: #ff0000; + filter: brightness(1.2); + transform: scale(1); + } + 100% { + background-color: #ff4500; + filter: brightness(1.1); + transform: scale(1); + } +} + +.flag-color-lava { + animation: lavaFlow 6s ease-in-out infinite; + will-change: background-color, filter, transform; +} diff --git a/src/core/Util.ts b/src/core/Util.ts index d1ca7fe71..c35ec3bec 100644 --- a/src/core/Util.ts +++ b/src/core/Util.ts @@ -398,7 +398,7 @@ export function getPermissionSummary( "silver-glow", "copper-glow", "neon", - "glitch", + "lava", "water", ]); }