Sep 2026 · Creative development · MCP workflows · Framer
Six still images, a custom React component, and a connected AI workflow. A small homepage interaction that brings together creative direction and technical delivery.
Move your pointer. Click, tap, or use Enter / Space to wink. Reduced motion keeps the portrait still.
The idea
I wanted my portfolio to show a little personality—and give visitors something I had built to try for themselves. Claire Vo’s X post and her cursor-following portrait tutorial sparked the idea. I adapted the interaction for my own bitmap portrait and Framer site, using Codex to help turn the creative direction into a working component.
Connecting the tools
This was also a practical experiment in using MCPs (Model Context Protocol): connections that let an AI assistant work with tools and project data. I used Codex with the FLORA connector to inspect my portrait project. When its generation commands failed, the workflow switched to FLORA’s browser-exposed WebMCP tools to create the poses and remove their backgrounds. Framer’s agent connection handled the component, assets, page layout, and publishing. Connecting the tools—and knowing how to adapt when one route failed—was part of the build.
From image generation to interaction
I started with one black-and-white portrait and generated five matching expressions: left, right, up, down, and wink. The important constraints were consistent identity, crop, and shoulder position, so switching frames would not make the image jump. I checked for real transparency, removed the baked-in checkerboard, and prepared six aligned PNGs. The browser then switches between saved images; moving the cursor makes no AI calls.
The technical build
With Codex, I built a reusable React / TypeScript component with editable image controls in Framer. It measures pointer position relative to the portrait, keeps a neutral centre, and uses a short settling delay and tolerance around diagonal boundaries to prevent flicker. A click, tap, or keyboard activation triggers a 900ms wink before returning to the current direction.
The details that make it usable
The component preloads the frames, falls back to the front pose if a directional image fails, and pauses tracking when it is offscreen. It respects reduced-motion preferences, uses a native button for keyboard access, and serves smaller 512px image variants. I checked desktop, tablet, phone, and both site themes, then refined the placement and softened the portrait’s bottom edge to fit the page.
What this demonstrates
I took the project from visual reference through asset preparation, interaction logic, testing, and a live Framer implementation. My role was to direct the look and behaviour, make the integration decisions, and iterate on the result with AI-assisted coding. It is a small example of how I connect creative judgement with the practical work of building and shipping.