From 2bf57e2c72e403c6b44c23382356c07d8ddfab2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 29 Aug 2025 22:51:24 -0500
Subject: [PATCH] feat: better framing

---
 packages/website/src/components/HelpingSpotLight.tsx |  8 +-------
 .../components/TankSandbox/components/Control.tsx    |  4 ++--
 .../TankSandbox/components/Lighting/index.tsx        |  7 ++++++-
 .../src/components/Tankopedia/HeroSection/index.tsx  | 12 ++++++++++--
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/website/src/components/HelpingSpotLight.tsx b/packages/website/src/components/HelpingSpotLight.tsx
index 375f8b8ed..a965c772d 100644
--- a/packages/website/src/components/HelpingSpotLight.tsx
+++ b/packages/website/src/components/HelpingSpotLight.tsx
@@ -1,17 +1,11 @@
 import type { SpotLightProps } from '@react-three/fiber';
 import { memo } from 'react';
-import { Color } from 'three';
-import { isHalloween } from '../core/blitzkit/isHalloween';
 
 interface Props extends SpotLightProps {
   debug?: boolean;
 }
 
 export const HelpingSpotLight = memo<Props>(({ debug, ...props }) => {
-  const color = new Color();
-
-  if (isHalloween()) color.set(1, 0.25, 0.25);
-
   return (
     <>
       {debug && (
@@ -21,7 +15,7 @@ export const HelpingSpotLight = memo<Props>(({ debug, ...props }) => {
         </mesh>
       )}
 
-      <spotLight color={color} {...props} />
+      <spotLight {...props} />
     </>
   );
 });
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
index e7539d253..b2d91a657 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
@@ -82,7 +82,7 @@ export function Controls({
     protagonistGunOrigin.y;
   const inspectModeInitialPosition = new Vector3(
     -8,
-    naked ? gunHeight + 10 : 1,
+    naked ? gunHeight + 10 : 2,
     -13,
   );
 
@@ -240,7 +240,7 @@ export function Controls({
       camera.position.copy(inspectModeInitialPosition);
       orbitControls.current.target.set(
         0,
-        gunHeight * (naked ? 1 / 4 : 7 / 8),
+        gunHeight * (naked ? 1 / 4 : 3 / 4),
         0,
       );
       orbitControls.current.enablePan = true;
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx
index 3fb37410a..e70ab668a 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx
@@ -1,8 +1,9 @@
 import { useHelper } from '@react-three/drei';
 import { times } from 'lodash-es';
 import { useRef } from 'react';
-import { SpotLight, SpotLightHelper } from 'three';
+import { Color, SpotLight, SpotLightHelper } from 'three';
 import { degToRad } from 'three/src/math/MathUtils.js';
+import { isHalloween } from '../../../../../../../core/blitzkit/isHalloween';
 import { HelpingSpotLight } from '../../../../../../HelpingSpotLight';
 
 const LIGHTS_COUNT = 5;
@@ -28,6 +29,9 @@ export function Lighting() {
           LIGHT_HEIGHT_0 * (1 - x) + LIGHT_HEIGHT_1 * x,
           LIGHT_DISTANCE * Math.cos(theta),
         ] as const;
+        const color = new Color();
+
+        if (isHalloween()) color.set(1, 0.25, 0.25);
 
         return (
           <HelpingSpotLight
@@ -36,6 +40,7 @@ export function Lighting() {
             penumbra={1}
             castShadow
             decay={1}
+            color={color}
           />
         );
       })}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx
index eccedf02f..770d56dd1 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx
@@ -97,8 +97,16 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           transitionDuration: '1s',
           background: isFullScreen ? 'black' : undefined,
         }}
-        height={!isFullScreen ? 'calc(100svh - 6rem)' : '100vh'}
-        maxHeight={isFullScreen ? undefined : '60rem'}
+        height={
+          isFullScreen
+            ? '100vh'
+            : disturbed
+              ? 'calc(100svh - 6rem)'
+              : {
+                  initial: '28rem',
+                  md: 'calc(100svh - 12rem)',
+                }
+        }
         maxWidth={isFullScreen ? undefined : '120rem'}
         flexGrow="1"
         width={isFullScreen ? '100vw' : undefined}