react-3d-card-motion/README.md

A customizable 3D interactive product card built with React & Framer Motion.

# react-3d-card-motion

A customizable **3D interactive product card** built with **React** and **Framer Motion**.  
Perfect for immersive UI experiments, creative product showcases, and modern frontend designs.

## ✨ Features
- Hover-based **3D tilt** (pointer-aware)
- **Drag** interaction powered by Framer Motion
- Accessible: focus/blur “wiggle”, keyboard focusable
- Customizable size, radius, shadow, background, content
- Tiny API, tree-shakeable, ESM + CJS + types

## 📦 Install
```bash
npm install react-3d-card-motion framer-motion
# or
yarn add react-3d-card-motion framer-motion
# or
pnpm add react-3d-card-motion framer-motion
```

## 🚀 Usage
```tsx
import ProductCard from 'react-3d-card-motion';

export default function Demo() {
  return (
    <div style={{ display: 'grid', placeItems: 'center', minHeight: '100vh' }}>
      <ProductCard
        width="320px"
        height="420px"
        title="Awesome Product"
        subtitle="Hover & drag to explore"
        background="linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%)"
      />
    </div>
  );
}
```

## Custom content
```tsx
<ProductCard background="#111" shadow="0 18px 45px rgba(0,0,0,0.5)">
  <div style={{ textAlign: 'center' }}>
    <img src="https://picsum.photos/180" alt="" style={{ borderRadius: 12, marginBottom: 12 }} />
    <h3 style={{ margin: 0 }}>Custom Content</h3>
    <p style={{ opacity: 0.85 }}>Bring your own UI inside the card.</p>
  </div>
</ProductCard>
```

## ⚙️ Props
| Props | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `string` | `'300px'` | Card width |
| `height` | `string` | `'400px'` | Card height |
| `background` | `string` | `'linear-gradient(135deg,#9333ea 0%,#4338ca 100%)'` | Card background |
| `title` | `string` | `'3D Product'` | Title (used if no children) |
| `subtitle` | `string` | `'Hover & drag to explore'` | Subtitle (used if no children) |
| `radius` | `string` | `'16px'` | Card border radius |
| `maxTilt` | `number` | `20` | Maximum tilt angle in degrees |
| `shadow` | `string` | `'0 18px 45px rgba(0,0,0,0.35)'` | Card shadow |
| `draggable` | `boolean` | `true` | Enable drag interaction |
| `initialRotate` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | Initial rotation |
| `children` | `React.ReactNode` | `undefined` | Custom inner content |
| `disableTilt` | `boolean` | `false` | Disable tilt on hover |
| `perspective` | `number` | `800` | Perspective distance in px |
| `style` | `React.CSSProperties` | `{}` | Custom style |
| `className` | `string` | `''` | Custom class name |
| `...rest` | `React.HTMLAttributes<HTMLDivElement>` | `{}` | Other HTML attributes |

## 🧱 Tech
- React (peer dependency)
- Framer Motion (peer dependency)
- TypeScript
- Bundled with ```tsup``` (ESM + CJS + d.ts)

## 📝 License
MIT © Naresh Kumar