Welcome — animations for the “Study tools” cell · tool 1 of 8 · AutoCode

Replacing the 8 static screenshots in the large “Study tools” cell with tiny looping illustrations — themeable, responsive, no baked-in macOS chrome. Same playbook as the science cell: prototype idea + motion + copy here, then decide native-SwiftUI vs webview and build for real. Doing the tools one by one — this is AutoCode.

1 · AutoCode — quote streams in → AI tags flash in → accept → solid, real card

Copy: “Let AutoCode propose tags across every quote — you Accept or Deny.” · link AI helps tag →. Sequence: the quote types out (LLM/fast-human) → the Satisfaction sentiment + a proposed code flash in → the [✗ ✓] action pill is offered → accept is clicked, the code goes solid (accept-flash). Tag + card CSS are the shipped classes; the final frame is a real blockquote.quote-card.

Study tools
AutoCode
Let AutoCode propose tags across every quote — you Accept or Deny.
AI helps tag →
Drop a folder
Drag recordings or transcripts here to add a project.
at cell scale · real quote-card type
  • The code arrives; the rest is context. Quote, timecode, p1 · Participant and the Satisfaction sentiment settle first — AutoCode’s contribution is the code, so it flashes in proposed (dashed, pulsing, real .badge-proposed), offers the real [✗ ✓] pill, and on accept solidifies with the real badge-accept-flash.
  • Real quotes, de-branded. 11:30 → visible options; 13:08 → platform convention.
  • Copy edit needed: quote 2 was 37 words → trimmed to ~19 here (≈50%) so it streams + fits. Your final wording goes in QUOTES.
  • Open Qs: should the + pulse when the code lands? Show the deny path occasionally, or always accept? Stream both cards stacked in the big cell vs cycle one?

2 · Manual tags — the researcher hand-builds groups AI could never originate

The human counterpart to AutoCode. Two groups build by hand — title + description + codes typed via the real + → type → commit flow — one at a time, then slide away. A/B homepage trial = a designed experiment; Switching costs = a commercial dive from the brief (the participant uses a rival). Auto-coding can’t originate either: it wasn’t in the room when the research purpose was set. Group colours are the real codebook OKLCH sets (ux 250 / opp 75).

Study tools
Tag & group by hand
Create your own tags and groups — the intent only you brought to the research.
Manual tagging & codebooks →
Drop a folder
Drag recordings or transcripts here to add a project.
at cell scale
  • Why two groups. One is a designed A/B experiment, one a commercial investigation from the brief — the two kinds of a-priori intent auto-coding structurally can’t have (it never attended the research-purpose meeting).
  • Real flow, by hand. Title + subtitle + each code typed via + → type → commit → chip (real tag-input + .badge-user), in the group’s real codebook colour.
  • Fit: groups really accumulate into a codebook — shown one at a time here (slides away) for space. Per-group descriptions included as requested.
  • Open: final tag wording is placeholder; and whether to also show a code being applied to a quote after creation.

□ · The eight tools — one by one; AutoCode first

Each replaces one screenshot. Concept seeds (react as we go); we lock a shared visual grammar on AutoCode and hold the rest to it.

How it plugs in. Each animation replaces the image: screenshot inside a studyTools slot (WelcomeHomeView.swift), rendered by the SlotRotator one item at a time. Freezes to a legible still under prefers-reduced-motion. Build target per tool is a later call: native SwiftUI for pure design-system chrome, webview for bespoke motion — the split the science cell landed on.