RB-6293 · SCENE C

Motion Storyboard

9 frames freeze key states across the 9.0s onboarding hero cycle. Each phase shifts the camera — Slack channel POV → network binding POV → webhook flow POV. Every entity is rendered as a square card (no pills). Implementation pending approval.

FRAMEWORK

Motion Storyboard fields

Each frame uses the same six fields, derived from motion-brief conventions used by Linear, Stripe, and Figma motion teams. The rule: every frame must carry a single articulable intent. Decorative pulses are forbidden.

t	Timestamp inside the 9.0s cycle
intent	The one-sentence meaning this frame delivers
enter	What appears, and from where
transform	Opacity / scale / position change relative to previous frame
motion	Easing curve + duration
receipt	Chip or persistent output once this frame's intent is delivered

PHASE 1 · 0.0 – 2.5s · SLACK CHANNEL POV

Runbear joins your Slack

"Your AI agent lives here."

F1·A

#runbear

Channel is empty.

FRAME 1·A — t=0.0s

intent	An empty Slack channel — the room where the agent will live.
enter	Slack channel window fades in (chrome only, no messages yet).
transform	Window: opacity 0 → 1, scale 0.97 → 1.
motion	`ease-out` · 0.45s.
receipt	—

F1·B

#runbear

Runbear joined the channel.

Runbear…

FRAME 1·B — t=0.8s

intent	The agent appears inside the channel as a Slack bot.
enter	"Runbear joined the channel" Slack notice. Bot avatar slides in from the left.
transform	Notice: opacity 0 → 1. Avatar: x −30 → 0, opacity 0 → 0.5 (still booting).
motion	`ease-out` · 0.4s.
receipt	—

F1·C

#runbear

Runbear joined the channel.

RunbearI'm your P0 on-call agent. Connect tools to give me context.

✓ Slack Connected

FRAME 1·C — t=2.0s

intent	The agent declares its role inside Slack.
enter	Bot message body appears below avatar. Receipt chip floats above the channel chrome.
transform	Avatar: opacity 0.5 → 1. Message text: typed-in feel (clip-path or width sweep 0 → 100%). Chip: y 6 → 0, opacity 0 → 1.
motion	`ease-out` 0.4s typing · `back-out(1.6)` 0.3s chip.
receipt	Slack Connected chip — persists 0.4s, then fades as Phase 2 takes over.

PHASE 2 · 2.5 – 5.5s · NETWORK BINDING POV

Tools bind to Runbear

"Runbear pulls context from every tool you use."

F2·A

FRAME 2·A — t=2.8s

intent	Camera zooms out from the Slack channel — Runbear is now central, surrounded by tool slots.
enter	Runbear card lands at center. 4 square tool cards (Gmail, Notion, Linear, GitHub) slide inward from the canvas edges.
transform	Core: scale 0.8 → 1. Tool cards: position ±40 → final, opacity 0 → 1, stagger.
motion	`ease-out` · 0.45s, stagger 0.1s (left-top → right-top → left-bottom → right-bottom).
receipt	—

F2·B

FRAME 2·B — t=4.0s

intent	Tools stream their context into Runbear — data flows inward.
enter	Small brand-colored particle dots launch from each tool card along curved paths into the Runbear core.
transform	Per-tool 2-3 dots, staggered 0.15s. Each dot: opacity 0 → 1 → 0 (fades just before arrival). Core: scale 1.0 → 1.08 → 1.0 on each landing.
motion	`ease-out` path 0.6s per dot. Tools fire in order Gmail → Notion → Linear → GitHub.
receipt	—

F2·C

✓ Tools Connected

FRAME 2·C — t=5.0s

intent	The agent is now wired to every tool — connections are stable.
enter	Where particles flowed, solid brand-colored lines remain. Receipt chip pops at bottom of canvas.
transform	Lines: drawn via `stroke-dashoffset 1 → 0`, brand color at 0.55 opacity. Chip: opacity 0 → 1, y 6 → 0.
motion	`ease-out` 0.4s lines · `back-out` 0.3s chip.
receipt	Tools Connected chip — persists 0.5s, then phase transition.

PHASE 3 · 5.5 – 9.0s · WEBHOOK FLOW POV

External webhook → action

"Events flow in. Actions flow out. Automatically."

F3·A

Linear P0

#on-call

FRAME 3·A — t=5.8s

intent	Camera shifts to a horizontal flow. An external event source fires.
enter	External source card (`Linear P0`, rose ring + badge) slides in from the canvas left. Output slot (`#on-call`) appears dim on the right. Rose pulse aura emits from source.
transform	Source: x −60 → 0, opacity 0 → 1. Aura: scale 0.7 → 1.3, opacity 0.4 → 0 (single shot, no loop).
motion	`ease-out` 0.4s slide · 0.55s aura.
receipt	—

F3·B

Linear P0

#on-call

FRAME 3·B — t=6.5s

intent	The webhook arrives at the agent and is being processed — visible decision point.
enter	Rose event dot travels along a straight horizontal path from source to core. Core flashes rose ring + glow.
transform	Dot: x grows along path, trail (faint copy 1 frame behind). Core: scale 1.0 → 1.08, border zinc-900 → rose-400, shadow → rose glow.
motion	`ease-out` 0.5s dot · 0.2s core flash peak.
receipt	—

F3·C

Linear P0

#on-call

Live

FRAME 3·C — t=7.4s

intent	The agent's response lands at its Slack destination — the trigger is live.
enter	Green action dot emerges from core, travels right, lands on `#on-call` Slack channel card (which transitions from dim → solid with green ring). Receipt chip floats at bottom.
transform	Dot: color flip rose → emerald during core transit. Target card: opacity 0.4 → 1, scale 0.9 → 1, ring → emerald. Chip: opacity 0 → 1, dot pulse loop.
motion	`ease-out` 0.5s outbound · `back-out` 0.3s pill + chip.
receipt	Live chip — persists through hold + into reset.

CONFIRM BEFORE IMPLEMENTATION

Open decisions

1. Phase transitions. Currently three distinct POVs (Slack window → radial network → horizontal flow). Should we animate the camera shift between phases (e.g. zoom-out from Slack chrome to network), or hard-cut between phases?
2. Particle density (Phase 2). 4 tools × 2-3 dots staggered. Tune up (more dynamic) or down (cleaner)?
3. Event/action color pair (Phase 3). Rose (event in) → emerald (action out). Alternative: amber → blue.
4. External source examples. Currently Linear P0. Should the cycle rotate examples (Linear → GitHub PR → Stripe webhook)?
5. Total cycle length. 9.0s vs. tighter 7.5s. Phase 1 needs ≥1.5s for the channel + bot reveal to read.