Uzo Okafor

What if you could skip Google’s AI Overview like a YouTube ad? #designengineer #react #typescript

Most gaps in a #Github contribution graph have a reason. Parental leave, out sick, touching grass 🤭. So I designed a way to mark them as time away. Select the empty days, say what you were doing, and they’re hatched on your profile. Try it here: uzookafor.com/time-away/

I rebuilt the clock customization from Apple’s new Homeview. My favourite part is the ticks. When you switch to the style that has them, they grow in from the edge and push the numbers toward the middle. Built with React and Motion.

Finally finished this Google Calendar idea. One button turns a meeting into an email with your agenda already in it, and sending it cancels that week’s meeting. Built with React and Motion

A closer look at the WhatsApp voice note prototype. Tap a word, and it plays from there. The dotted ones are words the transcript wasn’t sure about, so you can tap and check them. Holland is meant to be Haaland 😅 #designengineering #react #typescript

Tried @WhatsApp's voice note transcripts recently and prototyped how I’d want them to work. Tap a word, it plays from there. Used the Man City saga for the sample note because football’s back tomorrow and I can’t wait.

The mobile version, up close. The album waits in the mini player, since it's on screen when you start a podcast. Its artwork is the button because the card peeking out is too small to tap. When it comes back, it lifts clear first, like pulling a card from a deck.

Some of you saw the Spotify prototype I shared a couple of weeks ago. A few days later, Frank Bach tweeted about wanting Spotify to remember the album he was on when he jumps to a podcast. So I prototyped it (React + Motion). Try it here: uzookafor.com/two-streams/

A closer look at the "Best Part" idea I shared last week for Spotify.

Shared this upload component yesterday, then caught a tiny hitch in the recording. At 0.25x, the row disappeared just before the container resized. Changed it so each row collapses its own height and the container follows. Also shows fail/retry + offline/resume.

Someone asked what “connected to Wi-Fi, no internet” would look like in my Unified Connection prototype. So I added it, plus reduced-motion support. Five states now transition directly using SVG paths and geometry. Reduce Motion swaps the morph for a short dissolve.

What if iPhone Duo had one unified connection indicator? The whole interaction is driven by SVG paths and geometry, with no crossfades.

What if iPhone Duo had one unified connection indicator? The whole interaction is driven by SVG paths and geometry, with no crossfades.

I’d just wrapped up my icon morph experiments when I saw the new iPhone Duo status icons. The animation kept showing up on my feed, and it was too good not to try rebuilding for the web. The whole thing is made with SVG paths. You can play with it here: uzookafor.com/cellular-sta...

I recently read Benji Taylor's article on morphing icons and wanted to try it myself. Instead of fading one icon out and bringing another in, the lines move into new positions to form the next icon. I made a small set to see how far I could take the idea. Built with React + Motion.

I’ve been working on a small set of morphing icons. This is one of them. I’ll share the rest on Wednesday. #designengineering #react #motion

I’ve been working on a small set of morphing icons. This is one of them. I’ll share the rest on Wednesday. #designengineering #react #motion

I’ve been playing with a reorder interaction for a music queue. I spent more time making sure you can tell what’s happening while you move a track: velocity-based movement, queue boundary feedback, and subtle haptics on supported devices. Built with React + Motion. #designengineer #react

I’ve been playing with a reorder interaction for a music queue. I spent more time making sure you can tell what’s happening while you move a track: velocity-based movement, queue boundary feedback, and subtle haptics on supported devices. Built with React + Motion. #designengineer #react

Accessibility is one thing I care about when building interactions like this. For this merchant onboarding component: - Keyboard navigation - Focus management - ARIA states - Clear focus states - Reduced motion Most of it isn’t obvious in the UI, but it’s part of the build. #designengineering

I saw this task disclosure interaction from Nitish and wanted to try my own version. Rebuilt the idea for the web as a merchant onboarding flow. The tricky part was getting the dropdown and card collapse to close together without fighting each other. React/Next.js

A closer look at the Stripe FX conversion UI I shared yesterday. Someone mentioned the subtle bounce on the input fields, so I figured a zoomed-in view was worth sharing. Reduced motion support baked in. #react #accessibility

Stripe posted their new FX conversion UI yesterday. Saw the design and wanted to try building it with some motion. Reduced motion support baked in. #framermotion #react

A settings toggle that morphs from a pill into a card. Then added a few things for accessibility: 1. Full keyboard navigation 2. Focus rings on every control 3. A toggle to preview it with reduced motion on React, motion[dot]dev, no CSS transitions.

A look under the hood of the Injection Molds page for DTI Global.

A look under the hood of the Injection Molds page for DTI Global.

Built this theme switcher for a client project on Webflow. Let's users toggle between dark and light mode. The client's goal was to give users control over how they view the app. I made sure switching between themes felt smooth and didn't break anything. #WebflowDevelopment #DesignAgency

Local services page for DTI Global. #webflow #gsap #webflowdeveloper

Built this theme switcher for a client project on Webflow. Let's users toggle between dark and light mode. The client's goal was to give users control over how they view the app. I made sure switching between themes felt smooth and didn't break anything. #WebflowDevelopment #DesignAgency

Mobile experience for Oun Homes. Loading animation is faster on mobile than on desktop. People expect things to move faster on smaller screens, so I tuned the timing accordingly. #WebflowDevelopment #ResponsiveDesign

Mobile experience for Oun Homes. Loading animation is faster on mobile than on desktop. People expect things to move faster on smaller screens, so I tuned the timing accordingly. #WebflowDevelopment #ResponsiveDesign

Loading animation for the Oun Homes site I built - Webflow x GSAP Clean transition from load to content. Nothing fancy, just smooth. #WebflowDevelopment #WebDesign

Loading animation for the Oun Homes site I built - Webflow x GSAP Clean transition from load to content. Nothing fancy, just smooth. #WebflowDevelopment #WebDesign

Hover states for CTAs on a client site I built. Small details like this make the interactions feel more polished. Not essential, but they add up. #WebflowDevelopment #WebDesign

First thing on any project: set up color and typography variables in Webflow. Define once, use everywhere. No guessing hex codes or recreating styles. Client tweaks colors? One variable change, whole site updates. #webflow #webflowdevelopment #designagency

Hover states for CTAs on a client site I built. Small details like this make the interactions feel more polished. Not essential, but they add up. #WebflowDevelopment #WebDesign

Client had a project video they wanted visitors to see immediately. Built it so the video takes over the full screen on page load, then transitions smoothly into the hero section. GSAP for the animation, matchMedia to handle mobile. Clean way to give the video attention. #WebflowDevelopment #GSAP

Full rebrand in 2 weeks. New domain, design, messaging across site + socials. Client had an event deadline. Team executed: designer + CD on visuals, PM coordinating, dev. Launched on time. Already getting positive feedback. Tight timelines work when everyone’s aligned. #WebflowDevelopment

PM sent this last week. Client wanted team photo edits mid-project - wasn’t in scope. PM flagged it right away. Just checking, no drama. That’s the move. Scope creep happens. Address it immediately. Flag new work clearly. Clients appreciate transparency over surprises.

Small detail I added to the footer on a client site. Just a hover interaction to make it feel less static. #WebflowDevelopment #WebDesign

PM sent this last week. Client wanted team photo edits mid-project - wasn’t in scope. PM flagged it right away. Just checking, no drama. That’s the move. Scope creep happens. Address it immediately. Flag new work clearly. Clients appreciate transparency over surprises.

Full rebrand in 2 weeks. New domain, design, messaging across site + socials. Client had an event deadline. Team executed: designer + CD on visuals, PM coordinating, dev. Launched on time. Already getting positive feedback. Tight timelines work when everyone’s aligned. #WebflowDevelopment

Client had a project video they wanted visitors to see immediately. Built it so the video takes over the full screen on page load, then transitions smoothly into the hero section. GSAP for the animation, matchMedia to handle mobile. Clean way to give the video attention. #WebflowDevelopment #GSAP

Designers put careful thought into grid systems and spacing. Matching that precision in development isn't optional for me. One thing I do that clients don't always see: I use a grid overlay during builds. #WebflowDevelopment #WebDesign #FrontendDevelopment