Premium — Texto
Split por chars/words/lines, scramble aleatório e efeito typewriter — 3
sistemas declarativos via atributos sw-premium-*. Equivalente ao Lab 05
(demo-text.html) do Smooll original.
Parâmetros disponíveis
| Atributo | Tipo | Descrição | Exemplo |
|---|---|---|---|
sw-premium-split | chars/words/lines | Divide o texto e anima cada unidade | "chars" |
sw-premium-split-stagger | número (s) | Delay entre unidades (sobrescreve o default) | "0.04" |
sw-premium-animate | string | Efeito aplicado a cada unidade do split | "fade-up" |
sw-premium-scramble | presença | Ativa o embaralhamento de caracteres | — |
sw-premium-scramble-chars | string | Pool de caracteres do scramble | "01" |
sw-premium-scramble-speed | número | Iterações por caractere revelado | "3" |
sw-premium-typewriter | presença | Ativa o efeito máquina de escrever | — |
sw-premium-typewriter-speed | número (s) | Segundos por caractere digitado | "0.05" |
sw-premium-typewriter-cursor | string | Símbolo do cursor (padrão: |) | "▌" |
sw-premium-typewriter-repeat | presença | Digita, apaga e repete em loop infinito | — |
sw-premium-typewriter-pause | número (s) | Pausa antes de apagar (só com repeat) | "1.5" |
sw-premium-split="chars"
Cada letra anima individualmente. Stagger automático de 25ms entre chars.
SW PREMIUM
Chars — fade-up
sw-premium-animate="fade-up"
DESFOQUE
Chars — blur-in
sw-premium-animate="blur-in"
DESIGN
Chars — zoom-in + back.out(3)
sw-premium-ease="back.out(3)"
LETRAS
Chars — fade-right + stagger lento
sw-premium-split-stagger="0.06"
GIRO
Chars — rotate-in
sw-premium-animate="rotate-in"
MOLA
Chars — elastic-up
sw-premium-animate="elastic-up"
sw-premium-split="words"
Cada palavra entra individualmente. Stagger automático de 70ms entre palavras.
Cada palavra entra suavemente uma após a outra.
Words — fade-up
sw-premium-animate="fade-up"
Desfoque que resolve palavra por palavra.
Words — blur-up
sw-premium-animate="blur-up"
Palavra por Palavra
Words — zoom-in + back.out(2)
sw-premium-ease="back.out(2)"
sw-premium-split="lines"
Cada linha sobe de dentro de um container com overflow:hidden
injetado automaticamente — efeito de linha revelada.
Design sem limites.
Código que respira.
Lines — reveal (from-y: 120)
sw-premium-from-y="120"
Texto corrido revelado por linha, como num editorial de revista.
Lines — texto corrido
sw-premium-split-stagger="0.08"
Sem uma linha de JavaScript. Só atributos HTML.
sw-premium-scramble
Caracteres aleatórios que vão se resolvendo pro texto final ao entrar na tela.
SW ENGINE
Scramble — padrão
sw-premium-trigger="scroll"
VELOCIDADE 3X
Scramble — rápido (speed: 3)
sw-premium-duration="2"
MATRIX MODE
Scramble — chars binários (01)
sw-premium-scramble-speed="4"
GLITCH EFFECT
Scramble — chars especiais
sw-premium-duration="2"
sw-premium-typewriter
Digita o texto letra a letra com cursor piscante. Role pra ativar cada um.
Olá, SW.
Typewriter — padrão
sw-premium-trigger="scroll"
Velocidade máxima ativada!
Typewriter — super rápido
console.log("sw");
Typewriter — cursor bloco + código
sw-premium-typewriter-speed="0.06"
Sem cursor após digitar.
Typewriter — sem cursor final
Digita, apaga e repete.
Typewriter — repeat loop
Pausa longa antes de apagar.
Typewriter — repeat + pausa longa
sw-premium-typewriter-pause="3"
sw-premium-split="lines" é auto-suficiente — o motor injeta
overflow:hidden em cada linha. Dois casos exigem CSS da página:
1. split="chars"/"words" com efeitos que saem
da caixa (fade-up etc.) — o pai precisa de overflow:hidden
Sem isso, os caracteres ficam visíveis abaixo do texto antes de animar, causando um flash.
.meu-titulo { overflow: hidden; }
2. sw-premium-typewriter — o elemento precisa de
min-height
O texto muda de tamanho enquanto digita. Sem altura mínima, o conteúdo ao redor se move.
.meu-typewriter { min-height: 1.6em; }