fix: various items

apps/marketing/src/app/(marketing)/layout.tsx

@@ -25,7 +25,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   }, []);
 
   return (
-    <div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+    <div className="relative max-w-[100vw] pt-20 md:pt-28">
       <div
         className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
           'bg-background/50 backdrop-blur-md': scrollY > 5,

apps/marketing/src/components/(marketing)/hero.tsx

@@ -134,7 +134,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
               variants={HeroTitleVariants}
               initial="initial"
               animate="animate"
-              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
+              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition-colors duration-300"
             >
               <Link href="/singleplayer" className="block px-4 py-2 text-center">
                 <h2 className="text-muted-foreground text-xs font-semibold">

packages/lib/client-only/hooks/use-element-scale-size.ts

@@ -60,26 +60,17 @@ export const calculateTextScaleSize = (
  */
 export function useElementScaleSize(
   container: { width: number; height: number },
-  child: RefObject<HTMLElement | null>,
+  text: string,
   fontSize: number,
   fontFamily: string,
 ) {
   const [scalingFactor, setScalingFactor] = useState(1);
 
   useEffect(() => {
-    if (!child.current) {
+    const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
-      return;
-    }
-
-    const scaleSize = calculateTextScaleSize(
-      container,
-      child.current.innerText,
-      `${fontSize}px`,
-      fontFamily,
-    );
 
     setScalingFactor(scaleSize);
-  }, [child, container, fontFamily, fontSize]);
+  }, [text, container, fontFamily, fontSize]);
 
   return scalingFactor;
 }

packages/ui/components/signing-card.tsx

@@ -56,7 +56,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
   const sheenGradient = useMotionTemplate`linear-gradient(
     30deg,
     transparent,
-    rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    rgba(var(--sheen-color) / ${sheenOpacity}) ${sheenPosition}%,
     transparent)`;
 
   const cardRef = useRef<HTMLDivElement>(null);
@@ -98,10 +98,12 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
         void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
         void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
 
+        void animate(sheenOpacity, 0, { duration: 2, ease: 'backInOut' });
+
         setTrackMouse(false);
       }, 1000);
     },
-    [cardX, cardY, cardCenterPosition, trackMouse],
+    [cardX, cardY, cardCenterPosition, trackMouse, sheenOpacity],
   );
 
   useEffect(() => {
@@ -126,7 +128,6 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
           transformStyle: 'preserve-3d',
           rotateX,
           rotateY,
-          // willChange: 'transform background-image',
         }}
       >
         <SigningCardContent className="bg-transparent" name={name} />

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -145,7 +145,7 @@ export function SinglePlayerModeCustomTextField({
       height,
       width,
     },
-    $paragraphEl,
+    field.customText,
     maxFontSize,
     fontVariableValue,
   );