Carregando…Carregando…Carregando…Carregando…A word swapping inside a box with layout animation — label mode (static prefix + flipping box) or container mode (box width tracks the word). Adapted from Aceternity UI.
Layout Text Flip — modo label e modo container
better
$ npx kikitocn add layout-text-flip@/lib/utilsmotionimport { LayoutTextFlip } from "@/components/ui/cn/layout-text-flip/LayoutTextFlip";
export function LayoutTextFlipExample() {
return (
<LayoutTextFlip variant="label" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'label' | 'container' | 'label' | label: prefixo + caixa; container: só a caixa que cresce |
text | string | — | Prefixo estático (só em variant='label') |
words* | string[] | — | Palavras que se alternam na caixa |
duration | number | 3000 | ms entre trocas de palavra |
textClassName | string | — | Classe na palavra/caixa |
className | string | — | Classes CSS extras |