PROJECT DESCRIPTION

This project explores how a static poster can transform into a responsive visual system. Built with p5.js, the composition is structured on a modular grid and animated through generative logic. Instead of treating typography as fixed content, I approached it as a dynamic system that responds to user interaction, allowing motion, scale, and spatial rhythm to shift in real time.

CONCEPT

The goal was to challenge the traditional idea of posters as static objects and reimagine them as living, functional interfaces. Motion is used not as decoration, but as a structural tool that guides hierarchy, attention, and pacing.

DESIGN SYSTEM

The layout is constructed using a modular grid to maintain consistency across type, shapes, and spacing. Repeating geometric modules create visual unity while allowing variation through code-driven parameters.

INTERACTION LOGIC

The system incorporates multi-modal interactions (mouse and keyboard) to transform the viewer from a passive observer into an active participant. A real-time keyboard input feature allows users to "register" by typing their name directly onto the poster, dynamically altering the visual state upon confirmation. Furthermore, elements respond to cursor positioning and hover states—altering animation speeds, changing cursor visuals, and triggering clickable events—to provide intuitive user feedback and reinforce spatial depth.

PROCESS

I began by designing the visual system statically, then translated it into code using p5.js. Through iteration, I adjusted motion speed, spacing ratios, and timing to ensure the animation supported readability rather than distracting from it. I also focused on seamlessly integrating UI elements, like the text input field, into the poster's bold typographic aesthetic without breaking the visual immersion.

TOOLS

p5.js · JavaScript · Generative Design

ROLE

Concept · Design · Coding · Motion System

OUTCOME

This project demonstrates my approach to combining graphic design principles with computational logic to create responsive visual experiences.