Add the blobs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.9.97",
+  "version": "0.9.96",
   "type": "commonjs",
   "engines": {
     "node": ">=20",

src/Components/Buttons/ExtraCounter.tsx

@@ -3,7 +3,7 @@ import { twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
-import { MAX_TAP_MOVE_DISTANCE } from './CommanderDamage';
+import { MAX_TAP_MOVE_DISTANCE, RotationDivProps } from './CommanderDamage';
 
 const ExtraCounterContainer = twc.div`
   flex
@@ -28,14 +28,17 @@ const ExtraCounterButton = twc.button`
   webkit-user-select-none
   `;
 
-const IconContainer = twc.div`
-  w-auto opacity-50 data-[rotation-is-side=true]:-rotate-90`;
+const IconContainer = twc.div<RotationDivProps>((props) => [
+  'w-auto opacity-50',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'rotate-[-90deg]'
+    : '',
+]);
 
 const TextContainer = twc.div`
   absolute
   top-1/2
   left-1/2 
-  data-[rotation-is-side=true]:-rotate-90
   `;
 
 type ExtraCounterProps = {
@@ -112,9 +115,6 @@ const ExtraCounter = ({
   const fontWeight = 'bold';
   const strokeWidth = isSide ? '0.4vmax' : '0.7vmin';
 
-  const rotationIsSide =
-    rotation === Rotation.SideFlipped || rotation === Rotation.Side;
-
   return (
     <ExtraCounterContainer>
       <ExtraCounterButton
@@ -126,10 +126,8 @@ const ExtraCounter = ({
         }}
         aria-label={`Player ${playerIndex} extra counter: ${type}`}
       >
-        <IconContainer data-rotation-is-side={rotationIsSide}>
-          {Icon}
-        </IconContainer>
-        <TextContainer data-rotation-is-side={rotationIsSide}>
+        <IconContainer $rotation={rotation}>{Icon}</IconContainer>
+        <TextContainer>
           <OutlinedText
             fontSize={fontSize}
             fontWeight={fontWeight}

src/Components/Views/StartMenu/StartMenu.tsx

@@ -36,9 +36,9 @@ const standardSettings: Pick<
   orientation: Orientation.Landscape,
 };
 
-const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
+const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10 z-10`;
 
-const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-10 items-center flex flex-row flex-wrap px-4 gap-4`;
 
 const SliderWrapper = twc.div`mx-8 relative`;
 
@@ -237,14 +237,14 @@ const Start = () => {
     <>
       <InfoDialog dialogRef={infoDialogRef} />
       {settings.showAnimations && (
-        <>
+        <div className="blob-container">
           <div className="spotlight1" />
           <div className="spotlight2" />
-        </>
+        </div>
       )}
 
       <SettingsDialog dialogRef={settingsDialogRef} />
-      <div className="flex justify-center items-center w-screen">
+      <div className="flex justify-center items-center w-screen z-10">
         <MainWrapper>
           <Info
             className="size-8 absolute top-7 left-4 text-primary-main"

src/index.css

@@ -81,86 +81,6 @@ 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.background.default');
-
-  position: fixed;
-  height: 10vmax;
-  width: 30vmax;
-  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(10vmax);
-}
-
-.spotlight2 {
-  background: theme('colors.background.default');
-
-  position: fixed;
-  height: 30vmax;
-  width: 10vmax;
-  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(10vmax);
-}
-
 input[type='range'] {
   -webkit-appearance: none;
   transition: background 0ms ease-in;
@@ -229,3 +149,92 @@ input[type='range']::-ms-thumb {
   cursor: pointer;
   margin-top: -3px;
 }
+
+.blob-container {
+  margin: auto;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  filter: blur(10vmax) contrast(10);
+  z-index: 9;
+  background: theme('colors.background.default');
+  mix-blend-mode: screen;
+
+  opacity: 30%;
+}
+
+@keyframes background-orb {
+  0% {
+    bottom: 10%;
+  }
+  50% {
+    bottom: 70%;
+  }
+
+  100% {
+    bottom: 10%;
+  }
+}
+
+@keyframes move-right-left {
+  0% {
+    rotate: 0deg;
+    right: 10%;
+  }
+
+  25% {
+    right: 20%;
+  }
+
+  50% {
+    rotate: 360deg;
+    right: 10%;
+  }
+
+  75% {
+    right: 30%;
+  }
+
+  100% {
+    rotate: 0deg;
+    right: 10%;
+  }
+}
+
+.spotlight1 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 20vmax;
+  width: 70vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 15s, 50s;
+  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;
+
+  /* filter: blur(5vmax); */
+}
+
+.spotlight2 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 70vmax;
+  width: 20vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 30s, 100s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: reverse, reverse;
+  animation-timing-function: ease-in-out;
+
+  /* filter: blur(5vmax); */
+}

tailwind.config.ts

@@ -13,7 +13,7 @@ export const baseColors = {
   },
   background: {
     default: '#2E3041', // Orig: #35374B
-    spotlight: '#777BA7',
+    spotlight: 'hsl(110, 80.4%, 32.1%)',
     backdrop: 'rgba(0, 0, 0, 0.3)',
     settings: 'rgba(0, 0, 0, 0.8)',
   },