honeytree 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honeytree",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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

@@ -27,6 +27,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 +36,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]);
@@ -94,8 +98,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

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 
 import { getDynamicScene, getCrystalPalette } from "../core/animation.js";
-import { getEnvironmentSnapshot } from "../core/environment.js";
+import { getEnvironmentSnapshot, lerpColor } from "../core/environment.js";
 import { VIRTUAL_WIDTH } from "../core/progression.js";
 import {
   getAnimalSprite,
@@ -10,32 +10,102 @@ 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;
+}
+
+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))],
+  }));
 
-function createBuffer(width) {
-  return Array.from({ length: ART_ROWS }, () =>
-    Array.from({ length: width }, () => ({ char: " ", color: null })),
+  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 })),
   );
 }
 
 function paint(buffer, x, y, char, color) {
   if (y < 0 || y >= buffer.length) return;
   if (x < 0 || x >= buffer[0].length) return;
-  buffer[y][x] = { char, color };
+  buffer[y][x] = { char, color, bg: buffer[y][x].bg };
+}
+
+function paintBg(buffer, x, y, bg) {
+  if (y < 0 || y >= buffer.length) return;
+  if (x < 0 || x >= buffer[0].length) return;
+  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;
@@ -44,22 +114,58 @@ function compositeSprite(buffer, sprite, centerX, baseY, palette) {
   }
 }
 
-function colorize(text, color, enabled) {
-  if (!enabled || !color) {
-    return text;
+function colorize(text, color, bg, enabled) {
+  if (!enabled) return text;
+  if (!color && !bg) return text;
+  let fn = chalk;
+  if (bg) fn = fn.bgHex(bg);
+  if (color) fn = fn.hex(color);
+  return fn(text);
+}
+
+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 < skyRows; y++) {
+    const t = y / Math.max(1, skyRows - 1);
+    let color;
+    if (t < 0.5) {
+      color = lerpColor(sky.top, sky.mid, t * 2);
+    } else {
+      color = lerpColor(sky.mid, sky.bottom, (t - 0.5) * 2);
+    }
+    for (let x = 0; x < width; x++) {
+      paintBg(buffer, x, y, color);
+    }
+  }
+  // Forest rows: blend from sky.bottom toward ground
+  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 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);
+    }
   }
-  return chalk.hex(color)(text);
 }
 
-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) {
@@ -68,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,
@@ -78,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;
@@ -96,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");
@@ -126,43 +235,51 @@ function scaleX(virtualX, width) {
   return Math.round((virtualX / VIRTUAL_WIDTH) * width);
 }
 
-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 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, viewportTrees, state, environment, tick, layout) {
+  const { skyRows, forestRows, artRows, groundRows } = layout;
+  const treeBaseY = skyRows + forestRows - 1;
   const crystalPalette = getCrystalPalette(tick);
 
-  // Sort trees by row: back first, then mid, then front
-  const rowOrder = { back: 0, mid: 1, front: 2 };
-  const sortedTrees = [...state.trees].sort(
-    (a, b) => (rowOrder[a.row] ?? 2) - (rowOrder[b.row] ?? 2),
-  );
+  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 sortedTrees) {
-    const row = tree.row || "front";
-    const rowY = row === "back" ? treeBaseY - 2 : row === "mid" ? treeBaseY - 1 : treeBaseY;
-    let palette = environment.palette;
-    if (tree.species === "crystal_tree") {
-      palette = { ...environment.palette, ...crystalPalette };
+    for (const tree of rowTrees) {
+      let palette = environment.palette;
+      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), tree.screenX, rowY, palette, { minY: skyRows });
     }
-    if (isSunsetSilhouette) {
-      palette = silhouettePalette;
-    }
-    compositeSprite(buffer, getTreeSprite(tree.species), scaleX(tree.x_position, width), rowY, palette);
   }
 
+  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);
-  for (const animal of scene.animals) {
+  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") {
       continue;
     }
@@ -170,29 +287,89 @@ 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}`;
-  const separator = colorize(" • ", "#6b7280", color);
+  const separator = colorize(" • ", "#6b7280", null, color);
   const line = [
-    colorize("🌲 " + trees, "#7bd389", color),
-    colorize("🐇 " + animals, "#f4d35e", color),
-    colorize("🔥 " + streak, "#ee964b", color),
-    colorize(weather, "#d4d4d8", color),
+    colorize("🌲 " + trees, "#7bd389", null, color),
+    colorize("🐇 " + animals, "#f4d35e", null, color),
+    colorize("🔥 " + streak, "#ee964b", null, color),
+    colorize(weather, "#d4d4d8", null, color),
   ].join(separator);
 
   if (line.length >= width) {
@@ -205,17 +382,24 @@ 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);
+  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);
 
-  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);
+  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,
     buffer,
     statsLine: buildStatsLine(state, environment, width, options.color !== false),
   };
@@ -233,10 +417,9 @@ export function renderTerminalFrame(state, termWidth = 80, tick = 0, options = {
   const scene = buildTerminalScene(state, termWidth, tick, options);
   const lines = scene.buffer.map((row) =>
     row
-      .map((cell) => colorize(cell.char, cell.color, options.color !== false))
+      .map((cell) => colorize(cell.char, cell.color, cell.bg, options.color !== false))
       .join(""),
   );
   lines.push(scene.statsLine);
   return lines.join("\n");
 }
-