Carregando…

Text Effect

Display

Super texto animado: uma entrada que despacha por `effect` para typewriter/morph/gradient/number/shine/wave.

Instalação via CLI

$ npx kikitocn add text-effect

Exemplo de uso

Text EffectExample.tsx

import { TextEffect } from "@/components/ui/cn/text-effect/TextEffect";

export function TextEffectExample() {
  return (
    <TextEffect effect="typewriter">
      Text Effect
    </TextEffect>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`effect`	`'typewriter' \| 'morph' \| 'gradient' \| 'number' \| 'shine' \| 'wave' \| 'generate' \| 'flip' \| 'rainbow'`	`'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 (também usado por effect='shine'/'wave', em segundos)
`staggerDelay`	`number`	`0.05`	effect='wave': atraso entre o pulso de um caractere e o do próximo, em segundos
`filter`	`boolean`	`true`	effect='generate': aplica blur-in além do fade ao revelar cada palavra
`text`	`string`	`undefined`	effect='rainbow': texto renderizado caractere a caractere com cor variando

Voltar para Display

Carregando…