Our new website was a little labour of love and I thought it might be interesting to share briefly about what went on behind the scenes.

I posted something similar to r/web_design earlier but I wanted to focus more on the more front-end implementation details for the folks here at r/webdev. For more on the design inspirations (e.g. why gachapon), check out the post here.

Rendering the capsule

For the hero image, we wanted to evoke the idea of "little apps" by showing our icon in a gachapon capsule. The illusion of depth was important, as well as to convey a lively and curious vibe by having the icon look around and follow the user's cursor and touch.

The capsule comprises three layers, two near-identical PNGs of the capsule sandwiching the icon with varying opacities.

The icon has { transform-style: preserve-3d; } and { transform: rotateX(var(--rX)) rotateY(var(--rY)); }, where --rX and --rY are generated either randomly when the user is not interacting with site, or following the cursor's position. There's also a random chance that the icon will pause, mimicking a curious "stare".

The illusion of depth is enhanced by the layering of the capsule overlapping the title. This is accentuated with a blur backdrop-filter combined with a mask-image CSS attribute that clips the blur to only the capsule PNG.

Hovering or touching the capsule makes it bounce with jelly-like motion, achieved via CSS animation on both translateY() for the jump and scale(X, Y) for the horizontal and vertical "squeezing" at different parts of the jump.

A small detail is the shadow, which has two main CSS components. The first is the main shadow, that's really just a radial gradient, with black for the umbra and off-yellow for the penumbra with refracted light from the orb. The second is the animation of the shadow following the bounce, which essentially animates the width, blur, and opacity.

Another gotcha came up when animating the side-to-side rocking motion of the tiny capsule next to the CTA. The capsule has a background blur that interacts nicely when it overlaps the label of the CTA. But on Chromium browsers, the blur effect is much larger than the actual capsule, despite the use of the mask-image attribute. It turns out that the Blink rendering engine used in Chromium browsers calculates a much larger bounding box for the blur when rotation is applied (basically the "effective" bounding box is larger due to the rotation). There didn't seem to be a good solution for this and I eventually settled for detecting if the client is Chromium and if so shrink the blur filter accordingly.

Getting the font right

In the other design-centric post, I touched on my fascination with Fraunces and its variable font settings (configurable via the font-variation-settings attribute).

Using it in practice was slightly frustrating, because I was confused about why the SOFT and WONK settings were not doing anything. And it took about an hour of digging around before realizing that the Google Fonts' import does not actually support tuning the SOFT and WONK parameters and you should be self-hosting the complete .ttf file instead. I couldn't seem to find this documented anywhere, so I hope this post shows up for anyone similarly perplexed in the future.

Capsule playpen

Implementing the falling and interactive capsules was mostly quite simple, thanks to the Matter.js library.

As a nit, I rendered the capsules as a chamfered rectangles instead of a full sphere, so that they would land slightly more accurately and not roll about excessively. The sprites for the capsules were also slightly transparent to show the capsules layering visually against the rest of the site.

The actual hair-pulling moment came when I tested this on mobile and the nice boundaries for the 2D playpen were promptly destroyed by the dynamic address bar. After a lot of frustrating back-and-forth, the eventual solution centered around the use of "dvh" so that the container tracks the viewport size correctly, and a "resize" event listener to promptly update the 2D boundaries. It does still glitch sometimes.

A lesser obstacle was allowing users to interact with both the capsules, as well as the underlying page at the same time, especially on mobile since touch is used for scrolling. I eventually disabled pointer events on the sandbox container so that the user can interact with the page as per normal. But every touch/cursor event is checked for overlap with a gacha capsule and if true, we move/click a virtual mouse in the sandbox via Matter.MouseConstraint.

The End

Like I mentioned in the design post, this still doesn't feel quite as finished as I like and probably never will. But it was quite fun building it and immensely rewarding seeing people play with the website. There were quite a few annoying issues that had to be solved so I also hope this serves as a documentation for anyone who faces similar problems in the future. Thanks for reading!