Mind Dive: find your focus

Project description

Focus. A little weekend experiment whilst playing further with Unicorn Studio Depth mapping and using the new MouseMove event. Messing around led to the creation of this background effect, where a regular image is transformed into that duotone background that comes into focus the more you move the cursor. It created a story around staying active and engaged, less you might lose focus. Going from loose thought bubbles to clarity. With depth mapping adding a faux-3D effect on the duotone character. Dressed within a quick Webflow build with some GSAP interactions and page load animations to tie it up, and captured the video from staging. The outcome: a landing page for a mock wellness product dedicated to help users improve their concentration, where the loading animations of the content and the WebGL background work together to serve the product's story and create a sense of what using the product might feel like.