Text Wave

Display

Per-character opacity wave shimmer, staggered via motion — accessible full text in aria-label.

Text Wave — per-character opacity shimmer, staggered

Instalação via CLI

$ npx kikitocn add text-wave

Interno:

@/lib/utils@/lib/motionmotion

Exemplo de uso

Text WaveExample.tsx

import { TextWave } from "@/components/ui/cn/text-wave/TextWave";

export function TextWaveExample() {
  return (
    <TextWave>
      Text Wave
    </TextWave>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`string`	—	Texto (string pura, dividido em caracteres)
`duration`	`number`	`1.2`	Segundos por ciclo de pulso de cada caractere
`staggerDelay`	`number`	`0.05`	Atraso entre o pulso de um caractere e o do próximo
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…