SWCore Baixar SWCore
SWCore v1.0.0 · Componentes + Animação · Um produto só

Interface.
Movimento.
Um só núcleo.

SWCore é uma biblioteca web declarativa que reúne 44 componentes de interface e 24 recursos de animação. Você escreve HTML com atributos sw-*; o comportamento, a acessibilidade e os estados responsivos já vêm integrados.

Explorar componentes Baixar dist + fonts Ver instalação
456.1 KBNúcleo minificado
267.8 KBCSS minificado
188.4 KBJS minificado
Rodando agora nesta página, sem clicar em nada
Interativo ×
82%

Isso não é uma imagem — clique em qualquer coisa aqui em cima. A própria entrada deste bloco (subiu com fade ao carregar) já é a área de Animação em ação.

Instalação — biblioteca de componentes

Duas linhas no <head> e um <script> antes do fim do <body>. Não precisa de build, bundler ou framework — funciona em qualquer página HTML. Sem dependência externa nenhuma.

<link rel="stylesheet" href="dist/swcore.min.css">

<!-- fim da página -->
<script src="dist/swcore.min.js"></script>

Produção: use os arquivos .min, menores. Os arquivos swcore.css e swcore.js continuam no pacote para desenvolvimento e depuração.

Paleta completa opcional

Para usar as 26 famílias cromáticas do SWCore, seus 286 tons e transparências, carregue também o módulo de cores. Ele não aumenta o núcleo: são 195.7 KB minificados e apenas 14.6 KB com gzip.

<link rel="stylesheet" href="dist/swcore.min.css">
<link rel="stylesheet" href="dist/swcore-colors.min.css">

<div class="Bazul500 Bop30">Azul 500 com 30%</div>

Abrir a grade completa de cores e copiar classes.

Pra customizar cor primária/secundária/alerta e a fonte, edite as 4 linhas do topo de src/theme.css e rode node build.js de novo.

@theme {
  --color-primary: #6366f1;
  --color-secondary: #14b8a6;
  --color-alert: #f59e0b;
  --font-sans: "Inter", system-ui, sans-serif;
}

Instalação — área de Animação

O CSS e o JS do Motion já vêm dentro de dist/swcore.min.css/dist/swcore.min.js — nenhum arquivo a mais pra baixar do SWCore. O que soma é só uma coisa: GSAP, biblioteca de terceiros que não vem incluída no SWCore. É a única dependência externa do produto inteiro — se você não vai usar Animação, nem precisa baixá-la.

<link rel="stylesheet" href="dist/swcore.min.css">

<!-- fim da página, nesta ordem -->
<script src="dist/gsap-bundle.min.js"></script>
<script src="dist/swcore.min.js"></script>

Sem GSAP carregado, o conteúdo marcado com data-sw continua visível normalmente (só não anima) — um aviso aparece no console, nada quebra.

Como usar

Todo componente é declarado por atributo HTML — sem precisar chamar nada em JS pra a maioria dos casos. O núcleo (sw-core.js) já observa a página inteira: assim que o HTML existir (mesmo inserido depois, via AJAX ou JS), o componente correspondente é inicializado sozinho. A área de Animação segue o mesmo princípio, com seu próprio atributo (data-sw em vez de sw-*) pra não misturar os dois sistemas.

Se você mesmo injetar HTML novo com innerHTML (fora do fluxo automático de mutação), chame SW.reinit(elemento) (componentes) e/ou SWMotion.refresh() (animação) pra garantir que tudo lá dentro seja inicializado.

<button sw-modal-open="#exemplo">Abrir</button>
<div class="sw-modal" id="exemplo">...</div>

<script>
  // opcional — o núcleo já observa mudanças no DOM sozinho
  SW.reinit(document.getElementById('novoConteudo'));
</script>

Sistema de Ícones — 2 pacotes prontos

O SWCore inclui suporte imediato a dois sistemas de ícones complementares:

1. SWIcons (Nativo — +1.000 ícones)

Fonte vetorial ultra-leve (dist/fonts/swicons.woff2) já incluída no swcore.css. Sem dependência nem requisições externas. 

<!-- Ícones gerais: swi-* | Marcas: swil-* | Sólidos: swis-* -->
<i class="swi-home"></i>
<i class="swi-user"></i>
<i class="swil-github"></i>
<i class="swi-shopping-cart"></i>

O que o SWCore pode fazer

  • Cobrir os 44 componentes de interface listados abaixo — interface, formulários, mídia, dados, tudo com a mesma API do SW Framework original.
  • Cobrir 24 efeitos de scroll na área de Animação — revelar, cascata, parallax, prender seção, narrativa em passos, trilho horizontal, sequência de quadros, seções em tela cheia e transição entre páginas.
  • Funcionar sem build step em produção — só HTML + os arquivos já gerados em dist/.
  • Reagir a conteúdo inserido dinamicamente na página (AJAX, JS) sem precisar re-inicializar manualmente na maioria dos casos.
  • Adaptar tema claro/escuro e cores da marca mudando só 4 variáveis em theme.css.
  • Rodar 100% no navegador — os únicos componentes que dependem de rede são Cotação (API pública gratuita), os que você conecta a um backend (Ajax, Table, Content, Infinite Scroll) e o GSAP da área de Animação.

Escopo do produto — o que o SWCore não é

  • Não é um CMS nem gerador de sites — o SWCore é uma biblioteca de comportamento e interface para quem desenvolve com HTML, CSS e JavaScript.
  • Não depende de backend específico — componentes com integração de dados (Tabela AJAX, Infinite Scroll, etc.) se conectam diretamente a qualquer API REST ou backend existente.
  • Não exige Node.js em produção — todos os scripts e folhas de estilo rodam direto e 100% no navegador a partir da pasta dist/.