3D Pin

Display

A card that tips back in perspective on hover, revealing a floating label with animated ping rings and a light stem — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add pin-container

Interno:

@/lib/utilsmotion

Exemplo de uso

3D PinExample.tsx

import { 3DPin } from "@/components/ui/cn/pin-container/3DPin";

export function 3DPinExample() {
  return (
    <3DPin>
      3D Pin
    </3DPin>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo do card
`title`	`string`	—	Texto da etiqueta que aparece no hover
`href`	`string`	—	URL de destino do link
`className`	`string`	—	Classe no conteúdo do card
`containerClassName`	`string`	—	Classe no <a> externo

Voltar para Display

Carregando…