Clips y stills

Paquete: @tiendana/utils/logomark

Un clip es una animación del logomark; un still es una pose quieta. Los clips son datos (tablas de eventos con semilla fija) que el motor reproduce con un paso fijo de 1/60 s, así que un clip se ve igual a cualquier frame rate y se puede saltar a cualquier instante.

Características

✅ Empiezan y terminan en SMILE - Los clips se pueden encadenar, repetir en bucle y cortar sin saltos; salvo el retenido y los disfraces
✅ Un clip retenido - form-error termina en ERROR y se queda ahí
✅ Deterministas - La misma semilla produce el mismo clip en cada reproducción y en cada exportación
✅ Tipados - ClipName y StillName listan los nombres válidos; CLIPS, STILLS y CLIP_NAMES los exportan en tiempo de ejecución

Clips

Pulsa un botón para reproducir el clip desde su inicio.

Cargando logomark…

Clip	Duración	Descripción
`hello`	1,5 s	Inclina la cabeza para saludar y parpadea
`blink`	0,8 s	Un parpadeo
`double-blink`	1,0 s	Dos parpadeos seguidos
`play`	1,35 s	Guiño: un ojo se convierte en el chevrón de PLAY
`congrat`	1,4 s	Asiente con ojos felices (CONGRAT) mientras estallan destellos a ambos lados
`mini-congrat`	1,4 s	CONGRAT breve con unos pocos destellos
`away`	2,2 s	Mira a otro lado, echa un vistazo a izquierda y derecha y vuelve
`peek`	1,9 s	Cierra un ojo y espía de lado con el otro
`squint`	1,7 s	Entrecierra los ojos con sospecha y mira de reojo
`error`	1,75 s	Niega con la cabeza y los ojos se convierten en la X de ERROR
`form-error`	1,5 s	El mismo rechazo, pero retenido en ERROR (ver abajo)
`ah`	1,1 s	Los ojos se abren de golpe con un destello: la idea que llega
`doze`	7,2 s	Se duerme con los ojos cerrados, despierta con un doble parpadeo
`wake`	1,6 s	Abre los ojos cerrados y parpadea dos veces al despertar
`thinking`	2,2 s	Mira de lado, inclina la cabeza y parpadea despacio
`draw`	3,6 s	El logo se dibuja a sí mismo y termina con un pop y destellos
`sale`	1,15 s	Un trago que sube por la `d` con un destello
`conduct`	1,05 s	Se inclina como una batuta, con arcos de movimiento
`heartbeat`	0,8 s	Un latido

Las duraciones salen de la tabla de CLIPS; el nombre y la duración también están en cada Clip (name, length).

Clip retenido: `form-error`

Todos los clips empiezan y terminan en SMILE excepto uno retenido (Clip.holds) y, desde 0.6.0, los disfraces (Clip.costume: loading, halloween y christmas). form-error termina en ERROR y se queda ahí, respirando, hasta que el host reproduzca otra cosa. Úsalo para el error de un formulario:

const mark = document.querySelector('tdn-logomark')!;

form.addEventListener('submit', async () => {
  try {
    await save();
    mark.play('congrat');
  } catch {
    mark.play('form-error'); // un segundo fallo lo reproduce de nuevo
  }
});

Un clip retenido se reproduce una vez y se deja ahí: no lo pongas en bucle. Para un error puntual que vuelve a SMILE usa error.

Cargando logomark…

Stills

Poses quietas, que el elemento mantiene con el atributo still (o que usa mountLogomark con la opción still). Los stills son de frente y sin deformar: sin squash, giro ni rotación.

Still	Pose
`smile`	SMILE: dos puntos y la sonrisa; es la pose por defecto
`congrat`	CONGRAT: ojos felices cerrados
`play`	PLAY: un punto y el chevrón en el otro ojo
`error`	ERROR: una X en lugar de ambos ojos
`asleep`	Ojos cerrados
`squint`	Ojos entrecerrados
`peek`	Un ojo cerrado
`away`	Mirando a otro lado
`pop`	Ojos abiertos de par en par
`draw-25`, `draw-50`, `draw-75`, `draw-100`	El logo a medio dibujar, del 25 % al 100 %

<tdn-logomark still="congrat" size="64"></tdn-logomark>

Cargando logomark…

Tipos

import { CLIPS, STILLS, STILL_ACCENTS, CLIP_NAMES, type ClipName, type StillName } from '@tiendana/utils/logomark';

CLIP_NAMES.forEach(name => console.log(name, CLIPS[name].length));

ClipName y StillName son uniones de cadenas:

export type ClipName =
    | 'hello' | 'blink' | 'double-blink' | 'play' | 'congrat' | 'mini-congrat' | 'away' | 'peek' | 'squint'
    | 'error' | 'form-error' | 'ah' | 'doze' | 'wake' | 'thinking' | 'draw' | 'sale' | 'conduct' | 'heartbeat'
    | 'celebrate' | 'wow' | 'doubt' | 'confused' | 'crash' | 'loading' | 'offline' | 'empty' | 'no-results' | 'updating'
    | 'warning' | 'love' | 'happy' | 'surprised' | 'angry' | 'sad' | 'thanks' | 'new-order' | 'typing' | 'yes' | 'no'
    | 'birthday' | 'halloween' | 'christmas' | 'straw-hat' | 'mad-eye' | 'delete' | 'sauron' | 'sauron-armor' | 'smeagol' | 'heisenberg';

export type StillName =
    | 'smile' | 'congrat' | 'play' | 'error'
    | 'asleep' | 'squint' | 'peek' | 'away' | 'pop' | 'wow' | 'doubt' | 'confused' | 'downcast' | 'love' | 'happy' | 'surprised' | 'angry'
    | 'sad' | 'pumpkin' | 'warning' | 'offline' | 'empty' | 'no-results' | 'thanks' | 'new-order' | 'typing' | 'yes' | 'birthday'
    | 'christmas' | 'celebrate' | 'sleepy' | 'updating' | 'crash' | 'straw-hat' | 'mad-eye' | 'delete' | 'sauron' | 'sauron-armor' | 'smeagol'
    | 'heisenberg' | 'draw-25' | 'draw-50' | 'draw-75' | 'draw-100';

Interfaz Clip

export interface Clip {
    readonly name: ClipName;
    readonly length: number;     // segundos
    readonly seed: number;
    readonly cues: readonly ClipCue[];
    /** Termina en su última expresión en lugar de SMILE: se reproduce una vez y se queda ahí. */
    readonly holds?: boolean;
    /** Empieza y termina en la misma pose, no en SMILE: hace bucle como ella misma y no se encadena con nada. */
    readonly costume?: boolean;
}

Para reproducir un clip fotograma a fotograma, ver Canvas propio.

Nuevos en 0.5.0

Necesitan @tiendana/utils 0.5.0 o posterior: con 0.4.0, el atributo clip ignora los nombres que no conoce y play() falla.

Expresiones y estados de página

Clip	Duración	Descripción
`celebrate`	2,0 s	La gran felicitación: un salto con CONGRAT al subir y dos ráfagas de destellos
`wow`	2,1 s	Doble toma: el "¡ah!", luego el WOW, con líneas de impacto a los lados
`doubt`	2,4 s	Un ojo entrecerrado, la cabeza inclinada, la mirada arriba y un "?"
`confused`	2,8 s	La versión divertida: ojos de distinto tamaño, un "?" a cada lado y miradas perdidas
`crash`	3,4 s	El meme de CAT.EXE NOT RESPONDING: se congela temblando entre ventanas de error, muestra la X y reinicia
`loading`	2,0 s	La sonrisa se convierte en una barra de progreso indeterminada que corre hasta su extremo derecho y vuelve, mientras los ojos la saltan al pasar, como una comba. Es un disfraz (ver abajo): hace bucle sin corte. Reprodúcelo en bucle mientras la página carga
`offline`	3,2 s	La marca se convierte en el signo de Wi-Fi en medio de la cara, con los ojos como su punto; sus arcos crecen y buscan señal, y el signo se tacha en rojo antes de volver a ser la marca
`empty`	3,2 s	Sostiene contra la cabeza la caja vacía del catálogo del admin, la da vuelta y la sacude temblando: solo cae una pelusa; la caja se pone triste y la marca se encoge de hombros
`no-results`	4,1 s	Un detective con gorra de Sherlock mira por una lupa con un ojo cerrado, busca de lado a lado, no encuentra nada, niega con la cabeza y termina decepcionado: párpados caídos, mirada abajo y un suspiro. Desde 0.8.0 niega con la cabeza y lleva la gorra de Sherlock; en 0.6.0 y 0.7.0 llevaba un sombrero de fieltro y duraba 3,6 s
`updating`	2,6 s	Mira con paciencia una flecha de sincronizar que gira junto a su cabeza, con un parpadeo lento. Reprodúcelo en bucle mientras algo se actualiza
`warning`	2,8 s	Antes de una acción peligrosa: se tensa y aparece un signo de precaución ⚠ que pulsa; la cara parpadea en el tono sol como una luz de emergencia, con los ojos muy abiertos; mira el signo, tiembla un poco y se calma

Cargando logomark…

Rediseñados en 0.6.0

La tabla describe loading, offline, empty, no-results y warning como son desde 0.6.0. En 0.5.0 eran otros: loading (2,3 s) desenrollaba la d sobre su pista, offline (3,4 s) hacía del palo de la d una antena, empty (2,8 s) miraba la lista vacía y se encogía de hombros, no-results (3,0 s) agrandaba un ojo como lupa junto a un "?" y warning mostraba un "!" rojo. loading es un disfraz solo desde 0.6.0.

doze también gana sus "z" flotando sobre la cabeza.

Stills

wow, doubt, confused y downcast (mirada abajo, párpados caídos).

Cargando logomark…

Detalles de la API

Los tipos AccentKind suman signal, question, exclaim, sync, snore y window; ClipTarget suma 'up-left', 'up-right', 'down', 'down-left', 'down-right' y 'pen' (la punta del trazo de la d); el ClipCue.accent admite hold (segundos a tamaño completo) y ClipCue.draw admite tail (la d se desenrolla desde su cola); MarkDraw suma tail.

Nuevos en 0.6.0

Necesitan @tiendana/utils 0.6.0 o posterior.

Emociones

Clip	Duración	Descripción
`love`	2,7 s	Se enamora: los ojos se vuelven corazones que laten y suben pequeños corazones rojos
`happy`	2,2 s	Ojos felices cerrados (^^) y la cabeza que se mece de lado a lado, sin destellos
`surprised`	2,2 s	Un jadeo con los ojos muy abiertos y la barbilla arriba, y dos parpadeos de incredulidad
`angry`	2,6 s	Los párpados se inclinan hacia dentro y tiembla de enojo mientras late una marca de enojo roja
`sad`	3,0 s	Los párpados caen hacia fuera, la mirada baja, se encorva y corre una lágrima

Para una tienda

Clip	Duración	Descripción
`thanks`	2,1 s	Una reverencia con ojos felices; al incorporarse sube un corazón
`new-order`	2,4 s	Se anima ante una campana que suena, la mira y asiente con ganas
`typing`	2,5 s	Mira abajo mientras escribe y los puntos de una burbuja de chat rebotan a su lado. Reprodúcelo en bucle
`yes`	1,5 s	Asiente dos veces
`no`	1,6 s	Niega con la cabeza, sin la X de ERROR

Fiestas y disfraces

Clip	Duración	Descripción
`birthday`	3,0 s	Con un gorro de fiesta, rebota con ojos felices junto a una torta mientras estallan confeti de colores y destellos dorados
`halloween`	2,5 s	Una calabaza de Halloween: el anillo se llena de naranja con sus costillas, una hoja en el palo de la d y ojos triangulares; se mece entre murciélagos y un "¡bu!"
`christmas`	3,0 s	Una esfera de Navidad con gorro de Papá Noel: el anillo en el tono claro con una banda roja y un zigzag dorado, y el palo de la d como su casquillo y su gancho; se mece con ojos felices entre campanas doradas, destellos y nieve
`straw-hat`	2,6 s	Un sombrero de paja ancho con banda roja y una cicatriz bajo un ojo: una risa ("shishishi") con ^^ y un estirón de goma que vuelve a su sitio vibrando

Cargando logomark…

Disfraces

Un clip con costume (halloween, christmas y loading) empieza y termina en la misma pose, no en SMILE: la calabaza, la esfera y la barra de progreso aparecen desde el primer fotograma hasta el último. Por eso hacen bucle como ellos mismos, pero no se encadenan con ningún otro clip: lo que viene antes o después no enlaza con su pose. Los demás clips siguen empezando y terminando en SMILE.

`straw-hat`

Es un guiño a un personaje ajeno. Úsalo en chats privados, no como contenido público de Tiendana: por eso se deja fuera de la exportación a GIPHY y de los packs de la página de descargas.

Stills

Se suman: love, happy, surprised, angry, sad (cada emoción), pumpkin (la calabaza), warning, offline, empty, no-results, updating, crash, thanks, new-order, typing, yes, birthday, christmas, celebrate, sleepy (ojos cerrados con sus "z") y straw-hat.

Cargando logomark…

Stills con acentos

Un still puede llevar acentos al máximo: STILL_ACCENTS[still] guarda el signo, el accesorio o la ráfaga que hace que el estado se lea sin su clip. Tienen acentos warning (el signo ⚠), empty (la caja), no-results (sombrero de detective y lupa), thanks (un corazón), new-order (la campana con su punto de aviso), typing (la burbuja de chat), yes (la marca de verificación), birthday (gorro, torta y confeti), christmas (gorro de Papá Noel, campanas, copos y destellos), celebrate (las dos ráfagas de destellos), sleepy (las "z"), updating (la flecha de sincronizar), straw-hat (el sombrero y la cicatriz) y crash (las ventanas de error).

El elemento y mountLogomark pintan esos acentos junto con el still, también con movimiento reducido; en un canvas propio píntalos con paintAccents después de paintMark:

import { paintAccents, paintMark, STILL_ACCENTS, STILLS } from '@tiendana/utils/logomark';

paintMark(g, STILLS.warning, place, tones);
paintAccents(g, STILL_ACCENTS.warning ?? [], place, tones);

Movimiento reducido

Con prefers-reduced-motion: reduce, cada clip mantiene el still que representa, y desde 0.6.0 con sus acentos: doze el still sleepy, celebrate el suyo, crash el suyo, offline, empty, no-results, updating y warning el homónimo, halloween el still pumpkin, y love, happy, surprised, angry, sad, thanks, new-order, typing, yes, birthday, christmas y straw-hat el suyo (desde 0.8.0 también mad-eye y delete, y desde 0.11.0 paying). loading, no y power-up se quedan en SMILE.

Nuevo en 0.11.0

Necesita @tiendana/utils 0.11.0 o posterior.

Clip	Duración	Descripción
`paying`	2,8 s	Para un pago en curso, como el cargador del checkout. La marca se asoma por encima de una tarjeta bancaria que sostiene delante (chip dorado con sus contactos, ondas sin contacto, el número en cuatro grupos y un círculo natura en la esquina); la tarjeta da un toque suave, como un pago sin contacto, mientras tres puntos se encienden por turnos debajo. Un parpadeo lento y vuelve a mirarte de frente, lista para encadenar con `celebrate` cuando el cobro se aprueba. Se repite sin corte

La tarjeta es el acento card (CARD). Con prefers-reduced-motion el clip se queda en el still paying, con la tarjeta y la mirada puesta en ella.

Cargando logomark…

Nuevo en 0.9.0

Necesita @tiendana/utils 0.9.0 o posterior.

Clip	Duración	Descripción
`power-up`	3,7 s	Para anunciar un power-up del plan en Admin y el POS. La marca recoge sus trazos (la d hacia lo alto del anillo, la sonrisa hacia su centro, los ojos se apagan) y con esos mismos trazos se dibuja un cohete: el casco en el tono del cuerpo, la base con aletas en el de la cara, donde estaba la sonrisa, y una ventanilla donde estaban los ojos; no le queda cara. Despega sobre su llama con humo, vuela mientras caen líneas de velocidad y cruces amarillas, aterriza y vuelve a dibujarse como la marca. Se repite sin corte

El cohete es el acento rocket (ROCKET) y el vuelo el acento streaks (STREAKS), los dos pintados en las unidades de la marca a través de su rig; el amarillo es POWER_UP.yellow, el del ícono de power-up. La altura del vuelo es la nueva directiva de cara fly (celdas hacia arriba, con over). En estilo sticker, el contorno troquelado de la marca sigue lo que está dibujado cuando el clip no usa pista (track), así que acompaña la transformación.

Cargando logomark…

Nuevos en 0.8.0

Necesitan @tiendana/utils 0.8.0 o posterior.

Clip	Duración	Descripción
`delete`	3,2 s	Antes de eliminar: aparece un bote de basura rojo y rechoncho junto a la cabeza y la marca lo mira; la tapa se abre de golpe, la cara destella y se queda en rojo, los ojos se agrandan, las cejas se preocupan y tiembla; la tapa castañetea, traga saliva y te mira con un "?": ¿seguro? Úsalo en el diálogo que confirma un borrado
`mad-eye`	3,0 s	El ojo mágico de Moody: un globo con iris azul eléctrico en un aro remachado, atado a la cabeza con una correa de cuero, sobre un ojo mientras el otro frunce el ceño. Mira en todas direcciones, gira dos veces, se va hacia atrás hasta perderse y te mira de golpe con un sacudón y un "!" rojo: alerta permanente

Cargando logomark…

El still delete lleva el bote con la tapa abierta (STILL_ACCENTS.delete, el acento trash, en el rojo de error) y la mirada preocupada puesta en él, con la cara en rojo. Ese rojo es MarkDraw.danger (0.8.0), que tiñe la sonrisa y los ojos del rojo de error como alarm los tiñe del sol en warning; un clip lo enciende y lo apaga con ClipCue.draw.danger.

Cameos: `Clip.cameo`

Clip	Duración	Descripción
`sauron`	3,2 s	Los ojos se borran y sobre la cara se abre el Ojo de Sauron: una almendra en llamas con su rendija, que busca a un lado y al otro, se clava en ti con un sacudón y se cierra mientras los ojos se vuelven a dibujar
`sauron-armor`	3,2 s	Sauron en su armadura: los ojos desaparecen tras la placa de un yelmo negro, bajo una corona de cuchillas altas, y delante de la cabeza se alza su guantelete con la palma hacia ti y el Anillo Único brillando en un dedo; gira la cabeza despacio y el Anillo destella
`smeagol`	3,2 s	Los ojos de la marca dan paso a dos discos grandes y planos color cielo, y le salen unos pocos pelos: mira embelesado el Anillo dorado que sostiene, con las pupilas dilatadas; luego Gollum te mira por encima de él con las pupilas como alfileres, el ceño fruncido, temblando; el ceño es un corte en diagonal de los ojos, como las cejas de la marca
`heisenberg`	3,0 s	Le cae un sombrero pork-pie negro y bajan unas gafas oscuras sobre los ojos, con su candado: el bigote dentro de la sonrisa y la barba del mentón fuera, unidos por detrás de ella, que queda entera como su boca; levanta el mentón, un destello cruza las gafas y asiente despacio

straw-hat, mad-eye, sauron, sauron-armor, smeagol y heisenberg citan personajes ajenos: úsalos en chats privados, nunca como contenido público de Tiendana. Desde 0.8.0 lo dice el propio clip con cameo: true, así que cualquier herramienta puede apartarlos sin una lista propia: la exportación a GIPHY y el pack oficial de WhatsApp los dejan fuera (tienen su pack de cameos), y la página de descargas los oculta de sus secciones y sus paquetes, y los muestra aparte a quien los busque.

import { CLIP_NAMES, CLIPS } from '@tiendana/utils/logomark';

const publicClips = CLIP_NAMES.filter((name) => !CLIPS[name].cameo);

Su still, mad-eye, lleva el ojo mágico como acento (STILL_ACCENTS['mad-eye']), mirando arriba y a un lado. El ojo es el acento mad-eye: va sobre la cara, bajo el troquelado de la propia marca, así que en estilo sticker no lleva contorno propio. Su azul y su cuero son citas, como los grises de Windows 98 de crash; en mono se pintan en el tono del cuerpo.

Ver También

Elemento - clip, still, play() y el evento ended
Canvas propio - ClipPlayer con seek y advance
Stickers - todos los clips como packs de WhatsApp
Descargas del logomark - todos los clips y stills en cada formato, generados en el navegador
Logomark en Fundamentos - cuándo usar cada expresión

Características​

Clips​

Clip retenido: form-error​

Stills​

Tipos​

Nuevos en 0.5.0​

Expresiones y estados de página​

Stills​

Detalles de la API​

Nuevos en 0.6.0​

Emociones​

Para una tienda​

Fiestas y disfraces​

Disfraces​

straw-hat​

Stills​

Stills con acentos​

Movimiento reducido​

Nuevo en 0.11.0​

Nuevo en 0.9.0​

Nuevos en 0.8.0​

Cameos: Clip.cameo​

Ver También​

Características

Clips

Clip retenido: `form-error`

Stills

Tipos

Nuevos en 0.5.0

Expresiones y estados de página

Stills

Detalles de la API

Nuevos en 0.6.0

Emociones

Para una tienda

Fiestas y disfraces

Disfraces

`straw-hat`

Stills

Stills con acentos

Movimiento reducido

Nuevo en 0.11.0

Nuevo en 0.9.0

Nuevos en 0.8.0

Cameos: `Clip.cameo`

Ver También