Carregando…

Word List Swap

Display

Cycles a word list with a vertical odometer-style swap, staggered per character/word/line, with an imperative next/previous/jumpTo/reset ref — adapted from cuicui.day. Absorbed by Flip Words.

Instalação via CLI

$ npx kikitocn add word-list-swap

Interno:

@/lib/utilsmotion

Exemplo de uso

Word List SwapExample.tsx

import { WordListSwap } from "@/components/ui/cn/word-list-swap/WordListSwap";

export function WordListSwapExample() {
  return (
    <WordListSwap splitBy="words" staggerFrom="first" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`words*`	`string[]`	—	Palavras/frases que se alternam
`rotationIntervalMs`	`number`	`2000`	ms que cada palavra permanece antes de trocar
`loop`	`boolean`	`true`	Volta pra primeira ao chegar na última
`auto`	`boolean`	`true`	Troca automaticamente por intervalo
`splitBy`	`'words' \| 'characters' \| 'lines'`	`'characters'`	Granularidade da animação de troca
`staggerDuration`	`number`	`0`	Segundos entre a entrada de um elemento e o próximo
`staggerFrom`	`'first' \| 'last' \| 'center' \| 'random' \| number`	`'first'`	De onde o stagger se propaga
`onNext`	`(index: number) => void`	—	Disparado após cada troca
`splitLevelClassName`	`string`	—	Classe em cada palavra
`elementLevelClassName`	`string`	—	Classe em cada caractere/palavra individual
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…