@chrono-os/form-animations

Catálogo extensível de animações para renderers de formulário — transições de tela (bloco/pergunta inteiro) + animações de texto (título letra a letra, estilo textify / moving-letters). Framework-agnóstico: só dados + CSS, sem React.

Fonte única

Tudo nasce do array ANIMATIONS em src/index.ts. Cada entrada vira automaticamente: item no seletor do builder, regras CSS (@keyframes + .fa-*) e suporte no renderer.

Como ACRESCENTAR uma animação

Adicione um objeto a ANIMATIONS (via TRANSITIONS ou TEXTS):

{
  id: 'minha-anim',            // id estável (vira theme.transition e classe .fa-minha-anim)
  label: 'Minha animação',     // rótulo PT-BR no builder
  category: 'transition',      // 'transition' (bloco) | 'text' (título por letra/palavra)
  easing: 'ease',              // opcional
  kf: 'from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}',
  // direcional (slide/glide): back?: '...'   |   texto: textMode?: 'letter'|'word', stagger?: '0.03s'
}

Pronto — todos os consumidores que injetam animationsStylesheet() e leem o registry passam a oferecer a nova animação, sem mexer em mais nada.

API

• ANIMATIONS, listAnimations(category?), getAnimation(id), DEFAULT_TRANSITION.
• animationsStylesheet() → string CSS (injete uma vez num <style>). A duração usa var(--form-tdur) (o consumidor controla a velocidade). Inclui guard de prefers-reduced-motion escopado a [data-fa].
• transitionClass(id, dir) → classe .fa-<id> (--back na direção "back").
• textContainerClass(id) → classe do container do título p/ animação de texto; o consumidor quebra o texto em <span> e seta --i (índice) em cada um.

Consumo

Publicado no npm (@chrono-os/form-animations, build tsup ESM+CJS+d.ts):

yarn add @chrono-os/form-animations

Injete o CSS uma vez e use as classes/registry:

<style dangerouslySetInnerHTML={{ __html: animationsStylesheet() }} />
// ...container do form com data-fa; classe do bloco = transitionClass(id, dir);
// título com animação de texto = textContainerClass(id) + spans com --i.

Depois de adicionar uma animação em src/index.ts: npm run build → bump SemVer → npm publish → atualizar os consumidores (yarn upgrade).