Everything I've tried here, what worked, what failed, experiments with AI, and half-formed ideas.
The profile picture on my portfolio has a stop motion animation hidden behind it. I dance outside of design, and I wanted a small, quiet way for the site to show that side of me too. How I made it is a bit of a story, so here's the video.
Hover over it on my profile to see it yourself.
I have been exploring affective design and how products can be intentional about how they make us feel. Don Norman describes three levels in Emotional Design: visceral, behavioural and reflective.
While I was reading, I noticed some parts of my portfolio already do this, so I recorded a short ten second walkthrough. A small robot says hello, the copy changes with the time of day, and the transitions try to keep you oriented.
I am still learning. If you have seen affective design done well, I would like to see it.
A small interaction on the "snapshots" in my About page, to make them feel a little nostalgic. Swipe or tap to the next photo and it comes in with a light leak and some old film crackle.
On a phone, my case studies have a row of chips under the tabs, one for each part of the page, and there are more than fit on screen. Normally you'd have to swipe the row yourself to find where you are. Here the chips slide over as you scroll down, so the one you're reading stays in view. Tap any chip to jump to it. Open any Works case study on your phone to try it.
How do you point first-time visitors to a hidden feature without getting in their way?
The robot on my website has an Avatar State, and most people never find it. So I taught it to wait.
Any mouse movement, click, key or scroll restarts an 8-second timer. When nobody touches anything for that long, it's a natural pause: the visitor has finished reading and is deciding what to do next. That's when the robot does a small hop and asks to be clicked.
A few rules keep it polite. It asks once per visit, and never again once you've found the state. Motion comes first and words second: the hop catches your eye, and the hint explains. With reduced motion turned on, there's no hop, just the hint.
Try it on the home page on desktop. Just stop moving for a few seconds.
Live demo
The little robot on my home page has an Avatar State. Click it 3 times, fast. First you get a whoa, then an annoyed glare, and on the third click its eyes light up and the theme comes in. It works in light and dark mode, and it comes back down when you click it again. Go try it on the home page on desktop.
Live demo
Part of my Avatar woodsprites project (atokirina' in Na'vi). The creatures find you and land on you wherever you move, and this is the layer that makes it possible. I'm running Google's MediaPipe pose model live in your browser: it marks 33 points on your body, each with a position, a rough depth estimate, and a confidence score, and that is everything the system ever knows about you. Drag the line, or leave it and it sweeps on its own. One side is your camera. The other side is what the computer receives. Press S to toggle the skeleton, press W to invite the creatures in, and watch each one claim a point and follow it. Your camera never leaves the browser; nothing is uploaded or stored.
Live demo
Been refining and iterating on the woodsprites (atokirina') from the Avatar movie for my interactive media project, and this is the final version I decided on. Tuned it against a frame from the film until it felt right. The tuner is live, go shape one yourself.
Live demo
These are the start and end screens for my Avatar Woodsprites rebuild, the glowing seeds (atokirina') from the film. My first version used a frosted-glass panel. On its own it looked fine, but next to the scene it felt like a generic app sitting on top of it instead of being part of it.
I wanted the interface to fit the world of the film, and there were two ways to do that. One is the sci-fi tech the humans use in Avatar: holographic HUDs, thin precise lines, a hairline frame, scanlines. The other is the forest itself: bioluminescence, the same glow the woodsprites give off.
I built both to compare them. The HUD looks good and suits Avatar in general, but this scene is just the seeds drifting down to rest on you, with no technology anywhere in it, so the HUD felt out of place. The bioluminescent one fit: no panels, text sitting in a patch of light, buttons that glow at the edges and brighten when you press them.
Flip between the two above and go through the intro, the record step, and the end screen in each. I went with the bioluminescent one.
Synesthetic Motion is getting rebuilt, and this is a look at the messy middle of that. Here I was trying out how to bring spatial movement into the system, one instance out of many. Nothing's locked yet. I'm keeping these as I go so the exploration is documented, not just the finished thing.
The video I made for the portfolio launch.
The desktop version had a nice warm preloader, and the mobile breakpoint had nothing. These are some of the approaches I experimented with, and Rise is the one I eventually shipped. Try the different variants and experience it yourself.
Different visual directions I tried for the top nav while building the site: a soft tray, frosted glass (for sitting over imagery), bold dots, a mono/technical set, and neumorphic. The current pill shipped; these were the other contenders. Flip through them above; the active pill slides between tabs.
This one is less about a visual effect than a decision on how the interface should behave. For a while the only way to close the feed and return to center was to tap the active tab again. That was my mental model, and it worked.
But watching a stranger use it, almost no one would guess that. Tap to open is obvious. Tap the same thing again to close is a hidden gesture. The working thing was not good enough once it left my own head.
So I added an explicit close button next to the controls, shown only while the feed is open. Same outcome, now discoverable, and the tap-again shortcut still works for anyone who found it. The feed above starts open, because the whole question is how you get back out: flip Before and After, and try to close it in each.
When the feed expands from two columns to three, the tiles could magic-move (each one glides and resizes to its new slot) or the whole grid could crossfade. Magic move looked magic on a handful of cards. On sixteen media cards it lagged and dropped frames, so the calm crossfade shipped. Toggle the two above and expand the grid.
Opening a tile should feel like it grew from where you clicked. But the feed is a small box that clips its overflow, so a detail born inside it gets caged and cut off. Rendered at the page root instead, free of the box, it can reach full size. Toggle the two above and open a tile.
The detail modal bugged me. It opened with a big heavy shadow, and it kept pulling my eye for the wrong reason. It felt like it was trying too hard.
Hard to judge that in isolation, so I lined up five versions over the actual feed and just looked. Side by side it was obvious: the heavy one was doing too much, and a couple were too flat.
The layered shadow won. It sits on the page instead of shouting off it, so I dropped the corner radius to match. Toggle through them above and see for yourself.
A draggable card stack with a bit of physics. Flick the top card to move through the deck.
Live demo
The nav-to-feed morph that opens the site. I tried four choreographies before settling on the calm one. Toggle them above and press a tab to feel each.
Themed HUD button screens (game, military, space ops, cyber) with full component states, inspired by sci-fi interface references.
The demo video I edited for the Feedback project. A motion graphics and kinetic type opening, then a walkthrough of the product and its features. This one has sound, so hit unmute on the video.
A short film I edited during the Apple Foundation program, a couple of years back. This one has sound too.
Countermeasure execution interface, activated post-threat identification, with real-time system status, resource availability, and operational constraints clearly presented.
Primary situational overview displaying real-time airspace activity, including drone positions, threat classification, and sensor coverage.