Typing Animation
Animação de digitação para frases curtas, chamadas editoriais e destaques de produto no ecossistema MASI.
Variações
Tamanhos, ritmos e frases alinhadas a negócios, inovação e tecnologia.
Display
Headline compacta
Texto de apoio
Inicia ao aparecer
Padrão de implementação
Snippets práticos para usar e customizar o componente.
Uso básico
import { TypingAnimation } from "@/components/magicui/typing-animation"
<TypingAnimation>
Estratégia, inovação e negócios em movimento.
</TypingAnimation>Uso com className
<TypingAnimation
as="h2"
duration={2200}
className="text-[32px] font-bold leading-[1.12] text-foreground"
>
Construindo o futuro dos negócios.
</TypingAnimation>Delay e startOnView
<TypingAnimation
as="p"
speed={34}
delay={250}
startOnView
className="text-[18px] leading-[1.6] text-muted-foreground"
>
Tecnologia, estratégia e execução.
</TypingAnimation>Props
API disponível no componente TypingAnimation.
children
string
-
Texto exibido pela animação. Use frases curtas.
text
string
-
Alternativa a children quando o texto precisa vir como prop.
as
"span" | "p" | "h1" | "h2" | "h3" | "div"
"span"
Elemento HTML usado no wrapper do texto.
speed
number
40
Tempo em milissegundos entre cada caractere.
duration
number
-
Duração total em milissegundos. Quando informado, tem prioridade sobre speed.
delay
number
0
Espera inicial em milissegundos antes da digitação começar.
startOnView
boolean
false
Inicia a animação quando o componente entra na viewport.
className
string
-
Classes Tailwind para tipografia, cor e espaçamento.
Acessibilidade e implementação
Cuidados para usar animação textual sem prejudicar leitura.
Acessibilidade
O texto animado deve continuar legível durante e depois da animação.
Evite parágrafos longos; use frases curtas e diretas.
Não dependa apenas da animação para comunicar informação crítica.
O componente respeita prefers-reduced-motion e exibe o texto completo.
O texto final fica disponível por aria-label enquanto a animação visual roda.
Notas de implementação
A animação roda em um Client Component isolado.
duration define o tempo total; speed define o intervalo por caractere.
className controla a aparência com tokens do design system.
startOnView usa IntersectionObserver para iniciar apenas quando visível.
Variáveis CSS internas expõem delay e duração para futuras extensões.
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter