# RelayCTX — Animation & Motion Brief **Date:** June 2026 · re-versioned to v3.5 on 2026-07-10 (animation beats and rules unchanged — carried forward from v3.4) **For:** Design team / Figma board: figma.com/board/deJ1lPuGhlyanOnOy3GY7I **Purpose:** Motion graphics for website, deck slides, and social content **System:** v3.5 neutral-first (`brand/relay-tokens-v35.css`); motion rules in `briefs/SPEC.pulse-motion.md` --- ## Priority animations ### 1. Code Lifecycle (HERO) — P0 **Concept:** The Relay Code as the central hero moment. Shows the full transfer lifecycle. **Motion sequence (4s loop):** 1. Code appears letter-by-letter in JetBrains Mono teal: `Q → QN → QNH → QNHC2C` 2. Amber status dot pulses: “Awaiting receipt” 3. Brief pause (0.5s) 4. Green flash: dot snaps to green “Received” 5. Code dims/grays: “Spent” 6. Fade out → loop **Deliverables:** Lottie JSON (for web) + MP4 (for social) **Prompt:** “Minimal dark-background animation. A 6-character code appears letter by letter in a monospace teal font. An amber status dot pulses. Then the dot snaps to green. The code fades. Clean, no text except the code itself. 4 second loop.” --- ### 2. The Invisible Wall (M02 / Problem section) — P0 **Concept:** Context building up in a session → session ends → everything gone. **Motion sequence (6s, plays on scroll):** 1. Left panel: context blocks appear and stack (decisions, state, intent — styled as cards) 2. Wall appears as a vertical line 3. Session “ends” — particles disperse from the cards 4. Right panel: blank, empty, white 5. Hold 1s → subtle “what if” hint (teal dot appears at wall) **Deliverables:** SVG + CSS animation (web), MP4 (deck/social) **Prompt:** “Two panels separated by a thin vertical line. Left panel: small cards appear and stack, representing accumulated context. A clock or session indicator counts. Then the session ends — the cards crumble or dissolve. Right panel stays blank. Minimal, flat, warm palette (parchment background, teal accents).” --- ### 3. Send → Route → Receive (M06 / How It Works) — P0 **Concept:** A context packet travels between two endpoints through Relay. **Motion sequence (5s loop):** 1. Left node (Agent A or person): context packet forms — a small card compresses into a Code 2. Code travels along a dashed line to center (Relay) 3. Center: Relay logo pulses, routing animation (brief) 4. Code continues to right node (Agent B or person) 5. Right node expands: Code → full context card 6. Green “Received” dot 7. Fade → loop **Deliverables:** Lottie JSON, MP4, GIF **Prompt:** “Two endpoints (abstract nodes or simple circle-A, circle-B) connected by a dashed line. A glowing packet travels from A to B along the line. At center, a relay symbol (radiating lines from a dot) pulses briefly. At B, the packet expands into a card. Teal accent color, white background, minimal flat style.” --- ### 4. Stream — Living Context (Platform section) — P1 **Concept:** A Stream (the feature formerly named Pulse) as a living, updating feed of context items. **Motion sequence (8s loop):** 1. Stream panel appears — shows 3-4 context items 2. New item appears at top with a subtle slide-in 3. Existing items age (opacity dims slightly) 4. One item refreshes: teal dot pulses, timestamp updates 5. Smooth continuous scroll implies persistence **Deliverables:** CSS/Lottie (web), MP4 (social) **Prompt:** “A clean card UI panel showing a feed of text items. New items slide in from the top. Existing items gently fade. One item pulses with a small teal dot. The whole panel feels alive — always updating, never static.” --- ### 5. Agent Chain (Use cases / Agent section) — P1 **Concept:** Multiple agents passing context through Relay in sequence. **Motion sequence (6s loop):** 1. Agent A runs a session — context accumulates 2. A packages it: Code appears 3. Code hops to Agent B: B loads, continues 4. B packages: new Code 5. Code hops to Agent C: loads 6. A → relay → B → relay → C chain glows **Deliverables:** Lottie JSON, MP4 **Prompt:** “Three circular nodes labeled A, B, C in a horizontal chain. Small glowing Codes (teal rectangles) travel between them along dashed paths. Each node pulses when it receives. The chain glows end-to-end as context flows through. Clean, flat, teal + white.” --- ### 6. Tool Strip — Ecosystem entrance (Integration section) — P1 **Concept:** Supported tools appear sequentially as the section enters viewport. **Motion:** Tool name chips/badges fade in left-to-right with a 0.1s stagger. Subtle scale-in (0.95 → 1.0). **Deliverables:** CSS animation (already buildable in code) **Prompt:** “A row of rounded pill badges (Claude Desktop, Cursor, Claude Code, Windsurf, Any MCP client) appear one by one from left to right with a gentle fade and slight scale. Minimal, clean, teal border or background tint.” --- ## Deck / investor slide animations ### M01 Cover — Code reveal The cover Code (`QNHC2C` or similar) appears after the headline, as if being generated. Letter-by-letter, 0.8s total. ### M02 Problem — Wall slam The vertical wall slides in from center, splitting the slide into two halves. Context on left, blank on right. 1.5s. ### M04 Why Now — Window opens A vertical “window” of opportunity opens — two lines spread apart to reveal a highlighted column. Timed with narrative. ### M07 Category — Layer settles Relay’s layer slides into position between Memory and Orchestration. Other columns dim as Relay column brightens. --- ## Social content concepts ### Twitter/X — Code lifecycle loop 10-second vertical (9:16): The Code lifecycle animation centered on black. No text except the Code. Hook: “This is what a relay looks like.” ### LinkedIn — Before/After 30-second: Split screen. Left: person re-explaining context to an agent (typing, typing). Right: person sends a Code, agent loads instantly. Caption: “Stop re-briefing. Relay it.” ### LinkedIn — Platform demo 60-second: Screen recording (or motion graphic) of the full loop — create a relay in Claude, share the Code, load in Cursor. Real product, real workflow. --- ## Production notes - All animations: flat, no gradients, no drop shadows - Colors: teal `#0d9488` primary, white bg, `#111111` text, `#0d9488` Code - Deck animations: same v3.5 system — the separate warm/terracotta deck palette is retired (one visual system; see `brand/README.md`) - Fonts in animations: JetBrains Mono for Codes, Outfit for labels - Export formats: Lottie JSON (web) + MP4 H.264 (social/deck) + SVG where possible - FigJam board: figma.com/board/deJ1lPuGhlyanOnOy3GY7I --- *relay-creative/briefs/BRIEF.animations.md · June 2026 · re-versioned to v3.5, 2026-07-10* --- ## Use-cases full spread (added Jun 2026) **Where:** `marketing/web/v35-neutral/use-cases/` (and its `marketing/web/v35-bold/use-cases/` counterpart — the old `marketing/web/site/use-cases/` path is now the direction chooser era). The in-code flow strip (Create → Relay → Receive, looping teal packet) and card scroll-reveals are live now; this spec is for the *produced* full-spread that drops into the `.ph` "Full-spread motion" slot on that page. **Concept:** one continuous spread that ties the six use cases together — context entering on the left, routed through the Relay mark, landing as a loaded card on the right, cycling across the scenarios (solo resume, team handoff, agent pipeline, living brief, series, cross-org). **Beats (~8s loop):** 1. A context block forms on the left (cards stack). 2. It collapses into a single Code and travels the line. 3. Passes through the Relay mark — rays pulse, amber "awaiting" snaps to green "received". 4. Expands into a loaded context card on the right; the recipient resumes. 5. Soft reset; the next scenario's icon swaps in. **Style:** v3.5 neutral palette, teal `#0d9488` accent, JetBrains Mono for the Code, flat linework (matches M06 Send→Route→Receive). Ease-out, no bounce. **Deliverables:** Lottie (preferred) + MP4 fallback; 16:9 and a square social cut. `prefers-reduced-motion`: ship a static poster keyframe. **Drop-in:** replace the `.ph.ph-media` "Full-spread motion" slot in `use-cases/index.html`.