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.
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.
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.QUOTES.+ pulse when the code lands? Show the deny path occasionally, or always accept? Stream both cards stacked in the big cell vs cycle one?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).
+ → type → commit → chip (real tag-input + .badge-user), in the group’s real codebook colour.The most basic move in Bristlenose. Sequence: the pointer moves in and clicks to select (the real .bn-selected blue tint + bar) → a raised keycap (t) rises and presses → a code types itself in character-by-character (same typeInto grammar as the Codebooks cell) and commits to a real .badge-user chip. Keycap = skin B “Raised” from design-keycaps.md (faked — the primitive is unbuilt).
handleQuoteTextClick), so the pointer lands on the card’s left rule, where a plain click focuses + single-selects together (Finder-style, handleCardClick). Colours are the shipped tokens: --bn-selection-bg #eef4fc + a full accent-blue --bn-selection-border (#007aff) + the --bn-focus-shadow lift.Two keys, one idea: curate. The pointer focuses a quote → s stars it (the star + left rule pick up the starred tint, body weight bumps) → then focuses another → h hides it (the real .bn-hiding collapse) and the hidden count ticks up by one. Star, hide, and hidden-count CSS copied verbatim from atoms/toggle.css, quote-actions.css, hidden-quotes.css.
--bn-colour-starred is #999 / #ccc — a tint differential (star + left rule + weight), not a gold fill. The roadmap once said “fills gold”; the code disagrees. Open: keep the subtle real state, or make the illustration louder than the product?.bn-hiding animates max-height/opacity/margins to 0 (300ms), then .bn-hidden (display:none); the sibling slides up. The N hidden chip bumps +1 — the quote isn’t gone, it’s parked.handleCardClick); clicking the words would open trim/edit instead. s/h then act on that quote; the hide button only appears on focus (real behaviour).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.