Hover Effect Card

Display

CSS-only 3D tilt card that rotates toward the cursor position via a hidden tracker grid.

Instalação via CLI

$ npx kikitocn add hover-effect-card

Interno:

@/lib/utils

Exemplo de uso

Hover Effect CardExample.tsx

import { HoverEffectCard } from "@/components/ui/cn/hover-effect-card/HoverEffectCard";

export function HoverEffectCardExample() {
  return (
    <HoverEffectCard>
      Hover Effect Card
    </HoverEffectCard>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`columns`	`number`	`5`	Colunas da grade de rastreamento do hover
`rows`	`number`	`5`	Linhas da grade de rastreamento do hover
`maxXRotation`	`number`	`10`	Rotação X máxima em graus
`maxYRotation`	`number`	`10`	Rotação Y máxima em graus
`children`	`ReactNode`	—	Conteúdo do card
`className`	`string`	—	Classes do wrapper interno que gira
`containerClassName`	`string`	—	Classes do container externo

Voltar para Display

Carregando…