Creative Agency Website - Anderson Moss

After many months on this solo design and development project I am super proud to present the website for Anderson Moss - a luxury goods and professional services oriented branding and creative digital agency.

The entire project is custom and completed by myself, including a bespoke SCSS grid system with a number of features and components, and a full smooth scroll/scroll animation framework I’ve built from the ground up (as part of our in-house project boilerplate).

Besides the character modelling in blender and usual Three.js scene setup, there are a few key features I’m particularly proud of - First is the camera path traversal - for the purpose of streamlining and expanding this workflow (and for future reusability), I’ve written a module that takes exported curves from blender and converts them on the fly to define both a traversal path and simultaneously a ‘lookat’ path for the camera with various settings for positioning and slerp interpolation to create this smooth animated traversal, which can be attached to any RAF function, or scroll event etc. There are also a couple basic custom shaders to create a chromatic aberration and faux motion blur which are tied into the velocity of the camera traversal.

In addition, one of the trickiest and ironically most subtle features was creating reflections (on the ground surface), that use a normal map for distortion in response to the texture of the ground surface. This was something in my research I noticed the community at large had been struggling to achieve at low cost for a while and I believe I’ve created a functional, reusable solution for this finally (essentially repurposing the box projection functionality in the three.js mirror example, passing in the geometry via the custom material and using a custom shader to distort the output based on the normal map). In the near future I’ll be writing up and releasing the source for this implementation as standalone.

There are obviously many many more elements to this design and build, but please feel free to explore, enjoy and feed back - and an absolutely huge thank you to the contributors and the community on the whole, all of whom make all of this possible.

Thanks for sharing. Looks stylish.

Like this?

https://boytchev.github.io/etudes/threejs/reflection.html

image

Thanks! Yes this is a really cool implementation - I’ll look forward to running through, though it looks like this is essentially duplicating the models as opposed to simply generating the reflection of the whole scene with a box projected camera target - in any case totally missed this when I was building this feature last year - great find!

1 Like

Very good job, I would say artistic vibes, I like it when everything is consistent in the design… Interesting preloader