Carregando…

Scramble Hover

Display

Scrambled text that decodes on hover and re-scrambles on hover-out, with sequential/direction options — adapted from cuicui.day. Absorbed by Encrypted Text.

Instalação via CLI

$ npx kikitocn add scramble-hover

Interno:

@/lib/utilsmotion

Exemplo de uso

Scramble HoverExample.tsx

import { ScrambleHover } from "@/components/ui/cn/scramble-hover/ScrambleHover";

export function ScrambleHoverExample() {
  return (
    <ScrambleHover text="Exemplo" revealDirection="start" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`text*`	`string`	—	Texto exibido/embaralhado
`scrambleSpeedMs`	`number`	`50`	ms entre trocas de glifo
`maxIterations`	`number`	`10`	Iterações antes de estabilizar (modo não-sequencial)
`sequential`	`boolean`	`false`	Revela caractere a caractere
`revealDirection`	`'start' \| 'end' \| 'center'`	`'start'`	Ordem de revelação no modo sequencial
`useOriginalCharsOnly`	`boolean`	`false`	Embaralha só com os caracteres já presentes no texto
`characters`	`string`	—	Conjunto de caracteres do embaralhamento
`scrambledClassName`	`string`	—	Classe nos caracteres ainda embaralhados
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Display

Carregando…