Welcome — animations for the “Study tools” cell · shipped: AutoCode · Codebooks · Tag · Star & hide

Replacing the 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. The four below are shipped in-app; three remain to design (Video clips · Send to Miro · Ingest) and no screenshots long-term — a baked PNG is not an option for any of them.

Palette Appearance

≡ · As shipped — the in-app wiring these mocks became

The cell previews below now carry the shipped copy and CTA labels verbatim (they used to show the mock's proposals, which lost). Two motion differences are deliberate: standalone loops here vs the WelcomeBaton's one-animation-at-a-time rhythm in-app — the baton owns the tempo, so a cell plays once per turn then holds rather than looping. Enum is WelcomeIllustration (renamed from ScienceIllustration, 2 Aug 2026); each case is rendered by illustrationView in WelcomeHomeView.swift.

Slot (title in-app)	Case	View	Height cap	Turn	In-app play
AutoCode	`.autocode`	`AutoCodeIllustrationView`	160	12 s	once per turn (random quote), then hold
Codebooks	`.manualTags`	`ManualTagsIllustrationView`	176	13 s	one group per turn, alternating across turns
Tag	`.tag`	`TagIllustrationView`	160	12 s	once per turn, then hold
Star & hide	`.starHide`	`StarHideIllustrationView`	190	14 s	once per turn (two beats), then hold
Connect an AI agent	`.agentChat`	`AgentChatIllustrationView`	160	13 s	once per turn, then hold — no mock section (built in-app; bespoke Claude Code chrome, no report CSS to sync)

One slot's primary CTA does NOT open the web (2 Aug 2026). Connect an AI agent reads Connect an agent… and opens Settings ▸ MCP Agents in-app — the same destination as the Bristlenose ▸ Connect an Agent… menu item — because the tool's first step is setup, and a page about the control is a detour from the control. The docs keep their route as a second link, Learn more →. The punctuation is the tell: “…” opens something here, “→” leaves for the browser. Declared as SlotItem.primaryDestination (a plain tag, not a closure — SettingsWindow is @MainActor), rendered by SlotRotator.slotView.
The height is a CAP, not a pin. illustrationNaturalHeight is passed as maxHeight and every illustration self-scales below it when the golden cell is short — geometry stays fixed, content bends. The min-height:172 on this page's .cellframe is a mock convenience and is not the shipped cap.
Reduce-motion is a finished still, everywhere. In-app the gate is reduce = reduceMotion || !active folded into the webview's .id(), so losing the baton reloads to the still (a brief fade — the known v1 tradeoff of duration-declared handoff).
All five shipped as webviews. Only the science SentimentFan and BookShelf cells are native SwiftUI — see the revised build-target rule in the brief.

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 a folder of recordings or transcripts here to add it as 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.
Mock vs shipped (deliberate): this page runs the 3-play burst then rest loop (WCAG 2.2.2 — no perpetual motion when a cell is the only thing moving). In-app the WelcomeBaton owns the tempo, so it plays once per turn then holds and the burst loop is unused. Keep the burst here — it's what makes the standalone page legible.
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 Codebooks slot) — 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

Codebooks

Build a codebook, or start from a ready-made framework.

Code by hand → Research frameworks →

Drop a folder

Drag a folder of recordings or transcripts here to add it as 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.
Mock vs shipped (deliberate): this section keeps the standalone two-group accumulate-then-slide sequence because it's the design surface. In-app the cell shows one group per turn and the baton alternates the two across turns — the same way AutoCode alternates its two quotes. The slot is titled Codebooks in-app and this illustration sits under its Code by hand → CTA.
Open: final tag wording is placeholder; and whether to also show a code being applied to a quote after creation.

3 · Tag — click a quote → press ⌜t⌟ → your code types itself in

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).

Study tools

Tag

Select one or more quotes, and press t to tag them with a code from your codebook.

Manual tagging →

Drop a folder

Drag a folder of recordings or transcripts here to add it as a project.

at cell scale

Pointer → click → keycap → action. The shared grammar for the three keyboard tools (Tag / Star / Hide). The pointer arcs in (real hands don’t move in straight lines), clicks the card chrome, the cap presses under the cursor over empty gutter space, and the consequence fires.
Reuses the “typed” tag. The code arrives one character at a time via the same flow as the Codebooks cell — it reads as “a human wrote this,” the counterpoint to AutoCode’s AI proposal.
Click the chrome, not the words. Clicking the quote text opens trim/edit (crop) mode in the real report (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.

4 · Star & hide — ⌜s⌟ stars what matters · ⌜h⌟ hides the noise, count ticks up

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.

Study tools

Star & hide

Press s to keep the quotes that matter, h to hide the rest.

Keyboard shortcuts →

Drop a folder

Drag a folder of recordings or transcripts here to add it as a project.

at cell scale

The on-state is a whisper, not gold — SETTLED. Shipped --bn-colour-starred is #999 / #ccc — a tint differential (star + left rule + weight), not a gold fill. The old roadmap line “fills gold” was wrong about the code. The open question (match the product, or make the illustration louder than it?) resolved in favour of matching: the in-app cell ships the real differential plus a star-pop, so the illustration never promises a state the product doesn't have.
Hide is a real collapse. .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.
Click lands on the gutter, not the text. A plain click on the card chrome focuses + selects (real 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).
Vertical fit — settled at 190, not 172. Two compact single-line cards + the hidden-count strip were designed against a 172px estimate of the φ-major cell; in-app this is the tallest of the five illustrations and ships with a 190 height cap (toolbar + two cards). The two-up won — the sequenced fallback (star card A, then card B slides in to be hidden) was not needed and is not built.

⌗ · Full-bleed slot — flush left, equal right, and “as deep as makes”

The cell is a SQUARE that scales with the viewport — that's the constraint everything here has to survive, so resize the window and watch these two panels. Arithmetic from WelcomeHomeView.swift: the spiral is framed width: w, height: w / 1.618, and GoldenSplit(.horizontal) hands the major cell width: (w − 8) × 0.618; its height is the spiral's full height, 0.618w. Both ≈ 0.618w → square, growing linearly with width. (These side-by-side panels are each ~half the page, so slightly smaller than the real cell, which is ~62% of the whole content width — the proportions are faithful, the absolute size is conservative.)

The proposed rule. The illustration shares the cell's content edge — 16pt left, 16pt right (the real welcomeCell(large:) padding, the edge STUDY TOOLS already sits on) — runs the full width, stays leading so that when it hits a max width the slack opens on the right, and grows downwards to fill the depth it's given. The CTA then lands on the bottom instead of floating mid-cell. The φ-geometry does not move — the cell is the same fixed square either way; only the content inside it bends, which is the Parthenon rule working rather than being broken. The fake tool below (Trace a theme) is a fixture, not a roadmap item — it exists to prove the mechanism, and it fills its box by measuring it.

Study tools

Trace a theme

Follow one theme across every session, in the participants’ own words.

See the theme →

‹ ›

Drop a folder

Drag a folder of recordings or transcripts here to add it as a project.

now — a fixed cap in a scaling square, so the slack (hatched) falls below the CTA and grows as you widen the window

Study tools

Trace a theme

Follow one theme across every session, in the participants’ own words.

See the theme →

‹ ›

Drop a folder

Drag a folder of recordings or transcripts here to add it as a project.

proposed — full width, as deep as makes, CTA on the bottom · red = the collision zone

“As deep as makes” is a measuring job, not a bigger number. The fixture renders quote cards one at a time and stops when the next one would overflow (scrollHeight > clientHeight), re-running on resize — so the same illustration shows 2 cards in a short cell and 4 in a tall one. Contrast today's illustrations, which are fit-and-centre: the four flow webviews are body{display:flex; align-items:center} and the two scaled ones clamp at Math.min(0.9, …), so handing either a taller box just adds air, never content. Relaxing the frame alone changes nothing on screen — each illustration has to be rebuilt to stretch. That's the content-design half.
The CTA bottoms out ABOVE the 26pt nav row — settled, and it's what dodges the red zone. A CTA pinned to the cell's true bottom edge would land in the leading chevron disk's hit band (red). That bug has already been fixed once: 25 Jul 2026 the full-height chevron strip was stealing clicks from the leading Learn → link, and the fix scoped the tap to the disk band alone, bottom-aligned, commented “hit area = disk band only (dots row level, clear of the link above)”. Stopping the CTA above the nav row keeps exactly that clearance, still reads as “on the bottom”, and needs no change to the chevrons. The red marker stays in this fixture as the reason the CTA stops where it does.
The bottom of the cell belongs to the Drop-a-folder card — it's a fixture, not a tenant to evict. It rules off the square and is the final implicit CTA. So the target for the illustration + CTA is the bottom of the slot's content area, above the 26pt nav row and above the drop card — which is what both panels show. Not an open question.
Because the cell is square, the illustration's box SWINGS in aspect ratio. Everything else in the cell is fixed semantic type plus two fixed rows (nav 26 + drop card), so the furniture is a near-constant ~210–230pt of depth no matter how big the square gets. The illustration takes the remainder — so at a ~400pt cell it's roughly 400×170, a 2.4:1 letterbox, and at an ~850pt cell it's roughly 850×620, near 1.4:1. That swing is the actual design brief. It's also why “grow by quantity” beats “scale one composition”: a stack of cards reads correctly as a wide strip and as a deep column, whereas a single fixed composition can only be right at one aspect. Drag the window across the range and watch the card count change.
Max width, expressed how? “Slack opens on the right” needs a max — but an absolute pt value will read differently at each window size, since the cell width comes from the golden split. Cheapest honest rule: let the illustration declare a max in ems of its own type (a measure, like body copy) so it stops widening when the line gets uncomfortable, not at an arbitrary pixel.
Two illustrations don't fit this model at all. Signals and Connect an AI agent are absolutely-positioned and centre-scaled — they'd have to become normal-flow, left-origin layouts first. The book shelf is the other exception: it renders its own caption and link, so it owns its bottom edge and shouldn't be stretched.

□ · The tool set — one by one; three still to design

Each replaces one screenshot. Concept seeds (react as we go); we lock a shared visual grammar on AutoCode and hold the rest to it. Build target is per tool — themed SwiftUI or webview, both fine; the agent cell proved webview works for bespoke chrome too. A screenshot is not a target.

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.