Welcome — animations for the “Scientific background” cell · iteration 2

A family of tiny looping illustrations, one per idea in the science pool (design-welcome-screen.md §Cell 2). Shown at cell-scale (left, in a real science cell) and enlarged with notes (right). CSS & typography are lifted verbatim from the shipped system — the signal card, badges, quote font, patterns and shoal words are the actual thing.

1 · Seven sentiments — compare open/close motions that fill the box without crashing into the text

Pool line: “Seven sentiments, grounded in appraisal theory (Scherer) and core affect (Russell).” The seven real .badge chips animate between a gathered deck and a spread. The wide-short slot wants the spread on the width, words kept upright (position-animated, not rotated) and clamped inside the padded box. Pick a variant — it applies to both stages below.

Scientific background
Seven sentiments
Grounded in appraisal theory (Scherer) and core affect (Russell).
Learn more →
at cell scale · 96px
  • Left hinge. All seven pivot from one point at the left, so they crowd at the hub and splay at the tips — the words separate exactly where you read them.
  • Order = valence — frustration → confusion → doubt → surprise → satisfaction → delight → confidence, top to bottom.
  • Chips unchanged — the real .badge atom + sentiment colour tokens.

2 · Signals — the real analysis signal card, ticking through examples

Pool line: “A signal marks where sentiment or tags concentrate more than you’d expect — a measure we coined.” The actual signal card from the Analysis lens — source · location · signal tag, the sparkline histogram, all four metrics (Signal · Concentration · Agreement · Intensity — spelled out here for a welcome-screen audience, vs the lens’s abbreviated Conc./Agree.) with their hover tooltips, and the pattern label. A split-flap tickover departs the card through several real signals, so you see the range each metric spans.

Scientific background
Signals
Where sentiment or tags concentrate more than you’d expect.
Learn more →
at cell scale · scaled 0.58
  • Every part is the shipped card — .signal-card-metrics grid, .signal-sparkbars, .conc-bar, intensity dots, .pattern-label. Typography and the sentiment/group tags match the lens exactly.
  • The tickover shows the range — the values flip like a departure board across real signals, and the sparkline highlight tracks which one you’re on.
  • Hover any metric label — the real tooltips ride along:
  • Signal — Composite signal strength
  • Conc. — Concentration ratio — how overrepresented vs study average
  • Agree. — Agreement — effective number of voices (Simpson’s diversity)
  • Intensity — Mean emotional intensity (0–3)
Open question surfaced: the full card is taller than the current example slot (it scales to 0.58 to fit the cell). A trimmed 2-metric variant may read better at cell size.

3 · Dignity without distortion — trim the filler, collapse to the tidy quote, restore

Pool line: “Quotes are tidied but never twisted; the participant’s voice is honoured.” A verbatim quote shows every stumble; strike-through blooms on the bits BN trims; the struck words collapse away so the quote reflows to its clean published form — then it all reverses. Set in the real quote-card font (.quote-body, 15px Inter).

Scientific background
Dignity without distortion
Tidied for readability — never changed in meaning.
Learn more →
at cell scale · 96px
  • Font matched to real quote cards — --bn-text-body 15px / 1.5, Inter, normal weight.
  • Trimmed: fillers (um), false starts (the—the), hedges (sort of, you know) — struck red, then removed.
  • Never twisted: surviving words untouched and in order; the sentence only gets shorter. Timing slowed by half.

4 · Framework authors — a fan of the books behind the codebooks, sliding front to back

Pool lines: Don Norman and Jakob Nielsen (the framework cards). A single fan of covers overlaps and slides — each in turn moves to the front, no rotation. Grounds “research frameworks” in named, real work. (Covers are typographic placeholders pending real cover art — copyright TBC.)

Scientific background
Research frameworks
Codebooks draw on established human-centred design work.
Learn more →
at cell scale · 96px
  • One fan, no rotation — covers overlap and slide over each other; the front one departs and the next takes its place.
  • Named work. Norman’s Design of Everyday Things, Nielsen’s Usability Engineering, Braun & Clarke’s Thematic Analysis.
  • Ties to the disclosure chain — click through to the framework explainer, then the citation.

5 · Emergent themes — a word-shoal swoops into two themes, then rejoins

Pool line: “Themes emerge from participants’ own words, not a fixed taxonomy — inductive thematic analysis (Braun & Clarke).” Reuses the shoal screensaver’s motion: demo quote-fragments swirl as one flock, swoop apart into two murmurations that settle under a theme title, then dissolve back — the loop of induction. Words are plain body text; only the theme titles carry weight.

Scientific background
Emergent themes
Patterns emerge from the words themselves — nothing imposed.
Learn more →
at cell scale · 96px
  • On-brand motion — same murmuration language as the delight-cell shoal.
  • Plain artefacts: the words are body-weight demo fragments; only the emergent theme titles keep heading weight, so the pattern reads as “these loose bits → this theme”.
  • The split is the idea: undifferentiated talk → two themes cohere → back to raw words. Induction, looping.

+ · Other science-background ideas — candidates you may have missed

Sketches, not builds. Each maps to a real pool line or an academic-sources.html candidate.

How it plugs in. Each animation replaces the static “example” block inside the Scientific-background cell — a small self-contained webview illustration, one per rotator item, cross-fading with the rest of the pool per SlotRotator. All are CSS or a few lines of JS and freeze to a legible still under prefers-reduced-motion. Sources: signal card + patterns from analysis.css + AnalysisPage.tsx; quote font from blockquote.css; badges from atoms/badge.css; shoal words from WordPool.swift; container from welcome-science-disclosure.html. Nothing here relitigates the type ladder or palette — it consumes them.