Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
marcellnagy

Interactive Smoke Distortion on Images

Recommended Posts

Hi!

I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still.

The site and effects in question are:

Home Page - https://panamaera.fr/

404 Page - https://panamaera.fr/404 

About Page - https://panamaera.fr/about
 

There seem to be two effects at play.

  • A Canvas over images/videos, that generates a smokey distortion effect, rendering the smoke depending on what visual is underneath the canvas.
    • The Canvas remains active between pages, registering a page change just like a visual change in a video, creating the fading smoke distortion transition between pages and their visual material.
  • A mouse hover effect with smoke & distortion. The smoke is moving in synch with the Canvas' smoke, while the pointer clears the Canvas from over the image and lightens it a bit.

 

On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects.


As I am looking to learn to recreate this effect, my questions are:

  • What coding methods and techniques are they based on (within the world of the above mentioned tools)? What are the exact & relevant coding topics I should look for education on?
  • How would you go about recreating these effects?

 

 


 

 

Link to comment
Share on other sites

1 hour ago, marcellnagy said:

On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects.

 

The wow factor comes WebGL shaders written in GLSL. It's not easy. Probably one of the hardest things to program. Go to shadertoy and click on something interesting. You'll see the code.

https://www.shadertoy.com/browse

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks for the giving directions @OSUblake, also Shadertoy does have a lot of great material too!
Do you think the effect code they have written for the site could be peeled out of the source of the site, or would it be an impossible task?

Link to comment
Share on other sites

25 minutes ago, marcellnagy said:

Do you think the effect code they have written for the site could be peeled out of the source of the site, or would it be an impossible task?

 

It'd be pretty hard because their code is minified and split up into chunks, so it's really not human readable.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

47 minutes ago, marcellnagy said:

Do you think the effect code they have written for the site could be peeled out of the source of the site, or would it be an impossible task?

It's an illegal task as well.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×