component28

Orbs del ecosistema T28 — indicadores animados de estado para UIs de agentes y productos 28. Motor canvas 2D sin dependencias, con adapters para React y HTML plano.

Cinco estados, cada uno el orb-firma de un producto:

| Estado | Producto | Composición | |---|---|---| | thinking | Think28 | esfera de dots que respira | | working | Hub28 | anillos orbitales alrededor de un núcleo | | connecting | Synapse28 | constelación sináptica | | listening | t28ai | ondas concéntricas con fuente pulsante | | orienting | Acimut | globo con meridiano-escáner |

De serie: dark/light automático (detecta el fondo real), prefers-reduced-motion, pausa fuera del viewport y con el tab oculto, un solo RAF compartido por página, DPR cap 2×, aria-label por estado. ~5 kB gzip el bundle completo de CDN.

Instalación

npm install component28

O sin build, en HTML plano (bundle IIFE autocontenido):

<script src="https://t28.io/orbs/t28-orb.iife.js"></script>
<t28-orb state="connecting" accent="synapse28" size="64"></t28-orb>

Uso

React (Hub28, S28, t28.io…)

import { Orb } from 'component28/react'

<Orb state="working" accent="hub28" size={64} />
<Orb state="listening" accent="t28ai" size={20} />   // perfil inline

Compatible React 18 y 19 (peer dependency opcional — el motor no depende de React).

Custom element (Synapse28, páginas estáticas)

<script type="module">
  import 'component28/element'   // registra <t28-orb>
</script>

<t28-orb state="orienting" accent="acimut" size="64"></t28-orb>

Atributos: state · size · accent · speed · paused · label. Todos reactivos.

Core (cualquier otra cosa)

import { createOrb } from 'component28'

const orb = createOrb(document.querySelector('#slot'), {
  state: 'thinking',
  size: 64,
  accent: 'gold',
})

orb.setState('connecting')
orb.destroy()

Opciones

| Opción | Default | Notas | |---|---|---| | state | 'thinking' | thinking · working · connecting · listening · orienting | | size | 64 | px CSS; dos perfiles afinados: ≥40 (hero) y <40 (inline) | | accent | 'gold' | keyword de producto (gold, hub28, t28ai, synapse28, acimut) o color CSS (#e05555) | | speed | 1 | multiplicador de velocidad | | paused | false | pausa manual (las automáticas van solas) | | label | por estado | aria-label; defaults en español ("Pensando", "Trabajando"…) | | respectReducedMotion | true | frame estático curado si el usuario pide reduced motion |

Theming

Si la página carga los foundation tokens de T28, el motor lee las CSS vars (--t28-color-gold, --t28-product-*) — la fuente de verdad sigue siendo foundation. Sin tokens, usa fallbacks idénticos a [email protected].

Los acentos se ajustan solos para ser legibles: synapse28 (#2E4A4E, oscuro) se aclara sobre fondos dark; gold se oscurece sobre fondos claros. El scheme se detecta del fondo real de la página, no de la preferencia del sistema.

Desarrollo

npm run dev        # demo interactiva (Vite)
npm run typecheck
npm run build      # ESM + CJS + d.ts + IIFE en dist/

Arquitectura y decisiones: docs/ARCHITECTURE.md.

Crédito y licencia

Concepto inspirado en thinking-orbs de Jakub Antalik (MIT). Implementación propia desde cero con identidad y contratos T28.

MIT © Javier Ledesma — T28