### Install react-depth-parallax

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Install the library using npm, pnpm, or yarn.

```bash
npm install react-depth-parallax
# or
pnpm add react-depth-parallax
# or
yarn add react-depth-parallax
```

--------------------------------

### Minimal Working Example

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/AGENTS.md

A basic example demonstrating how to set up and use the DepthCard component within a ParallaxProvider. Ensure the wrapper div has explicit dimensions and no background color.

```tsx
import { ParallaxProvider, DepthCard } from "react-depth-parallax";

export default function Page() {
  return (
    <ParallaxProvider>
      {/* Wrapper must have explicit dimensions and NO background colour */}
      <div style={{ width: 400, height: 500 }}>
        <DepthCard
          src="/image.jpg"
          depthSrc="/image-depth.png"
          strength={1}
          smoothing={10}
          depthScale={1}
        />
      </div>
    </ParallaxProvider>
  );
}
```

--------------------------------

### Create React App Setup

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Similar to Vite, Create React App requires no special configuration. Place images in the public folder and reference them from the root.

```tsx
<DepthCard src="/photo.jpg" depthSrc="/photo-depth.png" />
```

--------------------------------

### Vite (React) Setup

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

No special configuration is needed for Vite. Place images in the public folder and reference them from the root.

```tsx
// src/App.tsx
import { ParallaxProvider, DepthCard } from "react-depth-parallax";

function App() {
  return (
    <ParallaxProvider>
      <div style={{ width: 400, height: 500 }}>
        <DepthCard src="/photo.jpg" depthSrc="/photo-depth.png" />
      </div>
    </ParallaxProvider>
  );
}
```

--------------------------------

### Next.js App Router Setup

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Integrate DepthCard in Next.js App Router. The package includes 'use client'. Ensure no overflow: hidden on body/html. Place images in /public.

```tsx
// app/page.tsx  ← a Server Component is fine
import { ParallaxProvider, DepthCard } from "react-depth-parallax";

export default function Page() {
  return (
    <ParallaxProvider>
      <section style={{ width: 480, height: 600 }}>
        <DepthCard src="/hero.jpg" depthSrc="/hero-depth.png" strength={1.4} />
      </section>
    </ParallaxProvider>
  );
}
```

--------------------------------

### Next.js Image Configuration

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Configure next.config.js to allow external image domains if serving images from a CDN. Ensure the server returns the correct CORS headers.

```js
// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com" }],
  },
};
```

--------------------------------

### Multiple DepthCards with ParallaxProvider

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Manages multiple DepthCard components, sharing a single WebGL context and animation frame. Ensure each card is wrapped within ParallaxProvider.

```tsx
<ParallaxProvider>
  <div style={{ display: "flex", gap: 24 }}>
    {cards.map((c) => (
      <div key={c.id} style={{ width: 300, height: 400 }}>
        <DepthCard src={c.image} depthSrc={c.depth} />
      </div>
    ))}
  </div>
</ParallaxProvider>
```

--------------------------------

### Basic Usage with DepthCard

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Use DepthCard within a ParallaxProvider to create a parallax effect. The container must have no background color. Requires a color image and a depth map.

```tsx
import { ParallaxProvider, DepthCard } from "react-depth-parallax";

export default function App() {
  return (
    <ParallaxProvider>
      <div style={{ width: 400, height: 500 }}>
        <DepthCard
          src="/images/photo.jpg"
          depthSrc="/images/photo-depth.png"
        />
      </div>
    </ParallaxProvider>
  );
}
```

--------------------------------

### TypeScript Type Imports

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/AGENTS.md

Importing the necessary types for ParallaxProviderProps and DepthCardProps for TypeScript projects.

```ts
import type {
  ParallaxProviderProps,
  DepthCardProps,
} from "react-depth-parallax";
```

--------------------------------

### Next.js Client Component Wrapper

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

If encountering a 'use client' error in Next.js, wrap the import in a client component. This ensures the component runs on the client side.

```tsx
// components/DepthScene.tsx
"use client";
export { ParallaxProvider, DepthCard } from "react-depth-parallax";
```

--------------------------------

### Basic DepthCard Usage

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Renders a single parallax element using a color image and its corresponding depth map. Forwarded div props like className and style are supported.

```tsx
<DepthCard
  src="/portrait.jpg"
  depthSrc="/portrait-depth.png"
  strength={1.5}
  smoothing={6}
  depthScale={0.8}
  onLoad={() => console.log("ready")}
  className="rounded-2xl overflow-hidden"
  style={{ width: 360, height: 480 }}
/>
```

--------------------------------

### Error Handling Pattern

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/AGENTS.md

Implement an error handling pattern to provide a fallback UI if WebGL is unavailable or shaders fail to compile. The onError callback is provided by ParallaxProvider.

```tsx
const [failed, setFailed] = useState(false);

<ParallaxProvider onError={() => setFailed(true)}>
  {failed ? (
    <img src="/image.jpg" alt="fallback" />
  ) : (
    <div style={{ width: 400, height: 500 }}>
      <DepthCard src="/image.jpg" depthSrc="/image-depth.png" />
    </div>
  )}
</ParallaxProvider>
```

--------------------------------

### ParallaxProvider Error Handling

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Implement an onError callback for ParallaxProvider to handle cases where WebGL is unavailable or shaders fail to compile. This allows for fallback rendering.

```tsx
<ParallaxProvider
  onError={(err) => console.warn("WebGL unavailable:", err.message)}
>
  {children}
</ParallaxProvider>
```

--------------------------------

### WebGL Fallback Handling

Source: https://github.com/rndr-realm/react-depth-parallax/blob/main/README.md

Provides a fallback image when WebGL is not supported by the browser. The onError prop of ParallaxProvider is used to detect WebGL failures.

```tsx
const [webGLFailed, setWebGLFailed] = useState(false);

<ParallaxProvider onError={() => setWebGLFailed(true)}>
  {webGLFailed ? (
    <img src="/photo.jpg" alt="hero" />
  ) : (
    <div style={{ width: 400, height: 500 }}>
      <DepthCard src="/photo.jpg" depthSrc="/photo-depth.png" />
    </div>
  )}
</ParallaxProvider>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.