RelayCTX Creative briefsBRIEF.animations.md
RelayCTX Creative · Document

RelayCTX — Animation & Motion Brief

1,272 words · 6 min View raw Source History

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

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.