Series

Static → Interactive

Taking static visual references and investigating how they could behave through interaction, motion, sequencing, and code. The aim is to develop an interactive visual-design language—not to master any one tool.

Explore the entries ↓

Focus/Domain Web Development Interactive Visual Design Creative Coding

Roles Designer Creative Technologist

Duration Ongoing 2026–Present

Tools p5.js GSAP Three.js TouchDesigner Canvas SVG CSS

A practice for translating visual ideas into behavior

Each entry starts with a static reference, isolates the quality that holds my attention, and asks what interaction can reveal, extend, or complicate.

What the series explores

Entries span frame-to-frame storytelling, kinetic editorial layouts, interactive typography, spatial transitions, image decomposition, and generative remixes. The reference is a departure point, not a style to reproduce.

How each entry works

Reference → What caught my attention → Interactive interpretation → Build → Result / learning. Keeping the rubric stable makes it easier to compare experiments across different visual systems and technical tools.

Why the toolkit stays open

p5.js, GSAP, Three.js, TouchDesigner, Canvas, SVG, and CSS are chosen according to the behavior under investigation. The throughline is the interaction language, not software mastery.

Current lines of inquiry

Sequence - how pacing turns a composition into a narrative.
Response - how input can become a meaningful visual gesture.
Transformation - how a visual system can change while retaining its identity.

Scroll to Explore

Working principles

Translate, don’t decorate

Name the attraction - Identify the precise quality in the reference before choosing a behavior.
Give motion a job - Use movement to reveal hierarchy, causality, sequence, or spatial relationship.

Protect the visual idea

Start with constraints - Keep the palette, typographic logic, and composition legible as the system changes.
Design the rest state - Interaction should have a clear beginning, ending, and way home.

Let the tool follow

Prototype the behavior - Choose the simplest medium that can test the idea honestly.
Document the learning - Record what the experiment changed about the next design decision.