open-index/open-npm huggingface dataset:
npm package: @malette/transform-viewer
Description: A React component for viewing and manipulating images with Three.js, featuring depth-based displacement effects.
Latest version: 0.1.1

# Transform Viewer Component

A React component for viewing and manipulating images with Three.js, featuring depth-based displacement effects.

## Features

- Image overlay with displacement mapping
- Interactive dragging and scaling
- Skew transformation support
- Multiple blend modes
- Screenshot capability

## Installation

```bash
npm install
```

## Development

To start the development server:

```bash
npm run dev
```

## Building

To build the component:

```bash
npm run build
```

## Usage

```tsx
import TransformViewer from 'transform-viewer';

function App() {
  const viewerRef = useRef(null);

  return (
    <TransformViewer
      ref={viewerRef}
      width={959}
      height={825}
      backgroundImage="/path/to/background.jpg"
      backgroundDepthImage="/path/to/depth.jpg"
      foregroundImage="/path/to/foreground.jpg"
    />
  );
}
```

## Props

- `backgroundImage`: URL of the background image
- `backgroundDepthImage`: URL of the depth map image
- `foregroundImage`: URL of the foreground image

## Methods

- `capture(type?: string, quality?: number)`: Captures the current view as an image blob

## License

MIT