Ongoing project: Marketing and E-commerce site for a personal care brand by Renaura Wellness. (Request for Demo)
A sleek but subtly playful theme complemented by a pastel palette and toned polaroid images. All of the interactivity of the site relies on a smoothened scroll giving the effect of solid polaroid and objects over a flat surface.
Brushes and other textured media made using Photoshop if made into vector graphics would be a complex and heavy arrangement of shapes and so generally rasterized transparent images are used. This comes with the limitation of being static and not viable to animate.
I built a system to add turbulence and grain to an SVG based curve to emulate what you’d see using a textured brush in Photoshop.
This gives us the flexibility of SVG combined with the visual aesthetic of a natural brush/chalk.
Codepen illustrating the tool that uses feTurbulence filter over an SVG for the required effect.
The bottle rotation mimicking a 3D motion effect is actually an innovative trick with just JS for scroll-linked animation and CSS to update the position of the label.
This gave us visually pleasing results and fit in with our deadlines as it didn’t require additional technologies such as WebGL and shaders or any libraries that bump up the website size.
The mobile site uses a combination of alternative layouts with slightly reduced animations for performance and usability.