RB-6293 · SCENE C
Motion Storyboard v3
8 frames freeze key states across the 9.0s onboarding hero cycle. Four phases sequence left → right, each one a distinct camera position in the same world. Cards bounce in, lines snap elastically, particles burst — no static visuals. Implementation pending approval.
FRAMEWORK
Motion Storyboard fields
Each frame uses six fields. Every frame must carry a single articulable intent. Motion props lean toward springs and bounces, not linear tweens — the brief is "alive", not "smooth".
| 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 / camera change relative to previous frame |
| motion | Easing + duration. Prefer springs (back.out, elastic) for arrivals |
| receipt | Chip / persistent output / state confirmation |
PHASE 1 · 0.0 – 2.5s · CAMERA AT POSITION 1
Connect the tools you already use
Notion · Linear · Stripe · Gmail bounce into orbit.
F1·A — bounce-in
FRAME 1·A — t=0.4s
| intent | 4 tool cards leap into orbit around Runbear — like icons landing on a fresh desktop. |
|---|---|
| enter | Notion / Linear / Stripe / Gmail cards spring in from the four canvas corners. Notion is mid-bounce overshoot; Linear settled; Stripe + Gmail still scaling up. |
| transform | Per card: position (corner) → final, scale 0 → 1.2 → 1.0 (overshoot), opacity 0 → 1. Stagger 80ms. |
| motion | back.out(1.9) · 0.45s. Stagger: Notion → Linear → Stripe → Gmail. |
| receipt | — |
F1·B — snap connect
FRAME 1·B — t=1.8s
| intent | Each tool snaps into the agent — connection feels mechanical and decisive. |
|---|---|
| enter | 4 elastic lines whip from each tool toward core. At connection, a small dot pops at midline and core gets an emerald aura ("ready"). |
| transform | Lines: drawn rapidly (0.25s), overshoot connection point then settle. Dots: scale 0 → 1.3 → 1.0. Core: emerald outline pulses once. |
| motion | elastic.out(1, 0.6) 0.4s lines · back.out(2) 0.2s dots. |
| receipt | Tools Connected chip pops at bottom-center. Persists 0.6s. |
PHASE 2 · 2.5 – 4.5s · CAMERA SLIDES RIGHT
Pick a trigger from your tool
Stripe takes center. Other tools recede.
F2·A — camera shift
FRAME 2·A — t=2.8s
| intent | Camera pans right. Stripe is selected as the trigger source — everything else recedes. |
|---|---|
| enter | Whole stage translates left. Stripe card scales up 1.0 → 1.18, gains purple ring + radial halo. Notion / Linear / Gmail dim to 0.4 opacity at the canvas edge. |
| transform | Stage: x translate −80px (camera pan). Stripe: scale 1.0 → 1.18, border solid → purple, radial pulse 0 → 1. Others: opacity 1 → 0.4. |
| motion | power3.inOut 0.6s camera · back.out(1.7) 0.4s Stripe focus. |
| receipt | — |
F2·B — trigger set
on New Customer
Stripe
Stripe
FRAME 2·B — t=4.0s
| intent | The user picks the exact event to listen for. The wire between Stripe and Runbear is now armed. |
|---|---|
| enter | "on New Customer" trigger pill drops onto the Stripe card from above. Purple wire whips elastically from Stripe to Runbear core. A pulse dot travels along the wire to indicate the channel is live. |
| transform | Trigger pill: y −16 → 0, scale 0.6 → 1.1 → 1.0. Wire: drawn 0 → 100% with overshoot. Pulse dot: position along path, infinite slow loop (very subtle, low opacity). |
| motion | back.out(2.2) 0.35s tag · elastic.out(1, 0.7) 0.5s wire. |
| receipt | Trigger pill persists. Wire stays as visible "armed" state. |
PHASE 3 · 4.5 – 6.5s · CAMERA HOLDS, EVENT FIRES
A new customer signs up — webhook fires
Stripe shoots the event payload toward Runbear.
F3·A — event burst
Stripe
customer.created
FRAME 3·A — t=4.8s
| intent | An event fires in Stripe. The webhook payload is on its way. |
|---|---|
| enter | 3 concentric rings burst out of Stripe (single shot). A tracer particle with a fading tail launches toward Runbear. Tiny payload card ("customer.created") peeks out mid-flight. |
| transform | Stripe: scale 1.0 → 1.06 → 1.0 (pop). Aura rings: scale 0.4 → 1.4, opacity 0.5 → 0. Tracer + tail: x position decreasing. Payload card: opacity 0 → 1, y +6 → 0. |
| motion | back.out(1.6) Stripe pop · power2.out 0.4s aura · power3.out tracer. |
| receipt | Payload card visible — proves "this is what we received". |
F3·B — event lands
Stripe
customer.created
FRAME 3·B — t=5.6s
| intent | Runbear catches the webhook and begins processing it. |
|---|---|
| enter | Tracer reaches Runbear; core flashes rose ring + glow. Payload card expands to show enriched event detail (name + email). |
| transform | Core: outline emerald → rose, scale 1.0 → 1.06, shadow → rose glow. Payload card: width grow 168 → 220, internal text fade-in. Stripe: dims to 0.7 (focus shifts to Runbear). |
| motion | power2.out 0.25s core flash · power3.out 0.4s card expand. |
| receipt | Payload card persists as the working artifact for Phase 4. |
PHASE 4 · 6.5 – 9.0s · CAMERA SLIDES RIGHT AGAIN
Enrich, then post to Slack
Runbear pulls LinkedIn context and ships a rich card to #signups.
F4·A — enrich
LinkedIn
Jane Doe
FRAME 4·A — t=6.9s
| intent | Runbear queries LinkedIn for context about the new customer. Data trickles into an enriched profile card. |
|---|---|
| enter | Camera shifts right again. LinkedIn card appears at top with a blue query arc. Result card on right builds up line by line: Name → Role → Company → Highlights. |
| transform | Stage: x −60 (camera pan). LinkedIn card: scale 0.7 → 1, bounce. Query arc: drawn 0 → 100% with dotted travel. Result card lines: opacity 0 → 1 staggered 100ms. |
| motion | power3.inOut 0.5s camera · back.out(2) 0.35s LinkedIn · power2.out stagger reveal. |
| receipt | Result card holds — this becomes the Slack message body next frame. |
F4·B — ship to slack
LinkedIn
#signups
📥 New customer: Jane Doe
Live
FRAME 4·B — t=8.0s
| intent | The enriched message lands in Slack. The workflow is alive. |
|---|---|
| enter | Green outbound arc draws from Runbear to #signups Slack card. Slack card was dim, now activates with green ring. A rich preview card lands in the bottom-right, the actual Slack message body. |
| transform | Outbound arc: drawn 0 → 100%. Slack card: scale 0.85 → 1.0, ring zinc → emerald. Preview card: y +20 → 0, opacity 0 → 1, scale 0.92 → 1.0. Live chip: opacity 0 → 1 + repeating subtle dot pulse. |
| motion | power3.out 0.45s arc · back.out(1.9) 0.4s card landings. |
| receipt | Live chip — persists into hold + reset. |
CONFIRM BEFORE IMPLEMENTATION
Open decisions
- 1. Camera transitions. Phase 1→2 and Phase 3→4 are camera pans. Should the camera smoothly slide (300-500ms ease-inOut) or hard cut? Smooth slide preserves continuity but adds 0.6s to the cycle.
- 2. Stripe trigger label. Currently
on New Customer. Should the cycle rotate examples (e.g.,on payment.succeeded,on subscription.canceled)? - 3. Enrichment source. Currently LinkedIn only. Should we show 2-3 sources fanning in (LinkedIn + Crunchbase + GitHub) for richer "context gathering" feel?
- 4. Slack message body. Preview shows minimal fields (Name · Role · Highlight). Add custom action buttons (Reply / Slack-thread) for realism?
- 5. Cycle length. 9.0s total. Phase 1 bounce sequence + Phase 4 enrich both want ≥2s. Tight. Acceptable, or stretch to 10s?
- 6. Loop reset. Hard cut back to Phase 1, or "rewind tape" effect (camera flies left, then resumes)?