Wave Image

Demo

cb9c54c4-795f-42a6-804f-9b213e28e85b.mp4

Stack

• vite-react
• three.js (r3f, drei)
• glsl
• gsap

Use

1. Clone this repository

git clone https://github.com/fecapark/wave-image.git

2. Install dependencies

yarn install

npm install

3. Run

yarn dev

npm run dev

What's next?

• Add bending effect(animation)

• Responsive image (cropping as aspect ratio)

• Test pannel: Modify parameters, show geometry wireframe etc.

Shader logics

Later. Or see src/shaders.

• Pointer Tracking Wave

• Ripple Effect when clicked