Neon Bonsai — A Living Tree Instrument demo
Neon Bonsai — A Living Tree Instrument

A dark, glowing interface that fuses cyberpunk neon lighting with organic bonsai tree forms, using backdrop blur and CSS filters to create a luminous living-instrument aesthetic.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.6 KB · 1901 words
# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION

## Project: "NEON BONSAI — a living tree instrument" · Audio/Music Landing Page

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-ready landing page on the first attempt. All user-facing copy must be written in English.

---

## PROJECT BRIEF & DESIGN DIRECTION

**Concept:** NEON BONSAI is a generative audio instrument — a digitally cultivated bonsai tree that composes evolving synth music as it grows. Users plant a sonic seed, watch the tree grow, and prune its branches to shape an ambient soundscape. The landing page must feel like a living organism made of light: dark glass surfaces, neon cyan glow, organic branch motifs, frosted translucency.

**Mood & Era:** 2020s Contemporary · Dark Tech & Cyber with biophilic warmth. Keywords: synth, bonsai, audio, music, glass, translucent, gradient, blur, glow.

**Palette Mapping (Dark theme — DEFAULT):**
- `--bg-primary: #050608` · `--bg-secondary: #0d141b` (glass surfaces derive from it, e.g. `rgba(13,20,27,.55)`)
- `--primary: #9be8ff` (ice cyan) · `--secondary: #4dd8ff` (electric cyan)
- `--text-primary: #cfe9f5` · `--text-secondary:` derive a muted frost tone (~`#8fb3c6`) with AA contrast on `--bg-primary`
- `--border-default: rgba(155,232,255,.18)` · glow shadows built from `#4dd8ff`/`#9be8ff` at low alpha

**Light Theme Mapping:** Frost-tinted backgrounds (never `#ffffff` — use `#fefefe` and the `#eaf4fa` family), text `#050608`, cyan accents darkened (deep-cyan family) to preserve WCAG AA, glow softened.

**Typography:** Google Fonts — "Space Grotesk" (display, 500/700) + "Inter" (body, 400/600). Bind to `--font-display` and `--font-base`.

**Icons:** Google Material Symbols (Rounded style). Inline SVGs and local icon files are forbidden.

**Signature Effects (mandatory):** Glassmorphism (`backdrop-filter: blur(14px–20px)` + translucent fill + 1px cyan hairline border + subtle inner highlight), neon glow (layered box-shadows; restrained text-shadow on hero display text), gradients (radial "aurora" orbs in section backgrounds, gradient text via `background-clip` on key words, gradient border on the featured pricing tier), CSS filters (`blur`/`saturate` on decorative orbs), hover transitions everywhere, and a slow "breathing" glow animation on the hero tree (disabled under `prefers-reduced-motion`).

**Hero Visual:** Build a stylized bonsai tree in pure CSS — layered gradients, pseudo-elements, rotated branch elements, glowing leaf dots. No images, no SVG. It must read instantly as a glowing cyan bonsai silhouette.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is **forbidden anywhere** in `index.html`.
- Target all design properties, layout rules, and states exclusively via class or ID selectors.
- HTML must remain clean, semantic, and style-agnostic — changing the site's look requires editing only the CSS file, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store every token in `:root`, overridden per theme: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast` (~.15s), `--transition-normal` (~.3s), `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`, plus theme extras `--glow-sm`, `--glow-md`, `--font-base`, `--font-display`, and a glass-surface token set.
- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in **both** themes, not just the default.
- Light-mode backgrounds must never be pure white; use `#fefefe` where a near-white is needed.

**1.3 Mandatory Dark Mode Support**
- Dark is the **default presentation** (per the Dark Tech & Cyber output category). Define dark tokens in `:root`; define the full light token set under a `.theme-light` class on `<html>`. Switching themes must change tokens only — zero HTML restructuring.
- Provide a visible header toggle (Material Symbols `light_mode`/`dark_mode`) with correct `aria-pressed` and `aria-label` states.
- Persist choice via `localStorage`; on first visit fall back to `prefers-color-scheme`, then to dark.
- **Exception clause:** the source specification marks Light mode — therefore Light is a fully designed alternate theme with its own glass, glow, and contrast treatment, not an afterthought; both themes must pass AA contrast checks.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in CSS comments (e.g., `.input-group` stacks label/input/error with `stretch`; card body text aligns `flex-start`).
- Mobile-first: all rows convert to columns at ≤768px; no horizontal scrolling at any width ≥320px; fluid type via `clamp()`.

**1.5 Framework Default**
- Use **clean custom CSS** in `style.css` (chosen over the Tailwind CDN to satisfy the single-script deliverable constraint). Organize with `@layer` (tokens → base → layout → components → utilities). Every class must resolve back to CSS variables or reusable component classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Include Google Fonts `<link>` tags (with `preconnect`) for Space Grotesk + Inter and the Material Symbols Rounded stylesheet.
- Icons are rendered only via Material Symbols spans (`aria-hidden="true"` when decorative). Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: .5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `transition: var(--transition-normal)`.
- Variants: `.btn--primary` (cyan gradient fill, `#050608` text, glow shadow), `.btn--secondary` (glass: translucent fill + cyan hairline border), `.btn--danger` (visually distinct red in **both** themes).
- **States via CSS classes/attributes:** hover (brightness lift + intensified glow, `cursor: pointer`); `:focus-visible` (distinct ring from `--primary`); active (`transform: scale(.97)`); `.is-loading` (CSS border spinner or pulsing Material `progress` icon, button dimensions unchanged, pointer-events disabled to prevent double-clicks); `[disabled]` (`opacity: .5`, grayscale, `cursor: not-allowed`); `.is-success` / `.is-error` temporary feedback states using `--text-success` / `--text-error`.
- Primary CTAs must demonstrate the full state machine: click → loading (~1s) → success feedback.

**2.2 Card Component**
- `.card` glass base: translucent `--bg-secondary` fill, `backdrop-filter: blur(16px) saturate(140%)`, 1px `--border-default`, `--radius-lg`, `--shadow-md`.
- **Hover (interactive cards):** `translateY(-2px)` + intensified glow + brightened border. **Focus-within:** border highlights when a child link/button receives focus.
- Define `.skeleton` shimmer keyframes and a `.card--empty` fallback pattern (Material icon + guidance text) as part of the design system.

**2.3 Form & Input Requirements**
- `.input-group`: flex column (justified `stretch` exception) wrapping a `<label>`, the input, and a dedicated `.input-group__error` container with reserved min-height (no layout jump) and `aria-live="polite"`.
- Account for every state: empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border + error icon + message), disabled, read-only.
- Implement live in the Final CTA email capture: validate on submit and blur, never use `alert()`, announce success inline via `aria-live`, and trigger the button's loading → success states.

**2.4 Modal / Popup Requirements**
- Hero secondary CTA "Hear it grow" opens a preview modal: backdrop overlay (`rgba(5,6,8,.7)` + backdrop blur), centered flex container (`align-items: center; justify-content: center`), `role="dialog"` `aria-modal="true"` `aria-labelledby`, `z-index: var(--z-modal)`.
- Animated opening/closing via CSS transitions (opacity + scale). Close via Material `close` icon button, `Esc` key, and overlay click. Trap keyboard focus inside while open and return focus to the trigger on close. Include a simulated loading state (skeleton/spinner) before content renders, plus a success/error feedback area.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing, breakpoints at 768px/480px, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables the breathing glow, floating particles, and transforms (simple opacity only).
- **Accessibility:** AA contrast in both themes; never rely on color alone — pair every error/success with an icon and text; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a skip link; logical DOM/focus order; full keyboard operability (menu, modal, FAQ, toggle, form); `aria-live` regions for all dynamic feedback; visible `:focus-visible` rings everywhere.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- Smooth in-page anchor scrolling with `scroll-margin-top` for the sticky header (disabled under reduced motion). Optional: subtle IntersectionObserver scroll-reveal (`.in-view`, reduced-motion aware).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. One deferred `<script src="script.js">` entry point only; no other script tags, no inline scripts, no inline styles.
- **Naming convention:** BEM exclusively (`.btn--primary`, `.card__icon`, `.pricing__tier--featured`); never mix conventions.
- **Copy:** author original, on-theme English copy for every heading, label, and description — lorem ipsum is forbidden. Unspecified link destinations may use `href="#"`.
- Must run correctly by opening `index.html` on the first attempt.

---

## 5. PAGE STRUCTURE & CONTENT SPECIFICATION

Order: Header → Hero → Features → How It Works → Testimonials → Pricing → FAQ → Final CTA → Footer.

**5.1 Header (sticky, glass):** "NEON BONSAI" wordmark with a glowing leaf-dot accent; anchor nav (Features, How It Works, Pricing, FAQ); theme toggle; "Start Growing" `.btn--primary`. At ≤768px, collapse nav behind an accessible hamburger (`aria-expanded`, `aria-controls`) opening a flex-column panel at `--z-dropdown`.

**5.2 Hero:** full-viewport section; blurred aurora radial-gradient orbs behind; the pure-CSS glowing bonsai tree centerpiece with breathing glow; a glass "Open Beta" badge; H1 naming the concept (e.g., a living tree that plays itself) with one gradient-clipped keyword; subcopy about planting a sonic seed; primary CTA "Plant your first tree" (loading→success demo) and glass secondary CTA "Hear it grow" (opens the modal); scroll cue.

**5.3 Features — exactly 3 glass cards:** "Generative Growth Engine" (the tree composes from its own branching — no two trees sound alike), "Photosynth Synthesis" (light, season, and moisture mapped to timbre, tempo, reverb), "Prune to Compose" (every cut rewrites the score in real time). Each card: glowing icon tile, H3, two-line body, hover lift + glow.

**5.4 How It Works — 3 steps:** 01 Plant (choose a sonic seed), 02 Grow (the tree and its score evolve daily), 03 Prune & Harvest (sculpt branches, export stems). Numbered gradient markers connected by a gradient line — horizontal on desktop, vertical on mobile.

**5.5 Testimonials — 3 glass cards:** realistic quotes from a film composer, an ambient producer, and a sound designer (invented names/roles); avatars as gradient circles with initials (no external images); `format_quote` icon accent; star ratings via Material `star` icons paired with text.

**5.6 Pricing — 3 tiers:** Seedling (Free — 1 tree, core engine), Bonsai ($12/mo — **featured**: "Most Popular" glass badge, gradient border, elevated scale/glow; 5 trees, all synth packs, stem export), Ancient Tree ($29/mo — unlimited trees, grove collaboration, DAW plugin, API). Feature lists with `check` icons; featured tier gets `.btn--primary`, others `.btn--secondary`.

**5.7 FAQ — 5–6 items:** native `<details>`/`<summary>` (accessible by default), styled as glass rows; Material `expand_more` chevron rotating 180° when open; `:focus-visible` ring and hover feedback on summaries. On-theme questions (Is music theory required? What does pruning do to the sound? Can I export to my DAW? What happens if I stop watering it? — the tree goes dormant, your score is saved).

**5.8 Final CTA:** large glass panel with aurora glow; H2 "Grow your sound from a seed."; email capture `.input-group` + `.btn--primary` "Get early access" exercising the full 2.3 state machine; inline success message announced via `aria-live`; privacy microcopy.

**5.9 Footer:** brand block with one-line tagline; three secondary link columns (Product / Resources / Company — real labels, `href="#"` destinations acceptable); contact/community links as text or generic Material icons (no brand logos — SVGs are forbidden); copyright line with dynamic year; microcopy: "All sound is grown locally in your browser."

**`script.js` scope:** theme toggle + persistence, mobile menu, modal open/close + focus trap + Esc, email form validation + success feedback, CTA loading-state demo, optional reduced-motion-aware scroll reveal. Nothing else.

**Definition of Done:** zero inline styles/scripts; both themes toggle correctly and persist; every interactive element has hover, focus, active, and feedback states; no horizontal scroll from 320px up; keyboard-only navigation reaches and operates every control; all copy is original NEON BONSAI-themed English.