Texto como
elemento animado
Split por chars, words e lines. Scramble aleatório. Efeito typewriter. Tudo declarativo via atributos sm-*.
Parâmetros disponíveis
Atributos dos 3 sistemas de texto do Smooll.
| Tag | Tipo | Descrição | Exemplo |
|---|---|---|---|
| sm-split | string | Divide o texto e anima cada unidade | "chars" |
| sm-split-stagger | número (s) | Delay entre unidades (sobrescreve o default) | "0.04" |
| sm-animate | string | Efeito aplicado a cada unidade split | "fade-up" |
| sm-scramble | presença | Ativa o scramble (embaralhamento de chars) | — |
| sm-scramble-chars | string | Pool de caracteres para o scramble | "ABC...890" |
| sm-scramble-speed | número | Iterações por caractere revelado | "2" |
| sm-typewriter | presença | Ativa o efeito máquina de escrever | — |
| sm-typewriter-speed | número (s) | Segundos por caractere digitado | "0.05" |
| sm-typewriter-cursor | string | Símbolo do cursor (default: |) | "▌" |
| sm-typewriter-repeat | presença | Digita, apaga e repete em loop infinito | — |
| sm-typewriter-pause | número (s) | Pausa antes de apagar (só com repeat) | "1.5" |
sm-split="chars"
Cada letra anima individualmente. Stagger automático de 25ms entre chars.
SMOOLL
Chars — fade-up
sm-animate="fade-up"
sm-trigger="scroll"
ANIMAÇÃO
Chars — blur-in
sm-animate="blur-in"
sm-trigger="scroll"
DESIGN
Chars — zoom-in + back.out(3)
sm-animate="zoom-in"
sm-ease="back.out(3)"
LETRAS
Chars — fade-right + stagger lento
sm-animate="fade-right"
sm-split-stagger="0.06"
GIRO
Chars — rotate-in
sm-animate="rotate-in"
sm-trigger="scroll"
MOLA
Chars — elastic-up
sm-animate="elastic-up"
sm-trigger="scroll"
sm-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
sm-animate="fade-up"
Desfoque que resolve palavra por palavra.
Words — blur-up
sm-animate="blur-up"
Palavra por Palavra
Words — zoom-in + back.out(2)
sm-animate="zoom-in"
sm-ease="back.out(2)"
sm-split="lines"
Cada palavra sobe de dentro de um container overflow:hidden — efeito de linha revelada.
Design sem limites.
Código que respira.
Lines — reveal (from-y: 120)
sm-animate="fade-up"
sm-from-y="120"
Texto corrido revelado por linha como em editorial de revista.
Lines — body text reveal
sm-animate="fade-up"
sm-split-stagger="0.08"
Sem uma linha de JavaScript. Só HTML.
sm-scramble
Caracteres aleatórios que vão se resolvendo para o texto final. Role para ativar.
SMOOLL ENGINE
Scramble — padrão
sm-trigger="scroll"
VELOCIDADE 3X
Scramble — rápido (speed: 3)
sm-scramble-speed="3"
sm-duration="2"
MATRIX MODE
Scramble — chars binários (01)
sm-scramble-chars="01"
sm-scramble-speed="4"
GLITCH EFFECT
Scramble — chars especiais
sm-scramble-chars="░▒▓█"
sm-duration="2"
sm-typewriter
Digita o texto letra a letra com cursor piscante. Role para ativar cada um.
Olá, Mundo.
Typewriter — padrão
sm-trigger="scroll"
Velocidade máxima ativada!
Typewriter — super rápido
sm-typewriter-speed="0.02"
console.log("smooll");
Typewriter — cursor bloco + código
sm-typewriter-cursor="▌"
sm-typewriter-speed="0.06"
Sem cursor após digitar.
Typewriter — sem cursor final
sm-typewriter-cursor=""
Digita, apaga e repete.
Typewriter — repeat loop
sm-typewriter-repeat
Pausa longa antes de apagar.
Typewriter — repeat + pause
sm-typewriter-pause="3"
sm-typewriter-speed="0.04"
CSS OBRIGATÓRIO?
O sm-split="lines" é auto-suficiente — o Smooll injeta overflow:hidden automaticamente em cada linha. Os outros dois casos precisam de CSS da página:
1. sm-split="chars" ou "words" com fade-up — 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. sm-typewriter — elemento precisa de min-height para não pular o layout
O texto muda de tamanho enquanto digita. Sem altura mínima, o conteúdo ao redor se move.
.meu-typewriter { min-height: 1.6em; }