Carregando…

Direction Aware Hover

Display

Image card whose label slides in from the edge the cursor entered (atan2) — adapted from Aceternity UI.

Direction Aware Hover — o rótulo entra pela borda de onde o mouse veio

Kikito CN

Design system componível

Instalação via CLI

$ npx kikitocn add direction-aware-hover

Interno:

@/lib/utilsmotion

Exemplo de uso

Direction Aware HoverExample.tsx

import { DirectionAwareHover } from "@/components/ui/cn/direction-aware-hover/DirectionAwareHover";

export function DirectionAwareHoverExample() {
  return (
    <DirectionAwareHover imageUrl="Exemplo">
      Direction Aware Hover
    </DirectionAwareHover>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`imageUrl*`	`string`	—	URL da imagem de fundo
`imageAlt`	`string`	—	Texto alternativo da imagem
`children*`	`React.ReactNode \| string`	—	Conteúdo que desliza da borda de entrada
`childrenClassName`	`string`	—	Classe no rótulo
`imageClassName`	`string`	—	Classe na imagem
`className`	`string`	—	Classe no card

Voltar para Display

Carregando…