Text with a Water Ripple Effect

Practice

• Origin website: https://yoyogipark.trunk-hotel.com/en/about
• Reference:
  • https://codesandbox.io/p/sandbox/threejs-ripple-text-distortion-effect-wlt94?file=%2Fsrc%2FTouchTexture.js%3A111%2C15-111%2C18
  • https://tympanus.net/codrops/2019/10/08/creating-a-water-like-distortion-effect-with-three-js/
  • https://github.com/pmndrs/postprocessing?tab=readme-ov-file
  • https://docs.pmnd.rs/react-three-fiber/getting-started/examples
  • https://threejs.org/docs/index.html#examples/en/geometries/TextGeometry
  • https://drei.pmnd.rs/?path=/docs/abstractions-text--docs

Notes

• Post-processing with threejs.
• Use two canvas: one to capture the gesture and store offset data in color; Another canvas renders the scene.

<Canvas>
  <Screen />
  <EffectComposer>
    <WaterEffect texture={texture} />
    <Noise />
  </EffectComposer>
</Canvas>

<canvas ref={canvasRef} className='absolute left-0 top-0 opacity-0' width={500} height={300} />