3D Card Peeling

Installation

npx kinetic-ui-cli@latest add 3d-card-peel

How It Works

The ThreeDCardPeel component uses advanced CSS 3D transforms (preserve-3d, perspective, rotateX, rotateY) combined with framer-motion's whileHover spring physics. It layers two separate DIVs (a foreground and a background). When hovered, the foreground dynamically alters its origin-top-right rotation to peel away from the container, while injecting a glossy linear-gradient overlay to simulate the lighting change on the sticker's surface.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ThreeDCardPeel } from "@/components/creative/3d-card-peel";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ThreeDCardPeel } from "@/components/creative/3d-card-peel";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ThreeDCardPeel
        frontImage="example"
        backImage="example"
      />
    </div>
  );
}