Carregando…Carregando…Carregando…Carregando…Super texto animado: uma entrada que despacha por `effect` para typewriter/morph/gradient/number.
$ npx kikitocn add text-effectimport { TextEffect } from "@/components/ui/cn/text-effect/TextEffect";
export function TextEffectExample() {
return (
<TextEffect />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
effect | 'typewriter' | 'morph' | 'gradient' | 'number' | 'typewriter' | Tipo de efeito; despacha para o renderer correspondente. As demais props variam conforme o efeito |
texts | string[] | undefined | effect='typewriter': frases digitadas em sequência |
words | string[] | undefined | effect='morph': palavras alternadas com transição de morph |
value | number | undefined | effect='number': valor numérico animado a partir do anterior |
children | ReactNode | undefined | effect='gradient': texto preenchido com o gradiente |
from | string | 'var(--ks-violet)' | effect='gradient': cor inicial do gradiente |
to | string | 'var(--ks-rose)' | effect='gradient': cor final do gradiente |
animate | boolean | false | effect='gradient': anima o fluxo do gradiente continuamente |
speed | number | 60 | effect='typewriter': velocidade de digitação em ms por caractere |
interval | number | 2500 | effect='morph': intervalo entre trocas de palavra em ms |
duration | number | 800 | effect='number': duração da animação em ms |
Text Effect — effect="typewriter" · selecione a variante acima
Typewriter — type, pause, delete, loop
We design
Morphing Text — cycling animated words
We build interfaces
Fast delivery cycles
Text Gradient — gradient text with optional animation
Animated gradient flow
Click to animate