Keyi Fu

WorkResume

CapitaLand
Project Overview TeamJessica Tan Paola Demichelis
Bianca Mente
My RoleCreative Developer
Interaction Designer Main ToolP5.JS
WebGL
While working at Design Bridge and Partners, our creative technology team was tasked with bringing CapitaLand’s new brand identity to life through interactivity. To support their goal of demonstrating industry leadership and innovation, we transformed static visual assets into a generative branding tool. 

This tool enables CapitaLand’s internal team to easily create dynamic brand materials using intuitive sliders and buttons—empowering them to explore, customize, and scale their visual language with ease.

---

Process PRIMARY VISUALThe system is built around three core concepts: ‘disrupting, effecting, impact‘; ‘guiding’; and ‘leading, pioneering’. A red dot represents CapitaLand, while a group of blue dots responds to it - visually expressing how the brand disrupts, guides, and leads within the industry.



GENERATIVE
TOOLs To make all visual materials generative, we used P5.js and WebGL to recreate each visual as an individual sketch, allowing key elements to become dynamic and controllable through sliders and buttons. Dynamic Red Dot
The red dot tracks the position of the mouse, allowing clients to decide where to place it and generate motion graphics accordingly.



Control Over Color
Users can control the colors of the dots and background using buttons. With a simple click, they can generate new visual materials featuring beautiful color palettes.


Control Over Blue DotsThe size and density of the blue dots are adjustable via sliders.