[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-023-Micro-interactions":3},"# CODING AGENT PROMPT — \"Micro-Interactions\" Landing Page (Glass & Soft UI)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. The page markets a fictional micro-interaction design toolkit (invent a product name, e.g., \"Pulse\") and must itself demonstrate the micro-interaction craft it sells: snappy 50–100ms feedback, tactile press states, gesture support, and polished loading\u002Fsuccess\u002Ferror states — all rendered in a Glass & Soft UI aesthetic with full Light and Dark themes.\n\n---\n\n### **1. STRICT RULES & ARCHITECTURE**\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live exclusively in `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors only.\n* HTML must remain clean, semantic, and style-agnostic: re-theming the entire site must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (and override in theme scopes):\n* **Colors:** `--primary` (soft indigo, e.g., `#6366F1`), `--secondary` (soft teal accent, used sparingly), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success: #22C55E`, `--text-error: #EF4444`, `--text-warning: #F59E0B`, `--border-default`, `--border-error`, `--border-success`.\n* **Subtle Color Shift Rule:** Hover\u002Factive color changes must be 10–20% lightness shifts of the base token, implemented with `color-mix()` (e.g., `color-mix(in srgb, var(--primary), white 14%)`). Never jump to a different hue on hover.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **both** themes, not just the default.\n* **Light Mode Background:** Do not use pure white. Use a soft cool off-white (e.g., `#f4f6fb`) as the base; where a near-white surface is required, use `#fefefe`, never `#ffffff`.\n* **Radii & Shadows (Soft UI):** `--radius-sm: 12px`, `--radius-md: 18px`, `--radius-lg: 26px`, `--shadow-sm`, `--shadow-md`, plus `--shadow-soft` (large-blur, low-opacity, layered) and `--shadow-lifted` for hover elevation.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 80ms`, `--transition-normal: 160ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)` (for tactile \"pop\" feedback only).\n* **Elevation\u002FStacking:** `--z-header: 90`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` — no hardcoded z-index values elsewhere.\n* **Glass Tokens:** `--glass-bg`, `--glass-border`, `--glass-blur`, `--glass-highlight` (see §1.7).\n* **Typography Tokens:** `--font-base: 'Inter'`, `--font-heading: 'Space Grotesk'`.\n\n**1.3 Mandatory Dark Mode Support**\n* Define dark mode tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`, so switching requires zero HTML restructuring.\n* On first visit, follow `prefers-color-scheme`; once the user toggles, persist their choice in `localStorage` and apply it before paint to avoid a flash of the wrong theme.\n* Include a visible theme toggle in the header with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), swapping Material sun\u002Fmoon icons with a 150ms rotate\u002Ffade crossfade. Both themes must be fully designed — this spec demands Full Light **and** Full Dark.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox (`display: flex`).\n* **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., card body columns stretching).\n* Mobile-first: rows must collapse to columns on small viewports; prevent any horizontal scrolling at any width; use fluid type via `clamp()`.\n\n**1.5 Styling Approach — Clean Custom CSS**\n* Use pure custom CSS in `style.css`, organized with native `@layer` (reset → tokens → base → components → utilities). Tailwind's CDN is intentionally omitted because it would violate the single-script rule in §5; this is the sanctioned \"clean custom CSS\" branch of the framework policy.\n* All utilities must map back to CSS variables or generic reusable component classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Google Fonts** via `\u003Clink>` in `\u003Chead>`: `Space Grotesk` (headings, weights 500–700) and `Inter` (body, weights 400–600). Bind them to `--font-heading` \u002F `--font-base`.\n* Icons must be **Google Material Symbols (Rounded style)** loaded from Google Fonts. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n\n**1.7 Glass & Soft UI Surface Treatment**\n* Cards, panels, header, and modal surfaces use: `background: var(--glass-bg)` (Light: `rgba(255,255,255,0.62)`; Dark: `rgba(15,20,35,0.6)`), `backdrop-filter: blur(var(--glass-blur)) saturate(160%)` (`--glass-blur: 18px`), a 1px `var(--glass-border)` (Light: `rgba(255,255,255,0.55)`; Dark: `rgba(255,255,255,0.12)`), and `--glass-highlight` as an inset top edge light.\n* Page background: a fixed, soft \"aurora\" — 2–3 large, heavily blurred radial-gradient blobs (primary hue plus pastel complements; Dark: deep navy `#0b1020` base with muted glowing blobs at reduced opacity).\n* Provide an `@supports not (backdrop-filter: blur(1px))` fallback that raises glass background opacity to ~0.92 so text stays readable.\n* **Contrast safeguard:** glass opacity must keep all text at WCAG AA (4.5:1) in both themes; never place body text over the densest part of a background blob. Hover elevation deepens and softens shadows — never hardens them.\n\n---\n\n### **2. COMPONENT DESIGN SPECIFICATIONS**\n\n**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-md`, weight 500.\n* **Hover:** 10–20% lightness shift (per §1.2) plus deepened soft shadow, 80ms, `cursor: pointer` — gated behind `@media (hover: hover) and (pointer: fine)`.\n* **Focus:** distinct `:focus-visible` ring built from CSS variables (`outline` + offset), clearly visible on glass in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)` with `--ease-spring`, 80ms.\n* **Loading (`.is-loading`):** disables pointer events and prevents double-submission; swaps the label for a CSS border spinner or animated Material `progress` icon; button dimensions must not change; set `aria-busy=\"true\"`.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary states — success shows a `check_circle` icon in `--text-success` for ~1.2s then reverts; error applies a short shake keyframe plus `--text-error` border\u002Ftext. Never communicate these states by color alone — always include the icon.\n* **Haptic:** on coarse pointers, fire a feature-detected `navigator.vibrate(8)` on press.\n\n**2.2 Card Component (`.card`)**\n* **Default:** flexible Flexbox column (centered content), glass surface per §1.7, `--radius-lg`, generous padding, subtle border.\n* **Hover:** `transform: translateY(-2px)` + shadow lift, 100ms; optionally a pointer-following radial highlight driven by `--mx`\u002F`--my` custom properties updated via JS — only on hover-capable devices, disabled under reduced motion.\n* **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` with a shimmer sweep animation (linear-gradient keyframes) that preserves exact card dimensions; static soft gray under reduced motion.\n* **Empty State:** centered Material icon + short guidance text + optional action button.\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback element (`.input-group__error`, `aria-live=\"polite\"`).\n* **States — all styled in CSS:** empty, focused (outline ring), filled, valid (success border + `check_circle` icon), invalid (error border, red text, `error` icon, message), disabled, read-only.\n* Validate the email on blur and on submit; announce errors via the live region; the submit button must run the full loading → success cycle.\n\n**2.4 Modal \u002F Popup (`.modal`)**\n* **States:** opening (backdrop fade + panel scale 0.96→1, ~120ms), open, loading, success\u002Ferror, closing (reverse animation) — all via CSS transitions.\n* **UX:** centered overlay flex container (`align-items: center`), backdrop blur, Material icon close button (44×44px), keyboard focus trap, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`, body scroll lock, and focus returned to the trigger on close.\n* **Usage:** each pricing tier CTA opens a \"Start with [Plan]\" confirmation modal whose confirm button demonstrates the loading → success sequence.\n\n**2.5 Accordion (FAQ)**\n* Button-triggered pattern with `aria-expanded` \u002F `aria-controls`; panel expands via the `grid-template-rows: 0fr → 1fr` technique (~150ms); chevron Material icon rotates 90° in 100ms; fully keyboard operable.\n\n**2.6 Carousel (Testimonials)**\n* 3 slides; single-slide view on mobile with **horizontal swipe** via Pointer Events (~40px threshold) and snap behavior; prev\u002Fnext buttons (44px, Material icons) and dot indicators (real buttons with `aria-current`).\n* Semantics: `aria-roledescription=\"carousel\"`, slides as `role=\"group\"` with `aria-roledescription=\"slide\"`; optional 6s auto-advance that pauses on hover\u002Ffocus and is disabled under reduced motion; haptic tick on swipe commit.\n\n**2.7 Header \u002F Navigation**\n* Sticky glass header that intensifies blur and shadow when scrolled (`.is-scrolled`, 150ms transition).\n* Contains: logo (Material icon + wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with an 80ms underline-grow hover, the theme toggle (§1.3), and a \"Get started\" `.btn--primary`.\n* Mobile: hamburger (three spans morphing into an X, 150ms) opens a dropdown panel at `--z-dropdown`, `aria-expanded` on the trigger, 44px link targets, `Esc` closes.\n\n---\n\n### **3. CORE UX & MICRO-INTERACTION RULES**\n\n**3.1 Timing Standards (Micro-Interaction Discipline)**\n* Hover and press feedback: **50–100ms** (`--transition-fast`). Larger surface movements: ≤160ms. Entrance reveals: 200–300ms with 40–60ms child stagger. No animation may exceed 400ms. Use `--ease-standard` for movement and `--ease-spring` only for small tactile pops.\n\n**3.2 Gestures & Haptics**\n* Gate all hover-only effects behind `@media (hover: hover) and (pointer: fine)`; touch devices get `:active` press states instead.\n* Support swipe on the testimonial carousel; fire feature-detected `navigator.vibrate(8)` on primary button presses and swipe commits, coarse pointers only. **Never hijack native pinch-zoom or block scrolling.**\n\n**3.3 Loading, Success & Error Feedback**\n* Every click, hover, and submission triggers a visible state change. Loading spinners must be smooth infinite CSS loops that never shift layout. Success = `#22C55E` + `check_circle` icon; error = `#EF4444` + icon + shake; pending\u002Fwarning accents = `#F59E0B` (e.g., the pricing \"Save 20%\" badge). Never rely on color alone — always pair with an icon or text.\n\n**3.4 Scroll Reveal**\n* Use `IntersectionObserver` to add `.is-visible` (opacity + `translateY(12px)` → 0), triggering once per element, with staggered children in card\u002Fstep grids. Disabled entirely under reduced motion.\n\n**3.5 Responsive by Default**\n* Mobile-first breakpoints (≥640px, ≥1024px); fluid typography with `clamp()`; zero horizontal overflow at any viewport; grids collapse to a single column on mobile.\n\n**3.6 Accessibility (a11y)**\n* WCAG AA contrast in both themes — pay special attention to text over glass surfaces. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with a strict `h1`→`h3` hierarchy. Full keyboard operability for the menu, carousel, accordion, and modal; logical DOM\u002Ffocus order; visible focus everywhere. `aria-live` regions for form errors, toasts, and loading outcomes. Under `prefers-reduced-motion`: disable transforms, parallax, spinners, auto-advance, and pointer-follow highlights; retain only ≤100ms opacity fades. All touch targets ≥44×44px.\n\n**3.7 Feedback Systems & Destructive Actions**\n* Implement a toast system (bottom of viewport, `--z-toast`, slide-up 150ms, auto-dismiss 3s, dismissible, `role=\"status\"`) for form and modal outcomes. `.btn--danger` must be visually distinct in **both** light and dark themes.\n\n---\n\n### **4. LANDING PAGE STRUCTURE & CONTENT**\n\nWrite all user-facing copy in **English** — realistic, on-theme marketing copy for the fictional micro-interaction toolkit. No lorem ipsum anywhere.\n\n* **4.1 Header:** per §2.7.\n* **4.2 Hero:** `h1` headline + subheadline, dual CTA (`.btn--primary` \"Get started free\" + `.btn--ghost` \"See it in action\" that smooth-scrolls to Features), and an **interactive demo panel**: a small glass playground containing a live button, a toggle switch, and a like\u002Fheart counter — each demonstrating the micro-interaction states from §2.1. Add a trust row (stat chips or \"Trusted by\" line). Staggered entrance animation.\n* **4.3 Features:** exactly **3 glass cards**, each with a Material icon, title, and two-line copy (e.g., 50ms feedback engine, gesture support, tactile state system). Hover lift + pointer highlight + staggered reveal per §2.2.\n* **4.4 How It Works:** exactly **3 numbered steps** in glass circles connected by a soft dashed line on desktop, revealed sequentially on scroll.\n* **4.5 Testimonials:** 3 quotes with avatar initials in colored glass circles (no external images), name, role, and 5-star ratings using Material `star` icons; swipeable carousel per §2.6.\n* **4.6 Pricing:** exactly **3 tiers** (Starter — free, Pro — highlighted with a \"Most popular\" badge, Team), a monthly\u002Fannual toggle with an animated sliding thumb (100ms) and an amber \"Save 20%\" badge; prices swap with a quick fade-slide micro-animation; each tier CTA opens the confirmation modal per §2.4.\n* **4.7 FAQ:** 5–6 realistic questions about the product as an accordion per §2.5.\n* **4.8 Final CTA:** centered glass panel with headline and the email capture `.input-group` per §2.3 — submit demonstrates loading → success, inline validation, and a toast; include a one-line privacy microcopy.\n* **4.9 Footer:** brand + tagline, 3–4 secondary link groups (Product, Company, Resources, Legal), social icons (Material Symbols), and copyright. Links may use `href=\"#\"` but must have visible hover\u002Ffocus states.\n\n---\n\n### **5. DELIVERABLE & OUTPUT FORMAT**\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. The HTML may contain **only one** script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline `\u003Cscript>` blocks, no inline event handlers (`onclick=` etc.), no inline styles.\n* **Naming:** BEM convention exclusively (`.btn`, `.btn--primary`, `.card__title`, `nav__link`, `is-loading` state classes) — never mix conventions.\n* **Assets:** Google Fonts and Material Symbols via `\u003Clink>` tags in `\u003Chead>` only; no inline SVGs; no local icon files.\n* **Copy:** all user-facing text and code comments in English; real content everywhere per §4 — placeholders are not permitted.\n* **Verification:** before finalizing, mentally test both themes, keyboard-only navigation, and 360px mobile width; fix any contrast, overflow, or focus-order issue you find.\n",1791954980035]