Saltar al contenido principal

Logomark

Paquete: @tiendana/utils/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 <tdn-logomark>, 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.

Cargando logomark…

Características​

✅ Sin framework - Es un custom element estándar; no necesita Angular, React ni three.js
✅ Ligero - Alrededor de 20 kB gzip con todos los clips, a cualquier tamaño y nítido en cada densidad de píxeles
✅ Entry point propio - @tiendana/utils/logomark; el resto de @tiendana/utils nunca lo carga
✅ Accesible - Decorativo por defecto; con label se anuncia como imagen
✅ Respeta el movimiento reducido - Sin animación, muestra la pose que representa cada clip
✅ Eficiente - Se pausa fuera de pantalla y en pestañas ocultas
✅ Exportable - APNG, WebP animado y secuencia PNG desde el mismo renderer, y SVG desde los paths originales

Entry point​

Todo vive bajo @tiendana/utils/logomark:

import { defineLogomarkElement, mountLogomark, paintMark } from '@tiendana/utils/logomark';

Los estilos SCSS de los colourways tienen su propio entry point, @tiendana/utils/logomark/colourways (ver Colourways).

Inicio Rápido​

Registra el elemento una sola vez y úsalo como cualquier etiqueta HTML:

import { defineLogomarkElement } from '@tiendana/utils/logomark';

defineLogomarkElement(); // una vez, en cualquier parte; no hace nada en un render de servidor
<tdn-logomark></tdn-logomark>
<tdn-logomark clip="hello" loop size="96" label="Tiendana"></tdn-logomark>
<tdn-logomark still="error" colourway="reverse"></tdn-logomark>

La primera línea muestra la expresión SMILE a 64 px; la segunda reproduce el clip hello en bucle a 96 px; la tercera mantiene la pose ERROR sobre fondo oscuro.

Sin npm​

Para una página o una herramienta sin acceso al registro privado (una landing de marketing, un HTML suelto, el skill de videotutoriales), este sitio publica el entry point completo como un solo módulo ES, sin dependencias. Cada versión de @tiendana/utils tiene su URL y nunca cambia:

<script type="module">
    import { defineLogomarkElement } from 'https://desing-system.tiendana.com/logomark/lib/0.11.0/logomark.js';
    defineLogomarkElement();
</script>
<tdn-logomark clip="hello" loop size="96" label="Tiendana"></tdn-logomark>

El archivo admite importarse desde cualquier dominio y se cachea como inmutable. Para la versión más reciente sin fijar una, https://desing-system.tiendana.com/logomark/lib/latest/logomark.js sigue a la última publicada: su contenido cambia con cada versión y se cachea solo cinco minutos, así que en una página en producción conviene fijar la versión. latest/version.json dice qué versión es, su URL fija y su sha256, para quien necesite saberlo antes de descargar. Exporta lo mismo que @tiendana/utils/logomark: también mountLogomark y paintMark para un canvas propio.

Qué incluye​

PiezaPara quéPágina
<tdn-logomark>Logomark vivo en cualquier páginaElemento
Clips y stillsLas animaciones y poses disponiblesClips
ColourwaysVariantes de color por fondoColourways
mountLogomark, ClipPlayer, paintMarkDibujar en un canvas propioCanvas propio
clipApng, clipWebp, clipGif, stillImage...Archivos para quien no lee tokens CSSExportación
DescargasTodos los archivos listos, sin código, también videos para CapCutDescargas del logomark
npm run stickersPacks para WhatsApp y GIFs para GIPHY (desde 0.5.0, en el repositorio)Stickers

Angular y React​

  • Angular: usa el wrapper tdn-logomark de @tiendana/ngx-core/logomark, con inputs de señal y el output clipEnd.
  • React 19: pasa atributos y propiedades al custom element tal cual; ver Elemento.

Instalación​

npm install @tiendana/utils

Requiere npm autenticado con tdn auth npm; ver Configuración de CodeArtifact.

Ver También​