Make ambassador cards shiny

package.json

@@ -25,6 +25,7 @@
     "@alveusgg/data": "github:alveusgg/data#0.37.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-parallax-tilt": "^1.7.222",
     "tmi.js": "^1.8.5"
   },
   "devDependencies": {

src/components/ambassadorCard/AmbassadorCard.tsx

@@ -18,6 +18,8 @@ import moderatorBadge from "../../assets/mod.svg";
 
 import styles from "./ambassadorCard.module.scss";
 
+import Tilt from "react-parallax-tilt";
+
 const offsetPosition = (position: AmbassadorImage["position"]) => {
   const [x, y] = (position || "50% 50%").split(" ");
   return `${x} min(calc(${y} + 1.5rem), 0%)`;
@@ -28,17 +30,29 @@ export interface AmbassadorCardProps {
   ambassador: AmbassadorType;
   onClose?: () => void;
   className?: string;
+  disableCardEffects?: boolean;
 }
 
 export default function AmbassadorCard(props: AmbassadorCardProps) {
-  const { ambassadorKey, ambassador, onClose, className } = props;
+  const { ambassadorKey, ambassador, onClose, className, disableCardEffects } =
+    props;
   const images = getAmbassadorImages(ambassadorKey);
   const mod =
     window?.Twitch?.ext?.viewer?.role === "broadcaster" ||
     window?.Twitch?.ext?.viewer?.role === "moderator";
+  const glareOpacity = disableCardEffects ? 0.0 : 0.3;
 
   return (
-    <div
+    <Tilt
+      tiltEnable={!disableCardEffects}
+      glareEnable={!disableCardEffects}
+      glareMaxOpacity={glareOpacity}
+      glareBorderRadius="1rem"
+      glarePosition="bottom"
+      scale={1.0}
+      perspective={2500}
+      tiltReverse
+      transitionSpeed={3000}
       className={classes(
         styles.ambassadorCard,
         className,
@@ -163,6 +177,6 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
           </p>
         </div>
       </div>
-    </div>
+    </Tilt>
   );
 }

src/components/ambassadorCard/ambassadorCard.module.scss

@@ -15,7 +15,7 @@
   box-shadow: $shadow;
 
   border-radius: 1rem;
-  overflow: hidden;
+  overflow: visible;
 
   color: $primary-text;
   font-size: 0.7rem;
@@ -41,6 +41,7 @@
       width: 100%;
       object-fit: cover;
       aspect-ratio: 2.2;
+      border-radius: 1rem 1rem 0rem 0rem;
 
       @media (min-width: 480px) {
         aspect-ratio: 1.8;
@@ -64,6 +65,7 @@
       backdrop-filter: blur(0.25rem);
       transition: $transition;
       transition-property: opacity, backdrop-filter;
+      border-radius: 1rem 1rem 0rem 0rem;
 
       .name {
         font-size: 1.3rem;

src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx

@@ -14,6 +14,8 @@ import type { OverlayOptionProps } from "../Overlay";
 import styles from "./ambassadors.module.scss";
 import IconChevron from "../../../../../components/icons/IconChevron";
 
+import useSettings from "../../../hooks/useSettings";
+
 export default function Ambassadors(props: OverlayOptionProps) {
   const {
     context: { activeAmbassador, setActiveAmbassador },
@@ -84,6 +86,8 @@ export default function Ambassadors(props: OverlayOptionProps) {
     handleArrowVisibility();
   }, [handleArrowVisibility]);
 
+  const settings = useSettings();
+
   return (
     <div className={classes(styles.ambassadorList, className)}>
       <div className={styles.scroll}>
@@ -136,6 +140,7 @@ export default function Ambassadors(props: OverlayOptionProps) {
           ambassador={ambassadors[activeAmbassador.key]}
           onClose={() => setActiveAmbassador({})}
           className={styles.ambassadorCard}
+          disableCardEffects={settings.disableCardEffects.value}
         />
       )}
     </div>

src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss

@@ -120,7 +120,6 @@ $fade-distance: 3rem;
   .ambassadorCard {
     align-self: center;
     z-index: 0; // stay below ambassadors list
-    transform-origin: center left;
     animation: slideIn 0.5s ease-in-out;
 
     @media (prefers-reduced-motion) {

src/pages/overlay/hooks/useSettings.tsx

@@ -35,6 +35,12 @@ const settings = {
     },
     configurable: false,
   },
+  disableCardEffects: {
+    title: "Disable Ambassador Card Effects",
+    type: "boolean",
+    process: (value: any) => !!value,
+    configurable: true,
+  },
 };
 
 type SettingsKey = keyof typeof settings;