Words in Motion demo
Words in Motion

A brutalist kinetic typography stage where bold raw text animates and moves dynamically, using flexbox layouts, backdrop filters, and CSS filter effects.
Category: Typography-Driven
Era: 2020s Modern
Prompt: 16.0 KB · 2289 words
# CODING AGENT PROMPT — BUILD "WORDS IN MOTION" LANDING PAGE (2010s Web Brutalism)

**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.

---

## 0. PROJECT BRIEF

- **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.
- **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.
- **Keywords:** kinetic, type, stage, brutalism, animated, glass, translucent, gradient, blur.
- **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).
- **Required visual effects:** Blur, Glass Effect, Gradients, 3D/Parallax, Hover Effects.
- **Required CSS techniques:** Flexbox, Backdrop Filter, CSS Filters (`filter: blur()`), Keyframe Animations, Transitions, Transforms, Gradients, Border Radius.
- **Section order:** Sticky Header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

### Token Mapping (define exactly, both modes)

| Token | Light (default) | Dark |
|---|---|---|
| `--bg-primary` | `#F4F1EA` | `#141210` |
| `--bg-secondary` | `#fefefe` (never `#ffffff`) | `#1E1B17` |
| `--primary` | `#FF3B00` | `#FF4D1A` (brightened for AA contrast) |
| `--secondary` | `#141210` | `#F4F1EA` |
| `--text-primary` | `#141210` | `#F4F1EA` |
| `--text-secondary` | `#57504A` | `#B3ABA1` |
| `--text-success` | `#0E7A3C` | `#4ADE80` |
| `--text-error` | `#C81E1E` | `#FF6B6B` |
| `--border-default` | `#141210` | `#F4F1EA` |
| `--border-error` / `--border-success` | derive from error/success tokens | derive from error/success tokens |

**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.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and style-agnostic. Changing the site's look must require editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
- Store all tokens in `:root` and theme classes — colors per the table above, plus:
- **Radius:** `--radius-sm: 0px` (brutalist default — sharp corners everywhere except glass panels), `--radius-md: 4px`, `--radius-lg: 20px` (glass panels only).
- **Shadows (hard offset, no blur — brutalist signature):** `--shadow-sm: 3px 3px 0 var(--border-default)`, `--shadow-md: 6px 6px 0 var(--border-default)`.
- **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.
- **Elevation:** `--z-dropdown: 100` (sticky header, mobile nav), `--z-modal: 200`, `--z-toast: 300`.
- **Glass tokens:** `--glass-bg: rgba(254,254,254,0.55)` / dark `rgba(20,18,16,0.6)`; `--glass-border: rgba(20,18,16,0.65)` / dark `rgba(244,241,234,0.25)`; `--glass-blur: 14px`.
- **Gradient tokens:** `--gradient-accent: linear-gradient(100deg, #FF3B00 0%, #FF9A3D 100%)` for highlighted display words (via `background-clip: text`) and CTA accents.

**1.3 Mandatory Dark Mode Support**
- **Implementation:** Define light tokens in `:root`, dark token overrides under `@media (prefers-color-scheme: dark)`, and `.theme-dark` / `.theme-light` classes that override both (class beats media query). This gives system-preference dark mode even without JS.
- **Theme Switching:** Background and text variables must flip with zero HTML restructuring. Glass tokens must also flip.
- **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" / "Switch to light mode"), using Google Material sun/moon icons.

**1.4 Flexbox Layout & Mobile-First Alignment**
- **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).
- **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`).

**1.5 Framework Default**
- 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.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Fonts (one Google Fonts `<link>` in `<head>`):** `Archivo Black` → `--font-display` (massive uppercase headlines, tight tracking); `Space Grotesk` → `--font-base` (body/UI); `Space Mono` → `--font-mono` (eyebrows, labels, prices meta, footer meta).
- **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.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase display/mono 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.
- **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.
- **Focus:** Distinct focus ring using `--primary` (e.g., 3px outline with 2px offset, doubled against `--border-default`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** Class-based state that disables interaction, blocks double-clicks, and renders a CSS spinner or animated Material icon *without changing button dimensions*.
- **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback state styles driven by `--text-success` / `--text-error` tokens (used by the Final CTA submit).
- `.btn--danger` must be visually distinct in both light and dark themes.

**2.2 Card Component (`.card--brutal`, `.card--glass`)**
- **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`.
- **Hover:** `transform: translateY(-2px)` plus shadow growth; optional subtle 3D tilt (`perspective` + `rotateX/rotateY` ≤ 5deg) — disabled under `prefers-reduced-motion`.
- **Focus-within:** When a child link/button receives focus, the card border shifts to `--primary`.
- **Loading (Skeleton):** Define a shimmer keyframe and `.skeleton` utility to prevent layout jumps.
- **Empty State:** Define a `.card--empty` fallback pattern: large Google icon + clear guidance text.

**2.3 Form & Input (Final CTA email capture)**
- **Structure:** Flex column wrapper containing a visible `<label>`, the input, and a dedicated error feedback `<p>` bound with `aria-live="polite"`.
- **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.

**2.4 Modal / Popup (conditional)**
- If — and only if — the design introduces an overlay (e.g., a "Watch the Stage" demo modal), it must have: animated opening/closing states via CSS transitions, a backdrop overlay, a Material icon close button, keyboard focus trapping, close via `Esc` and overlay click, and loading/success/error 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.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid `clamp()` sizing, breakpoints via `min-width`, no horizontal overflow at any viewport from 320px up.
- **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.
- **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/focus order, full keyboard operability (nav, toggle, FAQ, mobile menu, form), and `aria-live` regions for dynamic form feedback.
- **JS-gated reveals:** Never hide content by default in CSS. `script.js` adds a class to `<html>` enabling pre-reveal hidden states, so content stays visible if JS fails. An `IntersectionObserver` applies reveal classes with 80ms stagger.
- **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` defined and distinct in both themes (not used unless copy calls for it).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** Exactly three — `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer></script>` in `<head>` or before `</body>`. Google Fonts links in `<head>`. No inline scripts, no inline styles, no inline SVGs.
- **Naming Convention:** Strict BEM (`block__element--modifier`) throughout; never mix conventions. State classes use an `is-` prefix (e.g., `is-open`, `is-visible`).
- **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.
- **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).

---

## 5. SECTION-BY-SECTION BUILD SPEC

**5.1 Header:** Sticky glass bar (`--glass-bg`, `backdrop-filter`), z-index `--z-dropdown`. Left: wordmark "WORDS IN MOTION" in display font. Center/right: 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.

**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/ink, 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.

**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.

**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 / 02 / 03) in display font, mono step title, short copy. Suggested steps: WRITE → CHOREOGRAPH → PERFORM & EXPORT.

**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.

**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 / STAGE / 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.

**5.7 FAQ:** Accordion with 5–6 real Q&As. Each item: a `<button>` with `aria-expanded`, `aria-controls`, and a Material chevron icon rotating 180° on open; panel with `role="region"` and `aria-labelledby`, animated open/close 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.

**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.

**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 / INSTAGRAM / DRIBBBLE — no SVG brand icons); a repeating theme toggle or "BACK TO TOP" anchor; and a mono copyright line. All links show visible hover/focus feedback.

**Deliver the complete `index.html`, `style.css`, and `script.js` now — final, polished, fully functional on first output.**