Creating the MASS website felt like I was getting paid to have fun.
Recently I had the pleasure of developing the new website for the talented folks at MASS — a design studio in Fitzroy, Australia. Working together with the team we experimented on some really unique features — which is what this article is all about. I’ve picked out 3 different features of the site to zoom in on. Here goes.
The “bloating” text effect
One of my favourite things about the site is the way the text in the menu and header expands in response to the position of the mouse.
Early on in the concept phase the team had pinned a couple designs to the wall illustrating the how the effect might look on the MASS logo. The idea was that each letter would independently expand and contract, giving it a sense of life, almost as if it were actually breathing. The changing font-weight also created a clever link between “weight” and “mass”.
A quick aside — given that we’re talking about physical properties like weight and mass I thought it’d be perfect to use a physics-based animation library — React Spring. Physics-based animation (using mass, tension, and friction) provides a significant step-up over traditional animation tools (like duration and easing curves) in terms of responsiveness and fluidity. Consider how well the UI in iOS responds to your input, how you can flick something fast or slow, change its direction, interrupt animations — its all physics based, and creates a much more realistic feeling UI.
So after some experimenting with both <Canvas /> and SVG, I found that both were equally capable of adding custom weight to a character by using the stroke-width property. Variable fonts were a good option too but I didn’t go down this route as we had already decided on a non-variable typeface.
I settled on using SVG because unlike Canvas it’s simple to control with CSS and it’s accessible.
Here’s kinda how it works. Whenever the mouse moves, the mouse coordinates are compared against the position of each letter. This gives us how far in pixels the mouse is from any given letter. That distance is then converted into a number that can be set as an inline style on the letter (as stroke-width). So closer letters have a higher stroke-width value, further away letters have a smaller value. (And there’s a few magic numbers in there too but let’s not worry about those.)
Admittedly at the outset I had no idea if the idea would look interesting or if it’d even work. What we ended up with was the result of several weeks of experimentation, failure, and a lot of persistence.
As a bonus, on handheld devices we hook into the accelerometer and animate the “bulge” position based on how you hold your device.
Falling letters
For each of the cases we wanted to create a unique hero component that exemplified a little bit of what the case was about. One in particular already had some really neat branding created in After Effects where letters would collide and fall. I saw this as a pretty great opportunity to recreate the same effect in the browser, whilst also adding the ability drag and throw the letters around using mouse or touch.
To create the effect it would need a 2D physics library. Matter.js was the obvious choice — it’s hugely popular on Github, has great documentation, and it was used to make Pablo the Flamingo. After spending a few hours with it I found that the mouse picking interaction felt a little unrealistic. Objects didn’t respond to mouse speed or click position. Take this demo for example — try clicking and dragging an object by its edge — notice that it doesn’t rotate or move naturally as if it actually had weight.
I decided to explore an alternative library — p2.js. The developer of p2.js also created a 3D physics library called cannon.js which I’d used previously on Listen to Fenton, so thankfully they shared some common terminology and API making it a little easier to get going.
The mouse-picking interaction felt spot-on — as if there’s an actual joint connecting the object and the point where the mouse clicked it. Compare how the interaction feels here with the Matter demo earlier.
With that settled the remaining challenge then was to assign hit-boxes to each letter, stagger them so they drop one-by-one from the top of the screen, and reset them when they exceed the canvas boundaries. Finally I wrapped it all up into a React component, which I’ve re-created as a standalone working demo in the Codesandbox.io embed below.
There’s a few dat-gui options in the demo too. Lowering the stiffness makes it feel like the letters are floating on water. Lowering the relaxation makes it look like the letters are hopping out of a hot frying pan. Hours of fun!
Sequencing the page transitions
I love a nice page transition. It’s often a sign for me that a website has been built with care. When done well they can look downright lovely, having said that though, slow and ostentatious transitions can annoy the user by forcing them to wait. I knew that this site was going to be fast — it was built with performance in mind from the beginning (thanks to Gatsby), so my goal was to add tasteful, quick, non-blocking transitions.
Visually we decided to keep things fairly simple. A page transition would involve 1) fading-in a full screen overlay in the colour of the destination page, and 2) removing the full screen overlay to reveal the new page beneath.
It sounds pretty straightforward but the challenge lay in getting the timing right. As soon as the coloured overlay completely covers the page, React tears down the old page, replacing it with the new page, and once it’s done rebuilding the overlay fades away. And it all happens super quick.
The Performance tab in Chrome dev tools was really helpful — allowing me to step through the transition slowly and helping sequence each step.
You can see in the GIF that during the route transition there are some red markings along the top which indicate a significant drop in frame rate, and an increase in CPU usage. This occurs due to React rebuilding the page — understandably a heavy operation. But thanks to the overlay choreography the frame drop is cleverly disguised resulting in minimal visual lagginess.
The whole transition from route to route happens in less than a second. It’s non-blocking; so if you’re fast enough you can click to a different page or hit the browser back button without needing to wait for the transition to finish and it’ll manage just fine.
As a somewhat related bonus; even with Javascript disabled the site can still be navigated and pages still work (well enough). Gatsby is fantastic at making this kind of stuff easy for developers.
There’s a handful of other neat features packed into the site, like the 3D blob on the homepage, and the interactive map on the contact page (which doesn’t use Google Maps!), but I’ll leave those for you to discover yourself.
Developing the site barely felt like work at all. Credit to MASS for creating a seemingly simple but thoroughly considered design. I had a lot of fun working with them.
And if you’ve made it this far — thank you so much for reading! As a final bonus here are a few concepts we created but which didn’t make the final cut. Enjoy!
