An interactive landing page showcasing Rakuten’s variable font, expressing unity across 70+ services. Awarded FWA Site of the Day for its design and interactions.
Role:
Frontend Developer
Company:
Monks
Duration:
4 weeks
The Brief
Rakuten's goal was to create a landing page that showcased their new superfamily variable font, embodying the brand's theme of "Unique, yet unified." This font needed to reflect Rakuten's cohesive identity while highlighting the versatility required to support 70+ services globally. The landing page would be a dynamic display of the font's flexibility and brand consistency.
See Project ↗
Tech stack
This project was a collaborative effort between Monks developers, designers, and product managers. With a focus on aesthetics and functionality, we used the Next.js framework for a fast and efficient development environment, ensuring optimal loading speeds. GSAP-powered animations and interactions that brought the font’s variable features to life. And SVG's for browser support and the ability to scale graphics infinitely without degradation.
My role
I worked on multiple sections of the website, but by far my favourites were:
Slider
Connecting font-weightto the value of the input slider.
Before and After
Tween that compresses previous font faces text, into one Variable font. + File size animation between number ranges.
Results
The result was a visually engaging, interactive landing page that captured the essence of Rakuten's variable font. With smooth GSAP-powered animations, users could explore the variable font's dynamic qualities and see how it represents Rakuten's unity and adaptability across its diverse services. This immersive approach earned us the FWA Site of the Day.
