Subtle, blink-frequency animations. Each SVG is mostly static — occasional gentle movement.
A discussion thread card. White rounded card (rx=22) centered on the canvas. At top: a bold title bar (dark rect) and two lines of lighter description text. Below that, three stacked comment bubbles with generous rounded corners (rx=14). Comment 1 has a teal (#E9F4F0) background with teal border, containing a teal avatar circle on the left (circle for head, rect for body, both #293C4A) and placeholder text lines to the right. Comment 2 has a warm gold (#F7E8CD) background with gold border, same avatar+text layout but gold avatar. Comment 3 is faded (#FFFDF8, 0.5 opacity) with dark border, faded avatar — representing a less recent comment. A small reaction badge ("+3" text in a pill shape) sits at the bottom-right of comment 1. Animation: comment 2 occasionally slides in from the left with a gentle bounce. The reaction badge pops (scales to 1.2x and back) on a separate offset cycle.
A donut chart at center showing vote results. The donut ring is thick (stroke-width=26) on a circle of radius 68. Three colored segments: teal (#7F9EA0) for agree (60%, largest segment), gold (#DCA034) for abstain (smaller), and red (#E74C3C at 0.65 opacity) for disagree. The center of the donut is filled white (#FFFDF8, r=50) with "60%" in bold and "agree" in small text below. Three thumb icons radiate outward from the donut, connected by dashed lines: a teal Material Design thumbs-up icon to the right, a red thumbs-down icon to the left, and a gold sideways thumb (rotated 90°) at the bottom. The thumb icons use MDI SVG paths scaled to ~2.5x with negative scale for 180° flip. No pill/circle backgrounds behind the icons — they float freely. Decorative soft circles in corners. Animation: the thumbs-up and thumbs-down icons gently bob up 4px and back on offset 6-second cycles.
A horizontal three-phase timeline. A thin horizontal line runs across the middle. Three circles sit on the line at equal intervals, labeled "Discuss", "Vote", "Outcome" below. Phase 1 (Discuss): teal-filled circle (#E9F4F0) with teal border containing a chat icon (two overlapping rounded rects). Above it, a teal card with text placeholder lines, connected by a dashed line. Below, three small colored people circles (teal, gold, teal). Phase 2 (Vote): gold-filled circle (#F7E8CD) with gold border containing a ballot/checkbox icon (gold rounded rect with white checkmark). Above it, a gold card showing a miniature stacked vote bar (teal+gold+red segments). Phase 3 (Outcome): dark blue-filled circle (#293C4A) with a gold checkmark inside. Above it, a white card with dark text lines. Arrows (line + chevron) connect the three phases. Animation: a gold dot (#DCA034, r=6) travels along the timeline from left to right, fading in at Discuss, moving through Vote, and fading out at Outcome on an 8-second cycle.
Four overlapping horizontal rounded rectangles stacked from bottom to top, each progressively smaller and higher, representing layers of a decision process. Bottom layer (largest, labeled "context"): white fill at 0.4 opacity with dark border, containing faint text placeholder lines. Second layer ("discussion"): teal-tinted fill (#E9F4F0) with teal border, containing two comment rows — each with a colored avatar (teal or gold circle) and text lines, plus a reaction pill badge on the right. Third layer ("decision"): warm gold fill (#F7E8CD) with gold border, containing a title bar, a horizontal stacked vote bar (teal majority, gold middle, red-faded end segments as rounded rects), and a row of small colored voter circles below. Top layer (smallest, "outcome"): dark blue fill (#293C4A) with a gold checkmark icon, white title text, and faint white description lines. Each layer label is small text at the bottom-right in the layer's accent color. Animation: the three upper layers gently rise 2-3px and settle back in a staggered breathing sequence on 5-second cycles with slight delays between them.
Shows someone changing their vote after reading another person's reasoning — the key Loomio moment. Center-top: a gold avatar circle (person). Two vote cards sit side by side in the middle row, connected to the person by dashed diagonal lines. Left card: faded red/pink (#FDE8E8) background with red border at 0.4 opacity, containing a faded red thumbs-down MDI icon and text placeholders, with a diagonal red strikethrough line crossing it out. Right card: teal (#E9F4F0) background with teal border, containing a teal thumbs-up MDI icon and text lines. Between them: a small arrow (line + chevron) pointing from old vote to new vote. Below both cards: a reasoning bubble — a teal-bordered rounded rect containing another person's avatar (teal circle), a small gold lightbulb icon with radiating lines (representing the "aha moment"), and several lines of placeholder text. A dashed vertical line connects the reasoning to the vote area above. Animation: the arrow between votes pulses in opacity (0.25→0.7→0.25), the new teal vote card subtly brightens (filter:brightness), and the lightbulb flashes brighter momentarily — all on 6-second offset cycles.
A large donut chart on the left with three legend cards on the right. The donut has a thick ring (stroke-width=32, r=80) with three segments: teal for "looks good" (largest ~55%), gold for "needs work" (~30%), and red at 0.65 opacity for "wrong direction" (~15%). The donut center is white (#FFFDF8, r=58) containing a small thumbs-up icon made of simple strokes (upward lines for the hand and a rounded rect for the fist). Three legend cards are stacked vertically to the right, each connected to the donut by a dashed horizontal line. Each card is a white rounded rect with dark border containing: a colored circle with an icon (thumbs-up for teal, magnifying glass for gold, inverted thumb for red), a dark title text bar, and a colored subtitle bar. The icons are drawn with simple strokes rather than MDI paths. Animation: the teal "looks good" donut segment subtly grows its stroke-dasharray by ~13 units and shrinks back on a 7-second cycle, simulating a new vote arriving.
A realistic proposal UI card. Large white rounded card (rx=20) with dark border, centered on canvas with small decorative circles in opposite corners. Inside from top to bottom: a bold dark title bar, three lines of description text at decreasing opacity. A horizontal stacked vote bar (rx=8): teal "agree" segment (~65%), gold "abstain" segment (~17%), red "disagree" segment at 0.5 opacity (~8%), and a faint remainder. Three voter rows below the bar, each containing: a colored avatar circle on the left (matching their vote color), an MDI thumb icon next to the avatar (thumbs-up for agree in teal, thumbs-down for disagree in red — using the same MDI paths at 0.8 scale with negative scale flip), and two lines of reasoning text. At the bottom: a dark blue outcome bar (rx=11) with a gold checkmark and white text. Animation: the teal agree bar subtly grows wider (150→168px) and back on an 8-second cycle. The third voter row fades between 0.7 and 1.0 opacity on the same cycle, as if a new vote is arriving.