---
schema_version: 1
id: "balcony-builder"
name: "Balcony Builder"
summary: "A playful overhead modular planter connects light, available places and experience to an explained demonstration kit with real device-local saving."
family: "commercial"
tags: ["product-led", "playful", "high-contrast", "task-led"]
best_for: ["commerce", "products", "campaign"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A bold balcony promise beside an overhead planter and complete conditions sheet; B a current-step worksheet beside the live result.", "typography": "Large soft-curved DejaVu Sans promises and clear Arial practical reasons, with round substantial controls.", "navigation": "Builder, bounded growth sketch and native FAQ links plus real offer/workshop siblings.", "content_rhythm": "Offer, three situations, conditions and broad composition versus one current step with immediate visual result.", "imagery": "Original modular SVG box with tomato/pepper or lettuce/spinach shapes and a finite four-leaf branch.", "color_and_material": "Deep plum, bright lime, warm white and coral; a white result area with dark readable records.", "interaction": "Three actual inputs, consistent reasons/composition, include, explicit local save, edit, cross-layout restore and own-key removal.", "motion": "800ms module assembly, 500ms botanical change, 350ms composition expansion and monotonic finite branch unfolding."}
status: "ready"
prompt_path: "prompts/balcony-builder/prompt.en.md"
---

# Balcony Builder

## Intent

Balcony Builder makes a small urban-growing proposition into a clear three-input choice. The fictional Sprouvel identity offers a modular planter concept, playful original botanical illustration and a concrete explanation of the selected demonstration kit. Visitors choose light, available module places and experience, include the resulting kit and explicitly save it in this browser. The reference does not sell hardware, promise a harvest or simulate an order. Its energy supports a practical decision rather than decorative movement alone.

## Signature

Preserve five relationships: an overhead modular planting box; original playful botanical shapes; a large rounded sans-serif promise; plum, lime, warm white and coral; and a live explanation connecting all three inputs to the actual composition. A begins with the literal balcony promise and then a complete conditions sheet. B starts a one-step-at-a-time workshop next to its visual result. Both retain the same replaceable text identity, original modules and truthful local-save boundary.

## Typography

Large bold DejaVu Sans display text provides soft curved letterforms and short readable promises, with Arial supporting practical labels and explanations. Explicit system fallbacks avoid font downloads. Rounded controls echo the display voice without making every paragraph oversized. Lithuanian glyphs appear in real interface text and the colophon. At phone widths headings wrap deliberately and control labels remain complete, rather than shrinking to preserve the desktop line breaks.

## Color and surfaces

Deep plum is the main page ground; bright lime identifies selected conditions and primary actions; warm white provides the broad result surface; coral adds botanical fruit and focus accents. A lighter plum supports choice panels and planter soil. Dark type on lime and white stays readable, while light text remains on the dark background. Semantic tokens own interface colors and focus relationships. The original illustration palette matches the same four-color family, without imported textures, stock photographs or a photorealistic product promise.

## Layout A

The first screen places the exact balcony promise on the left and a complete overhead modular box on the right. A clear link reaches three light situations, followed by area and experience fields. All three conditions remain visible as a single working sheet. The substantial white result explains the chosen light, module count and guidance level; inclusion expands the actual kit contents and exposes explicit save, edit and remove-saved actions. A single unfolding branch accompanies three process observations, then useful native questions close the page. This is a product-to-choice-to-growing-idea route.

## Layout B

B opens a workshop proposition and a two-column task. The left worksheet displays one current step, with visible step navigation, previous/next buttons and useful focus. The right side holds a compact overhead planter and the full live result. Revisiting a step preserves every current choice. The final step links directly to the result, while editing returns to the current light control. Phones stack the current worksheet, complete planter and result before the shared growth sketch and questions. This differs from A's broad offer and always-visible conditions sheet.

## Imagery

All imagery is original SVG geometry. Four modules show labelled growth stages (seed, seedling, growing, flowering), composed differently; the area choice decides which stages appear. Sunny examples use tomato and optional pepper illustrations; partial-light examples use lettuce and optional spinach. A low or unknown light choice shows observation markers rather than promised crops. A one-module experienced configuration depicts both illustrated groups together. A separate original four-leaf branch carries the artistic growing sequence. A reusable planter and branch file are inventoried; no 3D model or WebGL capability is required by this selected SVG renderer.

## Navigation and interaction

Visible builder, growth and question links and real sibling references remain ordinary HTML. Native light radios, area and experience fields update the actual box, result, reasons and included contents together. Area selects exactly one, two or four modules; beginner guidance uses one illustrative group, while experience allows two. Inclusion reveals a complete current composition rather than a false cart confirmation. Saving writes only this demonstration's versioned local-storage record. Both references restore validated saved choices. Editing leaves the old saved version until explicit save; removal deletes only this key. Blocked storage is reported without claiming success.

## Motion

The initial module parts assemble over 800 milliseconds and stop. A new light or other condition crossfades actual old/new botanical geometry over 500 milliseconds while result text updates immediately. Inclusion expands the real composition over 350 milliseconds and settles. One branch unfolds with progress through its own scroll section; progress is monotonic, locks after the section and does not replay when revisited. Pause, relevant-region visibility, hidden documents and pagehide cleanup bound scheduled work. Reduced motion draws informative final states immediately and keeps every practical action available.

## Responsive behavior

Desktop A pairs promise and planter, presents three light situations across one row and uses a broad two-column result. B pairs a narrow current-step worksheet with an immediate visual result. Tablet spacing contracts before the working areas stack. At 390 and 360 pixels every planter module remains inside the screen, light choices become large vertical records and native fields span their available width. Result sections, save controls, process and questions stack in reading order. No drag gesture, horizontal page panning, sticky overlay or device rotation is required.

## Accessibility

Provide one h1, semantic main/navigation, a skip link and clear field labels. The SVG description follows current module and plant choices, while ordinary text supplies all reasons and composition details. Native radio buttons remain visibly operable within large labels. The workshop exposes its current step and hides inactive panels from reading and focus. Next/back actions focus the new legend; the result link focuses its heading. Focus is coral on plum and dark plum on the white result. Live messages explain inclusion, unsaved edits, actual storage results and removal. Browser checks complement direct keyboard and persistence tests.

## Adaptation

Replace the fictional identity and kit contents with verified project information. General light-group examples are paraphrased from linked University of Maryland Extension and Iowa State guidance; no external illustrations or source wording is copied. The low-light observation result and module/guidance counts are conservative authored demonstration rules. Actual species, season, container capacity and balcony conditions need real project data before a production recommendation or purchase. Preserve the three-input-to-reasons relationship, explicit storage boundary and distinct offer/workshop structures when moving to another platform.

## Avoid

Exactly three anti-patterns break this direction: replacing the original overhead modular planter with unrelated generic leaf decoration; showing a kit composition that disagrees with the three selected inputs; and claiming a purchase, harvest or saved record that has not occurred. Keep the practical HTML task available independently of the illustrated enhancement.

## Closest styles

Pop Commerce uses dominant product silhouettes beside prices/options and a filtered shelf with bag arithmetic. Balcony Builder uses an overhead modular growing object, a three-condition explanation and device-local saved selection, changing the object construction, decision structure and navigation rhythm. Seasonal Terrain uses an irregular layered ground study, a complete annual calendar and a seasonal basket enquiry. Here discrete modules, light/space/experience rules and a step workshop replace terrain, seasons and delivery choices. Compare actual ready phone and desktop frames rather than treating shared plants or strong product color as sufficient distinction.