feat: render responsive low-poly hero landscape

src/components/scenes/HeroLandscapeScene.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import * as THREE from 'three';
+import { useTheme } from '@/context/ThemeContext';
+import { ThreeCanvas, type SceneFactory } from './ThreeCanvas';
+import {
+  addSoftLights,
+  createMesa,
+  createTree,
+  fitOrthographicCamera,
+  palettes,
+} from './scenePrimitives';
+import styles from './Scenes.module.css';
+
+const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
+  const palette = palettes[theme];
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-12, 12, 6, -6, 0.1, 50);
+  const cameraBase = new THREE.Vector3(0, 8.5, 17);
+  camera.position.copy(cameraBase);
+  camera.lookAt(0, 2.2, 0);
+  addSoftLights(scene, theme, 15);
+
+  const world = new THREE.Group();
+  scene.add(world);
+
+  const ground = new THREE.Mesh(
+    new THREE.PlaneGeometry(30, 18),
+    new THREE.MeshStandardMaterial({ color: palette.ground, roughness: 1 }),
+  );
+  ground.rotation.x = -Math.PI / 2;
+  ground.position.set(0, -0.03, 1);
+  ground.receiveShadow = true;
+  world.add(ground);
+
+  const clearing = new THREE.Mesh(
+    new THREE.PlaneGeometry(7.6, 4.6),
+    new THREE.MeshStandardMaterial({
+      color: palette.water,
+      roughness: 0.72,
+      transparent: true,
+      opacity: theme === 'dark' ? 0.26 : 0.18,
+    }),
+  );
+  clearing.rotation.x = -Math.PI / 2;
+  clearing.position.set(0, 0.015, 1.2);
+  world.add(clearing);
+
+  const secondaryMountains = new THREE.Group();
+  world.add(secondaryMountains);
+  const mountainData = [
+    [-10.6, -1.7, 4.6, 4.8, 4.2, 0], [-7.2, -2.7, 4.4, 4.4, 4.3, 0],
+    [-4.3, -3.6, 2.7, 3.0, 2.7, 1], [-11.1, 3.3, 3.3, 3.6, 2.8, 1],
+    [-8.8, 4.2, 3.2, 3.0, 2.5, 1], [10.2, -2.1, 4.7, 4.7, 4.3, 0],
+    [6.8, -3.1, 4.0, 4.1, 4.0, 0], [4.2, -3.8, 2.5, 2.7, 2.6, 1],
+    [10.8, 3.6, 3.8, 3.6, 3.1, 1], [8.1, 4.3, 3.0, 3.1, 2.5, 1],
+  ] as const;
+
+  mountainData.forEach(([x, z, width, height, depth, secondary]) => {
+    const mesa = createMesa(width, height, depth, palette);
+    mesa.position.set(x, 0, z);
+    (secondary ? secondaryMountains : world).add(mesa);
+  });
+
+  const secondaryTrees = new THREE.Group();
+  world.add(secondaryTrees);
+  const treeData = [
+    [-5.6, -0.3, 1, 0], [-4.6, 0.2, 0.85, 0], [-3.8, -1.4, 0.72, 1],
+    [-8.2, 2.0, 0.78, 1], [-7.1, 3.0, 1.0, 0], [-5.8, 3.5, 0.72, 0],
+    [5.7, -0.4, 1.0, 0], [4.7, 0.2, 0.82, 0], [3.9, -1.5, 0.7, 1],
+    [8.4, 2.2, 0.82, 1], [7.2, 3.2, 1.0, 0], [5.9, 3.8, 0.72, 0],
+  ] as const;
+  const animatedTrees: THREE.Group[] = [];
+  treeData.forEach(([x, z, scale, secondary]) => {
+    const tree = createTree(palette, scale, secondary === 1);
+    tree.position.set(x, 0, z);
+    (secondary ? secondaryTrees : world).add(tree);
+    animatedTrees.push(tree);
+  });
+
+  const celestial = new THREE.Group();
+  let celestialBaseY = 6.25;
+  celestial.position.set(-5.8, 6.25, -1.5);
+  celestial.lookAt(camera.position);
+  scene.add(celestial);
+
+  if (theme === 'light') {
+    const sun = new THREE.Mesh(
+      new THREE.CircleGeometry(0.62, 32),
+      new THREE.MeshBasicMaterial({ color: 0xffd75a, toneMapped: false }),
+    );
+    celestial.add(sun);
+    for (let index = 0; index < 12; index += 1) {
+      const angle = (index / 12) * Math.PI * 2;
+      const ray = new THREE.Mesh(
+        new THREE.PlaneGeometry(0.13, 0.42),
+        new THREE.MeshBasicMaterial({ color: 0xffd75a, toneMapped: false }),
+      );
+      ray.position.set(Math.sin(angle) * 1.05, Math.cos(angle) * 1.05, 0);
+      ray.rotation.z = -angle;
+      celestial.add(ray);
+    }
+  } else {
+    const moon = new THREE.Mesh(
+      new THREE.SphereGeometry(0.66, 24, 16),
+      new THREE.MeshStandardMaterial({
+        color: palette.snow,
+        emissive: palette.accent,
+        emissiveIntensity: 0.22,
+        roughness: 0.8,
+      }),
+    );
+    celestial.add(moon);
+    const moonLight = new THREE.PointLight(palette.accent, 7, 16, 2);
+    celestial.add(moonLight);
+  }
+
+  return {
+    scene,
+    camera,
+    resize: (width, height) => {
+      const mobile = width < 640;
+      const tablet = width < 1024;
+      secondaryMountains.visible = !mobile;
+      secondaryTrees.visible = !mobile;
+      world.scale.setScalar(mobile ? 0.9 : tablet ? 0.96 : 1);
+      celestial.position.x = mobile ? -2.35 : tablet ? -4.1 : -5.8;
+      celestialBaseY = mobile ? 6.8 : 6.25;
+      celestial.position.y = celestialBaseY;
+      fitOrthographicCamera(camera, width, height, mobile ? 14.5 : tablet ? 12.5 : 11.5);
+    },
+    update: (elapsed) => {
+      celestial.position.y = celestialBaseY + Math.sin(elapsed * 0.55) * 0.08;
+      celestial.rotation.z = theme === 'light' ? elapsed * 0.025 : 0;
+      animatedTrees.forEach((tree, index) => {
+        tree.rotation.z = Math.sin(elapsed * 0.7 + index) * 0.006;
+      });
+      if (!reduceMotion) {
+        camera.position.x += (cameraBase.x + pointer.x * 0.2 - camera.position.x) * 0.035;
+        camera.position.y += (cameraBase.y + pointer.y * 0.1 - camera.position.y) * 0.035;
+        camera.lookAt(0, 2.2, 0);
+      }
+    },
+  };
+};
+
+export function HeroLandscapeScene() {
+  const { theme } = useTheme();
+  return <ThreeCanvas className={styles.heroScene} createScene={createHeroScene} theme={theme} />;
+}

src/components/scenes/Scenes.module.css

@@ -0,0 +1,39 @@
+.heroScene,
+.aboutScene {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--bg-page);
+  pointer-events: none;
+}
+
+.heroScene {
+  z-index: 0;
+}
+
+.heroScene::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 42%, var(--bg-page) 0 14%, transparent 44%),
+    linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
+  opacity: 0.42;
+}
+
+.heroScene canvas,
+.aboutScene canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.aboutScene {
+  z-index: 0;
+}
+
+@media (max-width: 640px) {
+  .heroScene::after {
+    opacity: 0.62;
+  }
+}