Text Hover Effect

Display

SVG text with a self-drawing stroke and a gradient fill revealed only under a cursor-following radial mask — adapted from Aceternity UI.

Text Hover Effect — passe o mouse pra revelar o gradiente sob a máscara

Instalação via CLI

$ npx kikitocn add text-hover-effect

Interno:

@/lib/utilsmotion

Exemplo de uso

Text Hover EffectExample.tsx

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

export function TextHoverEffectExample() {
  return (
    <TextHoverEffect text="Exemplo" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`text*`	`string`	—	Texto renderizado dentro do SVG
`duration`	`number`	`0`	Segundos da transição da máscara radial
`fontSize`	`number`	`56`	Tamanho da fonte no espaço do viewBox (300×100)
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…