Saltar al contenido principal

Stickers

Paquete: @tiendana/utils/logomark

Los clips del logomark como stickers de chat: packs para WhatsApp y GIFs transparentes para GIPHY, que es la vía para que lleguen a TikTok.

Herramienta del repositorio

scripts/logomark-stickers.ts y el script npm run stickers son una herramienta de desarrollo del repositorio JSUtils desde la versión 0.5.0: no se publican en npm ni se incluyen en ningún bundle, así que solo sirven a quien tenga el repositorio clonado.

Sin repositorio

Para un sticker suelto, un GIF o un video sin clonar nada, usa Descargas del logomark. El script sigue siendo la vía para los packs de WhatsApp, con sus límites comprobados, y para los GIFs de GIPHY.

Características​

✅ Todos los clips - Un pack animado con cada clip excepto form-error
✅ Pack de stills - Un pack estático con las poses principales
✅ Estilo sticker - Contorno troquelado, para que se lean sobre cualquier fondo de chat
✅ Límites comprobados - Cada archivo se valida contra los límites de la plataforma antes de escribirse
✅ Cuatro colourways - --colourway primary|reverse|neon|mono

Uso​

Desde la raíz del repositorio JSUtils:

npm run stickers -- <out-dir> [--colourway primary|reverse|neon|mono] [--frame shared|clip]
ArgumentoDescripción
<out-dir>Carpeta de salida; se crea si no existe
--colourwayEl colourway de los tonos; primary por defecto. Si no es primary, los nombres de packs y de archivos llevan el colourway
--frameshared (por defecto): los stickers animados de WhatsApp comparten el cuadro de exportación y dibujan la marca al mismo tamaño, la mitad del lienzo. clip: cada sticker se encuadra por su propio clip, con una marca mayor pero de tamaño distinto en cada sticker. Los GIF de GIPHY siempre se recortan a su clip

Skia (@napi-rs/canvas) pinta los fotogramas y sharp los codifica, ambos en Node. Son devDependencies del repositorio. Con una opción inválida el script termina con el mensaje de uso.

npm run stickers -- ./stickers
npm run stickers -- ./stickers-neon --colourway neon --frame clip

Cada bucle de un sticker arranca en su expresión (la X, los ojos felices y sus destellos, los ojos cerrados) y sigue por SMILE: WhatsApp se detiene en el primer fotograma de un sticker, y el primer fotograma propio de todo clip es el mismo SMILE.

WhatsApp​

Se escribe en <out-dir>/whatsapp/:

  • tiendana/: "Tiendana", el pack oficial, con las expresiones y emociones (28 clips).
  • tiendana_estados/: "Tiendana estados", los estados de página y de tienda: loading, updating, offline, empty, no-results, warning, delete, typing, new-order, sale, draw, conduct, power-up y paying.
  • tiendana_fiestas/: "Tiendana fiestas": birthday, halloween y christmas.
  • tiendana_estaticos/: "Tiendana estáticos", 30 stills, cada uno con sus acentos.
  • tiendana_cameos/ y tiendana_cameos_estaticos/: "Tiendana cameos" y "Tiendana cameos estáticos", los clips con cameo (straw-hat, mad-eye, sauron, sauron-armor, smeagol, heisenberg), animados y estáticos. WhatsApp pide al menos 3 stickers por pack: un pack con menos se deja fuera con un aviso.
  • Con --colourway, el colourway va tras tiendana en la carpeta y en el nombre (tiendana_neon_estados, "Tiendana neon estados").
  • form-error no está en ningún pack: termina retenido y no puede hacer bucle. Todo otro clip está en exactamente un pack (PACKS en el script), y el script no corre mientras un clip nuevo no tenga uno. Sube PACK_VERSION cuando cambien los stickers de un pack, para que WhatsApp lo reemplace.
  • Cada pack lleva su tray.png (el icono de bandeja, 96 px) y los WebP numerados (01_hello.webp, 02_congrat.webp...).
  • contents.json, en la raíz de whatsapp/, describe los packs con emojis y texto de accesibilidad por sticker.

Con --colourway neon, por ejemplo, los packs se llaman tiendana_neon_animated y tiendana_neon_static.

Límites​

Cada archivo se comprueba contra los límites de WhatsApp antes de escribirse; el script falla si alguno no los cumple.

ArchivoLímite
Sticker512 px por 512 px
Sticker animado500 KB y 10 s como máximo
Sticker estático100 KB como máximo
Icono de bandeja50 KB como máximo, a 96 px
PackDe 3 a 30 stickers

Los KB se cuentan como 1000 bytes, la lectura más estricta. Los clips se reproducen a 30 fps; un clip que no cabe en 500 KB (como doze, el más largo) mantiene un fotograma más tiempo solo donde la marca apenas se mueve, de modo que sus parpadeos siguen a 30 fps.

Cómo importarlos​

La estructura (contents.json y una carpeta por pack) es la de los assets de las apps de ejemplo de WhatsApp (github.com/WhatsApp/stickers). Las apps de stickers importan los archivos WebP tal cual.

  1. Copia whatsapp/ (o solo los packs que quieras) a los assets de una app de stickers que lea contents.json, como las apps de ejemplo de WhatsApp.
  2. Compila e instala esa app, y añade cada pack a WhatsApp desde ella.

El procedimiento exacto depende de la app de stickers que uses; consulta el README de github.com/WhatsApp/stickers.

Los packs animados y estáticos son packs distintos (animated_sticker_pack en contents.json), así que se añaden por separado.

GIPHY y TikTok​

Se escribe en <out-dir>/giphy/:

  • Un GIF transparente en bucle por clip (tiendana-hello.gif...), recortado al clip. Los cameos (Clip.cameo) se quedan fuera: citan personajes ajenos y GIPHY publica bajo la marca.
  • tags.txt, con las etiquetas sugeridas de cada GIF: tiendana y varias en español e inglés.

Los GIF van a 25 fps (los retardos de GIF son centésimas de segundo, y 25 es exacto), con la marca a 400 px de alto para que GIPHY pueda reducirla y suavizar los bordes de 1 bit del GIF. El script comprueba las reglas de los stickers de GIPHY: menos de 200 fotogramas, 15 s como máximo y al menos una quinta parte del primer fotograma transparente.

Por qué es la vía de TikTok​

La búsqueda de stickers de TikTok, como la de Instagram, es la de GIPHY. Los stickers llegan a TikTok cuando un canal de marca de GIPHY sube estos GIF: el script prepara los archivos, pero la subida la hace la cuenta de marca en GIPHY.

Ver También​