# Hover effect question

**URL:** <https://discourse.threejs.org/t/hover-effect-question/16798>\
**Category:** Questions\
**Tags:** animation\
**Created:** [July 5, 2020, 10:45pm UTC](https://discourse.threejs.org/t/hover-effect-question/16798 "2020-07-05T22:45:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mykhailo\_Hudzevatyi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mykhailo_hudzevatyi/32/12030_2.png) [@Mykhailo\_Hudzevatyi](https://discourse.threejs.org/u/Mykhailo_Hudzevatyi)\
**Post date:** [July 5, 2020, 10:45pm UTC](https://discourse.threejs.org/t/hover-effect-question/16798/1 "2020-07-05T22:45:58Z")

</div>

Hi friends, If anyone could help me to understand how can I make a similar mouse hover effect [https://www.designembraced.com/](https://www.designembraced.com/) ? Thank you!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 6, 2020, 10:31am UTC](https://discourse.threejs.org/t/hover-effect-question/16798/2 "2020-07-06T10:31:58Z")

</div>

I have no code ready but I guess I would implement this kind of displacement in the vertex shader based on a normal distribution function in order to achieve the typical “bell curve”. That means you create a mesh based on [PlaneBufferGeometry](https://threejs.org/docs/index.html#api/en/geometries/PlaneBufferGeometry) and an instance of [ShaderMaterial](https://threejs.org/docs/index.html#api/en/materials/ShaderMaterial). The shader needs to evaluate the mouse position so you can use raycasting to find the respective intersection point on the plane. This vector can then be assigned to the shader material as a uniform.

---

<div class="post-metadata">

**Author:** ![Mykhailo\_Hudzevatyi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mykhailo_hudzevatyi/32/12030_2.png) [@Mykhailo\_Hudzevatyi](https://discourse.threejs.org/u/Mykhailo_Hudzevatyi)\
**Post date:** [July 6, 2020, 4:44pm UTC](https://discourse.threejs.org/t/hover-effect-question/16798/3 "2020-07-06T16:44:53Z")

</div>

Thank you @Mugen87 😉 I’II try it right now! I’m new with Three js, sometimes it’s not so clear for understand

---

<div class="post-metadata">

**Author:** ![Mykhailo\_Hudzevatyi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mykhailo_hudzevatyi/32/12030_2.png) [@Mykhailo\_Hudzevatyi](https://discourse.threejs.org/u/Mykhailo_Hudzevatyi)\
**Post date:** [July 6, 2020, 4:47pm UTC](https://discourse.threejs.org/t/hover-effect-question/16798/4 "2020-07-06T16:47:05Z")

</div>

ouu this one looks almost what I need [https://threejs.org/examples/#webgl\_gpgpu\_water](https://threejs.org/examples/#webgl_gpgpu_water)