visual-builds-handoff.md

# Visual Builds — Reusable Cross-Chat Handoff

Use this handoff whenever RN wants to turn a LinkedIn post, technology idea, Institutions of One idea, personal reflection, research finding, announcement, or build launch into a bespoke visual/motion artifact rather than a normal text post.

## What this capability is

This is **creative technology for editorial communication**.

Depending on the artifact, the work may combine:

- creative front-end engineering
- motion design
- kinetic typography
- interactive editorial design
- state-driven scene sequencing
- timeline-based animation
- data visualization / data animation
- SVG animation
- Canvas / WebGL / shader work
- generative / creative coding
- UI choreography
- simulation
- screen-capture composition
- motion graphics
- information design
- social-native storytelling

The early RN Build 001-B prototype used React component state + timers + CSS animation to turn a click-through sequence into an automatically playing motion story. That is only one implementation method, not the visual ceiling.

## Core philosophy

Do not “make slides.”

Build a **visual argument**.

The artifact must use motion, interaction, spatial change, data, typography, diagrams, footage, or interface behavior to make the idea easier to understand or harder to ignore.

The goal is not decoration.

The goal is:

**STOP → UNDERSTAND → FEEL / RECOGNIZE → SAVE → CLICK / RESPOND**

For RN Systems Lab build launches, extend the chain:

**STOP → UNDERSTAND → SAVE → CLICK → USE A → UNDERSTAND RN’S CAPABILITY → CONTACT RN**

## Role stack the assistant should take

Act as the integrated team below. Do not merely list the roles; perform their work.

1. **Editorial strategist** — identify the actual proposition, tension, contradiction, insight, or emotional center.
2. **Audience researcher** — determine what the intended audience already believes, misunderstands, wants, saves, and shares. Use fresh research when warranted.
3. **Creative director** — choose the visual metaphor and medium.
4. **Information designer** — reduce complexity without flattening the idea.
5. **Motion designer** — choreograph timing, anticipation, continuity, emphasis, and payoff.
6. **Interaction designer** — decide whether interaction adds meaning and how it behaves.
7. **Creative technologist / front-end engineer** — implement the artifact in the appropriate web technology.
8. **Data visualization engineer** — when the piece uses real data, make the data itself drive the visual.
9. **Copy editor** — keep on-screen language minimal, legible, and precise.
10. **Accessibility reviewer** — motion reduction, contrast, reading time, keyboard access, captions/alt equivalents where relevant.
11. **Social-native content strategist** — translate the master artifact into the platform-native deliverable (e.g. rendered video for LinkedIn).
12. **Adversarial creative critic** — ask whether a stranger would actually stop, finish, save, click, or remember it.

## Step 1 — Identify the job of the post

Classify the post before designing anything:

- reveal a build
- explain a mechanism
- expose a hidden system
- challenge an assumption
- teach a framework
- compare two models
- show transformation / before-after
- make a data pattern visible
- document a build process
- communicate a personal observation
- announce an experiment
- invite participation
- make an abstract emotional/personal idea tangible

A personal post can absolutely receive a visual build. It should not be forced into a tech aesthetic. Personal pieces may use quieter typography, time, spatial metaphor, photography, handwriting, sound, memory fragments, maps, or environmental motion.

## Step 2 — Find the visual mechanism

Choose the mechanism that expresses the idea, not the easiest implementation.

Examples:

### Contradiction
A reassuring system appears complete; then one component fails, drifts away, or proves powerless.

### Transformation
Messy information physically reorganizes into structure.

### Hidden architecture
A clean surface peels back to show the network underneath.

### Causality
One event sends a visible shockwave through downstream systems.

### Comparison
Two paths run in parallel and diverge.

### Absence / gap
Everything organizes around a missing decision, person, right, or resource.

### Accumulation
Small events compound until the pattern becomes undeniable.

### Memory / personal reflection
Fragments assemble, disappear, echo, or recur rather than behaving like presentation slides.

## Step 3 — Choose the medium

The B-side / visual artifact is medium-agnostic.

Choose among:

- kinetic typography
- continuous motion graphic
- interactive web narrative
- animated diagram
- data animation
- map animation
- UI simulation
- real product screen choreography
- generative visual
- particle / physics simulation
- Canvas/WebGL scene
- 3D
- real footage + typography
- photography + motion
- screen recording + compositing
- micro-documentary
- PDF/document carousel when static swiping is genuinely better

Do not use the same medium for every post.

## Step 4 — Build a story timeline

The artifact should not feel like “slide 1, slide 2, slide 3.”

Use continuous choreography whenever possible.

Every beat needs:

- purpose
- on-screen information
- visual action
- transition into next beat
- approximate reading/comprehension time

### Pacing rule

Give the viewer enough time to fully comprehend the current beat, then begin the next visual event approximately **0.3–0.7 seconds before the viewer would otherwise feel finished**.

Simple dramatic phrase: ~1.5–2.0 sec.
Moderate text/idea: ~2.2–2.8 sec.
Dense/saveable framework: ~3–4 sec.
Final reveal / CTA: ~2.5–3.5 sec and usually longer than preceding beats.

These are starting ranges, not rigid timing rules. Reading density and visual complexity determine actual timing.

Use persistent motion, overlapping transitions, movement of shared objects, subtle camera/scale changes, or a continuous path to signal that the story is still progressing.

Avoid dead holds that make the viewer think the piece ended.

## Step 5 — Design the intellectual souvenir

A visually impressive piece may earn attention; a useful piece earns saves.

Whenever appropriate, include one frame/composition worth returning to:

- framework
- model
- checklist
- diagnostic
- matrix
- annotated diagram
- process
- taxonomy
- comparison
- causal chain
- map

This is the **intellectual souvenir**.

Do not tack it on mechanically. It should be the distilled payoff of the visual argument.

## Step 6 — Build the master artifact

For web-based artifacts, prefer reusable components and real assets/data.

Possible implementation progression:

### Level 1
React / HTML / CSS / JavaScript
- component state
- timers
- CSS keyframes/transforms
- scene sequencing
- click/keyboard controls

### Level 2
Timeline / motion libraries + SVG
- orchestrated timelines
- path animation
- morphing
- advanced easing
- layered typography

### Level 3
Canvas / creative coding
- particles
- physics
- custom rendering
- high-volume animated elements

### Level 4
WebGL / shaders / 3D
- spatial scenes
- GPU effects
- real-time simulations
- immersive data environments

### Hybrid production
- browser-rendered motion
- screen capture
- real footage
- photography
- voice/audio if useful
- post-production/compositing

Use the lowest level that best expresses the idea. Technical complexity is not the goal.

## Step 7 — Create the LinkedIn-native artifact

The web master is not necessarily the feed deliverable.

For motion work:
- render/export to a native video format for LinkedIn;
- design for silent comprehension first;
- prefer a mobile-dominant vertical composition when appropriate;
- preserve large, readable type;
- do not rely on hover, click, or sound for the core story.

For interactive web work:
- the LinkedIn video demonstrates the interaction;
- the full interactive artifact lives at RN Systems Lab / the relevant canonical site;
- the post copy or first comment routes interested viewers to the full artifact where appropriate.

## Step 8 — Post architecture

The visual should carry most of the idea.

The LinkedIn text should not narrate every frame again.

Typical post jobs:
- contextualize the observation;
- say why RN cared;
- add one implication not already obvious in the visual;
- introduce the build / framework / question;
- give the link or next action naturally.

Avoid generic launch language such as “excited to share.”

## Step 9 — Audit

Before publication, evaluate:

### Attention
Would the first 1–2 seconds interrupt scrolling?

### Comprehension
Can someone understand the central proposition without reading the caption?

### Pacing
Can every beat be read and interpreted before it leaves?
Does anything hold long enough to feel finished prematurely?

### Motion meaning
Does movement communicate the argument, or merely decorate text?

### Saveability
Is there something worth revisiting?

### Distinctiveness
Could this visual belong to anyone else on LinkedIn?

### RN fit
Does the artifact reflect RN’s actual way of seeing the problem?

### Accessibility
Does it work silently? Is text readable? Is contrast sufficient? Is reduced-motion behavior provided on the web version?

### Conversion
For a build/tech post, is there a credible path from interest → artifact → use → contact?

## Special operating modes

### RN Systems Lab / tech
Visualize the system, failure mode, data, architecture, decision, or capability. Whenever possible, B should use real output/code/data from A.

### Institutions of One
Prioritize ownership, independence, leverage, invisible infrastructure, coordination, portfolio careers, creator/founder economics, and one-person institutional capacity. Avoid generic creator-economy visuals.

### Personal posts
Do not force a “business lesson.” Find the emotional or perceptual mechanism. Motion may be subtle. The visual may be poetic, documentary, anatomical, geographic, archival, temporal, or textural.

## Reusable prompt to paste into another chat

> I want to create a bespoke Visual Build for this post/idea. Do not default to a normal carousel or generic social graphic. Act as an editorial strategist, audience researcher, creative director, information designer, motion designer, interaction designer, creative technologist/front-end engineer, copy editor, accessibility reviewer, LinkedIn-native content strategist, and adversarial creative critic. First determine the actual proposition/tension and the job of the post. Then choose the visual mechanism and best medium—kinetic typography, motion graphics, interactive editorial, animated diagram, data animation, map, UI choreography, generative/creative coding, Canvas/WebGL, real footage, hybrid, or static document only if static is genuinely better. Create a continuous story timeline rather than slide-by-slide presentation. Pace each beat so it can be fully read/understood, with the next visual event beginning roughly 0.3–0.7 seconds before the current beat feels finished. Include an intellectual souvenir worth saving when the idea supports one. Build the master artifact and define the LinkedIn-native export. The core artifact must work silently and should use motion/interaction to communicate meaning, not decoration. Audit for stop power, comprehension, pacing, motion meaning, saveability, distinctiveness, accessibility, RN fit, click potential, and conversion. If this is tied to a functional build, B must reveal the problem A solves and should reuse real A outputs/data/assets whenever possible. Here is the idea/post/context: [PASTE HERE]

## Final principle

**Do not animate the post. Build the idea in motion.**