From 4a78f76d308907f72ff4b3c05cb3a0f87dc679af Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:20:55 -0300
Subject: [PATCH 1/4] feat(webkit): add the ticker marketing component

---
 .specs/ticker.md                              | 153 ++++++++
 .../marketing/ticker/Ticker.stories.js        | 349 ++++++++++++++++++
 packages/webkit/.size-limit.json              |   6 +
 packages/webkit/catalog.json                  |  78 ++++
 packages/webkit/package.json                  |   1 +
 .../marketing/ticker/ticker.test.ts           | 141 +++++++
 .../components/marketing/ticker/ticker.vue    | 115 ++++++
 packages/webkit/src/svg/brands/registry.ts    |   2 +-
 8 files changed, 844 insertions(+), 1 deletion(-)
 create mode 100644 .specs/ticker.md
 create mode 100644 apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
 create mode 100644 packages/webkit/src/components/marketing/ticker/ticker.test.ts
 create mode 100644 packages/webkit/src/components/marketing/ticker/ticker.vue

diff --git a/.specs/ticker.md b/.specs/ticker.md
new file mode 100644
index 000000000..00ce69d02
--- /dev/null
+++ b/.specs/ticker.md
@@ -0,0 +1,153 @@
+---
+name: ticker
+category: marketing
+structure: monolithic
+status: implemented
+spec_version: 1
+checksum: bc74ab5b07259372e2d53ea3ff45896601d49aecfbb41b675ba5430abd0303a0
+created: 2026-09-23
+last_updated: 2026-09-23
+---
+
+# Ticker — Component Spec
+
+## Purpose
+
+An endlessly looping row of brand marks — the trust strip that names the companies running on the platform, and the stack strip that names the frameworks and clouds a workload already uses. The marks come from the package's own registry and are drawn in one ink, so a strip reads as a list rather than as a dozen competing palettes.
+
+## When to use
+
+- Under a hero, to name the companies a product already serves ("Trusted by mission-critical workloads").
+- To state compatibility as a list of framework, cloud and tooling marks ("Your Stack, Your Way").
+- Whenever the set of marks is longer than the row that holds it and no single mark has to be read.
+
+## When NOT to use
+
+- When every mark must be seen → use `logo-wall`, which wraps into a grid and never moves.
+- When the reader chooses how far to go through browsable content → use `carousel`, which is user-driven and never advances on its own.
+- For a mark a reader must act on, such as a partner directory → the strip is decorative motion, so put linked marks in a `logo-wall`.
+- For one mark in its own right (a header lockup, a client story card) → use `brand`.
+
+## Related
+
+- `logo-wall` — the static, wrapping grid of consumer-supplied marks; reach for the strip only when the wall would be too long.
+- `carousel` — the user-driven snap scroller; this one moves on its own and holds no essential content.
+- `brand` — the Azion lockup, for the product's own mark rather than a third party's.
+- `overline` — renders the `label` above the row.
+
+## Best practices
+
+- Name marks from the registry rather than passing artwork: the registry is what keeps one company's mark identical on every surface, and a name with no entry still renders as its own wordmark so a strip is never incomplete.
+- Let `duration` derive itself. The component holds speed constant rather than duration, so an eleven-mark strip and a thirty-mark strip advance at the same rate; pass a number only to slow one deliberately.
+- Keep `label` to the claim the row makes, not to a heading — the strip sits under a hero, and a second heading competes with the one above it.
+- Use `size="small"` only where the strip is the quietest thing on the page, such as the floor of a sign-in column; `medium` is the marketing band and carries its own responsive ladder.
+- Never put a call to action, a price or anything else a reader needs inside a strip. It scrolls away, and under `prefers-reduced-motion` it becomes a wrapped grid instead.
+
+## Usage
+
+```vue
+<script setup>
+  import Ticker from '@aziontech/webkit/ticker'
+</script>
+
+<template>
+  <Ticker
+    label="Trusted by mission-critical workloads"
+    aria-label="Companies running on Azion"
+    :marks="['itau', 'magalu', 'netshoes', 'caixa', 'agibank', 'gpa']"
+  />
+</template>
+```
+
+## Props
+
+| Prop        | Type                  | Default    | Required | JSDoc                                                                                                                                              |
+| ----------- | --------------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `kind`      | `'plain' \| 'band'`   | `'plain'`  | false    | Whether the strip paints its own ground; `band` fills it with the page canvas so a textured hero cannot show through the marks, and the floor still reads continuous with the band above it. |
+| `marks`     | `string[]`            | `[]`       | false    | Registry names of the marks rendered in the row, in order; an unregistered name renders as its own typographic wordmark so the row stays complete. |
+| `label`     | `string`              | `''`       | false    | Overline above the row, stating the claim the marks make.                                                                                          |
+| `size`      | `'small' \| 'medium'` | `'medium'` | false    | Mark scale; `medium` is the marketing band and climbs 32/40/48 px by device class, `small` is a flat 24 px for a column.                           |
+| `duration`  | `number`              | `0`        | false    | Seconds for one full pass; left at `0` it is derived from the number of marks so every strip moves at one speed.                                   |
+| `ariaLabel` | `string`              | `''`       | false    | Accessible name for the row of marks, announced instead of an unnamed list.                                                                        |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: every mark rests at 70% opacity and lifts to full on `hover`
+- `data-size` mirrors the `size` prop and is what drives the mark height, the cell width and the row gap
+- `data-kind` mirrors the `kind` prop; `band` paints the page canvas and the strip's own vertical rhythm so nothing behind it shows through while the fill still matches the band it floors, `plain` leaves it transparent over whatever it sits on
+- `data-duplicate` marks the second, `aria-hidden` copy of the row — the one the loop translates into place, and the one hidden outright under reduced motion
+- Empty: when `marks` is empty the row renders nothing, so a page with no marks to name shows no empty band
+- Reduced motion: the track stops and wraps into a centred static grid, with the duplicate row removed, so every mark stays reachable
+
+## Motion & Animations
+
+| Trigger           | Animation / Transition                                         | Token (see `.claude/docs/DESIGN.md` § Animations)                                                      | Reduced-motion fallback                                         |
+| ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
+| always (the loop) | `animate-brand-marquee`                                        | semantic (59s default · linear infinite; the track overrides `animation-duration` from its mark count) | `motion-reduce:animate-none` (the row wraps into a static grid) |
+| hover on a mark   | `transition-opacity duration-fast-02 ease-productive-entrance` | inline (matches catalog)                                                                               | `motion-reduce:transition-none`                                 |
+
+## Tokens
+
+| Region                            | Token (DESIGN.md)                                   |
+| --------------------------------- | --------------------------------------------------- |
+| typography (fallback wordmark)    | `.text-heading-xxs`                                 |
+| ink (mark)                        | `var(--text-default)` at 70% opacity, full on hover |
+| spacing (label ↔ row)             | `var(--spacing-xl)`                                 |
+| spacing (row gap, medium)         | `var(--spacing-4)` / `var(--spacing-8)`             |
+| spacing (row gap, small)          | `var(--spacing-10)`, cells sized to the mark        |
+| spacing (reduced-motion grid gap) | `var(--spacing-md)`                                 |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+| -------------- | ------------------- | --------- |
+| _none_         | —                   | —         |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: none of its own — no mark is a focusable target, so the strip adds no tab stop and needs no ring. The loop still pauses on `:focus-within`, so anything a consumer places over it stays still while it is reached.
+- Keyboard map: no arrow-key model and no tab stop — this is a list, not a composite widget.
+- ARIA: the row is a `<ul>` of `<li>` named by `ariaLabel` when set; the second copy carries `aria-hidden="true"` so a screen reader hears each mark once, and each mark is titled with its own name.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): marks are drawn in `var(--text-default)` at 70%, which WCAG 1.4.11 exempts as a logotype; the typographic fallback is real text and clears the minimum in both themes at that strength.
+- `motion-reduce:animate-none` on the track and `motion-reduce:transition-none` on the mark hover. WCAG 2.2.2 applies — the loop is longer than five seconds, so it pauses on hover and on focus-within, and stops outright under `prefers-reduced-motion`.
+- Touch target ≥40×40 px: marks are not interactive targets; the whole strip is one decorative band.
+
+## Stories (Storybook)
+
+- Default
+- Sizes — composite story rendering both `size` values side-by-side
+- Frameworks — the stack strip rather than the client strip (justified: the two registries are the component's whole reason for existing, and no arg on the Default story shows that a framework mark resolves the same way a client mark does)
+- Fallback — a row mixing registered names with an unregistered one (justified: the typographic wordmark is a rendered state no prop can reach, and it is what lets a page name a company whose artwork has not landed)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js b/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
new file mode 100644
index 000000000..2790e22df
--- /dev/null
+++ b/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
@@ -0,0 +1,349 @@
+import TextureMaterial from '@aziontech/webkit/texture-material'
+import Ticker from '@aziontech/webkit/ticker'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import Ticker from '@aziontech/webkit/ticker'"
+
+const CLIENTS = [
+  'global-fashion-group',
+  'herospark',
+  'itau',
+  'nzn',
+  'netshoes',
+  'caixa',
+  'agibank',
+  'prime-video',
+  'america-movil',
+  'gpa',
+  'fourbank'
+]
+
+const FRAMEWORKS = [
+  'nextjs',
+  'astro',
+  'react',
+  'vue',
+  'angular',
+  'nuxt',
+  'gatsby',
+  'hugo',
+  'preact',
+  'remix',
+  'qwik',
+  'vite',
+  'aws',
+  'gcp',
+  'azure',
+  'terraform',
+  'github',
+  'openai',
+  'anthropic',
+  'sqlite'
+]
+
+const MARK_NAMES = [
+  'agibank',
+  'america-movil',
+  'angular',
+  'anthropic',
+  'astro',
+  'aws',
+  'azure',
+  'caixa',
+  'coca-cola',
+  'dafiti',
+  'docusaurus',
+  'drizzle',
+  'elastic',
+  'eleventy',
+  'equinix',
+  'exame',
+  'fourbank',
+  'gatsby',
+  'gcp',
+  'github',
+  'global-fashion-group',
+  'gpa',
+  'grafana',
+  'graphql',
+  'groq',
+  'herospark',
+  'hexo',
+  'hono',
+  'hugo',
+  'itau',
+  'jekyll',
+  'kafka',
+  'madeiramadeira',
+  'magalu',
+  'netshoes',
+  'nextjs',
+  'nodejs',
+  'nuxt',
+  'nzn',
+  'openai',
+  'preact',
+  'prime-video',
+  'qwik',
+  'radware',
+  'react',
+  'remix',
+  'renner',
+  'sqlite',
+  'terraform',
+  'vite',
+  'vitepress',
+  'vue',
+  'workers-cloudflare'
+]
+
+const CLIENT_LABEL = 'Trusted by mission-critical workloads'
+const CLIENT_ARIA = 'Companies running on Azion'
+
+const list = (names, indent = '    ') => names.map((name) => `${indent}'${name}'`).join(',\n')
+
+/** @type {import('@storybook/vue3').Meta<typeof Ticker>} */
+const meta = {
+  title: 'Components/Marketing/Ticker',
+  component: Ticker,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "An endlessly looping row of brand marks — the trust strip that names the companies running on the platform, and the stack strip that names the frameworks and clouds a workload already uses. The marks come from the package's own registry and are drawn in one ink, so a strip reads as a list rather than as a dozen competing palettes."
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    marks: {
+      control: 'object',
+      options: MARK_NAMES,
+      description:
+        'Registry names of the marks rendered in the row, in order; an unregistered name renders as its own typographic wordmark so the row stays complete.',
+      table: {
+        category: 'props',
+        type: { summary: 'string[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    label: {
+      control: 'text',
+      description: 'Overline above the row, stating the claim the marks make.',
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" }
+      }
+    },
+    kind: {
+      control: 'inline-radio',
+      options: ['plain', 'band'],
+      description:
+        'Whether the strip paints its own ground; band fills it with the page canvas so a textured hero cannot show through the marks, and the floor still reads continuous with the band above it.',
+      table: {
+        category: 'props',
+        type: { summary: "'plain' | 'band'" },
+        defaultValue: { summary: "'plain'" }
+      }
+    },
+    size: {
+      control: 'inline-radio',
+      options: ['small', 'medium'],
+      description:
+        'Mark scale; medium is the marketing band and climbs 32/40/48 px by device class, small is a flat 24 px for a column.',
+      table: {
+        category: 'props',
+        type: { summary: "'small' | 'medium'" },
+        defaultValue: { summary: "'medium'" }
+      }
+    },
+    duration: {
+      control: { type: 'number', min: 0, step: 1 },
+      description:
+        'Seconds for one full pass; left at 0 it is derived from the number of marks so every strip moves at one speed.',
+      table: {
+        category: 'props',
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the row of marks, announced instead of an unnamed list.',
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" }
+      }
+    }
+  },
+  args: {
+    kind: 'plain',
+    marks: CLIENTS,
+    label: CLIENT_LABEL,
+    size: 'medium',
+    duration: 0,
+    ariaLabel: CLIENT_ARIA
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { Ticker },
+  setup() {
+    return { args }
+  },
+  template: '<Ticker v-bind="args" />'
+})
+
+const DEFAULT_MARKUP = `<Ticker
+  label="${CLIENT_LABEL}"
+  aria-label="${CLIENT_ARIA}"
+  :marks="[
+${list(CLIENTS)}
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Ticker>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Eleven client marks looping under an overline. Every mark is an inline SVG drawn in `currentColor`, so the row takes one ink from the surface it sits on and follows the theme without a second asset or a filter — flip the toolbar between light and dark and the marks come with it. The track holds the row twice and travels exactly -50%, which is why the seam never shows; the second copy is `aria-hidden`, so a screen reader hears each company once. Hover anywhere on the strip to pause it. Leave `duration` at 0 and the pass is derived from the mark count, so this strip and a thirty-mark one advance at the same speed rather than in the same time.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const SIZES_TEMPLATE = `<div class="flex flex-col gap-12">
+  <Ticker
+    size="medium"
+    label="Medium — the marketing band"
+    :marks="[
+${list(CLIENTS, '      ')}
+    ]"
+  />
+  <Ticker
+    size="small"
+    label="Small — a column's floor"
+    :marks="[
+${list(CLIENTS, '      ')}
+    ]"
+  />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Ticker>} */
+export const Sizes = {
+  render: () => ({
+    components: { Ticker },
+    template: SIZES_TEMPLATE
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'The two scales, one above the other. `medium` is a responsive ladder rather than one height — 32 px on a phone, 40 px from `md`, 48 px from `lg` — because the same 48 px mark that reads as a row on a desktop is one logo drifting past on a 375 px viewport. `small` is a flat 24 px for a column that is asking for a form field, where the strip is proof rather than a feature. The cell width moves with the height (150/200/240, and 120 for small), so every mark advances on one constant pitch instead of on its own artwork width.'
+      },
+      source: { code: toSfc(IMPORT, SIZES_TEMPLATE) }
+    }
+  }
+}
+
+const FRAMEWORKS_MARKUP = `<Ticker
+  label="Your Stack, Your Way"
+  aria-label="Frameworks and clouds Azion runs"
+  :marks="[
+${list(FRAMEWORKS)}
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Ticker>} */
+export const Frameworks = {
+  render: Template,
+  args: {
+    marks: FRAMEWORKS,
+    label: 'Your Stack, Your Way',
+    ariaLabel: 'Frameworks and clouds Azion runs'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The same component making a different claim: frameworks, clouds and tooling rather than customers. The registry holds both populations, so a framework mark resolves exactly as a client mark does and the two strips on one page are one component with two lists. Twenty marks derive a longer pass than eleven do, which is the point of deriving it — the row advances at the same rate either way. Marks load on demand, so a page carries only the ones it names.'
+      },
+      source: { code: toSfc(IMPORT, FRAMEWORKS_MARKUP) }
+    }
+  }
+}
+
+const FALLBACK_MARKS = ['magalu', 'renner', 'iFood', 'dafiti', 'Zoop', 'netshoes']
+
+const FALLBACK_MARKUP = `<Ticker
+  label="Artwork optional"
+  aria-label="Companies with and without a registered mark"
+  :marks="[
+${list(FALLBACK_MARKS)}
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Ticker>} */
+export const Fallback = {
+  render: Template,
+  args: {
+    marks: FALLBACK_MARKS,
+    label: 'Artwork optional',
+    ariaLabel: 'Companies with and without a registered mark'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Two of these six have no entry in the registry, and they render as their own name set in the heading scale rather than as a gap. That is what lets a page state the list it means to state before every asset has landed — a company is named either way, and the row keeps its pitch because the cell is a fixed width regardless of what sits in it. An unregistered name is never an error; adding the artwork later changes nothing at the call site.'
+      },
+      source: { code: toSfc(IMPORT, FALLBACK_MARKUP) }
+    }
+  }
+}
+
+const BAND_TEMPLATE = `<div class="relative overflow-hidden bg-(--bg-canvas) pt-(--spacing-xxl)">
+  <TextureMaterial kind="dots" size="small" fade="bottom" />
+  <div class="relative flex min-h-80 flex-col justify-end">
+    <Ticker
+      kind="band"
+      label="Trusted by mission-critical workloads"
+      :marks="['itau', 'netshoes', 'nzn']"
+    />
+  </div>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Ticker>} */
+export const Band = {
+  render: () => ({
+    components: { Ticker, TextureMaterial },
+    template: BAND_TEMPLATE
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'On the floor of a textured band the strip needs a ground of its own, or the marks read through the lattice behind them. `kind="band"` gives it its own fill and vertical rhythm so it lands as a band, which is how a page composes it into `Hero`’s `bottom` slot.'
+      },
+      source: {
+        code: toSfc(
+          [IMPORT, "import TextureMaterial from '@aziontech/webkit/texture-material'"],
+          BAND_TEMPLATE
+        )
+      }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index dbcbf8e11..e633d538b 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -134,6 +134,12 @@
     "path": "src/components/layout/resizable-panel/resizable-panel.vue",
     "limit": "3 KB"
   },
+  {
+    "name": "ticker",
+    "path": "src/components/marketing/ticker/ticker.vue",
+    "limit": "4 KB",
+    "entryOnly": true
+  },
   {
     "name": "illustration",
     "path": "src/components/content/illustration/illustration.vue",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 039f4a19f..07343df33 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9930,6 +9930,84 @@
       "parent": "sidebar",
       "treeShakeableImport": "@aziontech/webkit/sidebar-footer"
     },
+    "ticker": {
+      "import": "@aziontech/webkit/ticker",
+      "target": "./src/components/marketing/ticker/ticker.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/ticker",
+      "category": "marketing",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "kind",
+          "type": "'plain' | 'band'",
+          "default": "'plain'",
+          "required": "false",
+          "doc": "Whether the strip paints its own ground; `band` fills it with the page canvas so a textured hero cannot show through the marks, and the floor still reads continuous with the band above it."
+        },
+        {
+          "name": "marks",
+          "type": "string[]",
+          "default": "[]",
+          "required": "false",
+          "doc": "Registry names of the marks rendered in the row, in order; an unregistered name renders as its own typographic wordmark so the row stays complete."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Overline above the row, stating the claim the marks make."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium'",
+          "default": "'medium'",
+          "required": "false",
+          "doc": "Mark scale; `medium` is the marketing band and climbs 32/40/48 px by device class, `small` is a flat 24 px for a column."
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "default": "0",
+          "required": "false",
+          "doc": "Seconds for one full pass; left at `0` it is derived from the number of marks so every strip moves at one speed."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Accessible name for the row of marks, announced instead of an unnamed list."
+        }
+      ],
+      "purpose": "An endlessly looping row of brand marks — the trust strip that names the companies running on the platform, and the stack strip that names the frameworks and clouds a workload already uses. The marks come from the package's own registry and are drawn in one ink, so a strip reads as a list rather than as a dozen competing palettes.",
+      "useWhen": [
+        "Under a hero, to name the companies a product already serves (\"Trusted by mission-critical workloads\").",
+        "To state compatibility as a list of framework, cloud and tooling marks (\"Your Stack, Your Way\").",
+        "Whenever the set of marks is longer than the row that holds it and no single mark has to be read."
+      ],
+      "avoidWhen": [
+        "When every mark must be seen → use `logo-wall`, which wraps into a grid and never moves.",
+        "When the reader chooses how far to go through browsable content → use `carousel`, which is user-driven and never advances on its own.",
+        "For a mark a reader must act on, such as a partner directory → the strip is decorative motion, so put linked marks in a `logo-wall`.",
+        "For one mark in its own right (a header lockup, a client story card) → use `brand`."
+      ],
+      "related": [
+        "logo-wall` — the static, wrapping grid of consumer-supplied marks; reach for the strip only when the wall would be too long.",
+        "carousel` — the user-driven snap scroller; this one moves on its own and holds no essential content.",
+        "brand` — the Azion lockup, for the product's own mark rather than a third party's.",
+        "overline` — renders the `label` above the row."
+      ],
+      "bestPractices": [
+        "Name marks from the registry rather than passing artwork: the registry is what keeps one company's mark identical on every surface, and a name with no entry still renders as its own wordmark so a strip is never incomplete.",
+        "Let `duration` derive itself. The component holds speed constant rather than duration, so an eleven-mark strip and a thirty-mark strip advance at the same rate; pass a number only to slow one deliberately.",
+        "Keep `label` to the claim the row makes, not to a heading — the strip sits under a hero, and a second heading competes with the one above it.",
+        "Use `size=\"small\"` only where the strip is the quietest thing on the page, such as the floor of a sign-in column; `medium` is the marketing band and carries its own responsive ladder.",
+        "Never put a call to action, a price or anything else a reader needs inside a strip. It scrolls away, and under `prefers-reduced-motion` it becomes a wrapped grid instead."
+      ]
+    },
     "breadcrumb": {
       "import": "@aziontech/webkit/breadcrumb",
       "target": "./src/components/navigation/breadcrumb/index.js",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index d69e67e99..43745e75a 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -279,6 +279,7 @@
     "./sidebar-group": "./src/components/layout/sidebar/sidebar-group.vue",
     "./sidebar-header": "./src/components/layout/sidebar/sidebar-header.vue",
     "./sidebar-footer": "./src/components/layout/sidebar/sidebar-footer.vue",
+    "./ticker": "./src/components/marketing/ticker/ticker.vue",
     "./breadcrumb": "./src/components/navigation/breadcrumb/index.js",
     "./breadcrumb-item": "./src/components/navigation/breadcrumb-item/breadcrumb-item.vue",
     "./link": "./src/components/navigation/link/link.vue",
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.test.ts b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
new file mode 100644
index 000000000..dde2aabb9
--- /dev/null
+++ b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
@@ -0,0 +1,141 @@
+import { render, waitFor } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import { expectNoA11yViolations } from '../../../test/axe'
+import Ticker from './ticker.vue'
+
+const TESTID = 'marketing-ticker'
+
+const MARKS = ['itau', 'magalu', 'netshoes', 'caixa']
+
+const markFor = (container: Element, name: string) =>
+  waitFor(() => {
+    const art = container.querySelector(`svg[data-mark="${name}"]`)
+    expect(art).not.toBeNull()
+    return art as SVGElement
+  })
+
+describe('Ticker', () => {
+  it('renders the strip under the default testid', () => {
+    const { getByTestId } = render(Ticker, { props: { marks: MARKS } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+  })
+
+  it.each(['plain', 'band'] as const)('carries the %s fill on data-kind', (kind) => {
+    const { getByTestId } = render(Ticker, { props: { kind, marks: MARKS } })
+    expect(getByTestId(TESTID)).toHaveAttribute('data-kind', kind)
+  })
+
+  it('paints no surface of its own by default', () => {
+    const { getByTestId } = render(Ticker, { props: { marks: MARKS } })
+    expect(getByTestId(TESTID)).toHaveAttribute('data-kind', 'plain')
+  })
+
+  it('lets a consumer data-testid win over the fallback', () => {
+    const { getByTestId, queryByTestId } = render(Ticker, {
+      props: { marks: MARKS },
+      attrs: { 'data-testid': 'trust-strip' }
+    })
+
+    expect(getByTestId('trust-strip')).toBeInTheDocument()
+    expect(queryByTestId(TESTID)).toBeNull()
+  })
+
+  it('renders the row twice so the loop can travel a whole copy', () => {
+    const { container } = render(Ticker, { props: { marks: MARKS } })
+
+    expect(container.querySelectorAll('ul')).toHaveLength(2)
+    expect(container.querySelectorAll('li')).toHaveLength(MARKS.length * 2)
+  })
+
+  it('hides the duplicate row from assistive tech so each mark is announced once', () => {
+    const { container } = render(Ticker, { props: { marks: MARKS } })
+    const [first, second] = [...container.querySelectorAll('ul')]
+
+    expect(first).not.toHaveAttribute('aria-hidden')
+    expect(second).toHaveAttribute('aria-hidden', 'true')
+    expect(second).toHaveAttribute('data-duplicate')
+  })
+
+  it('names only the announced row with ariaLabel', () => {
+    const { container } = render(Ticker, {
+      props: { marks: MARKS, ariaLabel: 'Companies running on Azion' }
+    })
+    const [first, second] = [...container.querySelectorAll('ul')]
+
+    expect(first).toHaveAttribute('aria-label', 'Companies running on Azion')
+    expect(second).not.toHaveAttribute('aria-label')
+  })
+
+  it('resolves a registered name to its artwork', async () => {
+    const { container } = render(Ticker, { props: { marks: MARKS } })
+
+    for (const name of MARKS) {
+      await markFor(container, name)
+    }
+  })
+
+  it('falls back to the name itself when nothing is registered under it', async () => {
+    const { container, getAllByText } = render(Ticker, {
+      props: { marks: ['magalu', 'Contabilizei'] }
+    })
+    await markFor(container, 'magalu')
+
+    expect(container.querySelector('svg[data-mark="Contabilizei"]')).toBeNull()
+    expect(getAllByText('Contabilizei').length).toBeGreaterThan(0)
+  })
+
+  it('renders the label as an overline and omits it when empty', () => {
+    const { getAllByText, rerender, queryByText } = render(Ticker, {
+      props: { marks: MARKS, label: 'Trusted by mission-critical workloads' }
+    })
+
+    expect(getAllByText(/Trusted by mission-critical workloads/).length).toBeGreaterThan(0)
+
+    return rerender({ marks: MARKS, label: '' }).then(() => {
+      expect(queryByText(/Trusted by mission-critical workloads/)).toBeNull()
+    })
+  })
+
+  it.each(['small', 'medium'] as const)('mirrors size=%s onto data-size', (size) => {
+    const { getByTestId, container } = render(Ticker, { props: { marks: MARKS, size } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-size', size)
+    for (const row of container.querySelectorAll('ul')) {
+      expect(row).toHaveAttribute('data-size', size)
+    }
+  })
+
+  it('derives the pass from the mark count, so speed is constant across strips', () => {
+    const { container } = render(Ticker, { props: { marks: MARKS } })
+    const track = container.querySelector('.animate-brand-marquee')
+
+    expect(track?.getAttribute('style')).toContain(
+      `animation-duration: ${Math.round(MARKS.length * 5.4)}s`
+    )
+  })
+
+  it('lets duration override the derived pass', () => {
+    const { container } = render(Ticker, { props: { marks: MARKS, duration: 12 } })
+    const track = container.querySelector('.animate-brand-marquee')
+
+    expect(track?.getAttribute('style')).toContain('animation-duration: 12s')
+  })
+
+  it('renders no row at all when there are no marks', () => {
+    const { getByTestId, container } = render(Ticker, { props: { marks: [] } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(container.querySelectorAll('ul')).toHaveLength(0)
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(Ticker, {
+      props: { marks: MARKS, label: 'Trusted by mission-critical workloads', ariaLabel: 'Clients' }
+    })
+    await markFor(container, 'itau')
+
+    await expectNoA11yViolations(container)
+  })
+})
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.vue b/packages/webkit/src/components/marketing/ticker/ticker.vue
new file mode 100644
index 000000000..ad9d2a139
--- /dev/null
+++ b/packages/webkit/src/components/marketing/ticker/ticker.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+  import { type Component, computed, defineAsyncComponent, useAttrs } from 'vue'
+
+  import { brandMarkLabel, resolveBrandMark } from '../../../svg/brands/registry'
+  import Overline from '../../overline/overline.vue'
+
+  defineOptions({ name: 'Ticker', inheritAttrs: false })
+
+  /** Mark scale. */
+  export type TickerSize = 'small' | 'medium'
+
+  /** Whether the strip paints its own ground. */
+  export type TickerKind = 'plain' | 'band'
+
+  interface Props {
+    /** Whether the strip paints its own ground; band fills it with the page canvas so a textured hero cannot show through the marks, and the floor still reads continuous with the band above it. */
+    kind?: TickerKind
+    /** Registry names of the marks rendered in the row, in order; an unregistered name renders as its own typographic wordmark so the row stays complete. */
+    marks?: string[]
+    /** Overline above the row, stating the claim the marks make. */
+    label?: string
+    /** Mark scale; medium is the marketing band and climbs 32/40/48 px by device class, small is a flat 24 px for a column. */
+    size?: TickerSize
+    /** Seconds for one full pass; left at 0 it is derived from the number of marks so every strip moves at one speed. */
+    duration?: number
+    /** Accessible name for the row of marks, announced instead of an unnamed list. */
+    ariaLabel?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    kind: 'plain',
+    marks: () => [],
+    label: '',
+    size: 'medium',
+    duration: 0,
+    ariaLabel: ''
+  })
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'marketing-ticker'
+  )
+
+  const SECONDS_PER_MARK = 5.4
+
+  const passDuration = computed(
+    () => props.duration || Math.round(props.marks.length * SECONDS_PER_MARK) || 1
+  )
+
+  const loaded = new Map<string, Component>()
+
+  const resolved = computed(() =>
+    props.marks.map((name) => {
+      const loader = resolveBrandMark(name)
+      if (loader && !loaded.has(name)) loaded.set(name, defineAsyncComponent(loader))
+      return { name, label: brandMarkLabel(name), art: loader ? loaded.get(name) : null }
+    })
+  )
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-size="size"
+    :data-kind="kind"
+    class="group/strip flex flex-col items-center gap-(--spacing-xl) data-[kind=band]:w-full data-[kind=band]:bg-(--bg-canvas) data-[kind=band]:py-(--spacing-xl) data-[size=medium]:[--brand-cell:150px] data-[size=medium]:[--brand-mark:32px] data-[size=small]:[--brand-cell:120px] data-[size=small]:[--brand-mark:24px] md:data-[size=medium]:[--brand-cell:200px] md:data-[size=medium]:[--brand-mark:40px] lg:data-[size=medium]:[--brand-cell:240px] lg:data-[size=medium]:[--brand-mark:48px]"
+  >
+    <Overline
+      v-if="label"
+      show-cursor
+      >{{ label }}</Overline
+    >
+
+    <div
+      v-if="resolved.length"
+      class="group/loop relative w-full overflow-hidden mask-[linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]"
+    >
+      <div
+        :style="{ animationDuration: `${passDuration}s` }"
+        class="flex w-max animate-brand-marquee group-focus-within/loop:[animation-play-state:paused] group-hover/loop:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none motion-reduce:flex-wrap motion-reduce:justify-center"
+      >
+        <ul
+          v-for="copy in 2"
+          :key="copy"
+          :data-size="size"
+          :data-duplicate="copy === 2 || null"
+          :aria-label="copy === 1 && ariaLabel ? ariaLabel : undefined"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+          class="m-0 flex w-max shrink-0 list-none items-center p-0 data-[size=medium]:gap-(--spacing-4) data-[size=medium]:pr-(--spacing-4) data-[size=small]:gap-(--spacing-10) data-[size=small]:pr-(--spacing-10) md:data-[size=medium]:gap-(--spacing-8) md:data-[size=medium]:pr-(--spacing-8) motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-(--spacing-md) motion-reduce:data-[duplicate]:hidden"
+        >
+          <li
+            v-for="mark in resolved"
+            :key="`${copy}-${mark.name}`"
+            :title="mark.label"
+            class="flex w-(--brand-cell) shrink-0 items-center group-data-[size=small]/strip:w-auto justify-center text-(--text-default) opacity-70 transition-opacity duration-fast-02 ease-productive-entrance hover:opacity-100 motion-reduce:transition-none"
+          >
+            <component
+              :is="mark.art"
+              v-if="mark.art"
+              :data-mark="mark.name"
+              class="h-(--brand-mark) w-auto max-w-(--brand-cell) object-contain"
+            />
+            <span
+              v-else
+              class="whitespace-nowrap text-heading-xxs"
+              >{{ mark.label }}</span
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/webkit/src/svg/brands/registry.ts b/packages/webkit/src/svg/brands/registry.ts
index 461311feb..f32fe63f5 100644
--- a/packages/webkit/src/svg/brands/registry.ts
+++ b/packages/webkit/src/svg/brands/registry.ts
@@ -1,7 +1,7 @@
 import type { Component } from 'vue'
 
 /**
- * Every name `<BrandCarousel :marks>` accepts. A mark is an SFC drawn in `currentColor`, so
+ * Every name `<Ticker :marks>` accepts. A mark is an SFC drawn in `currentColor`, so
  * it needs no per-theme asset; loaders are dynamic imports, so a page carries only what it
  * names. An unregistered name is not an error — the carousel writes it as a wordmark.
  */

From a265a9b54338ec71c9cb73c410c9da3442f0a6ae Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:40:28 -0300
Subject: [PATCH 2/4] style(webkit): drop the implementation comments from
 ticker

---
 packages/webkit/src/svg/brands/registry.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/webkit/src/svg/brands/registry.ts b/packages/webkit/src/svg/brands/registry.ts
index f32fe63f5..0d3690c64 100644
--- a/packages/webkit/src/svg/brands/registry.ts
+++ b/packages/webkit/src/svg/brands/registry.ts
@@ -1,10 +1,5 @@
 import type { Component } from 'vue'
 
-/**
- * Every name `<Ticker :marks>` accepts. A mark is an SFC drawn in `currentColor`, so
- * it needs no per-theme asset; loaders are dynamic imports, so a page carries only what it
- * names. An unregistered name is not an error — the carousel writes it as a wordmark.
- */
 export type BrandMarkLoader = () => Promise<{ default: Component }>
 
 export const brandMarks = {

From d7ecb1419418baec289706c99a9522adedebd613 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Thu, 1 Oct 2026 09:02:27 -0300
Subject: [PATCH 3/4] fix(webkit): load the ticker's marks before the marquee
 runs

Raises the first budget from 4 KB to 4.5 KB: the marks now resolve into a shallow map before the
track starts, measured at 4.05 KB gzip on the integrated tree.
---
 .specs/ticker.md                              |  2 +-
 .../marketing/ticker/Ticker.stories.js        |  2 +-
 packages/webkit/.size-limit.json              |  2 +-
 packages/webkit/catalog.json                  |  2 +-
 .../marketing/ticker/ticker.test.ts           | 14 ++++-
 .../components/marketing/ticker/ticker.vue    | 60 +++++++++++++++----
 6 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/.specs/ticker.md b/.specs/ticker.md
index 00ce69d02..122d9e3b3 100644
--- a/.specs/ticker.md
+++ b/.specs/ticker.md
@@ -2,7 +2,7 @@
 name: ticker
 category: marketing
 structure: monolithic
-status: implemented
+status: approved
 spec_version: 1
 checksum: bc74ab5b07259372e2d53ea3ff45896601d49aecfbb41b675ba5430abd0303a0
 created: 2026-09-23
diff --git a/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js b/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
index 2790e22df..6b179e011 100644
--- a/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
+++ b/apps/storybook/src/stories/components/marketing/ticker/Ticker.stories.js
@@ -1,5 +1,5 @@
-import TextureMaterial from '@aziontech/webkit/texture-material'
 import Ticker from '@aziontech/webkit/ticker'
+import TextureMaterial from '@aziontech/webkit/texture-material'
 
 import { toSfc } from '../../../_shared/story-source'
 
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index e633d538b..b69606563 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -137,7 +137,7 @@
   {
     "name": "ticker",
     "path": "src/components/marketing/ticker/ticker.vue",
-    "limit": "4 KB",
+    "limit": "4.5 KB",
     "entryOnly": true
   },
   {
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 07343df33..76ad56618 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9937,7 +9937,7 @@
       "treeShakeableImport": "@aziontech/webkit/ticker",
       "category": "marketing",
       "structure": "monolithic",
-      "status": "implemented",
+      "status": "approved",
       "props": [
         {
           "name": "kind",
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.test.ts b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
index dde2aabb9..22dc7f645 100644
--- a/packages/webkit/src/components/marketing/ticker/ticker.test.ts
+++ b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
@@ -76,6 +76,18 @@ describe('Ticker', () => {
     }
   })
 
+  it('holds the loop until every mark has resolved, so the row starts complete', async () => {
+    const { container } = render(Ticker, { props: { marks: MARKS } })
+    const track = container.querySelector('.animate-brand-marquee')
+
+    expect(track).toHaveAttribute('data-loading')
+
+    await waitFor(() => expect(track).not.toHaveAttribute('data-loading'))
+    for (const name of MARKS) {
+      expect(container.querySelector(`svg[data-mark="${name}"]`)).not.toBeNull()
+    }
+  })
+
   it('falls back to the name itself when nothing is registered under it', async () => {
     const { container, getAllByText } = render(Ticker, {
       props: { marks: ['magalu', 'Contabilizei'] }
@@ -112,7 +124,7 @@ describe('Ticker', () => {
     const track = container.querySelector('.animate-brand-marquee')
 
     expect(track?.getAttribute('style')).toContain(
-      `animation-duration: ${Math.round(MARKS.length * 5.4)}s`
+      `animation-duration: ${Math.round(MARKS.length * 2)}s`
     )
   })
 
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.vue b/packages/webkit/src/components/marketing/ticker/ticker.vue
index ad9d2a139..a8cd9a2ee 100644
--- a/packages/webkit/src/components/marketing/ticker/ticker.vue
+++ b/packages/webkit/src/components/marketing/ticker/ticker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { type Component, computed, defineAsyncComponent, useAttrs } from 'vue'
+  import { type Component, computed, markRaw, ref, shallowRef, useAttrs, watch } from 'vue'
 
   import { brandMarkLabel, resolveBrandMark } from '../../../svg/brands/registry'
   import Overline from '../../overline/overline.vue'
@@ -38,24 +38,58 @@
 
   const attrs = useAttrs()
 
-  const testId = computed(
-    () => (attrs['data-testid'] as string | undefined) ?? 'marketing-ticker'
-  )
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'marketing-ticker')
 
-  const SECONDS_PER_MARK = 5.4
+  const SECONDS_PER_MARK = 2
 
   const passDuration = computed(
     () => props.duration || Math.round(props.marks.length * SECONDS_PER_MARK) || 1
   )
 
-  const loaded = new Map<string, Component>()
+  const artwork = shallowRef(new Map<string, Component>())
+  const ready = ref(false)
 
   const resolved = computed(() =>
-    props.marks.map((name) => {
-      const loader = resolveBrandMark(name)
-      if (loader && !loaded.has(name)) loaded.set(name, defineAsyncComponent(loader))
-      return { name, label: brandMarkLabel(name), art: loader ? loaded.get(name) : null }
-    })
+    props.marks.map((name) => ({
+      name,
+      label: brandMarkLabel(name),
+      art: artwork.value.get(name) ?? null
+    }))
+  )
+
+  watch(
+    () => props.marks,
+    (names, _previous, onCleanup) => {
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+      })
+
+      const pending = names.flatMap((name) => {
+        const load = resolveBrandMark(name)
+        return load && !artwork.value.has(name) ? [{ name, load }] : []
+      })
+      if (!pending.length) {
+        ready.value = true
+        return
+      }
+
+      ready.value = false
+      Promise.allSettled(
+        pending.map(({ name, load }) =>
+          load().then((module) => [name, markRaw(module.default)] as const)
+        )
+      ).then((results) => {
+        if (cancelled) return
+        const next = new Map(artwork.value)
+        for (const result of results) {
+          if (result.status === 'fulfilled') next.set(...result.value)
+        }
+        artwork.value = next
+        ready.value = true
+      })
+    },
+    { immediate: true }
   )
 </script>
 
@@ -70,6 +104,7 @@
     <Overline
       v-if="label"
       show-cursor
+      class="[&>span:first-child]:text-(--text-muted)"
       >{{ label }}</Overline
     >
 
@@ -79,7 +114,8 @@
     >
       <div
         :style="{ animationDuration: `${passDuration}s` }"
-        class="flex w-max animate-brand-marquee group-focus-within/loop:[animation-play-state:paused] group-hover/loop:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none motion-reduce:flex-wrap motion-reduce:justify-center"
+        :data-loading="!ready || null"
+        class="flex w-max animate-brand-marquee data-[loading]:invisible data-[loading]:[animation-play-state:paused] group-focus-within/loop:[animation-play-state:paused] group-hover/loop:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none motion-reduce:flex-wrap motion-reduce:justify-center"
       >
         <ul
           v-for="copy in 2"

From 5d6fbdc88018f99df41615639bc199ae5ca5c038 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Sat, 3 Oct 2026 13:38:35 -0300
Subject: [PATCH 4/4] fix(webkit): repeat a short ticker row until it fills the
 strip

A row narrower than the strip left a gap in the loop. The ticker measures the
strip against one row and repeats the row as often as needed, scaling the
duration with it so the speed stays constant.
---
 .specs/ticker.md                              | 11 +++--
 .../marketing/ticker/ticker.test.ts           | 38 ++++++++++++++
 .../components/marketing/ticker/ticker.vue    | 49 +++++++++++++++++--
 3 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/.specs/ticker.md b/.specs/ticker.md
index 122d9e3b3..aa84418a7 100644
--- a/.specs/ticker.md
+++ b/.specs/ticker.md
@@ -4,9 +4,9 @@ category: marketing
 structure: monolithic
 status: approved
 spec_version: 1
-checksum: bc74ab5b07259372e2d53ea3ff45896601d49aecfbb41b675ba5430abd0303a0
+checksum: bbd1646868aee1bf69ce86f3b81595ee8b491320cf9c4acfc3872253fd664e73
 created: 2026-09-23
-last_updated: 2026-09-23
+last_updated: 2026-10-01
 ---
 
 # Ticker — Component Spec
@@ -83,9 +83,10 @@ An endlessly looping row of brand marks — the trust strip that names the compa
 - Visual states: every mark rests at 70% opacity and lifts to full on `hover`
 - `data-size` mirrors the `size` prop and is what drives the mark height, the cell width and the row gap
 - `data-kind` mirrors the `kind` prop; `band` paints the page canvas and the strip's own vertical rhythm so nothing behind it shows through while the fill still matches the band it floors, `plain` leaves it transparent over whatever it sits on
-- `data-duplicate` marks the second, `aria-hidden` copy of the row — the one the loop translates into place, and the one hidden outright under reduced motion
+- `data-duplicate` marks every `aria-hidden` copy after the first — the copies the loop translates into place, and the ones hidden outright under reduced motion
+- Short rows: the row repeats until half the track is at least as wide as the strip, so a strip with few marks never shows an empty run; the pass lengthens with each repeat so the speed stays the same
 - Empty: when `marks` is empty the row renders nothing, so a page with no marks to name shows no empty band
-- Reduced motion: the track stops and wraps into a centred static grid, with the duplicate row removed, so every mark stays reachable
+- Reduced motion: the track stops and wraps into a centred static grid, with the duplicate rows removed, so every mark stays reachable
 
 ## Motion & Animations
 
@@ -115,7 +116,7 @@ An endlessly looping row of brand marks — the trust strip that names the compa
 
 - Visible focus: none of its own — no mark is a focusable target, so the strip adds no tab stop and needs no ring. The loop still pauses on `:focus-within`, so anything a consumer places over it stays still while it is reached.
 - Keyboard map: no arrow-key model and no tab stop — this is a list, not a composite widget.
-- ARIA: the row is a `<ul>` of `<li>` named by `ariaLabel` when set; the second copy carries `aria-hidden="true"` so a screen reader hears each mark once, and each mark is titled with its own name.
+- ARIA: the row is a `<ul>` of `<li>` named by `ariaLabel` when set; every copy after the first carries `aria-hidden="true"` so a screen reader hears each mark once, and each mark is titled with its own name.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): marks are drawn in `var(--text-default)` at 70%, which WCAG 1.4.11 exempts as a logotype; the typographic fallback is real text and clears the minimum in both themes at that strength.
 - `motion-reduce:animate-none` on the track and `motion-reduce:transition-none` on the mark hover. WCAG 2.2.2 applies — the loop is longer than five seconds, so it pauses on hover and on focus-within, and stops outright under `prefers-reduced-motion`.
 - Touch target ≥40×40 px: marks are not interactive targets; the whole strip is one decorative band.
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.test.ts b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
index 22dc7f645..3556e6af9 100644
--- a/packages/webkit/src/components/marketing/ticker/ticker.test.ts
+++ b/packages/webkit/src/components/marketing/ticker/ticker.test.ts
@@ -135,6 +135,44 @@ describe('Ticker', () => {
     expect(track?.getAttribute('style')).toContain('animation-duration: 12s')
   })
 
+  it('repeats a short row until half the track covers the strip, at the same speed', async () => {
+    const layout = document.createElement('style')
+    layout.textContent = `
+      .animate-brand-marquee { overflow: hidden }
+      .animate-brand-marquee, .animate-brand-marquee > ul { display: flex; width: max-content; margin: 0; padding: 0 }
+      .animate-brand-marquee li { width: 100px; height: 24px; flex-shrink: 0; overflow: hidden }
+    `
+    document.head.append(layout)
+    const strip = document.body.appendChild(document.createElement('div'))
+    strip.style.width = '1000px'
+
+    const marks = ['itau', 'magalu']
+    const { container, unmount } = render(Ticker, { props: { marks }, container: strip })
+
+    try {
+      const track = container.querySelector('.animate-brand-marquee') as globalThis.HTMLElement
+
+      await waitFor(() => expect(track.children.length).toBeGreaterThan(2))
+
+      const rows = [...track.querySelectorAll('ul')]
+      const half = rows.length / 2
+      expect(Number.isInteger(half)).toBe(true)
+      expect(half * rows[0].offsetWidth).toBeGreaterThanOrEqual(1000)
+      expect(rows[0]).not.toHaveAttribute('aria-hidden')
+      for (const row of rows.slice(1)) {
+        expect(row).toHaveAttribute('aria-hidden', 'true')
+        expect(row).toHaveAttribute('data-duplicate')
+      }
+      expect(track.getAttribute('style')).toContain(
+        `animation-duration: ${marks.length * 2 * half}s`
+      )
+    } finally {
+      unmount()
+      layout.remove()
+      strip.remove()
+    }
+  })
+
   it('renders no row at all when there are no marks', () => {
     const { getByTestId, container } = render(Ticker, { props: { marks: [] } })
 
diff --git a/packages/webkit/src/components/marketing/ticker/ticker.vue b/packages/webkit/src/components/marketing/ticker/ticker.vue
index a8cd9a2ee..3a46dea66 100644
--- a/packages/webkit/src/components/marketing/ticker/ticker.vue
+++ b/packages/webkit/src/components/marketing/ticker/ticker.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-  import { type Component, computed, markRaw, ref, shallowRef, useAttrs, watch } from 'vue'
+  import {
+    type Component,
+    computed,
+    markRaw,
+    onScopeDispose,
+    ref,
+    shallowRef,
+    useAttrs,
+    watch
+  } from 'vue'
 
   import { brandMarkLabel, resolveBrandMark } from '../../../svg/brands/registry'
   import Overline from '../../overline/overline.vue'
@@ -42,8 +51,13 @@
 
   const SECONDS_PER_MARK = 2
 
+  const loop = ref<globalThis.HTMLElement | null>(null)
+  const track = ref<globalThis.HTMLElement | null>(null)
+  const repeats = ref(1)
+  const copies = computed(() => repeats.value * 2)
+
   const passDuration = computed(
-    () => props.duration || Math.round(props.marks.length * SECONDS_PER_MARK) || 1
+    () => Math.round((props.duration || props.marks.length * SECONDS_PER_MARK) * repeats.value) || 1
   )
 
   const artwork = shallowRef(new Map<string, Component>())
@@ -91,6 +105,28 @@
     },
     { immediate: true }
   )
+
+  const firstRow = computed(
+    () => (track.value?.firstElementChild as globalThis.HTMLElement | null) ?? null
+  )
+
+  const measureRepeats = () => {
+    const strip = loop.value?.clientWidth ?? 0
+    const row = firstRow.value?.offsetWidth ?? 0
+    repeats.value = row > 0 ? Math.max(1, Math.ceil(strip / row)) : 1
+  }
+
+  let observer: globalThis.ResizeObserver | null = null
+
+  watch([loop, firstRow], (elements) => {
+    observer?.disconnect()
+    observer = new globalThis.ResizeObserver(measureRepeats)
+    for (const element of elements) {
+      if (element) observer.observe(element)
+    }
+  })
+
+  onScopeDispose(() => observer?.disconnect())
 </script>
 
 <template>
@@ -110,20 +146,22 @@
 
     <div
       v-if="resolved.length"
+      ref="loop"
       class="group/loop relative w-full overflow-hidden mask-[linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]"
     >
       <div
+        ref="track"
         :style="{ animationDuration: `${passDuration}s` }"
         :data-loading="!ready || null"
         class="flex w-max animate-brand-marquee data-[loading]:invisible data-[loading]:[animation-play-state:paused] group-focus-within/loop:[animation-play-state:paused] group-hover/loop:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none motion-reduce:flex-wrap motion-reduce:justify-center"
       >
         <ul
-          v-for="copy in 2"
+          v-for="copy in copies"
           :key="copy"
           :data-size="size"
-          :data-duplicate="copy === 2 || null"
+          :data-duplicate="copy > 1 || null"
           :aria-label="copy === 1 && ariaLabel ? ariaLabel : undefined"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
+          :aria-hidden="copy > 1 ? 'true' : undefined"
           class="m-0 flex w-max shrink-0 list-none items-center p-0 data-[size=medium]:gap-(--spacing-4) data-[size=medium]:pr-(--spacing-4) data-[size=small]:gap-(--spacing-10) data-[size=small]:pr-(--spacing-10) md:data-[size=medium]:gap-(--spacing-8) md:data-[size=medium]:pr-(--spacing-8) motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-(--spacing-md) motion-reduce:data-[duplicate]:hidden"
         >
           <li
@@ -138,6 +176,7 @@
               :data-mark="mark.name"
               class="h-(--brand-mark) w-auto max-w-(--brand-cell) object-contain"
             />
+
             <span
               v-else
               class="whitespace-nowrap text-heading-xxs"