Check out the live version in your browser!
This UI experiment is an attempt to reproduce the (awesome) "Cargo Logistics Website & Branding" and the "Cargo Logistics Website Navigation" dribbble shots by Hrvoje Grubisic.
The video and images used are Thomas Blanchard's work.
This is not production-ready code but a technical challenge/proof of concept.
This experiment is built using the create-react-app utility. I "ejected" it later on to customize the Webpack conf so it could load .glsl files.
To reproduce the "sliced" effect on the video, I went the shader way and used OGL as a framework. Here's a little breakdown:
- Apply an "background-cover" effect to the texture, based on the texture aspect ratio and the canvas aspect ratio, we are able to resize the texture in such a way that it covers the whole canvas while keeping its original aspect ratio (ie resize but not strech).
- Slice the texture into N columns (
float currentColumnIndex = floor(vUv.x * uColumnsCount) / uColumnsCount), apply rotation and a vertical offset based oncurrentColumnIndexI have tried to write the fragment shader in the most comprehensive way i could, feel free to check it out -> src/shaders/slideshow/fragment.glsl
preload-it is used to preload all videos and display the loading progress.
can-autoplay used to check the device ability to autoplay video and provide a fallback if necessary.
GSAP Is used to create and run animations.