01The point

Most designers hand off to developers. I don't have to.

These are interactions I designed and wrote myself. Not prototyped. Not described in a spec. Built.

There's a specific gap that exists between design and engineering, the place where something that looked beautiful in Figma becomes flat in a browser because nobody on the team felt the physics of how it should feel. I don't have that gap.

This page shows two projects: a creative interaction built in JavaScript with spring physics, and a generative visual piece built in TouchDesigner. The through-line is the same in both: an understanding that the quality of a motion or an interaction is not a detail. It's the thing.

02Spring physics

The bubble interaction.

This interaction started as a feature inside Eunoia, where words released into the Cosmos inflate, overshoot, settle, and dissolve. The physics are deliberate: a bubble made of breath and film behaves differently from a solid object. Overshooting by 8% and settling is what makes it feel real rather than correct.

01 / inflate

Scale up 108%

The bubble overshoots its target size. Real air-filled objects don't snap to a clean stop.

02 / settle

Compress to 96%

It compresses slightly under its own surface tension before finding equilibrium.

03 / drift

Float and dissolve

The bubble drifts upward and fades out. It doesn't disappear, it dissipates.

The animation curve

/* cubic-bezier drives the spring quality */
animation: floatUp 3.2s cubic-bezier(.25, .46, .45, .94) forwards;
 
/* keyframes: inflate → compress → drift → dissolve */
12% { transform: scale(1.08) translateY(-14px); }
22% { transform: scale(.96)  translateY(-28px); }
35% { transform: scale(1.02) translateY(-80px); }
100%{ opacity: 0; transform: scale(.5) translateY(-360px); }

Running in your browser · built by Hannah

Try it.

Type anything and send it up. This is the same physics that run inside the Eunoia app, now living in plain HTML and CSS. No library. No framework. Just math and timing.

↑ this is also where the pearl on the homepage came from

03Generative visuals

TouchDesigner.

TouchDesigner is real-time visual programming software used for generative art, live performance visuals, and interactive installations. The barrier to entry is high: it requires thinking in nodes, understanding signal flow, and making decisions about what stays procedural and what gets baked. I built [PROJECT NAME / DESCRIPTION HERE].

TouchDesigner · Generative Visual Work

[Your TD project goes here]

Hannah: drop your project description, screenshots, or a video link in this block. The structure is ready.

Why it matters for clients

Understanding how to generate visuals procedurally changes how I approach any creative brief that involves motion, generative elements, or real-time interaction, because I know exactly what's achievable and at what cost.

04What this means for you

I can prototype at full fidelity, not just wireframe fidelity. When I say "the bubble should overshoot and settle," I can show you the exact version of that, running in a browser, in the same conversation. There's no gap between intent and demonstration.

I speak developer. When I hand work to a developer, I can describe what I want in terms they can immediately implement: the cubic-bezier curve, the keyframe percentages, the exact timing. That's not standard. Most designers hand over a spec and hope. I can hand over working code.

The technical knowledge changes the design decisions. Understanding what costs what in code changes how I approach a brief. I don't design things that will fall apart in implementation or require three days of engineering to look right. The constraint is built in from the start.