Glass Effect Demo

Name: Kavera Digital
Address: AU
Price range: $$$

Use OGL VersionInteractive

Code

<GlassEffect
  src="/ezgif-frame-095.jpg"
  stripeCount={40}
  stripeAngle={0}
  distortion={0.3}
  drift={0.1}
  advance={{
    dispersion: 0.2,
    shadow: 0,
    reflection: 0,
    contortion: -0.5,
  }}
  fit="cover"
/>

Three.js Version

Uses React Three Fiber for seamless React integration. Better for projects already using Three.js.

OGL Version

Lightweight alternative using OGL. Closer to the original Framer implementation with smaller bundle size.