feat: better framing

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} />
     </>
   );
 });

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;

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}
           />
         );
       })}

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}