My Role
Frontend Developer
Frontend UI development, Microinteractions, Design translation into code
Company
Monks
Duration
2 months
Tools
Next.js, JavaScript, GSAP, HTML/CSS, SVG, Figma
An interactive landing page showcasing Rakuten’s new variable font system—expressing unity across 70+ services through motion-driven typography.
Rakuten introduced a superfamily variable font designed to unify its global ecosystem while remaining flexible across products. The landing page places the type system at the center of the experience—using interaction and motion to demonstrate its expressive range.
Built with performance in mind, the site uses Next.js and GSAP-powered animations to create a lightweight, responsive experience where typography acts as both content and interface.
Streamlining handoff between design/motion and development
I worked as a frontend developer across multiple sections of the site, collaborating closely with UI and motion designers to translate design intent into production-ready interactions.
My focus was on:
UI development and layout implementation
GSAP-based microinteractions and scroll animations
Interactive SVG typography
Responsive behavior and performance
Variable font slider
A real-time slider mapped to the font’s weight axis, connecting font-weight to the value of the input slider.
Monochrome "zoom" 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
An interactive button sequence, morphing multiple static fonts into one variable font, paired with animated file size reduction.
Results
The final experience delivered a focused, interactive showcase for Rakuten’s variable font—balancing expressive motion with technical clarity. The project received FWA Site of the Day, Awwwards Honorable Mention and a CSS Design Awards recognition.
