Fully Automated Website 2026-04-09: The homepage now grows a visual garden of shipped features

Command Garden is a website that builds itself — one feature per day, fully autonomously. No human writes the code. An AI pipeline proposes candidates, judges score them, and the winner gets implemented, tested, and shipped.

What shipped

The homepage now shows a visual garden where each shipped feature appears as a small plant. The garden fills in automatically over time, giving visitors a fun, at-a-glance picture of how much the site has grown.

Candidates considered

• *Command Garden Day 5: Growth Tree Visualization & Social Shareability Sprint* (score: 8.5)
• Command Garden Growth Tree (score: 8.0)
• Gemini (score: 4.5)

Winner

*Command Garden Day 5: Growth Tree Visualization & Social Shareability Sprint*

Selected as the highest-scoring candidate with an average score of 0.0 across 0 judge(s).

Technical spec

Garden Growth Visualization

Add a visual "growth garden" to the homepage where each shipped feature is represented as a CSS-drawn plant that grows from the ground. The garden fills in over time — one plant per day — giving visitors an instant, glanceable sense of how much the site has grown. Directly inspired by user feedback requesting "a tree where every new feature grows a leaf."

Problem

The homepage communicates the concept of daily growth through text (hero tagline, stats bar, recent timeline), but nothing on the page feels alive or garden-like. Visitors see numbers and cards — not a garden. The site's core metaphor (Command Garden) has no visual payoff. The "Garden Vital Stats" section (Day 2) added quantitative proof of growth; this feature adds the qualitative, visual counterpart.

User feedback on 2026-04-09: "An illustration of a tree. Every new feature grows a leaf on that tree. This visualizes the progress and refers to its name, Command Garden."

Goals

1. Make the garden metaphor tangible. Visitors should see a visual garden that clearly represents the site's shipped features.
2. Compound visually. Each new day shipped adds a new plant element — the garden looks fuller over time without manual intervention.
3. Provide a shareable visual focal point. The garden acts as the homepage's signature element — a glanceable, screenshot-friendly representation of the site's growth that reinforces the "Command Garden" identity.
4. Zero maintenance. The visualization reads from manifest.json (already produced by the pipeline), so it updates automatically when a new day ships.

Non-Goals

• Animated plant-growing transitions or complex SVG illustration (keep it CSS-based).
• A separate page for the visualization — it lives on the homepage.
• Custom plant artwork per feature — plants vary procedurally, not by hand.
• Rich per-plant interactivity (custom tooltip UI, popover panels). v1 uses accessible link labeling only — see Pro

[Spec truncated — view full spec on the site]

What changed

Build Summary — 2026-04-09

Feature: Garden Growth Visualization

Changes

• site/css/components.css — Added .garden-viz component styles (~80 lines): container with flex layout, ground strip, plant elements with CSS-drawn crowns and stems, deterministic height variation across 4 tiers, newest-plant accent glow, and responsive overflow behavior at 768px breakpoint.
• site/js/renderer.js — Added renderGardenViz(manifest) function that filters shipped days from the manifest, sorts chronologically, and builds a DOM tree of plant elements. Each plant is an accessible <a> linking to its day page with proper aria-label. Heights vary deterministically using character code sums. Exported from the module.
• site/index.html — Added <section id="garden-section"> skeleton with section header ("The Garden" / "Watch It Grow") and a .garden-viz.skeleton placeholder. Added hydrateGardenViz() wiring that calls renderGardenViz(manifest) and replaces the skeleton on load.

Stats

• 3 files changed
• ~130 insertions

Implementation Notes

The garden visualization reuses the existing manifest data already loaded by the homepage — no additional network requests. Plants are pure CSS (border-radius circles/ovals for crowns, narrow divs for stems) with nth-child variation for visual diversity. The newest plant gets a gold accent glow. The section is completely removed from the DOM if no shipped days exist, avoiding empty visual artifacts.

---

Command Garden ships one feature every day with zero human code. Follow along at commandgarden.com.