Tira de logos

La prueba social. Son dos patrones, no uno: la tira estática y la cinta en bucle.

Leer la versión en texto src/components/tira.css

Qué es

«Trabajamos sobre estas plataformas» y los logos. El archivo trae dos patrones que comparten sección en la landing pero no son la misma pieza, y mezclarlos es el error que este documento intenta evitar.

.tira es estática: frase a la izquierda, logos a la derecha, una fila que envuelve sola en móvil. Es la opción por defecto. No se mueve, y eso es la virtud, no la carencia.

.marquee es la cinta. Los mismos logos desfilando en bucle. Se usa solo si son tantos que no caben en el ancho: es un scroll horizontal automático y se paga con movimiento perpetuo en pantalla y con duplicar la lista en el HTML para que el bucle no tenga costura.

Cómo se importa

@import "@pantherkit/design-system/tokens.css";  /* siempre antes */
@import "@pantherkit/design-system/components.css";

El marcado, vivo

Lo que se ve aquí abajo y lo que hay en el bloque de código son el mismo texto: se inyecta y se imprime desde una sola fuente. Si se separaran, el que se copia sería el que nadie mira.

La tira estática — úsala por defecto

Cuatro o cinco logos se leen de un vistazo. Quietos. Que no se mueva es la virtud: la prueba social se lee en medio segundo y devuelve la mirada al titular de la sección.

Construimos sobre las plataformas que ya usas

Los logos son SVG en línea con data-logo porque la vitrina no se trae los archivos de marca de terceros. El filter del sistema los pasa a blanco igual que a un <img>.

El marcado

<div class="tira">
  <h2 class="tira__frase">Construimos sobre las plataformas que ya usas</h2>
  <ul class="tira__logos">
    <li class="tira__item">
      <svg class="tira__logo" data-logo="aws" viewBox="0 0 120 32" role="img" aria-label="AWS"><text x="0" y="24" font-size="22" font-weight="700" fill="currentColor">AWS</text></svg>
    </li>
    <li class="tira__item">
      <svg class="tira__logo" data-logo="vercel" viewBox="0 0 120 32" role="img" aria-label="Vercel"><text x="0" y="24" font-size="20" font-weight="600" fill="currentColor">Vercel</text></svg>
    </li>
    <li class="tira__item">
      <svg class="tira__logo" data-logo="stripe" viewBox="0 0 32 32" role="img" aria-label="Stripe"><rect width="32" height="32" rx="6" fill="currentColor"/></svg>
    </li>
    <li class="tira__item">
      <svg class="tira__logo" data-logo="supabase" viewBox="0 0 120 32" role="img" aria-label="Supabase"><text x="0" y="24" font-size="18" font-weight="600" fill="currentColor">Supabase</text></svg>
    </li>
  </ul>
</div>

La cinta — solo si no caben

La lista va duplicada en el HTML y el track es aria-hidden: el bucle no tendría costura de otra forma, y una cinta decorativa no es contenido accesible. Al lado va la lista real en .sr-only. Se pausa al pasar el puntero y al entrar el foco con el teclado, para que quien quiera leer un sello pueda pararla.

El marcado

<div class="marquee">
  <div class="marquee-track marquee-track--certs" aria-hidden="true" style="--cinta-duracion: 32s">
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">ISO 27001</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">SOC 2 Tipo II</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">AWS Partner</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">GDPR</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">ISO 27001</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">SOC 2 Tipo II</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">AWS Partner</span></div>
    <div class="marquee-item marquee-item--cert"><span class="marquee-cert-copy text-sm">GDPR</span></div>
  </div>
</div>
<ul class="sr-only">
  <li>ISO 27001</li>
  <li>SOC 2 Tipo II</li>
  <li>AWS Partner</li>
  <li>GDPR</li>
</ul>

Cuándo NO usarla

Es la parte que más valor tiene de esta página. Cada línea está aquí porque costó algo: se probó, se retiró, o se perdieron horas.

La cinta con pocos logos.

Se mueve sin necesidad. Cuesta movimiento perpetuo en pantalla —contra la regla «nada en bucle sin motivo»— y duplicar la lista en el HTML. Si caben, la tira estática los enseña mejor porque se pueden leer.
La tira y la cinta en la misma sección.

Son dos ritmos distintos compitiendo por la misma mirada. En la landing comparten sección por herencia, no por diseño; en algo nuevo, se elige una.
Con los logos como enlaces a los partners.

Es prueba social, no un directorio: cada enlace es una salida del sitio en la sección cuyo trabajo es dar confianza para quedarse. Solo si de verdad hay que enlazar.
Copiando el atributo data-marquee de la landing.

No lo lee nadie. Quedó de una versión con guion que ya no existe. La cinta es CSS puro: la traslación es un @keyframes y la pausa es :hover.
Dos cintas paralelas en el mismo sentido.

Se leen como una sola superficie deslizándose. Por eso .marquee-track--certs va en reverse: en direcciones opuestas se leen como dos bandas.

Clases

.tira: La fila estática. El reparto lo hace space-between: si mañana entra un quinto logo el bloque crece hacia la izquierda y la frase no se mueve.
.tira__frase / .tira__logos / .tira__item / .tira__logo: Frase, lista, celda y logo. El logo va a blanco con filter y al 70% de opacidad: iguala la tira —ninguna plataforma grita más que otra— y la deja como lo que es, una prueba de apoyo.
.marquee / .marquee-track / .marquee-item / .marquee-logo: La cinta. Máscara en los dos extremos para que nada aparezca cortado en seco contra el borde.
.marquee-track--certs: La cinta de certificaciones, en sentido reverse. Dos bandas paralelas moviéndose igual se leen como una sola superficie deslizándose; en direcciones opuestas se leen como dos.
[data-logo]: Gancho para SVG en línea, que no tiene src que mirar. [data-logo="stripe"] baja el símbolo cuadrado de Stripe para igualar su peso óptico con los logotipos horizontales.

Mandos

Custom properties que se redefinen desde fuera sin tocar el archivo del sistema.

--cinta-duracion 48s: La velocidad de la cinta. No es un token y no puede serlo: no hay suceso al que responder —es la velocidad de una correa— y depende de cuántos elementos lleve la lista. Se redefine en .marquee-track--certs desde el consumidor.

Tokens de los que depende

Sin tokens.css importado antes, estas variables no existen: la pieza no falla, se pinta rota en silencio.

--color-text-primary
--color-border
--color-bg-primary
--radius-md
--dur-base
--dur-slow
--ease-out-expo
--ease-spring

Qué queda cuando algo falla

Sin JavaScript funciona todo. No hay guion: ni en la tira ni en la cinta.
Con prefers-reduced-motion la cinta deja de ser cinta: se para, se desenrolla en varias líneas y se puede arrastrar a mano si aun así no cabe. La máscara se quita porque, parada, solo difuminaría contenido que ya no va a pasar por el centro.
El hover sigue subiendo la opacidad del logo con movimiento reducido; solo deja de escalar.

Accesibilidad

El track de la cinta va aria-hidden="true" y la lista real al lado en .sr-only. Duplicada en el DOM, se anunciaría dos veces.
La cinta se pausa en :hover y en :focus-within: quien navega con teclado también necesita parar la correa.
Cada logo lleva su nombre (alt en <img>, role="img" + aria-label en SVG en línea). Un logo sin nombre es una imagen vacía.

Lo que el sistema todavía no resuelve

Valores literales y huecos conocidos. Se escriben para que nadie los confunda con una decisión.

El opacity: 0.7 de los logos es literal. El sistema no tiene escala de opacidades para elementos de apoyo, y el mismo número aparece a mano en el carrusel (0.25 para inertes).