add glow animation to start menu

src/Components/Dialogs/SettingsDialog.tsx

@@ -11,7 +11,7 @@ const SettingContainer = twc.div`w-full flex flex-col mb-2`;
 
 const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`;
 
-const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
+const Description = twc.p`mr-16 text-xs text-left text-text-secondary mt-1`;
 
 const baseGithubReleasesUrl =
   'https://github.com/Vikeo/LifeTrinket/releases/tag/';
@@ -220,6 +220,27 @@ export const SettingsDialog = ({
           Will enter fullscreen mode when starting a game if this is enabled.
         </Description>
       </SettingContainer>
+
+      <SettingContainer>
+        <ToggleContainer>
+          <label>Show animations</label>
+          <ToggleButton
+            checked={settings.showAnimations}
+            onChange={() => {
+              setSettings({
+                ...settings,
+                showAnimations: !settings.showAnimations,
+              });
+            }}
+          />
+        </ToggleContainer>
+        <Description>
+          Disables the following animation:
+          <ul className="pl-1 list-inside">
+            <li className="list-disc">Glow effect on start menu</li>
+          </ul>
+        </Description>
+      </SettingContainer>
       <Separator height="1px" />
       <div className="flex w-full justify-center">
         <button

src/Components/Views/StartMenu/StartMenu.tsx

@@ -236,6 +236,12 @@ const Start = () => {
   return (
     <>
       <InfoDialog dialogRef={infoDialogRef} />
+      {settings.showAnimations && (
+        <>
+          <div className="spotlight1" />
+          <div className="spotlight2" />
+        </>
+      )}
 
       <SettingsDialog dialogRef={settingsDialogRef} />
       <div className="flex justify-center items-center w-screen">

src/Types/Settings.ts

@@ -25,6 +25,7 @@ export type Settings = {
   showPlayerMenuCog: boolean;
   goFullscreenOnStart: boolean;
   preStartMode: PreStartMode;
+  showAnimations: boolean;
 };
 
 export type InitialGameSettings = {
@@ -57,6 +58,7 @@ export const settingsSchema = z.object({
   showPlayerMenuCog: z.boolean(),
   goFullscreenOnStart: z.boolean(),
   preStartMode: z.nativeEnum(PreStartMode),
+  showAnimations: z.boolean(),
 });
 
 export const defaultSettings: Settings = {
@@ -65,4 +67,5 @@ export const defaultSettings: Settings = {
   showStartingPlayer: true,
   showPlayerMenuCog: true,
   preStartMode: PreStartMode.None,
+  showAnimations: true,
 };

src/index.css

@@ -81,6 +81,86 @@ code {
   }
 }
 
+@keyframes background-orb {
+  0% {
+    bottom: 10%;
+  }
+  50% {
+    bottom: 90%;
+  }
+
+  100% {
+    bottom: 10%;
+  }
+}
+
+@keyframes move-right-left {
+  0% {
+    rotate: 0deg;
+    right: 10%;
+  }
+
+  25% {
+    right: 70%;
+  }
+
+  50% {
+    rotate: 360deg;
+    right: 10%;
+  }
+
+  75% {
+    right: 90%;
+  }
+
+  100% {
+    rotate: 0deg;
+    right: 10%;
+  }
+}
+
+.spotlight1 {
+  background: theme('colors.primary.dark');
+
+  position: fixed;
+  height: 100px;
+  width: 300px;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 30s, 60s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: alternate, alternate;
+  animation-timing-function: ease-in-out;
+
+  animation-delay: -15s, -15s;
+
+  opacity: 0.8;
+  mix-blend-mode: screen;
+
+  filter: blur(125px);
+}
+
+.spotlight2 {
+  background: theme('colors.primary.dark');
+
+  position: fixed;
+  height: 300px;
+  width: 100px;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 60s, 120s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: reverse, reverse;
+  animation-timing-function: ease-in-out;
+
+  opacity: 0.8;
+  mix-blend-mode: screen;
+
+  filter: blur(125px);
+}
+
 input[type='range'] {
   -webkit-appearance: none;
   transition: background 450ms ease-in;