feat: hide guess

packages/website/src/components/Navbar.astro

@@ -13,6 +13,11 @@ import { getStrings } from '../core/i18n/getStrings';
 import { Var } from '../core/radix/var';
 import { LinkI18n } from './LinkI18n';
 
+export interface Props {
+  integrated?: boolean;
+}
+
+const { integrated } = Astro.props;
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
@@ -62,7 +67,11 @@ const strings = getStrings(locale);
   });
 </script>
 
-<Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
+{
+  !integrated && (
+    <Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
+  )
+}
 
 <Flex
   direction="column"
@@ -74,6 +83,7 @@ const strings = getStrings(locale);
   position="fixed"
   style={{
     zIndex: 1,
+    backdropFilter: 'blur(4rem)',
   }}
 >
   <Flex
@@ -81,7 +91,7 @@ const strings = getStrings(locale);
     p={{ initial: '4', sm: '3' }}
     direction="column"
     align="center"
-    style={{ backgroundColor: Var('gray-1') }}
+    style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx

@@ -85,7 +85,7 @@ export function Title({ outline }: TitleProps) {
   return (
     <Box
       position="absolute"
-      top={disturbed ? '8' : '50%'}
+      top={disturbed ? '6rem' : '50%'}
       left="50%"
       style={{
         transitionDuration: '1s',
@@ -109,10 +109,10 @@ export function Title({ outline }: TitleProps) {
             : undefined,
           letterSpacing: disturbed || !revealed ? 0 : '-0.03em',
           transition: `
-          letter-spacing 1s ease ${disturbed ? '0s' : '1s'},
-          font-size 1s,
-          -webkit-text-stroke 1.5s
-        `,
+            letter-spacing 1s ${disturbed ? '0s' : '1s'},
+            font-size 1s,
+            -webkit-text-stroke 1.5s
+          `,
         }}
         wrap="nowrap"
       >

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -103,11 +103,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         backgroundColor: 'black',
       }}
       position="relative"
-      onWheel={() => {
-        mutateTankopediaEphemeral((draft) => {
-          draft.disturbed = true;
-        });
-      }}
     >
       <Box
         position="absolute"
@@ -132,7 +127,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           zIndex: isFullScreen ? 2 : undefined,
           transitionDuration: '1s',
         }}
-        height="calc(100vh - 6rem)"
+        height={disturbed && !isFullScreen ? 'calc(100vh - 6rem)' : '100vh'}
         maxHeight={isFullScreen ? undefined : '60rem'}
         maxWidth={isFullScreen ? undefined : '120rem'}
         flexGrow="1"
@@ -184,6 +179,28 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
 
         <Title outline />
       </Flex>
+
+      {!disturbed && (
+        <Box
+          onPointerDown={(event) => {
+            event.stopPropagation();
+            mutateTankopediaEphemeral((draft) => {
+              draft.disturbed = true;
+            });
+          }}
+          onWheel={(event) => {
+            event.stopPropagation();
+            mutateTankopediaEphemeral((draft) => {
+              draft.disturbed = true;
+            });
+          }}
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+        />
+      )}
     </Flex>
   );
 }