The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Saw this interaction by Nitish Khagwal (@nitishkmrk) and had to try building it for real.
A settings toggle that morphs from a pill into a card. The fun part was eyeballing the spring physics and trying to match the feel.
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.dev, no CSS transitions.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
A UI interaction concept inspired by the total solar eclipse in Spain.
This is a cosmic take on the eclipse toggle, exploring the transition between light and darkness through motion.
Created and animated in Spline.
The light to dark transition using motion is so fluid! Spline is unmatched for this kind of subtle, immersive UI interaction
Should animation simply catch attention, or invite interaction?
In the first version, the abstract form continuously transforms on its own. It keeps the hero section dynamic and atmospheric without requiring any action from the user.
In the second version, the object reacts to cursor movement through a parallax effect. The experience becomes more playful, immersive, and responsive.
One gives users something to watch. The other gives them something to influence.
Which approach works better for a hero section: automatic motion or interactive animation?
79 voted
82%
17 voted
18%
96 votes
Closed
The option 1
Maqtorah is a two-sided marketplace for moving livestock, equipment, furniture basically anything bulky across Saudi Arabia. Customer posts a shipment, transporters bid on it, delivery gets tracked live. We worked with Ali Aldughairi on both apps: the customer side and the driver side.
A major part of the project involved building RTL support into the user interface. Not just flipping the layout, the actual hard part was mixed-direction content. Order IDs, IBANs, phone numbers, SAR amounts these are Latin strings sitting inside Arabic sentences, and RTL doesn't have a clean answer for that out of the box. We had to work out a rule that held up on a chat screen, a checkout screen, a tracking screen, all differently, and make sure none of them broke when the numbers got longer or the names got longer.
Then there was the density challenge. A single freight request has cargo type, route, receiver info, timing, vehicle needs a lot to carry on a 375px screen. A transporter scanning bids needs to decide in a few seconds whether something's worth their time, and a customer comparing five offers needs to trust the price without having to think too hard about it. Getting that hierarchy right took a few passes.
The two apps also needed to feel like they were built for completely different people. Customer app leans on trust profiles, vehicle photos, ETA, that kind of thing, all visible before you commit. Driver app is the opposite: stripped down for someone driving, checking their phone for two seconds at a time. We ended up with something we called Road Mode, where geofencing picks up most of the status changes automatically and the driver's really just tapping Loaded and Delivered.
By the end we had a full Figma design system for both apps, onboarding through payout, built so it can stretch to new cargo types or new regions later without starting over.
One thing I'm still chewing on: how much should a driver app automate away versus leave in the driver's hands? Curious where others land on that.
Less distraction always works best. Great project Yurii🔥