Typing Text

EfeitosCLI

Texto que aparece letra por letra, como numa máquina de escrever, para heróis e chamadas.

Também no template SaaS Pro. Ver templates Pro →

Instalação

bash

pnpm add aura-ui-effects aura-ui-tailwind

Depois, importe o CSS uma vez no seu arquivo global (Tailwind v4):

css

/* app/globals.css */
@import "aura-ui-tailwind";
@import "aura-ui-effects/tailwind.css";

tsx

import { TypingText } from "aura-ui-effects/typing-text";

Lidas do código do componente: tipo, valor padrão e o que cada uma faz.

Prop	Tipo	Padrão
`text`obrigatória Frase digitada. Com várias, apaga e digita a próxima.	`string \| string[]`	—
`speed` Milissegundos por letra ao digitar (padrão 60). Apagar leva a metade. Padrão: `60`	`number`	`60`
`pause` Milissegundos com a frase inteira na tela antes de apagar (padrão 1600). Padrão: `1600`	`number`	`1600`
`loop` Volta para a primeira frase depois da última (padrão `true`). Padrão: `true`	`boolean`	`true`
`cursor` Mostra o cursor piscando no fim do texto (padrão `true`). Padrão: `true`	`boolean`	`true`

Também aceita as props de Omit<React.HTMLAttributes<HTMLSpanElement>, "children">.

Exportações

nextTypingStateTypingText

Tipos

TypingTextPropsTypingState

É exatamente o arquivo que o CLI copia para o seu projeto — edite à vontade.