honeytree 1.1.1 → 1.1.3

package/bin/honeydew.js

@@ -1,6 +1,18 @@
 #!/usr/bin/env node
 
+import path from "node:path";
+
 const command = process.argv[2];
+const invokedAs = path.basename(process.argv[1] || "honeytree");
+
+function printUsage() {
+  console.error("Usage:");
+  console.error("  honeytree          show your forest");
+  console.error("  honeytree init     create or migrate your forest");
+  console.error("  honeytree watch    open the terminal forest");
+  console.error("  honeytree stats    show a non-TUI summary");
+  console.error("  honeytree export   write honeytree-badge.svg and FOREST.md");
+}
 
 if (command === "init") {
   const { init } = await import("../src/commands/init.js");
@@ -11,11 +23,17 @@ if (command === "init") {
 } else if (command === "watch" || !command) {
   const { watch } = await import("../src/commands/watch.js");
   await watch();
+} else if (command === "stats") {
+  const { stats } = await import("../src/commands/stats.js");
+  await stats();
 } else if (command === "plant") {
   const { plant } = await import("../src/commands/plant.js");
   await plant();
 } else {
   console.error(`Unknown command: ${command}`);
-  console.error("Usage: honeytree [init | export | watch]");
+  if (invokedAs === "honeydew") {
+    console.error("Run `honeydew watch` or `honeytree init`.");
+  }
+  printUsage();
   process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honeytree",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A living pixel art forest that grows while you code",
   "type": "module",
   "bin": {

package/src/badge.js

@@ -4,7 +4,7 @@ import path from "node:path";
 import { readState } from "./core/state.js";
 import { buildTerminalScene } from "./renderers/terminal.js";
 
-const CELL = 8;
+const CELL = 6;
 const BG = "#0d1117";
 const TEXT_PAD = 18;
 
@@ -63,4 +63,11 @@ export async function badge() {
   writeBadgeSVG(state, outPath);
 
   console.log(`Badge written to ${outPath}`);
+  console.log("");
+  console.log("Add this to your README to show your Honeytree forest.");
+  console.log("The badge links to https://github.com/Varun2009178/honeytree");
+  console.log("");
+  console.log(
+    `[![honeytree](./honeytree-badge.svg)](https://github.com/Varun2009178/honeytree)`,
+  );
 }

package/src/commands/watch.js

@@ -8,8 +8,9 @@ import { createActivityTracker } from "../tracker/activity.js";
 import { startFileTracker } from "../tracker/files.js";
 import { startGitTracker } from "../tracker/git.js";
 
-const FRAME_MS = 100;
-const POLL_MS = 1_000;
+const FRAME_MS = 150;
+const STATE_SYNC_MS = 1_000;
+const GIT_POLL_MS = 30_000;
 const h = React.createElement;
 
 function buildCommandHint(width) {
@@ -27,6 +28,7 @@ function ForestWatchApp() {
   const [tick, setTick] = useState(0);
   const [state, setState] = useState(() => ensureState());
   const [width, setWidth] = useState(stdout.columns || 80);
+  const [height, setHeight] = useState(stdout.rows || 24);
 
   useInput((input, key) => {
     if (input === "q" || key.escape || key.ctrl && input === "c") {
@@ -35,7 +37,10 @@ function ForestWatchApp() {
   });
 
   useEffect(() => {
-    const onResize = () => setWidth(stdout.columns || 80);
+    const onResize = () => {
+      setWidth(stdout.columns || 80);
+      setHeight(stdout.rows || 24);
+    };
     stdout.on("resize", onResize);
     return () => stdout.off("resize", onResize);
   }, [stdout]);
@@ -53,7 +58,7 @@ function ForestWatchApp() {
       if (latest) {
         setState(latest);
       }
-    }, POLL_MS);
+    }, STATE_SYNC_MS);
     return () => clearInterval(syncTimer);
   }, []);
 
@@ -78,6 +83,7 @@ function ForestWatchApp() {
     const gitTracker = startGitTracker({
       cwd: process.cwd(),
       lastCommitHash: state.last_commit_hash,
+      pollMs: GIT_POLL_MS,
       async onCommit(commitHash) {
         const nextState = updateState((draft) => applyCommit(draft, { commitHash }));
         setState(nextState);
@@ -94,8 +100,8 @@ function ForestWatchApp() {
   }, []);
 
   const frame = useMemo(
-    () => renderTerminalFrame(state, width, tick, { now: new Date() }),
-    [state, tick, width],
+    () => renderTerminalFrame(state, width, tick, { now: new Date(), termHeight: height }),
+    [state, tick, width, height],
   );
   const commandHint = useMemo(() => buildCommandHint(width), [width]);
 

package/src/core/animation.js

@@ -22,34 +22,40 @@ function hash(seed) {
   return ((value >>> 16) ^ value) >>> 0;
 }
 
-export function getClouds(width, tick = 0, skyPhase = "day") {
+export function getClouds(width, tick = 0, skyPhase = "day", skyRows = 4) {
   const count = skyPhase === "night" ? 2 : 3;
   return Array.from({ length: count }, (_, index) => {
     const length = 7 + (index % 3) * 3;
     const offset = ((tick * (0.35 + index * 0.08)) + index * 17) % (width + length * 2);
+    const maxY = Math.max(2, skyRows - 1);
     return {
       x: Math.round(offset) - length,
-      y: index % 2 === 0 ? 1 : 2,
+      y: index % 2 === 0 ? Math.round(maxY * 0.3) : Math.round(maxY * 0.6),
       length,
     };
   });
 }
 
-export function getStars(width, tick = 0) {
+export function getStars(width, tick = 0, skyRows = 4) {
   const stars = [];
   for (let column = 0; column < width; column += 1) {
     const seeded = hash(column * 97);
     if (seeded % 7 !== 0) continue;
     stars.push({
       x: column,
-      y: seeded % 3,
+      y: seeded % skyRows,
       twinkle: ((tick + seeded) % 20) / 20,
     });
   }
   return stars;
 }
 
-export function getAnimatedAnimals(state, width, tick = 0) {
+export function getAnimatedAnimals(state, width, tick = 0, layout = null) {
+  const artRows = layout ? layout.artRows : 13;
+  const skyRows = layout ? layout.skyRows : 4;
+  const groundY = artRows - 2; // just above ground
+  const flyY = skyRows + 2;    // flying creatures in upper forest
+
   return state.animals.map((animal, index) => {
     const speed = SPEEDS[animal.type] ?? 0.08;
     const direction = animal.direction === "left" ? -1 : 1;
@@ -60,10 +66,10 @@ export function getAnimatedAnimals(state, width, tick = 0) {
       x,
       y:
         animal.type === "butterfly"
-          ? 6 + Math.round(Math.sin((tick + index * 5) / 4))
+          ? flyY + Math.round(Math.sin((tick + index * 5) / 4))
           : animal.type === "owl"
-            ? 5 + Math.round(Math.sin((tick + index * 9) / 8))
-            : 11,
+            ? flyY - 1 + Math.round(Math.sin((tick + index * 9) / 8))
+            : groundY,
       bob:
         animal.type === "rabbit"
           ? Math.abs(Math.sin((tick + index * 6) / 3))
@@ -105,12 +111,14 @@ export function getWeatherParticles(width, height, tick = 0, weather = "clear",
   }));
 }
 
-export function getDynamicScene(state, width, tick, environment) {
+export function getDynamicScene(state, width, tick, environment, layout = null) {
+  const skyRows = layout ? layout.skyRows : 4;
+  const artRows = layout ? layout.artRows : 13;
   return {
-    clouds: getClouds(width, tick, environment.sky.name),
-    stars: environment.sky.name === "night" ? getStars(width, tick) : [],
-    animals: getAnimatedAnimals(state, width, tick),
-    particles: getWeatherParticles(width, 12, tick, environment.weather.name, environment.season.name),
+    clouds: getClouds(width, tick, environment.sky.name, skyRows),
+    stars: environment.sky.name === "night" ? getStars(width, tick, skyRows) : [],
+    animals: getAnimatedAnimals(state, width, tick, layout),
+    particles: getWeatherParticles(width, artRows, tick, environment.weather.name, environment.season.name),
   };
 }
 

package/src/core/state.js

@@ -13,7 +13,9 @@ function todayString(now = new Date()) {
 }
 
 function resolveStateDir() {
-  return process.env.HONEYTREE_DIR || path.join(os.homedir(), STATE_DIR_NAME);
+  if (process.env.HONEYTREE_DIR) return process.env.HONEYTREE_DIR;
+  // Per-project: state lives in the current project directory
+  return path.join(process.cwd(), STATE_DIR_NAME);
 }
 
 function resolveLegacyDir() {

package/src/markdown.js

@@ -5,7 +5,7 @@ import { getEnvironmentSnapshot } from "./core/environment.js";
 import { readState } from "./core/state.js";
 import { renderTerminalFrame } from "./renderers/terminal.js";
 
-export function buildMarkdown(state) {
+function buildMarkdown(state) {
   const environment = getEnvironmentSnapshot(new Date(), state.current_streak);
   const art = renderTerminalFrame(state, 80, 0, { color: false });
 
@@ -43,4 +43,5 @@ export async function generateForestMd() {
   fs.writeFileSync(outPath, md);
 
   console.log(`Written to ${outPath}`);
+  console.log("Tip: run `honeytree badge` to generate the badge SVG too.");
 }

package/src/renderers/terminal.js

@@ -10,16 +10,78 @@ import {
   materializeSprite,
 } from "../core/sprites.js";
 
-const SKY_ROWS = 4;
-const FOREST_ROWS = 8;
-const GROUND_ROWS = 1;
-const ART_ROWS = SKY_ROWS + FOREST_ROWS + GROUND_ROWS;
-const STATS_ROWS = 1;
+export const SCENE_HEIGHT = 14;
 
-export const SCENE_HEIGHT = ART_ROWS + STATS_ROWS;
+export function computeLayout(termHeight) {
+  if (!termHeight || termHeight < 16) {
+    return { skyRows: 4, forestRows: 8, groundRows: 1, artRows: 13 };
+  }
+
+  const available = termHeight - 2;
+  const skyRows = Math.max(4, Math.floor(available * 0.4));
+  const forestRows = Math.max(6, Math.floor(available * 0.45));
+  const groundRows = Math.max(2, Math.floor(available * 0.1));
+
+  const artRows = skyRows + forestRows + groundRows;
+  return { skyRows, forestRows, groundRows, artRows };
+}
+
+function mulberry32(seed) {
+  let s = seed | 0;
+  return function random() {
+    s = (s + 0x6d2b79f5) | 0;
+    let t = Math.imul(s ^ (s >>> 15), 1 | s);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function shuffleSeeded(items, rng) {
+  const result = [...items];
+  for (let i = result.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(rng() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+}
 
-function createBuffer(width) {
-  return Array.from({ length: ART_ROWS }, () =>
+export function selectViewportTrees(trees, width, seed = 0) {
+  const maxVisible = 12;
+  if (trees.length === 0) return [];
+
+  const rng = mulberry32(seed);
+  const selected = shuffleSeeded(trees, rng).slice(0, Math.min(maxVisible, trees.length));
+  const rowNames = ["back", "mid", "front"];
+  const perRow = Math.ceil(selected.length / rowNames.length);
+  const assigned = selected.map((tree, index) => ({
+    ...tree,
+    row: rowNames[Math.min(rowNames.length - 1, Math.floor(index / perRow))],
+  }));
+
+  for (const rowName of rowNames) {
+    const rowTrees = assigned.filter((tree) => tree.row === rowName);
+    const count = rowTrees.length;
+    if (count === 0) continue;
+
+    const margin = rowName === "front" ? 10 : rowName === "mid" ? 8 : 6;
+    const clampedMargin = Math.min(margin, Math.max(4, Math.floor(width / 4)));
+    const minX = Math.min(clampedMargin, Math.max(0, width - 1));
+    const maxX = Math.max(minX, width - clampedMargin);
+    const usable = Math.max(1, maxX - minX);
+    const segmentWidth = usable / count;
+
+    for (let index = 0; index < count; index += 1) {
+      const center = minX + segmentWidth * (index + 0.5);
+      const jitter = (rng() - 0.5) * segmentWidth * 0.4;
+      rowTrees[index].screenX = Math.round(Math.max(minX, Math.min(maxX, center + jitter)));
+    }
+  }
+
+  return assigned;
+}
+
+function createBuffer(width, artRows) {
+  return Array.from({ length: artRows }, () =>
     Array.from({ length: width }, () => ({ char: " ", color: null, bg: null })),
   );
 }
@@ -36,12 +98,14 @@ function paintBg(buffer, x, y, bg) {
   buffer[y][x].bg = bg;
 }
 
-function compositeSprite(buffer, sprite, centerX, baseY, palette) {
+function compositeSprite(buffer, sprite, centerX, baseY, palette, options = {}) {
   const cells = materializeSprite(sprite, palette);
   const offsetX = Math.round(centerX) - Math.floor(cells.width / 2);
+  const minY = options.minY ?? 0;
   for (let rowIndex = 0; rowIndex < cells.rows.length; rowIndex += 1) {
     const row = cells.rows[rowIndex];
     const y = baseY - rowIndex;
+    if (y < minY) continue;
     for (let columnIndex = 0; columnIndex < row.length; columnIndex += 1) {
       const [char, color] = row[columnIndex];
       if (!color) continue;
@@ -59,11 +123,12 @@ function colorize(text, color, bg, enabled) {
   return fn(text);
 }
 
-function drawSkyBackground(buffer, width, environment) {
+function drawSkyBackground(buffer, width, environment, layout) {
+  const { skyRows, forestRows, artRows } = layout;
   const sky = environment.sky;
   // Sky rows: vertical gradient from top → mid → bottom
-  for (let y = 0; y < SKY_ROWS; y++) {
-    const t = y / Math.max(1, SKY_ROWS - 1);
+  for (let y = 0; y < skyRows; y++) {
+    const t = y / Math.max(1, skyRows - 1);
     let color;
     if (t < 0.5) {
       color = lerpColor(sky.top, sky.mid, t * 2);
@@ -75,28 +140,32 @@ function drawSkyBackground(buffer, width, environment) {
     }
   }
   // Forest rows: blend from sky.bottom toward ground
-  for (let y = SKY_ROWS; y < SKY_ROWS + FOREST_ROWS; y++) {
-    const t = (y - SKY_ROWS) / Math.max(1, FOREST_ROWS - 1);
+  for (let y = skyRows; y < skyRows + forestRows; y++) {
+    const t = (y - skyRows) / Math.max(1, forestRows - 1);
     const color = lerpColor(sky.bottom, environment.palette.groundDark, t * 0.7);
     for (let x = 0; x < width; x++) {
       paintBg(buffer, x, y, color);
     }
   }
-  // Ground row: solid ground color
-  for (let x = 0; x < width; x++) {
-    paintBg(buffer, x, ART_ROWS - 1, environment.palette.groundDark);
+  // Ground rows: solid ground color
+  for (let y = skyRows + forestRows; y < artRows; y++) {
+    for (let x = 0; x < width; x++) {
+      paintBg(buffer, x, y, environment.palette.groundDark);
+    }
   }
 }
 
-function drawSky(buffer, width, environment, tick) {
+function drawSky(buffer, width, environment, tick, layout) {
+  const { skyRows } = layout;
+
   if (environment.sky.name === "night") {
-    const stars = getDynamicScene({ animals: [] }, width, tick, environment).stars;
+    const stars = getDynamicScene({ animals: [] }, width, tick, environment, layout).stars;
     for (const star of stars) {
       paint(buffer, star.x, star.y, star.twinkle > 0.5 ? "✦" : "·", environment.sky.haze);
     }
   }
 
-  const clouds = getDynamicScene({ animals: [] }, width, tick, environment).clouds;
+  const clouds = getDynamicScene({ animals: [] }, width, tick, environment, layout).clouds;
   for (const cloud of clouds) {
     const glyph = environment.sky.name === "night" ? "░" : "▓";
     for (let offset = 0; offset < cloud.length; offset += 1) {
@@ -105,7 +174,9 @@ function drawSky(buffer, width, environment, tick) {
   }
 
   const celestialX = Math.round(((width - 6) * environment.sky.progress) + 3);
-  const celestialY = environment.sky.name === "night" ? 1 : Math.max(0, 2 - Math.round(environment.sky.progress * 2));
+  const celestialY = environment.sky.name === "night"
+    ? Math.max(1, Math.round(skyRows * 0.2))
+    : Math.max(0, Math.round(skyRows * 0.4) - Math.round(environment.sky.progress * 2));
   paint(
     buffer,
     celestialX,
@@ -115,8 +186,8 @@ function drawSky(buffer, width, environment, tick) {
   );
 }
 
-function drawWeather(buffer, width, environment, tick) {
-  const scene = getDynamicScene({ animals: [] }, width, tick, environment);
+function drawWeather(buffer, width, environment, tick, layout) {
+  const scene = getDynamicScene({ animals: [] }, width, tick, environment, layout);
   if (environment.weather.name === "rain") {
     for (const drop of scene.particles) {
       if (drop.kind !== "rain") continue;
@@ -133,16 +204,17 @@ function drawWeather(buffer, width, environment, tick) {
 
   if (environment.weather.name === "rainbow") {
     const midpoint = Math.floor(width / 2);
+    const rainbowY = Math.max(1, Math.round(layout.skyRows * 0.3));
     const colors = ["#f94144", "#f8961e", "#f9c74f", "#90be6d", "#577590"];
     colors.forEach((color, index) => {
-      paint(buffer, midpoint - 2 + index, 1 + (index % 2), "◜", color);
-      paint(buffer, midpoint + 1 - index, 1 + (index % 2), "◝", color);
+      paint(buffer, midpoint - 2 + index, rainbowY + (index % 2), "◜", color);
+      paint(buffer, midpoint + 1 - index, rainbowY + (index % 2), "◝", color);
     });
   }
 }
 
-function drawSeasonParticles(buffer, width, environment, tick) {
-  const scene = getDynamicScene({ animals: [] }, width, tick, environment);
+function drawSeasonParticles(buffer, width, environment, tick, layout) {
+  const scene = getDynamicScene({ animals: [] }, width, tick, environment, layout);
   for (const particle of scene.particles) {
     if (particle.kind === "petal") {
       paint(buffer, Math.round(particle.x), Math.round(particle.y), "•", "#ffcad4");
@@ -163,58 +235,60 @@ function scaleX(virtualX, width) {
   return Math.round((virtualX / VIRTUAL_WIDTH) * width);
 }
 
-function spaceTrees(trees, width, minGap) {
-  const sorted = [...trees].sort((a, b) => a.x_position - b.x_position);
-  const result = [];
-  let lastScreenX = -Infinity;
-  for (const tree of sorted) {
-    const screenX = Math.round((tree.x_position / VIRTUAL_WIDTH) * width);
-    if (screenX - lastScreenX >= minGap) {
-      result.push(tree);
-      lastScreenX = screenX;
+function desaturatePalette(palette, skyBottom, amount) {
+  const result = {};
+  for (const key of Object.keys(palette)) {
+    const value = palette[key];
+    if (typeof value === "string" && value.startsWith("#")) {
+      result[key] = lerpColor(value, skyBottom, amount);
+    } else {
+      result[key] = value;
     }
   }
   return result;
 }
 
-function drawForest(buffer, width, state, environment, tick) {
-  const treeBaseY = SKY_ROWS + FOREST_ROWS - 1;
-  const isSunsetSilhouette = environment.sky.name === "sunset";
-  const silhouettePalette = {};
-  if (isSunsetSilhouette) {
-    for (const key of Object.keys(environment.palette)) {
-      silhouettePalette[key] = "#1a1a2e";
-    }
+function silhouettePalette(palette) {
+  const result = {};
+  for (const key of Object.keys(palette)) {
+    result[key] = key.toLowerCase().includes("light") ? "#24243f" : "#111827";
   }
+  return result;
+}
 
+function drawForest(buffer, width, viewportTrees, state, environment, tick, layout) {
+  const { skyRows, forestRows, artRows, groundRows } = layout;
+  const treeBaseY = skyRows + forestRows - 1;
   const crystalPalette = getCrystalPalette(tick);
+  const isSunsetSilhouette = environment.sky.name === "sunset";
 
-  // Separate trees by row, then filter for spacing
-  const minGap = { back: 6, mid: 10, front: 14 };
-  const rows = ["back", "mid", "front"];
-  for (const targetRow of rows) {
-    const rowTrees = state.trees.filter((t) => (t.row || "front") === targetRow);
-    const spaced = spaceTrees(rowTrees, width, minGap[targetRow]);
-    const rowY = targetRow === "back" ? treeBaseY - 2 : targetRow === "mid" ? treeBaseY - 1 : treeBaseY;
+  const rowOffset = { back: 4, mid: 2, front: 0 };
+  const rowDesaturation = { back: 0.3, mid: 0.1, front: 0 };
+  for (const targetRow of ["back", "mid", "front"]) {
+    const rowTrees = viewportTrees.filter((tree) => tree.row === targetRow);
+    const rowY = treeBaseY - rowOffset[targetRow];
 
-    for (const tree of spaced) {
+    for (const tree of rowTrees) {
       let palette = environment.palette;
-      if (tree.species === "crystal_tree") {
-        palette = { ...environment.palette, ...crystalPalette };
-      }
       if (isSunsetSilhouette) {
-        palette = silhouettePalette;
+        palette = silhouettePalette(palette);
+      } else if (rowDesaturation[targetRow] > 0) {
+        palette = desaturatePalette(palette, environment.sky.bottom, rowDesaturation[targetRow]);
+      }
+      if (tree.species === "crystal_tree") {
+        palette = { ...palette, ...crystalPalette };
       }
-      compositeSprite(buffer, getTreeSprite(tree.species), scaleX(tree.x_position, width), rowY, palette);
+      compositeSprite(buffer, getTreeSprite(tree.species), tree.screenX, rowY, palette, { minY: skyRows });
     }
   }
 
+  const groundY = artRows - groundRows;
   for (const element of state.ground_elements) {
-    compositeSprite(buffer, getGroundElementSprite(element.type), scaleX(element.x_position, width), ART_ROWS - 1, environment.palette);
+    compositeSprite(buffer, getGroundElementSprite(element.type), scaleX(element.x_position, width), groundY, environment.palette);
   }
 
-  const scene = getDynamicScene(state, width, tick, environment);
-  const maxAnimals = Math.max(2, Math.min(4, Math.floor(width / 25)));
+  const scene = getDynamicScene(state, width, tick, environment, layout);
+  const maxAnimals = Math.max(2, Math.min(3, Math.floor(width / 40)));
   const visibleAnimals = scene.animals.slice(0, maxAnimals);
   for (const animal of visibleAnimals) {
     if (animal.type === "owl" && environment.sky.name !== "night") {
@@ -224,20 +298,80 @@ function drawForest(buffer, width, state, environment, tick) {
       buffer,
       getAnimalSprite(animal.type),
       animal.x,
-      Math.min(ART_ROWS - 2, Math.round(animal.y)),
+      Math.min(artRows - groundRows - 1, Math.round(animal.y)),
       environment.palette,
     );
   }
 }
 
-function drawGround(buffer, width, environment) {
-  for (let x = 0; x < width; x += 1) {
-    paint(buffer, x, ART_ROWS - 1, "▄", x % 3 === 0 ? environment.palette.groundLight : environment.palette.ground);
+function drawGround(buffer, width, environment, layout) {
+  const { skyRows, forestRows, groundRows } = layout;
+  const groundStart = skyRows + forestRows;
+
+  for (let row = 0; row < groundRows; row += 1) {
+    const y = groundStart + row;
+    if (row === 0) {
+      for (let x = 0; x < width; x += 1) {
+        const char = x % 5 === 0 ? "▓" : "▄";
+        const color = x % 3 === 0 ? environment.palette.grassLight : environment.palette.grass;
+        paint(buffer, x, y, char, color);
+      }
+    } else if (row === 1) {
+      for (let x = 0; x < width; x += 1) {
+        const color = x % 7 === 0 ? environment.palette.groundLight : environment.palette.ground;
+        paint(buffer, x, y, "▄", color);
+      }
+    } else {
+      for (let x = 0; x < width; x += 1) {
+        paint(buffer, x, y, "▄", environment.palette.groundDark);
+      }
+    }
+  }
+}
+
+function drawFog(buffer, width, layout, environment) {
+  const { skyRows, forestRows } = layout;
+  const fogColor = "#5a7a5a";
+  const fogColumns = [
+    { offset: 0, char: "▒", opacity: 0.6 },
+    { offset: 1, char: "▒", opacity: 0.45 },
+    { offset: 2, char: "░", opacity: 0.3 },
+    { offset: 3, char: "░", opacity: 0.15 },
+  ];
+
+  for (let y = skyRows; y < skyRows + forestRows; y += 1) {
+    for (const fog of fogColumns) {
+      const x = fog.offset;
+      if (x >= width) continue;
+      const cell = buffer[y][x];
+      if (cell.bg) {
+        paintBg(buffer, x, y, lerpColor(cell.bg, fogColor, fog.opacity));
+      }
+      if (cell.color) {
+        paint(buffer, x, y, cell.char, lerpColor(cell.color, fogColor, fog.opacity));
+      } else {
+        paint(buffer, x, y, fog.char, lerpColor(environment.sky.bottom, fogColor, fog.opacity));
+      }
+    }
+
+    for (const fog of fogColumns) {
+      const x = width - 1 - fog.offset;
+      if (x < 0) continue;
+      const cell = buffer[y][x];
+      if (cell.bg) {
+        paintBg(buffer, x, y, lerpColor(cell.bg, fogColor, fog.opacity));
+      }
+      if (cell.color) {
+        paint(buffer, x, y, cell.char, lerpColor(cell.color, fogColor, fog.opacity));
+      } else {
+        paint(buffer, x, y, fog.char, lerpColor(environment.sky.bottom, fogColor, fog.opacity));
+      }
+    }
   }
 }
 
 function buildStatsLine(state, environment, width, color) {
-  const trees = `${state.trees.length} tree${state.trees.length === 1 ? "" : "s"}`;
+  const trees = `${state.trees.length} tree${state.trees.length === 1 ? "" : "s"} in your forest`;
   const animals = `${state.animals.length} animal${state.animals.length === 1 ? "" : "s"}`;
   const streak = `${state.current_streak} day streak`;
   const weather = `${environment.season.icon} ${environment.season.label} ${environment.weather.label}`;
@@ -259,18 +393,25 @@ export function buildTerminalScene(state, termWidth = 80, tick = 0, options = {}
   const width = Math.max(20, termWidth);
   const date = options.now instanceof Date ? options.now : new Date();
   const environment = getEnvironmentSnapshot(date, state.current_streak ?? 0);
-  const buffer = createBuffer(width);
-
-  drawSkyBackground(buffer, width, environment);
-  drawSky(buffer, width, environment, tick);
-  drawWeather(buffer, width, environment, tick);
-  drawSeasonParticles(buffer, width, environment, tick);
-  drawForest(buffer, width, state, environment, tick);
-  drawGround(buffer, width, environment);
+  const layout = computeLayout(options.termHeight || null);
+  const buffer = createBuffer(width, layout.artRows);
+  const startOfYear = new Date(date.getFullYear(), 0, 0);
+  const dayOfYear = Math.floor((date - startOfYear) / 86400000);
+  const viewportTrees = selectViewportTrees(state.trees, width, dayOfYear);
+
+  drawSkyBackground(buffer, width, environment, layout);
+  drawSky(buffer, width, environment, tick, layout);
+  drawWeather(buffer, width, environment, tick, layout);
+  drawSeasonParticles(buffer, width, environment, tick, layout);
+  drawForest(buffer, width, viewportTrees, state, environment, tick, layout);
+  drawGround(buffer, width, environment, layout);
+  drawFog(buffer, width, layout, environment);
 
   return {
     width,
     environment,
+    layout,
+    viewportTrees,
     buffer,
     statsLine: buildStatsLine(state, environment, width, options.color !== false),
   };
@@ -294,4 +435,3 @@ export function renderTerminalFrame(state, termWidth = 80, tick = 0, options = {
   lines.push(scene.statsLine);
   return lines.join("\n");
 }
-