Naman Sharma

I’m a design engineer. I build for the web, and I care about how an interface feels — the easing curve, the hairline, the way a thing behaves when you interrupt it halfway.

Design engineer
Jalandhar, India
Open to work

The short version

Drawn rather than described. Each figure is the machine the project actually is, and every number on it comes from the same model that moves its parts.

The cam, cut to the easing curveThe slide it drivesThe dial reading how far it has goneA disc cam cut to cubic-bezier(0.23, 1, 0.32, 1) — the same `--ease-out` this site animates with. Its radius at any angle is the eased value at that fraction of a turn, so one turn of the crank plays the curve once and the slide travels 26 px.

MotionKit Animation library

I kept writing the same motion code and kept getting it slightly different each time, so I packaged it. The cam beside this is cut to one of its curves: one turn of the crank plays the curve once and the slide travels the same distance every time. Open it

TryMove across the plate to turn the crank
Curvecubic-bezier(0.23, 1, 0.32, 1)
Travel26 px, one turn, every time

A bead: one subscriber in tenThe bar they cross when they leaveThe dial reading what is left6 rods, one per monthly cohort, 10 beads to a rod. A worked example at 88% monthly retention — not figures from anyone's account — so each month the beads that churned slide across the bar. The dial reads the beads themselves, not the model.

ChurnRate SaaS dashboard

Churn is a number that hides what it means. A rod is a monthly cohort and a bead is a subscriber, so the beads that cross the bar are the people who left — the thing a dashboard exists to make you feel, not just read. Open it

TryIt runs on its own, month by month
Cohorts6 rods, 10 beads to a rod
Kept88% a month — a worked example, not anyone’s account

The screen, once it has bootedThe keyboard and the mouseThe tower beside itThe /desktop route, drawn as the workstation it imitates: it boots, puts up a menu bar and a dock of 6 apps, and opens 3 windows that drag and resize. The screen is drawn in the plane of the monitor's own face, so the picture sits in the glass rather than on top of it.

Desktop A machine in the browser

Then I rebuilt a whole desktop in a tab, because the only way to learn how an interface should behave is to build one that has to do everything — and none of it is a mockup. Boot it

TryHover the figure to boot it again
ShellMenu bar, and a dock of 6 apps
Windows3, drag and resize

The work, and the tool touching itThe carriage carrying it down the railThe gauge that decides it is doneOne piece, four passes: draw, cut, press, gauge. It is scribed, cut and pressed, and then measured — the last station is a gauge rather than a stamp, because a thing is not finished when it is made, it is finished when it reads true. Each tool only moves while it is working, and each mark on the piece appears when the station that cuts it has passed.

How I work

Design and build are the same job. A piece goes down the bench and comes back changed at every pass, and the last station is a gauge: a thing is not finished when it is made, it is finished when it reads true.

Getting in touch

Open to design engineering roles and freelance work. If it has a mechanism in it, I would like to hear about it.

Email menamansharmans03@gmail.com