WebGL depth-map parallax for React.

Image
Image
Depth map
Depth map

Installation

$ npm install react-depth-parallax

Usage

App.tsx
import { ParallaxProvider, DepthCard } from "react-depth-parallax";
export default function App() {
return (
<ParallaxProvider>
<DepthCard src="/image.jpg" depthSrc="/depth.png" />
</ParallaxProvider>
);
}

Playground

Invert
DepthCard
<DepthCard
src="/image.jpg"
depthSrc="/depth.png"
strength={1.4}
invert={false}
depthScale={1.0}
/>