[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-707-WORDS-IN-MOTION-a-kinetic-typography-stage":3},"# CODING AGENT PROMPT — BUILD \"WORDS IN MOTION\" LANDING PAGE (2010s Web Brutalism)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below in a single pass. Do not ask follow-up questions. Do not output partial work.\n\n---\n\n## 0. PROJECT BRIEF\n\n- **Theme:** WORDS IN MOTION — a kinetic typography stage. The product you are designing for is a web tool where designers choreograph animated, kinetic type and export it to the web.\n- **Style:** 2010s Web Brutalism — oversized uppercase type, exposed grid structure, hard 2px borders, hard offset shadows, raw mono labels — fused with modern glass (backdrop blur), translucent gradient blobs, and motion design.\n- **Keywords:** kinetic, type, stage, brutalism, animated, glass, translucent, gradient, blur.\n- **Mode:** Light mode is the hero mode and the default. **Exception clause:** although the source brief marks dark mode as optional, dark mode is mandatory in this build — it must be fully designed, tokenized, toggleable, and persisted (see Rule 1.3).\n- **Required visual effects:** Blur, Glass Effect, Gradients, 3D\u002FParallax, Hover Effects.\n- **Required CSS techniques:** Flexbox, Backdrop Filter, CSS Filters (`filter: blur()`), Keyframe Animations, Transitions, Transforms, Gradients, Border Radius.\n- **Section order:** Sticky Header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n### Token Mapping (define exactly, both modes)\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--bg-primary` | `#F4F1EA` | `#141210` |\n| `--bg-secondary` | `#fefefe` (never `#ffffff`) | `#1E1B17` |\n| `--primary` | `#FF3B00` | `#FF4D1A` (brightened for AA contrast) |\n| `--secondary` | `#141210` | `#F4F1EA` |\n| `--text-primary` | `#141210` | `#F4F1EA` |\n| `--text-secondary` | `#57504A` | `#B3ABA1` |\n| `--text-success` | `#0E7A3C` | `#4ADE80` |\n| `--text-error` | `#C81E1E` | `#FF6B6B` |\n| `--border-default` | `#141210` | `#F4F1EA` |\n| `--border-error` \u002F `--border-success` | derive from error\u002Fsuccess tokens | derive from error\u002Fsuccess tokens |\n\n**Verified contrast pairs (must hold in both modes):** ink `#141210` on paper `#F4F1EA` and inverse ≈ 15:1; ink `#141210` on `#FF3B00` ≈ 4.9:1 (AA, so primary buttons use dark text on orange — never white text on orange); dark-mode accent text uses `#FF4D1A` on `#141210` ≈ 5:1. Light backgrounds always pair with dark text and vice versa in every theme.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML stays semantic and style-agnostic. Changing the site's look must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` and theme classes — colors per the table above, plus:\n- **Radius:** `--radius-sm: 0px` (brutalist default — sharp corners everywhere except glass panels), `--radius-md: 4px`, `--radius-lg: 20px` (glass panels only).\n- **Shadows (hard offset, no blur — brutalist signature):** `--shadow-sm: 3px 3px 0 var(--border-default)`, `--shadow-md: 6px 6px 0 var(--border-default)`.\n- **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 120ms`, `--transition-normal: 240ms`, `--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)`, plus `--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)` for kinetic entrances.\n- **Elevation:** `--z-dropdown: 100` (sticky header, mobile nav), `--z-modal: 200`, `--z-toast: 300`.\n- **Glass tokens:** `--glass-bg: rgba(254,254,254,0.55)` \u002F dark `rgba(20,18,16,0.6)`; `--glass-border: rgba(20,18,16,0.65)` \u002F dark `rgba(244,241,234,0.25)`; `--glass-blur: 14px`.\n- **Gradient tokens:** `--gradient-accent: linear-gradient(100deg, #FF3B00 0%, #FF9A3D 100%)` for highlighted display words (via `background-clip: text`) and CTA accents.\n\n**1.3 Mandatory Dark Mode Support**\n- **Implementation:** Define light tokens in `:root`, dark token overrides under `@media (prefers-color-scheme: dark)`, and `.theme-dark` \u002F `.theme-light` classes that override both (class beats media query). This gives system-preference dark mode even without JS.\n- **Theme Switching:** Background and text variables must flip with zero HTML restructuring. Glass tokens must also flip.\n- **Persistence:** `script.js` reads `localStorage`; falls back to `prefers-color-scheme` on first visit; applies the class on load. The header must contain a visible toggle button with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), using Google Material sun\u002Fmoon icons.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stretched card bodies).\n- **Mobile-Friendly First:** Mobile-first CSS; multi-column flex rows collapse to `flex-direction: column` on small viewports; fluid `clamp()` type scale (hero display up to ~`clamp(2.75rem, 9vw, 7.5rem)`); zero horizontal scrolling anywhere (marquee bands use `overflow: hidden`).\n\n**1.5 Framework Default**\n- No framework was requested. Use hand-authored CSS in `style.css`, organized in Tailwind-style cascade layers (`@layer tokens, base, layout, components, utilities`) with one consistent class system (see Section 4). No utility-class soup mixed with component classes.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- **Fonts (one Google Fonts `\u003Clink>` in `\u003Chead>`):** `Archivo Black` → `--font-display` (massive uppercase headlines, tight tracking); `Space Grotesk` → `--font-base` (body\u002FUI); `Space Mono` → `--font-mono` (eyebrows, labels, prices meta, footer meta).\n- **Icons:** Google Material Symbols via Google Fonts link. **Raw inline SVGs and local icon files are forbidden. No emoji as icons.** Social links in the footer are text links (mono, uppercase) — brand logos must not be hand-drawn as SVG.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase display\u002Fmono font, 2px solid `--border-default`, hard offset shadow, minimum touch target 44×44px. Primary = `--primary` background with `--secondary` (ink) text; Secondary = transparent bg, ink border, ink text.\n- **Hover:** `transform: translate(-2px, -2px)` with the offset shadow growing (e.g., `--shadow-sm` → `--shadow-md`), `cursor: pointer`. Secondary fills with ink and flips text to paper.\n- **Focus:** Distinct focus ring using `--primary` (e.g., 3px outline with 2px offset, doubled against `--border-default`) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** Class-based state that disables interaction, blocks double-clicks, and renders a CSS spinner or animated Material icon *without changing button dimensions*.\n- **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback state styles driven by `--text-success` \u002F `--text-error` tokens (used by the Final CTA submit).\n- `.btn--danger` must be visually distinct in both light and dark themes.\n\n**2.2 Card Component (`.card--brutal`, `.card--glass`)**\n- **Default:** Flexbox layout; `.card--brutal` = `--bg-secondary` surface, 2px solid `--border-default`, `--shadow-sm`, `--radius-sm`; `.card--glass` = `--glass-bg` background, `backdrop-filter: blur(var(--glass-blur)) saturate(1.4)` (with `-webkit-` prefix and an `@supports` solid fallback), `--radius-lg`.\n- **Hover:** `transform: translateY(-2px)` plus shadow growth; optional subtle 3D tilt (`perspective` + `rotateX\u002FrotateY` ≤ 5deg) — disabled under `prefers-reduced-motion`.\n- **Focus-within:** When a child link\u002Fbutton receives focus, the card border shifts to `--primary`.\n- **Loading (Skeleton):** Define a shimmer keyframe and `.skeleton` utility to prevent layout jumps.\n- **Empty State:** Define a `.card--empty` fallback pattern: large Google icon + clear guidance text.\n\n**2.3 Form & Input (Final CTA email capture)**\n- **Structure:** Flex column wrapper containing a visible `\u003Clabel>`, the input, and a dedicated error feedback `\u003Cp>` bound with `aria-live=\"polite\"`.\n- **States (all class-driven):** Empty, Focused (offset ring in `--primary`), Filled, Valid (success border + check Material icon), Invalid (error border, error icon, error text — never color alone), Disabled, Read-only.\n\n**2.4 Modal \u002F Popup (conditional)**\n- If — and only if — the design introduces an overlay (e.g., a \"Watch the Stage\" demo modal), it must have: animated opening\u002Fclosing states via CSS transitions, a backdrop overlay, a Material icon close button, keyboard focus trapping, close via `Esc` and overlay click, and loading\u002Fsuccess\u002Ferror states if content is async. The FAQ must use an accordion, not a modal. Do not add modals beyond what the section spec below requires.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid `clamp()` sizing, breakpoints via `min-width`, no horizontal overflow at any viewport from 320px up.\n- **Smooth Animations:** All state changes use `transition: var(--transition-normal) var(--ease-standard)`. Required keyframe inventory: marquee scroll, staggered letter blur-in entrance (uses `filter: blur()`), gradient blob drift, caret blink, skeleton shimmer, button spinner. Under `prefers-reduced-motion: reduce`: marquees freeze and hide overflow, parallax and tilt are removed, reveals collapse to simple opacity fades, kinetic loops are disabled.\n- **Accessibility (a11y):** AA contrast in both modes (pairs pre-verified in the brief — do not weaken them). Never rely on color alone for state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), exactly one `h1`, logical heading order, logical DOM\u002Ffocus order, full keyboard operability (nav, toggle, FAQ, mobile menu, form), and `aria-live` regions for dynamic form feedback.\n- **JS-gated reveals:** Never hide content by default in CSS. `script.js` adds a class to `\u003Chtml>` enabling pre-reveal hidden states, so content stays visible if JS fails. An `IntersectionObserver` applies reveal classes with 80ms stagger.\n- **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` defined and distinct in both themes (not used unless copy calls for it).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** Exactly three — `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` in `\u003Chead>` or before `\u003C\u002Fbody>`. Google Fonts links in `\u003Chead>`. No inline scripts, no inline styles, no inline SVGs.\n- **Naming Convention:** Strict BEM (`block__element--modifier`) throughout; never mix conventions. State classes use an `is-` prefix (e.g., `is-open`, `is-visible`).\n- **No Unrequested Placeholders:** The user supplied no copy — therefore write complete, real English marketing copy for a kinetic typography tool throughout every section. Lorem ipsum is forbidden. Footer link destinations that have no in-page target may use `#`, but all link text must be real.\n- **JS scope (lean, no libraries):** theme toggle + `localStorage` + system fallback; FAQ accordion (`aria-expanded` toggling); mobile nav disclosure; IntersectionObserver reveals; Final CTA form validation with `aria-live` feedback; optional hero parallax via `requestAnimationFrame` (disabled under reduced motion).\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPEC\n\n**5.1 Header:** Sticky glass bar (`--glass-bg`, `backdrop-filter`), z-index `--z-dropdown`. Left: wordmark \"WORDS IN MOTION\" in display font. Center\u002Fright: mono uppercase anchor links (FEATURES, HOW IT WORKS, PRICING, FAQ) with hover underline-slide. Far right: theme toggle per Rule 1.3. On mobile, links collapse behind a menu button (`aria-expanded`, `aria-controls`) opening a glass panel that stacks vertically.\n\n**5.2 Hero:** Full-viewport flex column, `align-items: center`. Mono eyebrow tag (\"A KINETIC TYPOGRAPHY STAGE\"). Headline \"WORDS IN MOTION\" hand-split into per-letter spans, each animated by a staggered keyframe entrance: from `filter: blur(14px); transform: translateY(40px) rotate(6deg); opacity: 0` to sharp — the blur filter here is mandatory. One display word (e.g., \"MOTION\") uses `--gradient-accent` clipped text. Subcopy (one sentence, real copy) and two buttons: `.btn--primary` \"Take the Stage\" and `.btn--secondary` \"See How It Works\" (anchor). Background: two or three large translucent gradient blobs in orange\u002Fink, softened with `filter: blur(...)`, slowly drifting via keyframes. A `.card--glass` stat strip (3 mono stats) floats over the blobs with a subtle 3D perspective tilt. Bottom edge: an infinite marquee band of repeated kinetic phrases (duplicate track `aria-hidden=\"true\"`, `translateX` keyframe, pause on hover, `overflow: hidden`). Parallax: decorative layers translate at different rates on scroll via rAF.\n\n**5.3 Features:** Section heading (display font, mono eyebrow \"FEATURES\"). Three `.card--brutal` cards in a flex row (column on mobile), each with: Material icon inside a bordered square chip (orange icon), display-font title, real body copy (e.g., kinetic presets library, variable-font motion axes, one-click export). Staggered scroll reveal; hover lift per Rule 2.2.\n\n**5.4 How It Works:** Three steps in a flex row with a connecting horizontal rule on desktop (stacked with a vertical rule on mobile). Each step: oversized orange index numeral (01 \u002F 02 \u002F 03) in display font, mono step title, short copy. Suggested steps: WRITE → CHOREOGRAPH → PERFORM & EXPORT.\n\n**5.5 Testimonials:** Three quote cards (`.card--brutal` or `.card--glass` — pick one variant and stay consistent). Each: oversized styled quotation mark, real quote copy in base font, and a typographic avatar — a circle filled with `--gradient-accent` containing the person's initials in ink — plus name and role in mono. Hover lift. No photographs.\n\n**5.6 Pricing:** Three tier cards in a flex row (column on mobile). Middle tier featured: `--primary` 2px border, \"MOST POPULAR\" mono badge, larger hard shadow. Tier names in display font (e.g., BACKSTAGE \u002F STAGE \u002F TOUR), prices in display font with a mono billing label, feature lists with Material check icons, and a CTA button per tier using the full Rule 2.1 state set. Footer microcopy line under the grid.\n\n**5.7 FAQ:** Accordion with 5–6 real Q&As. Each item: a `\u003Cbutton>` with `aria-expanded`, `aria-controls`, and a Material chevron icon rotating 180° on open; panel with `role=\"region\"` and `aria-labelledby`, animated open\u002Fclose via `grid-template-rows: 0fr → 1fr` transition (or equivalent height animation) at `var(--transition-normal)`. One panel open at a time. Fully keyboard operable with visible focus.\n\n**5.8 Final CTA:** A high-impact panel that inverts tokens: in light mode it is an ink `#141210` panel with paper text (in dark mode it flips to an orange `--gradient-accent` panel with ink text — keep the pairings accessible). Contains: an oversized kinetic display headline with the blur-in stagger, one supporting line, and the email capture form per Rule 2.3 (label, input, error container with `aria-live=\"polite\"`, submit button). On submit: button enters loading state, then a temporary success state with an `aria-live` confirmation message. Include a short privacy microcopy line.\n\n**5.9 Footer:** Ink background in light mode (paper background with hard top border in dark mode). Contents: the wordmark repeated as a giant outlined display-font watermark; three columns of secondary links (PRODUCT, RESOURCES, COMPANY) as mono uppercase text links pointing to in-page anchors where they map; social text links (e.g., X \u002F INSTAGRAM \u002F DRIBBBLE — no SVG brand icons); a repeating theme toggle or \"BACK TO TOP\" anchor; and a mono copyright line. All links show visible hover\u002Ffocus feedback.\n\n**Deliver the complete `index.html`, `style.css`, and `script.js` now — final, polished, fully functional on first output.**\n",1791954991565]