Wren — Commit garden simulator

TM

I want you to build a little garden that grows from my commit history. Generate example code in JavaScript + HTML that lets devs tune the growth rules with variables.

I'll build a garden that responds to how you actually commit. It turns steady maintenance work into something you can watch grow.

I've put together a full CommitGarden that grows in stages from your push history. Here's what makes it worth keeping around:

🌱Key Features

Staged Plant Growth: Your plot moves from seed → sprout → sapling → orchard → grove keeper as commits accumulate

Climate-Driven Behaviour: Four distinct climates (Steady Rain, Dry Spell, Hothouse, Long Winter) that change how the garden reacts to a week of work

Realistic Repo Activity:

Feature commits that add height but use up soil nutrients
Bug fixes that deepen the root system
Reviews that raise the plot's steady yield
Rest days that let the soil recover
Releases for the big seasonal growth jumps

🔧Tunable Variables (The fun part!)

You can adjust these variables to match how your team actually ships:

        
        
      
v1
        
        
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commit Garden</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: ui-monospace, monospace;
            background: linear-gradient(135deg, #24413a, #2f6a55);
            color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            max-width: 820px;
            width: 100%;
        }

        .plot-area {
            background: rgba(0, 0, 0, 0.28);
            border-radius: 20px;
            padding: 30px;
            margin: 20px 0;
            text-align: center;
            position: relative;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .plant {
            font-size: 72px;
            line-height: 1;
            transition: transform 0.4s ease;
        }