Graphic
Interaction

Interactive Web Design

Alyssa Chai
2025
This interactive web project explores the relationship between typography, motion, and user input through HTML, CSS, and JavaScript.

The website transforms text into an interactive surface, where individual characters respond dynamically to cursor movement, clicks, and gestures. Subtle wave-like distortions follow the mouse, while different interactions trigger animated reactions such as scattering and falling text.

By treating typography as a responsive material rather than static content, the project emphasizes how motion and interaction can enhance visual expression and engagement. The design focuses on real-time feedback, spatial responsiveness, and playful exploration, creating an immersive typographic experience that reacts directly to the user’s presence.








Fingertip Spell

Alyssa Chai
2025
The Fingertip Spell project is a gesture-based interactive website built with p5.js and ml5.js, using real-time hand tracking to detect your gestures, allowing stars on the screen to follow your finger—moving, expanding, gathering, and bursting into light. 

By simply moving your hand, you can shape the space as if you’re controlling something magical in the digital world. Everyone has, at some point, imagined having magic powers and this project offers a small way to experience that feeling through interaction.

The inputs are mapped to visual behaviors such as attraction forces, motion paths, and particle effects. Multiple systems—including typographic grids, star trails, and particle bursts—respond dynamically to movement speed, distance, and gesture changes, creating a layered and responsive visual experience.









Vintagae Archive Web

Alyssa Chai
2023
This archive website contains a collection of cingtae arts including movies, reading and vinyl records.





















About
Profile 
Alyssa Chai



Hi, I'm Alyssa Chai.

I'm a UI/UX and interactive multimedia designer.
My work spans interface design, visual communication, and programming from web experiences and interactive systems,to print, spatial, and 3D-driven visual presentations.

I focus on how subtle responses shape experiences:timing, motion, feedback, and atmosphere.


Email: chaichensheng444712@gmail.com





Education
ArtCenter College of Design
B.S. in Interaction Design





Skills
Design Tools:
Figma · Adobe Illustrator · Adobe Photoshop · Adobe InDesign · Adobe XD


3D & Modeling:
SolidWorks


Programming:
HTML · JavaScript · Python

Creative Coding:
P5.js




Photography












Graphic Project:
Earth & Form Magazine Design
A ceramic-inspired graphic magazine exploring texture, form, and rhythm through editorial layout and typographic systems.













Graphic Project:
Mexico City Inspired Typography event
Inspired by the visual density and structure of Mexico City, this project presents a typography exhibition identity.

Modular typeforms and geometric patterns reference the city’s architectural rhythm and cultural textures, creating a bold graphic system.

The identity is extended across posters, a booklet, and name badges.










Graphic Project:
Elementary Typography
The Elementary Typography project explores the relationship between color, shape, typographic arrangement, and photographic imagery.
Through experimenting with layout, scale, contrast, and visual hierarchy, the project focuses on how different visual elements can work together to communicate meaning and emotion.
By combining text and image, this project investigates how typography can function not only as information, but also as a visual and expressive element within a composition.





Graphic Project:
Vivian Maier - A Woman’s Lens
An editorial design project exploring the life and photographic work of Vivian Maier.
The magazine emphasizes image-text relationships, pacing, and visual storytelling to frame her archive and personal history.












© Cargo Test Site 2027