Texto Animações

O que é

O motor de texto do SWCore oferece 44 variações visuais para transformar títulos, parágrafos e chamadas em experiências cinematográficas: Split (divide em caracteres, palavras ou linhas com stagger e curvas de aceleração), Scramble (decodificação de caracteres aleatórios estilo Matrix/código), Typewriter (digitação com cursor interativo) e Efeitos Especiais / Whole (máscaras verticais, perspectiva 3D, tracking, gradientes e neons em camadas).

Como funciona

O motor oferece 3 modos de execução (data-sw-play): 1. Animação Única ("once" ou ▶ manual): executa suavemente de 0% a 100% com curva cúbica; 2. Animação no Scroll ("auto"): dispara automaticamente quando o elemento entra no campo de visão (IntersectionObserver); 3. Animação com Scroll ("scroll"): o progresso está 100% amarrado ao scroll da página (scrub suave e reversível). Não depende de bibliotecas externas pesadas.

Exemplos

<!-- 1. ANIMAÇÃO ÚNICA: Toca 1 vez ao carregar ou via gatilho manual -->
<h3 data-sw="split" data-sw-mode="chars" data-sw-effect="fade-up" data-sw-play="once">ANIMAÇÃO ÚNICA</h3>

<!-- 2. ANIMAÇÃO NO SCROLL: Dispara assim que entra na tela -->
<h3 data-sw="scramble" data-sw-play="auto">ANIMA NO SCROLL</h3>

<!-- 3. ANIMAÇÃO COM SCROLL: O progresso 0~100% acompanha a rolagem (role pra frente/trás) -->
<h3 data-sw="split" data-sw-mode="words" data-sw-effect="blur-up" data-sw-play="scroll">ANIMA COM O SCROLL</h3>

<!-- 22 Variações de Split em Letras, Palavras e Linhas -->
<p data-sw="split" data-sw-mode="chars" data-sw-effect="fade-up">Chars — fade-up</p>
<p data-sw="split" data-sw-mode="chars" data-sw-effect="blur-in">Chars — blur-in</p>
<p data-sw="split" data-sw-mode="chars" data-sw-effect="zoom-in">Chars — zoom-in</p>
<p data-sw="split" data-sw-mode="words" data-sw-effect="blur-up">Words — blur-up</p>
<p data-sw="split" data-sw-mode="lines" data-sw-effect="line-reveal">Lines — reveal</p>

<!-- 22 Variações de Scramble, Typewriter e Efeitos Especiais (Whole) -->
<h3 data-sw="scramble" data-sw-variant="default">SMOOLL ENGINE</h3>
<h3 data-sw="scramble" data-sw-chars="01">MATRIX MODE</h3>
<p data-sw="type" data-sw-variant="default">Olá, Mundo.</p>
<h3 data-sw="whole" data-sw-effect="mask-up">REVELE A IDEIA</h3>
<h3 data-sw="whole" data-sw-effect="glow-cyan">BRILHO CYAN</h3>

<!-- 1. Split por Letras com Animação Única: -->
<h2 data-sw="split" data-sw-mode="chars" data-sw-effect="fade-up" data-sw-play="once">
  Título de Alto Impacto
</h2>

<!-- 2. Scramble com Disparo Automático no Scroll: -->
<p data-sw="scramble" data-sw-chars="01" data-sw-play="auto">
  MATRIX REVEAL
</p>

<!-- 3. Typewriter com Progresso Conectado ao Scroll: -->
<p data-sw="type" data-sw-variant="code" data-sw-play="scroll">
  const engine = new SWCore();
</p>

<!-- 4. Efeito Especial de Glow Neon no Scroll: -->
<h3 data-sw="whole" data-sw-effect="glow-cyan" data-sw-play="auto">
  BRILHO NEON
</h3>

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

• Não depende de bibliotecas externas pesadas — o motor de texto do SWCore é JavaScript puro executado a 60 FPS com requestAnimationFrame.
• Acessibilidade garantida: a frase original é preservada no atributo aria-label para que leitores de tela leiam o texto contínuo perfeitamente.

Limitações — o que ele não faz

• data-sw-mode="lines" exige que as quebras de linha sejam declaradas explicitamente com <br> no HTML para garantir que o corte aconteça nos pontos exatos pretendidos pelo design.
• Evite usar animações contínuas de digitação/scramble em textos longos de leitura densa — utilize para títulos, cabeçalhos, chamadas de ação e destaques visuais.