@once-ui-system/core 1.7.9 → 1.7.10

package/ai/eval-tasks.md

@@ -0,0 +1,71 @@
+# Once UI — AI generation eval suite
+
+Fixed prompt set for measuring harness effectiveness. Run each task with and
+without the harness (rules.md + spec.json), ideally across two models, and
+score with the checklist below. Add a regression task whenever a new pitfall
+is found in the wild.
+
+## Tasks
+
+1. **Analytics dashboard** — KPI stat cards (trend indicators), a line chart, a bar chart, recent-activity list. Tests: data components, `CountFx`, grid responsiveness.
+2. **Settings page** — sidebar sections, profile form (avatar upload, inputs, selects), danger zone. Tests: form controls, `MediaUpload`, surface recipes.
+3. **Pricing page** — three tiers, highlighted middle tier, feature comparison table, FAQ accordion. Tests: `Card`, `Badge`, `Table`, `Accordion`, proportional emphasis.
+4. **Chat UI** — message list with avatars, streaming indicator, input bar with emoji picker, command palette hint. Tests: `EmojiPickerDropdown`, `Kbd`, `Spinner`, scroll containers.
+5. **Marketing hero** — headline with text effect, CTA pair, social proof logos, background effect. Tests: effects usage (`LetterFx`/`TypeFx`/`RevealFx`, `Background`/`MatrixFx`/`BlobFx`), restraint.
+6. **Auth flow** — login with password + OTP step in a stacked dialog. Tests: `Dialog` `stack`, `OTPInput`, `PasswordInput`, validation states.
+7. **E-commerce product card grid** — image, price, tag, hover actions, skeleton loading state. Tests: `Card`, `Media`, `Skeleton`, `Tag`, hover patterns.
+8. **Onboarding checklist** — progress bar, step list with status indicators, celebratory completion. Tests: `ProgressBar`, `StatusIndicator`, `CelebrationFx`.
+9. **Data table page** — sortable table, filters row (segmented control, date range, search), pagination. Tests: `Table`, `SegmentedControl`, `DateRangePicker`, toolbar composition.
+10. **User profile popover** — avatar trigger, `UserMenu`/`HoverCard` with stats and actions. Tests: overlay components, `AvatarGroup`.
+11. **Changelog/timeline page** — versioned entries on a `Timeline`, tags per release, copyable code snippets. Tests: `Timeline`, `CodeBlock`, `InlineCode`.
+12. **Feedback widget** — floating trigger, dialog with rating chips, textarea, toast on submit. Tests: `Chip` selection, `useToast`/`Feedback`, positioning.
+
+## Scoring checklist (per task)
+
+Mechanical (count occurrences):
+
+- [ ] Compiles / no invented props or components
+- [ ] Redundant-default props (`position="relative"`, `variant="primary"` on Button, ...) — target: 0
+- [ ] Shorthand violations (`fillWidth fillHeight` instead of `fill`, `horizontal+vertical center` instead of `center`, `Flex direction=` instead of `Row`/`Column`) — target: 0
+- [ ] `style={{}}` uses where a token prop exists — target: 0
+- [ ] Raw HTML elements where a component exists (`img`, `a`, `button`) — target: 0
+- [ ] Hex/rgb colors — target: 0
+- [ ] Distinct Once UI components used — higher is better (task-appropriate)
+
+Judgment (1–5):
+
+- [ ] Proportionality: spacing rhythm, type scale, surface hierarchy look like real Once UI
+- [ ] Component appropriateness: purpose-built components chosen over generic primitives
+- [ ] Responsiveness: breakpoint props used where layout should adapt
+- [ ] Restraint: effects enhance rather than dominate
+
+## Pitfall log
+
+Record every recurring failure here; each entry should become a rule in
+`rules.md` or a gold example, plus stay in this list as a regression check.
+
+| Date | Pitfall observed | Fix applied |
+|------|------------------|-------------|
+| 2026-06-12 | `position="relative"` written despite being default | rules.md #3 |
+| 2026-06-12 | `fillWidth fillHeight` instead of `fill` | rules.md #2 |
+| 2026-06-12 | `horizontal="center" vertical="center"` instead of `center` | rules.md #2 |
+| 2026-06-12 | Only ~10 common components used, defaults only | rules.md #12–13 |
+| 2026-06-12 | Section gaps too small (48), page feels cramped | rules.md #17 |
+| 2026-06-12 | Section headings too small (`heading-strong-m`), hero undersized | rules.md #18 |
+| 2026-06-12 | Testimonial quote (BlockQuote default) larger than section title | rules.md #19 |
+| 2026-06-12 | Identical centered heading+subtitle on every section (dated); Tag+sparkle eyebrow | rules.md #20 |
+| 2026-06-12 | Absolute Background missing `top="0" left="0"` → offset by parent padding | rules.md #21, recipes.md |
+| 2026-06-12 | Gradient `width: 500` (125% of container); units misunderstood | rules.md #22 |
+| 2026-06-12 | `brand-background-weak` glow at `opacity: 30` — invisible vs page | rules.md #23, recipes.md |
+| 2026-06-12 | `RevealFx delay={index * 80}` (seconds!) and `translateY={16}` (16rem!) | rules.md #24, recipes.md #7 |
+| 2026-06-12 | `LogoCloud` without `columns` → single-column stack | rules.md #25 |
+| 2026-06-12 | No decorative components used beyond one gradient; flat result | recipes.md + rules.md #26 |
+| 2026-06-12 | RevealFx on every section (dated, eye-grabbing); mount-timed animations finish off-screen | rules.md #27–29, recipes.md #7 |
+| 2026-06-12 | Hero gradient clipped: ambient layer inside narrow `maxWidth` container with `overflow="hidden"` | rules.md #21b, recipes.md #1 |
+| 2026-06-12 | Reveal on hero text fragments + lone highlighted card (incoherent grouping) | rules.md #28b |
+| 2026-06-12 | `Card` used for static panels (tiers, testimonials, stats) | rules.md #12 |
+| 2026-06-12 | Arbitrary `maxWidth` numbers; no container-width convention | rules.md #15 |
+| 2026-06-12 | Design intent (style/layout/color/decoration/imagery) guessed instead of asked | rules.md "Before you build" |
+| 2026-06-12 | Invented icon names (`more`, `bell`, `arrowRight`) | rules.md #14b, IconName list in spec.json |
+| 2026-06-12 | `Badge title` + children rendered same text twice ("2 unread2") | rules.md #14c |
+| 2026-06-12 | `Fade` wrapped the whole message list → washed-out content | rules.md #14d |

package/ai/recipes.md

@@ -0,0 +1,149 @@
+# Once UI — decoration recipes
+
+Curated decorative patterns that keep pages premium without going over the top.
+Use them verbatim, then adjust values. All units follow rules.md #21–24.
+
+## Budget (hard limits)
+
+- **One ambient background layer per section**, and only in sections that anchor the page (hero, highlighted card, final CTA). Plain sections stay plain — contrast is what makes the decorated ones read as premium.
+- **Continuous motion** (MatrixFx flicker, BlobFx drift) in at most **two places per page**, never adjacent.
+- **One accent family per page.** Decorations use `brand-*` (or `neutral-*`); never mix brand + accent + schemes in decoration.
+- Every decorative layer: `position="absolute" top="0" left="0" fill pointerEvents="none"`, content sibling `zIndex={1}`, parent `overflow="hidden"`.
+
+## 1. Hero glow + dots
+
+Soft brand glow from the top edge with a subtle dot texture. The workhorse ambient layer.
+
+Placement matters: the wrapper is **full-bleed** (`fillWidth`, outside any `maxWidth` column) and has **no** `overflow="hidden"` — the gradient fades out via `colorEnd: "static-transparent"`. Clipping it inside a narrow container produces a hard-edged band.
+
+```tsx
+<Column fillWidth horizontal="center" paddingY="80">
+  <Background
+    position="absolute" top="0" left="0" fill pointerEvents="none"
+    gradient={{
+      display: true,
+      colorStart: "brand-alpha-medium",
+      colorEnd: "static-transparent",
+      x: 50, y: 0,
+      width: 150, height: 80,
+      opacity: 60,
+    }}
+    dots={{ display: true, color: "neutral-alpha-weak", size: "2", opacity: 40 }}
+  />
+  <Column zIndex={1} horizontal="center" gap="24" maxWidth={48}>
+    {/* hero content */}
+  </Column>
+</Column>
+```
+
+## 2. MatrixFx hero strip (with fade-out)
+
+Animated matrix field behind a hero, faded into the page with a `page-background` gradient so it doesn't compete with content. Pair exactly like this:
+
+```tsx
+<Column fillWidth minHeight="s" center overflow="hidden">
+  <MatrixFx
+    position="absolute" top="0" left="0" fill
+    flicker size={1.5} spacing={8}
+    colors={["brand-solid-strong"]}
+    bulge={{ type: "wave", duration: 3, intensity: 20, repeat: true }}
+  />
+  <Background
+    position="absolute" top="0" left="0" fill pointerEvents="none"
+    gradient={{ display: true, colorStart: "page-background", x: 0, y: 50, width: 150, height: 300 }}
+  />
+  <Column zIndex={1} center gap="16" padding="48">
+    {/* hero content */}
+  </Column>
+</Column>
+```
+
+## 3. Highlighted card glow
+
+For the emphasized item in a set (e.g. "most popular" pricing tier). Border + top glow, nothing else:
+
+```tsx
+<Card fillWidth padding="24" radius="l" background="surface" border="brand-alpha-medium" overflow="hidden">
+  <Background
+    position="absolute" top="0" left="0" fill pointerEvents="none"
+    gradient={{
+      display: true,
+      colorStart: "brand-alpha-medium",
+      colorEnd: "static-transparent",
+      x: 50, y: 0,
+      width: 200, height: 60,
+      opacity: 50,
+    }}
+  />
+  <Column zIndex={1} gap="20" fillWidth>
+    {/* card content */}
+  </Column>
+</Card>
+```
+
+## 4. BlobFx ambient panel
+
+Self-contained drifting brand/accent blobs (already blurred and pointer-transparent). Use behind a final CTA or feature visual — counts as continuous motion:
+
+```tsx
+<Card fillWidth radius="l" border="neutral-alpha-weak" overflow="hidden" padding="48">
+  <BlobFx position="absolute" top="0" left="0" fill opacity={60} seed={2} />
+  <Column zIndex={1} center gap="24">
+    {/* CTA content */}
+  </Column>
+</Card>
+```
+
+## 5. Technical texture (lines / grid)
+
+Diagonal lines or grid texture for footers of cards, table headers, "engineering" flavored strips. No motion:
+
+```tsx
+<Background
+  position="absolute" top="0" left="0" fill pointerEvents="none"
+  lines={{ display: true, color: "neutral-alpha-weak", angle: -45, size: "4" }}
+/>
+```
+
+## 6. Section divider
+
+Between major sections when the gap alone isn't enough — a short line, optionally with an eyebrow:
+
+```tsx
+<Column fillWidth horizontal="center" gap="16">
+  <Line width="40" />
+</Column>
+```
+
+## 7. Reveal stagger (entry, not ambient)
+
+Entrance animation for **one** key set per page (rules.md #27–28), viewport-triggered and latched so it plays once, when actually seen (rules.md #29):
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+const inViewport = useInViewport(ref);
+const [seen, setSeen] = useState(false);
+useEffect(() => {
+  if (inViewport) setSeen(true);
+}, [inViewport]);
+
+<Grid ref={ref} columns="3" gap="16" s={{ columns: 1 }}>
+  {items.map((item, index) => (
+    <RevealFx key={item.id} trigger={seen} translateY="8" delay={index * 0.1}>
+      <Card ... />
+    </RevealFx>
+  ))}
+</Grid>
+```
+
+For stats, drive `CountFx` value from the same latch: `<CountFx value={seen ? 2400 : 0} separator="," />`.
+
+## Anti-patterns
+
+- Glow with `colorStart: "brand-background-weak"` — invisible against the page; use alpha tokens.
+- `width: 500` gradients — that's 125% of the container blown past its edges; stay ≤ 200 for glows.
+- Background layers without `top="0" left="0"` inside padded parents — misaligned.
+- Decorating every section — if everything glows, nothing does.
+- Two different Fx components fighting in one viewport (MatrixFx + BlobFx side by side).
+- `overflow="hidden"` on a full-bleed section (no radius) — clips the glow into a hard-edged band.
+- Animating one item out of a sibling set (only the highlighted card) — stagger all or animate none.

package/ai/rules.md

@@ -0,0 +1,217 @@
+# Once UI — code generation rules
+
+Rules for writing Once UI code. Follow every rule; each shows the correct form first.
+
+## Before you build
+
+When the request doesn't specify design intent, ask these five questions first (one short message, all at once), then build:
+
+1. **Content style** — bold / restrained / conservative?
+2. **Layout** — wide or narrow, centered or left-aligned?
+3. **Color** — single accent, bold colors, visually distinct sections?
+4. **Decoration** — gradients, MatrixFx, animated blobs, none?
+5. **Imagery** — placeholder images, or avatars/logos/icons only?
+
+If you can't ask (or the user says "you decide"), default to: restrained, centered with `maxWidth="m"` content, single brand accent, one subtle gradient (recipes.md #1), no placeholder images (use `Avatar`, `Logo`, `Icon`).
+
+## Layout primitives
+
+1. Use `Row` and `Column` for layout. `Flex` with `direction` is only for dynamic direction.
+
+```tsx
+// Good
+<Column gap="16">...</Column>
+// Bad
+<Flex direction="column" gap="16">...</Flex>
+```
+
+2. Use shorthands — they replace multi-prop combinations:
+
+| Write | Instead of |
+|-------|------------|
+| `fill` | `fillWidth fillHeight` |
+| `fit` | `fitWidth fitHeight` |
+| `center` | `horizontal="center" vertical="center"` |
+
+```tsx
+// Good
+<Row fill center>...</Row>
+// Bad
+<Row fillWidth fillHeight horizontal="center" vertical="center">...</Row>
+```
+
+3. Never write a prop that equals its default. The spec marks defaults with `= value`. Common offenders:
+   - `position="relative"` (default on all layout components)
+   - `direction="row"` on `Row`, `direction="column"` on `Column`
+   - `variant="primary"`, `size="m"` on `Button`
+
+## Spacing and sizing
+
+4. Use spacing tokens, never raw CSS: `gap`, `padding`, `margin`, `paddingX/Y`, `marginX/Y` accept tokens (`"2" "4" "8" "12" "16" "20" "24" "32" "40" "48" "64"` or `"xs" "s" "m" "l" "xl"`).
+
+```tsx
+// Good
+<Column gap="8" padding="24">
+// Bad
+<div style={{ gap: 8, padding: 24 }}>
+```
+
+5. `width`/`height`/`maxWidth`/`minHeight` accept numbers (rem), tokens, or CSS units. Prefer numbers/tokens.
+
+6. Only use `style={{}}` for things no token prop covers (e.g. `isolation`, custom filters). If a prop exists, the prop wins.
+
+## Color and surfaces
+
+7. Colors are semantic tokens, never hex/rgb: `{scheme}-{weight}` or `{scheme}-alpha-{weight}` where scheme = `neutral | brand | accent | info | danger | warning | success` and weight = `weak | medium | strong`.
+   - `background` also accepts `surface | overlay | page | transparent`
+   - `onBackground` colors text/icons on a background
+
+8. Standard surface recipe: `background="surface"` (or `"overlay"` over imagery) + `border="neutral-alpha-weak"` (or `-medium`) + `radius="l"`.
+
+```tsx
+<Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
+```
+
+## Text
+
+9. Use `Text` and `Heading` with `variant="{type}-{weight}-{size}"`: type = `body | heading | display | label | code`, weight = `default | strong`, size = `xs | s | m | l | xl`. Examples: `body-default-m`, `heading-strong-s`, `label-default-s`, `display-strong-m`.
+
+10. If a layout component only wraps text, put `textVariant` (and `onBackground`) directly on it instead of nesting a `Text`:
+
+```tsx
+// Good
+<Row textVariant="label-default-s" onBackground="neutral-weak">Updated today</Row>
+// Bad
+<Row><Text variant="label-default-s" onBackground="neutral-weak">Updated today</Text></Row>
+```
+
+## Responsive
+
+11. Use breakpoint props (`xl l m s xs`) with override objects — never media queries or conditional rendering for layout:
+
+```tsx
+<Row gap="24" s={{ direction: "column" }}>
+<Grid columns="3" s={{ columns: 1 }}>
+```
+
+## Components over primitives
+
+12. Reach for the purpose-built component before composing primitives:
+    - `Card` is for **interactive** surfaces only (`href` or `onClick`). Static panels (pricing tiers, testimonials, stat boxes) = `Column`/`Row` with the surface recipe (#8), not `Card`
+    - Image/video → `Media`, not `img`
+    - Links → `SmartLink` / `Button href`, not `a`
+    - Status dot → `StatusIndicator`; progress → `ProgressBar`; loading → `Spinner` / `Skeleton`
+    - Labels/metadata → `Tag`, `Chip`, `Badge`, `Kbd`, `InlineCode`
+
+13. Use the distinctive features when the design calls for them — they exist and are cheap:
+    - `Dialog` supports `stack` (stacked dialogs) and `base` props
+    - Effects: `RevealFx`, `LetterFx`, `TypeFx`, `CountFx`, `GlitchFx`, `HoloFx`, `TiltFx`, `FlipFx`, `MatrixFx`, `BlobFx`, `Particle`, `ShineFx`, `CelebrationFx`
+    - `CursorCard`, `HoverCard`, `ContextMenu`, `EmojiPicker`, `CompareImage`, `OgCard`, `Timeline`, `MasonryGrid`, `InfiniteScroll`, `SegmentedControl`, `Kbar` (command palette)
+    - Forms: `Input`, `PasswordInput`, `OTPInput`, `NumberInput`, `TagInput`, `Select`, `DatePicker`, `DateRangePicker`, `ColorInput`, `Slider`, `Switch`, `Checkbox`, `Chip`
+
+14. Buttons: `variant` = `primary | secondary | tertiary | danger`; pair with `prefixIcon`/`suffixIcon` (icon names, not elements). `IconButton` for icon-only actions with `tooltip`.
+
+14b. Icon names must come from the `IconName` list in spec.json — never invent names (`more`, `bell`, and `arrowRight` don't exist; `close`, `chevronRight`, and `smiley` do). If no icon fits, omit the icon.
+
+14c. Components with a text prop render it — never pass the same text as both prop and children, it renders twice:
+
+```tsx
+// Good
+<Badge>{unread}</Badge>  or  <Tag size="s">Save 20%</Tag>
+// Bad: renders "2 unread2" / "Save 20%Save 20%"
+<Badge title={`${unread} unread`}>{unread}</Badge>
+<Tag label="Save 20%">Save 20%</Tag>
+```
+
+14d. `Fade` is an **edge overlay strip** (scroll-fade at the boundary of a scroll container), not a content wrapper. Wrapping a message list or section in `Fade` washes the whole content out:
+
+```tsx
+// Good: thin absolute strip over the scroll edge
+<Column flex={1} overflowY="auto">...</Column>
+<Fade position="absolute" top="0" left="0" fillWidth height="40" to="bottom" base="surface" pointerEvents="none" />
+// Bad
+<Fade to="top" fill><Column overflowY="auto">...</Column></Fade>
+```
+
+## Composition rhythm
+
+15. Page skeleton: `Column as="main" fillWidth horizontal="center"` → content `Column maxWidth={...}` → sections. Gaps between siblings, padding inside surfaces; avoid margins for layout when a parent `gap` can do it.
+
+    `maxWidth` conventions: primary page containers `"xl"`–`"m"` (marketing/landing toward `"xl"`/`"l"`, app and docs content `"m"`). `"s"` is only for narrow reading content (about, legal); `"xs"` for special surfaces (drawers, popovers).
+
+16. Data attributes for one-off theme overrides: `data-border="rounded"`, `data-brand="emerald"`, `data-solid="contrast"` — not custom CSS.
+
+## Scale and hierarchy (marketing/landing pages)
+
+17. Vertical rhythm is generous. Gap between page sections: `"80"`–`"160"` (typical `"104"`). Gap inside a section: `"24"`–`"40"`. Spacing tokens go up to `"160"` — use the top of the scale between sections, not `"48"`.
+
+18. Heading scale: hero = `display-strong-l` (or `xl`), section headings = `display-strong-xs` or `display-strong-s` — never `heading-*` variants for section titles. Hero supporting text = `body-default-l`; section supporting text = `body-default-m`.
+
+19. Type hierarchy must be monotonic: quotes, testimonials, and body content never render larger than the section heading above them. Testimonial quotes = `body-default-m` max, not `BlockQuote` default size.
+
+20. Don't repeat the same centered heading + subtitle block for every section — it reads dated. Vary: left-aligned headers, heading-only sections, or an eyebrow label above the heading. Eyebrow = plain text, not a `Tag` with an icon:
+
+```tsx
+// Good eyebrow
+<Text variant="label-default-s" onBackground="brand-medium">Pricing</Text>
+// Bad eyebrow
+<Tag variant="neutral" prefixIcon="sparkle">Pricing</Tag>
+```
+
+## Decorative layers
+
+21. Every absolute decorative layer uses the full recipe — `top="0" left="0"` are required or the layer gets offset by parent padding:
+
+```tsx
+<Background position="absolute" top="0" left="0" fill pointerEvents="none" ... />
+```
+
+Siblings holding content get `zIndex={1}`. `overflow="hidden"` goes on the parent **only when it has a radius** (cards, panels) — clipping a full-bleed section turns the glow into a hard-edged band.
+
+21b. Ambient section layers (hero glows) live on the **full-width section wrapper**, outside the `maxWidth` content column, with generous room (`paddingY="80"`+). Inside a narrow container the gradient gets clipped at the container edge and reads as a misplaced card:
+
+```tsx
+// Good: full-bleed section, narrow content inside
+<Column fillWidth horizontal="center" paddingY="80">
+  <Background position="absolute" top="0" left="0" fill pointerEvents="none" gradient={{...}} />
+  <Column zIndex={1} maxWidth={48}>...</Column>
+</Column>
+```
+
+22. `Background` gradient units: `x`/`y` are percent positions of the container (50/50 = center). `width`/`height` are quarter-percent units: `400` = 100% of the container, `100` = 25%. A soft corner glow is `width: 100–200`; `width: 500` overshoots the container.
+
+23. Color visibility: `*-background-weak` is nearly the page color — it is invisible as an accent. For tints and glows use alpha tokens (`brand-alpha-medium`, `brand-alpha-strong`) or solid tokens (`brand-solid-strong`) and do not stack a low `opacity` on top of an already-weak color.
+
+## Effect units
+
+24. `RevealFx`: `delay` is in **seconds** — stagger with `delay={index * 0.1}`, never `index * 80`. `translateY` as a number is in **rem** — use `translateY={1}` or a token like `"16"` (1rem); `16` means 16rem.
+
+25. `LogoCloud` extends `Grid` — always set `columns` (and responsive overrides), or logos stack in one column: `columns="4" m={{ columns: 3 }} s={{ columns: 2 }}`.
+
+26. Use decoration recipes from `recipes.md` verbatim, then adjust. Budget: at most one ambient background layer per section, ambient motion in at most the hero and final CTA, one accent color family per page.
+
+## Motion
+
+27. Animations are **eye-leading, not eye-grabbing**: they direct attention to the one thing that should be read next, they don't announce themselves. Small distances (`translateY="8"`–`"16"`, i.e. 0.5–1rem), short staggers (`delay={index * 0.1}` max), and only on elements worth leading the eye to — the hero heading, stat numbers, the highlighted card in a set.
+
+28. Do **not** wrap every section in `RevealFx` — uniform entrance animation on everything reads dated and makes scrolling feel slow. Entry-animation budget per page: the hero, plus at most one or two key moments (stats, a card set). Everything else just renders.
+
+28b. Animate **coherent blocks, all-or-none**. Within a sibling set (cards, list items), either every sibling animates with a stagger or none do — never a single item out of the set (e.g. only the highlighted pricing card). For a hero, reveal it as 1–3 stacked chunks with increasing delay (`0 / 0.1 / 0.2`), not individual text fragments. One entrance moment per viewport: if the hero animates, the cards below it don't.
+
+29. Trigger below-the-fold animations with `useInViewport`, latched so they play once. `RevealFx` takes `trigger`; `CountFx` has no trigger prop — drive its `value` instead:
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+const inViewport = useInViewport(ref);
+const [seen, setSeen] = useState(false);
+useEffect(() => {
+  if (inViewport) setSeen(true); // latch: useInViewport flips back to false on scroll-out
+}, [inViewport]);
+
+<Column ref={ref} gap="16">
+  <RevealFx trigger={seen} translateY="8">...</RevealFx>
+  <CountFx value={seen ? 2400 : 0} speed={1500} separator="," variant="display-strong-m" />
+</Column>
+```
+
+Without this, mount-timed animations play while still off-screen and the user scrolls into an already-finished state.