# Cozy farm HUD > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The in-game HUD of a cozy farming game, laid over a hand-made afternoon scene: rolling hills, a red barn, a sandy path, a fence and eight turnip beds, all drawn in SVG and pushed through a turbulence displacement filter so every edge wobbles like gouache. The HUD is four soft objects: a cream **day card** with a stitched inner border and a tiny dial where the sun travels an arc, an **energy** pill with a leaf, a **wooden hotbar** of ten tool slots, and a **quest note** on ruled paper, pinned with a red pin and torn along the bottom. You can actually play it: pick the watering can and click the dry beds. The detail worth copying is the stitched border (a dashed line 6px inside a 22px-radius card), which makes flat UI read as sewn and friendly without a single texture image. ## Reference behaviour 1. Initial state: Spring 14, Thursday, 2:40 pm. Slot 1 (watering can) is selected and raised 8px; the tag above the hotbar reads "Watering can" with a water gauge at 18 / 40. Energy 72 / 120. Five of eight beds are dark (watered), three are light (dry). The note's first task reads "Water the turnip beds (5 of 8)"; the second task is already ticked and struck through. 2. Click a slot or press 1 to 9, 0: that slot rises 8px with a springy 220ms ease and gains a 3px ink ring; the tag text changes (for seeds: "Turnip seeds · 24 left"). Slot 0 is empty and disabled. 3. With the watering can, click or press Enter on a dry bed: three drops fall into it (700ms), the soil darkens over 600ms, water −1, energy −2 (bar animates 400ms), and the task count goes up by one. 4. Watering the eighth bed ticks the task with a springy check and strikes it through; a paper hint pops above the hotbar: "All eight beds watered. Granny Odile will be pleased." 5. Clicking a bed with any other tool, a watered bed, or with an empty can shows a hint bubble that explains why, for 2.2s. 6. The clock advances 10 game minutes every 4 real seconds until 8:00 pm; the sun dot moves along the dial's arc (6 am on the left horizon, 8 pm on the right). 7. Ambient: two clouds drift 60px over 60s, two grass sprigs sway 3° over 5s. Nothing else loops. ## Structure ``` 1280 × 800, scene full bleed (SVG 1280 × 800, xMidYMax slice) ┌──────────────────────────────────────────────────────────────────────────┐ │┌ day card 28,24 ───────────┐ ● pin │ ││ (dial 78) Spring 14 │ ┌ note 300 wide, 2.2° ──┐ │ ││ Thursday · 2:40 │ sun │ Granny Odile's list │ │ ││ [Clear 19°][1,286 g] │ ☐ Water beds (5 of 8) │ │ │└────────────────────────────┘ │ ☑ Feed the hens │ │ │┌ energy 28,152 ────────────┐ │ ☐ Take 3 honey jars │ │ ││ (leaf) ENERGY ▓▓▓▓░░ 72/120│ │ Reward … │ │ │└────────────────────────────┘ └╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱┘ │ │ barn tree hay fence ───────── tree │ │ path [bed][bed][bed][bed] (row 1, y 508) │ │ [bed][bed][bed][bed] (row 2, y 588) │ │ ( Watering can ▬▬▬ 18 / 40 ) │ │ ┌ hotbar: 10 × 60px slots, gap 6, wood 8px padding ┐ │ └──────────────────────────────────────────────────────────────────────────┘ ``` - `