Word Rotate

EfeitosCLI

Troca uma palavra por vez, 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 { WordRotate } from "aura-ui-effects/word-rotate";

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

Prop Tipo Padrão

wordsobrigatória

Palavras que se revezam. A primeira aparece no SSR e quando o movimento está reduzido.

string[]

—

interval

Milissegundos entre trocas (padrão 2200). 0 deixa a primeira palavra fixa.

Padrão: 2200

number

2200

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

Exportações

WordRotate

Tipos

WordRotateProps

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