Motion NYC
Generative Interactive Poster
An interactive typographic poster built with p5.js
that transforms a static event poster into a responsive visual system.
Client
Academic Project
Content
Content
Service Provided
Creative Coding / Interactive Poster Design / Motion Design / Interaction Design
Content
Content
Overview
Motion NYC is an interactive poster for a fictional digital typography exhibition. Because the project centered on motion and digital media, I wanted the poster itself to move and respond rather than remain static. Built with p5.js, the piece reimagines the event poster as a responsive visual system that combines typography, animation, and user interaction in real time.
Concept
The project began with a simple question: what happens when a poster behaves more like an interface than a fixed graphic? Instead of using motion as decoration, I treated it as a structural tool that could shape hierarchy, rhythm, and attention across the composition. The goal was to make movement feel native to the design itself, so the poster would function as a living typographic experience rather than a static promotional image.
Motion System
The poster uses three primary animated elements to create rhythm and a sense of continuous motion. A moving dotted line runs across the center of the composition to guide directional flow. A pulsing date circle expands and contracts through layered rings, creating a breathing effect around the event information. A glowing cursor halo travels across the poster in real time, reinforcing the feeling that the composition is active, reactive, and live.
Interaction
The interactive system responds directly to user input through cursor movement and keyboard input. I replaced the default cursor with a custom white dot, while a glowing ring follows it across the screen to make the poster react to the viewer’s movement. Users can also type their name into the poster to simulate registration, which updates the visual state in real time. I wanted these interactions to feel integrated into the composition rather than layered on top of it, so that motion and input would become part of the typography experience itself.
Design System
The composition is structured on a modular grid that organizes typography, spacing, and repeated geometric forms. Bright color accents, circular modules, and a perspective line system create visual consistency while allowing variation through code driven parameters. Several components are generated algorithmically rather than manually placed, including the repeated dotted line and layered circular forms, which are built through repetition, spacing logic, and transparency shifts.
Outcome
The final result is a poster that behaves more like a small interactive interface than a fixed event graphic. Motion NYC reflects my interest in using code not only to animate design, but to shape how visual information is revealed, navigated, and experienced in real time.
Overview
Motion NYC is an interactive poster for a fictional digital typography exhibition. Because the project centered on motion and digital media, I wanted the poster itself to move and respond rather than remain static. Built with p5.js, the piece reimagines the event poster as a responsive visual system that combines typography, animation, and user interaction in real time.
Concept
The project began with a simple question: what happens when a poster behaves more like an interface than a fixed graphic? Instead of using motion as decoration, I treated it as a structural tool that could shape hierarchy, rhythm, and attention across the composition. The goal was to make movement feel native to the design itself, so the poster would function as a living typographic experience rather than a static promotional image.
Motion System
The poster uses three primary animated elements to create rhythm and a sense of continuous motion. A moving dotted line runs across the center of the composition to guide directional flow. A pulsing date circle expands and contracts through layered rings, creating a breathing effect around the event information. A glowing cursor halo travels across the poster in real time, reinforcing the feeling that the composition is active, reactive, and live.
Interaction
The interactive system responds directly to user input through cursor movement and keyboard input. I replaced the default cursor with a custom white dot, while a glowing ring follows it across the screen to make the poster react to the viewer’s movement. Users can also type their name into the poster to simulate registration, which updates the visual state in real time. I wanted these interactions to feel integrated into the composition rather than layered on top of it, so that motion and input would become part of the typography experience itself.
Design System
The composition is structured on a modular grid that organizes typography, spacing, and repeated geometric forms. Bright color accents, circular modules, and a perspective line system create visual consistency while allowing variation through code driven parameters. Several components are generated algorithmically rather than manually placed, including the repeated dotted line and layered circular forms, which are built through repetition, spacing logic, and transparency shifts.
Outcome
The final result is a poster that behaves more like a small interactive interface than a fixed event graphic. Motion NYC reflects my interest in using code not only to animate design, but to shape how visual information is revealed, navigated, and experienced in real time.
