@breathe-ds/ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,197 @@
-# Temporary Holding Version
+# Breathe
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Breathe** — o design system da **família Cuidado Global** (ecossistema RTA / Mariangela:
+creeta, ttcab, metodorta…). Os sites **herdam** este pacote e aplicam a
+própria paleta sobre o mesmo contrato.
+
+> Pacote npm: `@breathe-ds/ui` (endereço técnico). **Breathe** é o nome do sistema.
+
+> **v0.1** — tokens + componentes (ver `components/`) + marcas dos sites.
+> Confira tudo renderizado no playground (abaixo).
+
+## Ideia
+
+Os sites da família **não compartilham paleta** (ttcab é petróleo/creme,
+creeta é petróleo/névoa/magenta). O que se compartilha são os **papéis de
+token** — `surface`, `ink`, `action`, `line`… — com nomes e estrutura iguais.
+Cada site define os valores (`--cg-*`) da sua paleta.
+
+Token nunca é "a cor X": é **papel + contraste medido**. (O Felipe é daltônico;
+decisão de cor sempre por papel e contraste, nunca a olho.)
+
+## Uso (Tailwind v4)
+
+No `globals.css` do site:
+
+```css
+@import "tailwindcss";
+@import "@breathe-ds/ui/theme.css";
+@import "@breathe-ds/ui/tokens/ttcab.css";   /* ou defina os --cg-* inline */
+```
+
+Depois, as utilitárias do Tailwind usam os papéis: `bg-surface`, `text-ink`,
+`border-line`, `bg-action`, `text-action-text`, `rounded-2xl`, etc.
+
+Para um site sem arquivo de tokens pronto, defina os papéis no próprio `:root`:
+
+```css
+:root {
+  --cg-surface: #fbf5e9;
+  --cg-ink: #144753;
+  /* … ver tokens/ttcab.css para a lista completa */
+}
+```
+
+## Papéis de token
+
+| Token (Tailwind) | Papel | `--cg-*` |
+|---|---|---|
+| `surface` | fundo base | `--cg-surface` |
+| `surface-panel` | painel escuro (footer, CTA final) | `--cg-surface-panel` |
+| `ink` | texto principal / títulos | `--cg-ink` |
+| `ink-soft` | texto secundário | `--cg-ink-soft` |
+| `ink-body` | corpo de leitura | `--cg-ink-body` |
+| `action` | CTA / destaque — **nunca texto puro** | `--cg-action` |
+| `action-text` | texto na cor de ação (AA) | `--cg-action-text` |
+| `line` | hairlines / bordas | `--cg-line` |
+| `font-heading` / `font-body` | tipografia | `--cg-font-*` |
+| `radius-xl/2xl/pill` · `ease-cg` | raio e curva de motion | fixos |
+
+## Contrastes medidos — TTCAB (`tokens/ttcab.css`)
+
+Valores pela fórmula WCAG padrão (os mesmos que o `preview/` calcula ao vivo):
+
+| Par | Contraste | Nível |
+|---|---|---|
+| surface `#fbf5e9` / ink `#144753` | 9,41:1 | AAA |
+| surface `#fbf5e9` / ink-soft `#54707a` | 4,86:1 | AA |
+| surface `#fbf5e9` / ink-body `#1e4f5b` | 8,32:1 | AAA |
+| surface `#fbf5e9` / action-text `#9a5d07` | 4,90:1 | AA |
+| surface-panel `#144753` / texto creme | 9,41:1 | AAA |
+
+`action` `#f6a22a` é decorativo/CTA — não usar como texto sobre creme.
+
+## Tipografia da família
+
+Decisão (28/10/2026): **só fontes open-source** — nada de licenciadas (Gotham saiu).
+
+| Papel | Fonte | Observação |
+|---|---|---|
+| `font-heading` | **Quicksand** | títulos, toda a família (Google Fonts) |
+| `font-body` | **Figtree** | corpo, toda a família (Google Fonts) |
+
+**Hierarquia/escala tipográfica:** usar a do **novo.creeta** como guia (bem trabalhada
+e refinada). _A extrair para tokens de tamanho/peso/entrelinha._
+
+## Primeiros consumidores
+
+**ttcab** e **creeta**. A paleta do creeta em `tokens/creeta.css` está
+ilustrativa (marcada `[conferir]`) — fecha ao migrar o creeta.
+
+## O que muda por tema (e o que é fixo)
+
+**Muda por tema:** apenas **cores** e **grafismos** (ThreadRail, OrganicFrame,
+marca d'água…). Cada site/marca da família tem a sua cor e os seus grafismos.
+
+**Fixo em toda a família:** **tipografia** (Quicksand nos títulos + Figtree no
+corpo, em qualquer tema — inclusive o Neutro) e os **ícones** (lucide). Botões
+usam a fonte de corpo semibold (o 600 da Quicksand rende leve demais).
+
+## Decisão — estilo de card
+
+Linguagem de card do DS: **bordas discretas + sombra discreta** (referência: "Famílias
+ contam" do novo.creeta). Nada de borda forte ou sombra pesada. _A virar tokens `--shadow-card` + `--border`._
+
+## Decisão — estilo de card
+
+Linguagem de card do DS: **bordas discretas + sombra discreta** (referência: "Famílias contam" do novo.creeta). Nada de borda forte ou sombra pesada. _A virar tokens `--shadow-card` + `--border`._
+
+## Decisão — largura de hero
+
+Heros **mais largos / full-bleed**, na proporção do **novo.creeta** (mais imersivos, menos
+margem lateral). Vale para `PageVideoHero` e `PageHero`. O hero atual do ttcab é mais contido
+— alargar para o padrão creeta ao migrar. _Vira token/escala de largura de hero._
+
+## Marcas dos sites (`components/marks/`)
+
+Cada site da família tem o símbolo e o wordmark reais, copiados dos arquivos de
+marca (`public/brand`) dos repositórios, separados em dois componentes para a
+`Cortina` e o `Lockup` montarem os arranjos:
+
+| Site | Símbolo | Wordmark | Import |
+|---|---|---|---|
+| TTCAB | `TtcabSymbol` (mãe + bebê, laranja `#F6A22A`) | `TtcabWordmark` (caixa-alta, `currentColor`) | `@breathe-ds/ui/components/marks/ttcab` |
+| Creeta | `CreetaSymbol` (três ondas + ponto, cores da marca) | `CreetaWordmark` (minúsculas, `currentColor`) | `@breathe-ds/ui/components/marks/creeta` |
+
+```tsx
+<Cortina logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
+<Lockup variant="horizontal" size="md" logo={<CreetaSymbol />} wordmark={<CreetaWordmark />} wordmarkRatio={CREETA_LOCKUP.wordmarkPerSymbol} name="creeta" />
+```
+
+**Proporção vem do manual, não do olho.** Cada arquivo de marca exporta
+`*_LOCKUP.wordmarkPerSymbol` (altura do wordmark ÷ altura do símbolo no
+logotipo horizontal: TTCAB 0,557 · creeta 0,469) e `symbolSide` (no TTCAB o
+símbolo fica à **direita** do nome; no creeta e nos demais, à esquerda). O `Lockup` e a `Cortina`
+passam isso ao svg pela variável `--cg-wordmark`; o símbolo injetado recebe a
+altura do tamanho (`size`). Medido nos sites (29/10/2026): no header dos dois o
+símbolo tem **44px** de altura — é o `size="md"` do Lockup. O símbolo aceita
+`color` para versão monocromática (branco sobre painel escuro). O desenho não se
+edita à mão: é o do manual de cada marca.
+
+`Lockup` com `entrance` (e `entranceDelay` em ms) faz a entrada do header do
+novo.creeta: símbolo, depois o nome, depois a tagline; com movimento reduzido vira
+um fade curto.
+
+## Navegação
+
+- **Header**: marca (o app passa o link para a home) · itens · item com dropdown
+  (ícones nos subitens; link final com seta → ou ↗ se `external`) · idioma · CTA.
+  Padrão dos sites: "Início" é só a casa (`icon` + `iconOnly`), rótulo para
+  leitor de tela.
+- **BottomNav**: no celular/tablet a navegação sai do header e vira a barra
+  flutuante inferior. É o código da BarraNavegacao do novo.creeta (= BottomNav
+  do ttcab), neutro por tokens: recebe TODAS as páginas em ordem de importância
+  (`pages`, com o `Icon` lucide) e mostra quantas couberem (64px por aba,
+  ResizeObserver); o resto e as saídas externas (`extras`, com o domínio escrito
+  e seta ↗) vão para o painel "Mais", um popover nativo (Esc, toque fora, sem
+  JS). Véu de gradiente atrás da barra. `hideFrom` = `md` (creeta) ou `lg`
+  (ttcab). `labels` para outro idioma. `embedded` para a moldura da demo.
+- **AnchorNav**: cápsula flutuante de âncoras da página (scroll-spy + indicador
+  deslizante), extraída do TreatmentAnchorNav do ttcab. As seções-alvo precisam
+  de `scroll-mt-*` compatível com o sticky.
+
+## Playground (ver os componentes)
+
+`cd playground && npm install && npm run dev` → kitchen-sink em http://localhost:5177 com os componentes reais renderizados (paleta ttcab).
+
+## Roadmap
+
+- [x] v0.1 — tokens (preset + paletas ttcab/creeta) + preview
+- [x] Accordion (1º componente; padrão de deps injetáveis)
+- [x] Tipografia da família (Quicksand + Figtree, só livres)
+- [ ] **Escalas do novo.creeta** (referência total, aprovado): **tipografia** (tamanhos/pesos/entrelinha)
+      **+ espaçamento/ritmo** (padding de seção, gaps) **+ border-radius padrão** → viram tokens do DS
+- [ ] **Ícones**: empacotar o conjunto do lucide usado pela família, para os
+      componentes importarem/injetarem (sem cada site depender do lucide direto)
+- [ ] **MediaCard** (vídeo/imagem atrás + badge de ícone + título + lead + seta;
+      variante **carrossel horizontal no mobile** com barra de progresso + pause) — aprovado
+- [ ] **TestimonialCard** (depoimento) — aprovado. Variantes: **citação** (card de texto),
+      **vídeo hero** (full-bleed com citação sobreposta), **vídeo ao lado** ("Famílias contam": vídeo + texto).
+      Avaliar um **mix** das duas. **Já existe no ttcab** (TestimonialVideoHero/Card) → extrair/generalizar.
+- [ ] **VideoStoryCard** (vídeo curto, vertical) — aprovado. Play + badge de duração +
+      título + lead + **"Ler a transcrição"** (colapso, reusa o Accordion). Padrão da página de Vídeos.
+      _Nota: o card ainda pode melhorar num update futuro (ok deixar pra depois)._
+- [ ] **ProfessionalCard** (equipe) — aprovado. Duas versões: **small** (foto + nome, fila/linha)
+      e **big** (foto + nome + função + CREFITO + accordions "Trajetória"/"Orientações").
+      Variante com **vídeo**: badge "Apresentação", hover anima o vídeo, e **modal** (vídeo + bio).
+      **Regra de dado:** todo profissional PRECISA ter **CREFITO** vinculado (exigência COFFITO).
+- [x] **PillList** (chips tipo "Condições que atendemos": rótulo + seta, grade que quebra, link "Ver todos")
+- [x] **AnchorNav** (cápsula flutuante de âncoras, scroll-spy + indicador deslizante) — extraída do ttcab (29/10)
+- [x] **Footer** · **PageVideoHero** (loop e player) · **Header** (dropdown, casa) · **BottomNav** · **Cortina** · **Lockup** (5 arranjos) · **BreatheMark**
+- [x] **Marcas dos sites** (`components/marks/`): símbolo + wordmark reais do TTCAB e do Creeta (29/10)
+- [ ] **ThreadRail** (grafismo lateral — fio que desce pela esquerda ligando seções) — aprovado,
+      **já existe no ttcab** → extrair.
+- [ ] **OrganicFrame** (recorte de imagem orgânico, tipo blob) — registrado como **OPÇÃO**
+      (não default pra todos os sites). **Já existe no ttcab** → extrair como variante opcional.
+- [x] Primitivos: Button (com variant link), Container, SectionKicker, Card
+- [ ] Migrar ttcab e creeta para consumir o pacote + `npm publish`

package/components/Accordion.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useId, useState, type ReactNode } from "react";
+
+export type AccordionItem = {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+};
+
+type Props = {
+  items: AccordionItem[];
+  /** id aberto inicialmente (padrão: o primeiro). null = todos fechados. */
+  defaultOpenId?: string | null;
+  /** true (padrão): só um aberto por vez, como no creeta. */
+  single?: boolean;
+};
+
+/**
+ * Accordion / collapse da família Cuidado Global. Cartões em `surface` com
+ * borda `line`, título `ink` e chevron que gira ao abrir. Sem dependência de
+ * app: o ícone é um SVG inline. Anima a altura pelo truque grid-rows (0fr→1fr),
+ * sem medir nada em JS, e respeita prefers-reduced-motion.
+ *
+ * Cores: texto `ink` sobre `surface` (contraste do papel definido pelo site).
+ * Consome os tokens via classes do Tailwind (surface/ink/line) — ver theme.css.
+ */
+export function Accordion({ items, defaultOpenId, single = true }: Props) {
+  const initial =
+    defaultOpenId === null
+      ? []
+      : [defaultOpenId ?? items[0]?.id].filter(Boolean as never as (x: string | undefined) => x is string);
+  const [open, setOpen] = useState<string[]>(initial);
+  const baseId = useId();
+
+  const toggle = (id: string) => {
+    setOpen((cur) => {
+      const isOpen = cur.includes(id);
+      if (single) return isOpen ? [] : [id];
+      return isOpen ? cur.filter((x) => x !== id) : [...cur, id];
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {items.map((it) => {
+        const isOpen = open.includes(it.id);
+        const btnId = `${baseId}-btn-${it.id}`;
+        const panelId = `${baseId}-panel-${it.id}`;
+        return (
+          <div
+            key={it.id}
+            className="overflow-hidden rounded-2xl border border-line bg-surface"
+          >
+            <h3 className="m-0">
+              <button
+                type="button"
+                id={btnId}
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                onClick={() => toggle(it.id)}
+                className="flex w-full items-center justify-between gap-4 px-[clamp(18px,3vw,28px)] py-[clamp(16px,2.4vw,22px)] text-left font-heading text-[1.05rem] font-semibold text-ink transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink"
+              >
+                <span>{it.title}</span>
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  className={`h-5 w-5 flex-none text-ink-soft transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
+                    isOpen ? "rotate-180" : ""
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.25"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </button>
+            </h3>
+            {/* grid-rows 0fr→1fr: anima a altura sem medir em JS */}
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={btnId}
+              // React 18 não conhece `inert` como booleano: string vazia liga, undefined desliga (no 19 o booleano funciona igual).
+              {...({ inert: isOpen ? undefined : "" } as Record<string, unknown>)}
+              className={`grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
+                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              }`}
+            >
+              <div className="min-h-0 overflow-hidden">
+                <div className="px-[clamp(18px,3vw,28px)] pt-0 pb-[clamp(18px,2.6vw,26px)] text-ink-body">
+                  {it.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/AnchorNav.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState, type ElementType } from "react";
+import { Container } from "./Container";
+
+export type AnchorItem = { id: string; label: string };
+
+type Props = {
+  items: AnchorItem[];
+  /** Classe de deslocamento do sticky (altura do header). Padrão `top-20` (header de 80px). */
+  stickyTop?: string;
+  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Navegação contextual de âncoras — cápsula flutuante que acompanha a rolagem
+ * (extraída do TreatmentAnchorNav do ttcab). Dois comportamentos:
+ *  1. Scroll-spy: um IntersectionObserver marca como ativa a seção que cruza a
+ *     faixa ~35% do topo; o pill correspondente acende.
+ *  2. Indicador deslizante: um <span> absoluto mede o pill ativo (offsetLeft/
+ *     Width, imune ao scroll horizontal da cápsula) e desliza até ele na curva
+ *     da família. Em tela estreita a cápsula rola e centraliza o ativo.
+ * Sinal do ativo = o indicador (preenchimento ink/12 + contorno), NÃO cor do
+ * texto: o texto fica sempre `ink` sobre `surface`, sem frame de contraste
+ * fraco. prefers-reduced-motion corta o deslize. As seções-alvo precisam de
+ * `scroll-mt-*` compatível com o sticky (ex.: `scroll-mt-40`).
+ */
+export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const [active, setActive] = useState(items[0]?.id ?? "");
+  const listRef = useRef<HTMLUListElement>(null);
+  const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
+  const [pill, setPill] = useState({ x: 0, y: 0, w: 0, h: 0, ready: false });
+
+  // Scroll-spy
+  useEffect(() => {
+    const sections = items
+      .map((it) => document.getElementById(it.id))
+      .filter((el): el is HTMLElement => Boolean(el));
+    if (!sections.length) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting);
+        if (!visible.length) return;
+        visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        setActive(visible[0].target.id);
+      },
+      { rootMargin: "-35% 0px -60% 0px", threshold: 0 }
+    );
+    sections.forEach((s) => io.observe(s));
+    return () => io.disconnect();
+  }, [items]);
+
+  // Chegada com #hash por navegação client-side: rola até a âncora (no full
+  // load o browser já faz; aqui é idempotente). Reaplica algumas vezes para
+  // vencer o reset tardio de scroll do roteador.
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (!hash || !items.some((it) => it.id === hash)) return;
+    const el = document.getElementById(hash);
+    if (!el) return;
+    setActive(hash);
+    let tries = 0;
+    const id = window.setInterval(() => {
+      el.scrollIntoView({ behavior: "auto", block: "start" });
+      if (++tries >= 4) window.clearInterval(id);
+    }, 60);
+    return () => window.clearInterval(id);
+  }, [items]);
+
+  const measure = () => {
+    const el = linkRefs.current[active];
+    if (!el) return;
+    setPill({ x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight, ready: true });
+  };
+
+  // Mede o pill ativo + revela na cápsula em telas estreitas
+  useLayoutEffect(() => {
+    measure();
+    const el = linkRefs.current[active];
+    const list = listRef.current;
+    if (!el || !list) return;
+    const target = el.offsetLeft - list.clientWidth / 2 + el.offsetWidth / 2;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    list.scrollTo({ left: Math.max(0, target), behavior: reduce ? "auto" : "smooth" });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  // Recalcula em resize (quebras/fontes mudam a largura)
+  useEffect(() => {
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  return (
+    <nav aria-label="Nesta página" className={`sticky ${stickyTop} z-30 py-3 ${className}`}>
+      <Container>
+        <div className="flex justify-center">
+          <ul
+            ref={listRef}
+            className="relative flex max-w-full list-none gap-1 overflow-x-auto rounded-pill border border-line bg-surface/95 p-1.5 shadow-[0_10px_28px_-14px_rgba(0,0,0,0.35)] backdrop-blur [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          >
+            {/* Indicador deslizante */}
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute top-0 left-0 rounded-pill bg-ink/[0.12] shadow-[inset_0_0_0_1px_var(--color-line)] transition-[transform,width,height,opacity] duration-[320ms] ease-cg motion-reduce:transition-none"
+              style={{ width: pill.w, height: pill.h, opacity: pill.ready ? 1 : 0, transform: `translate(${pill.x}px, ${pill.y}px)` }}
+            />
+            {items.map((n) => {
+              const isActive = n.id === active;
+              return (
+                <li key={n.id}>
+                  <L
+                    ref={(el: HTMLAnchorElement | null) => {
+                      linkRefs.current[n.id] = el;
+                    }}
+                    href={`#${n.id}`}
+                    aria-current={isActive ? "true" : undefined}
+                    onClick={() => setActive(n.id)}
+                    className={`relative z-10 inline-block whitespace-nowrap rounded-pill border border-transparent px-3.5 py-2 font-heading text-[0.92rem] font-semibold text-ink transition-[background-color,border-color] duration-200 ease-cg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
+                      isActive ? "" : "hover:border-ink/15 hover:bg-ink/[0.06]"
+                    }`}
+                  >
+                    {n.label}
+                  </L>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </Container>
+    </nav>
+  );
+}

package/components/BackgroundVideo.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  /** Clipe curto, sem som, em repetição (arquivo do próprio site). */
+  src: string;
+  /** Versão maior, baixada só em telas largas (a partir de `from`). */
+  srcLarge?: string;
+  /** Largura mínima (px) para a versão maior. 1024 por padrão. */
+  from?: 768 | 1024;
+  /** Quadro parado: aparece antes de o vídeo carregar, sem JS e com movimento reduzido. */
+  poster: string;
+  /** Quadro parado da versão maior, quando ela é outro vídeo (ex.: vertical no celular, deitado no desktop). */
+  posterLarge?: string;
+  /** Aproxima o vídeo para cortar bordas gravadas no arquivo. */
+  trimEdges?: boolean;
+  /** object-position do vídeo (ex.: "center 20%" p/ manter o rosto num clipe vertical). */
+  objectPosition?: string;
+  /** Rótulos do botão de pausa (injetáveis p/ i18n). */
+  labels?: { pause?: string; play?: string };
+  className?: string;
+};
+
+/**
+ * Vídeo de fundo da família Cuidado Global — espelha o `VideoFundo` do creeta
+ * com os tokens do Breathe (ink/surface). Clipe mudo em repetição, é enfeite:
+ * fica fora da leitura de tela (aria-hidden). Não usa o atributo `autoplay`:
+ * só começa depois de conferir prefers-reduced-motion e economia de dados
+ * (save-data). Tem botão de pausa (WCAG 2.2.2) no canto superior-direito.
+ */
+export function BackgroundVideo({
+  src,
+  srcLarge,
+  from = 1024,
+  poster,
+  posterLarge,
+  trimEdges = false,
+  objectPosition,
+  labels,
+  className,
+}: Props) {
+  const wide = `(min-width: ${from}px)`;
+  const video = useRef<HTMLVideoElement>(null);
+  const [running, setRunning] = useState(false);
+  const [posterNow, setPosterNow] = useState(poster);
+
+  useEffect(() => {
+    if (posterLarge && typeof window.matchMedia === "function" && window.matchMedia(wide).matches) {
+      setPosterNow(posterLarge);
+    }
+  }, [posterLarge, wide]);
+
+  useEffect(() => {
+    const lessMotion =
+      typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData;
+    if (lessMotion || saveData) return;
+    video.current
+      ?.play()
+      .then(() => setRunning(true))
+      .catch(() => setRunning(false));
+  }, []);
+
+  function toggle() {
+    const v = video.current;
+    if (!v) return;
+    if (v.paused) {
+      v.play().then(() => setRunning(true)).catch(() => setRunning(false));
+    } else {
+      v.pause();
+      setRunning(false);
+    }
+  }
+
+  return (
+    <div className={`overflow-hidden ${className ?? ""}`}>
+      <video
+        ref={video}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        poster={posterNow}
+        aria-hidden="true"
+        tabIndex={-1}
+        style={objectPosition ? { objectPosition } : undefined}
+        className={`h-full w-full object-cover ${trimEdges ? "scale-[1.18]" : ""}`}
+      >
+        {srcLarge && <source src={srcLarge} type="video/mp4" media={wide} />}
+        <source src={src} type="video/mp4" />
+      </video>
+      <button
+        type="button"
+        onClick={toggle}
+        aria-label={running ? labels?.pause ?? "Pausar vídeo" : labels?.play ?? "Reproduzir vídeo"}
+        className="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
+      >
+        {running ? (
+          <svg viewBox="0 0 24 24" className="h-[18px] w-[18px]" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1.2" /><rect x="14" y="4" width="4" height="16" rx="1.2" /></svg>
+        ) : (
+          <svg viewBox="0 0 24 24" className="ml-0.5 h-[18px] w-[18px]" fill="currentColor" aria-hidden="true"><path d="M6 3v18l15-9z" /></svg>
+        )}
+      </button>
+    </div>
+  );
+}