3D Card

Display

Composable 3D scene: container tilts to the mouse while each CardItem floats at its own depth (translateZ) — adapted from Aceternity UI.

3D Card — elementos flutuam em profundidade no hover

Kikito CN

Passe o mouse — o título e o texto flutuam em profundidades diferentes.

Botão flutuante

Instalação via CLI

$ npx kikitocn add card-3d

Interno:

@/lib/utils

Exemplo de uso

3D CardExample.tsx

import { 3DCard } from "@/components/ui/cn/card-3d/3DCard";

export function 3DCardExample() {
  return (
    <3DCard>
      3D Card
    </3DCard>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	—	CardContainer > CardBody > CardItem[]
`containerClassName`	`string`	—	CardContainer: classe no wrapper com perspective
`className`	`string`	—	CardContainer/CardBody/CardItem: classes extras
`translateZ`	`number \| string`	—	CardItem: profundidade do elemento no hover

Voltar para Display

Carregando…