An interactive landing page showcasing Rakuten’s variable font, expressing unity across 70+ services. Awarded FWA Site of the Day and Awwwards Honorable Mention.
Role
Frontend Developer
Company
Monks
Duration
2 months
The Brief
Rakuten set out to create a landing page that showcased their new superfamily variable font—designed to express the brand’s theme of “Unique, yet unified.” The challenge was to reflect a cohesive identity while demonstrating the font’s flexibility to support 70+ services worldwide.
In close collaboration with Rakuten Design, we built an experience that placed the variable font at its core. Developed with Next.js for performance, the site features GSAP-powered animations to bring the typography to life, and interactive SVGs to ensure crisp, scalable visuals across all devices.
See Project ↗
My role
As a frontend developer, I worked on multiple sections of the website, collaborating closely with UI and motion designers. Here are some of my favorite sections I developed.
Variable font slider
Connecting font-weight of the to the value of the input slider.
Monochrome transition
This element was built with a skewed monochrome style, zooming into a single letter on scroll, shifting the screen from white to black.
Before and After
Scroll or clicking "After" button triggers a GSAP animation that morphs multiple fonts into one variable font, revealing a sharp file size drop through animated numbers.
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 and Awwwards Honorable Mention.
