📄️ Logomark
El símbolo de Tiendana como código: la d del playbook (p17) con sus cuatro expresiones oficiales (p18), un motor de expresión que lo hace sentir vivo, un renderer 2D, exportación de archivos y ``, un custom element que funciona en cualquier página. Para las reglas de marca (cuándo usarlo, qué expresión elegir) consulta Logomark en Fundamentos; esta sección documenta solo el código.
📄️ Descargas
📄️ tdn-logomark
` es el logomark vivo en cualquier página: un custom element que reproduce clips, mantiene poses y se adapta a los colourways. Se registra con defineLogomarkElement()`.
📄️ Clips y stills
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.
📄️ Colourways
Un colourway es el par de tonos con que se pinta el logomark según el fondo donde vive. El elemento trae cuatro y cada tono es una propiedad CSS que la página puede sobrescribir.
📄️ Canvas propio
Cuando ` no encaja, el módulo expone sus piezas: mountLogomark es el elemento sin el elemento, y ClipPlayer junto a paintMark` es lo mismo fotograma a fotograma, para tu propio bucle de dibujo.
📄️ Exportación de archivos
Archivos del logomark para quien no puede leer tokens CSS: stickers animados y fragmentos de vídeo como APNG, WebP animado o GIF, cada fotograma como PNG en un zip, cualquier still como PNG o WebP, y las expresiones de p18 como SVG. Los fotogramas los pinta paintMark a partir de ClipPlayer, así que un archivo es exactamente lo que reproduce el elemento.
📄️ Stickers
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.