Skeuomorphism is back, for a better reason this time

In 2013, iOS 7 took the felt off Game Center and the yellow paper out of Notes, and most of the industry followed it into flat design within a year or two. It was the right call. Screens had become sharp enough to stop pretending, and the stitching and torn paper were a costume. They made software look like objects without making it behave like them.

But flat design threw out something along with the costume. Real objects tell you things with their shape: what can be pressed, what state it's in, what happens if you push it. A light switch shows which way it's set. The cover over a cockpit switch tells you this one matters. A meter keeps turning while it costs you money. Flat interfaces had to put all of that back into words, colours and badges, and most of them only partly managed it.

That loss mattered less when software mostly waited for you to click. It matters now. Interfaces today run deploys, spend money and start agents that keep working after you look away. Interfaces that act on their own need to show their state and their stakes at a glance. Machines got good at that long before screens existed.

Borrow the mechanism, not the costume

So this is the rule behind Bevel, a set of 47 React components: every component starts from a real object that already solved a modern interface problem, and it keeps the part that did the solving. That can be a click into place, a cover you lift first, a drum that rolls. The leather stays in the past.

Each component's page also cites where its object came from: the patent where there is one, the documented history where there isn't. Those sources turned out to be the best design documents I had. Inventors had to write down exactly what problem a mechanism solves, and many of those problems are the ones we're solving in software again.

Numbers that roll instead of jump

When a number changes on a flat screen, it swaps. You get one frame of the old value, then the new one, and if you weren't looking you missed it. Curtis Veeder's 1895 cyclometer stacked numbered rings on one axle, each ring turning the next one step per full turn. You can see that a count went up, and roughly by how much, without reading it.

A cost you can watch run

Usage-based pricing means a bill grows while you work, and most products hide that on a billing page you visit once a month. Arthur Pitney's postage meter counted every impression on wheels locked inside a tamper-proof case, and stopped when its prepaid amount ran out. That's a balance you can see draining, which is exactly what a token budget should look like.

A cover over the dangerous ones

A confirm dialog asks “are you sure?” after you've already pressed the button, and everyone learns to click through it. Cockpits do it the other way round: the switch that matters sits under a cover, so arming it and firing it are two separate gestures. Bevel's version, like the touchscreen one Rockwell Collins patented, drops the cover back on its own if you walk away.

A dead man's switch for agents

Here's the most direct analogy in the set. A locomotive's vigilance control assumes the driver might stop paying attention. It warns, and if nobody acknowledges in time, it brakes. That's the right default for an agent running unsupervised: it keeps going while someone checks in, warns as the window closes, and pauses if nobody does.

Clicks you can count

Plenty of settings are really a few fixed steps, like low, medium and high reasoning effort. A slider pretends they're continuous. A rotary switch with a detent clicks into each position and stops hard at the ends, so you can feel how many choices there are. On screen, the “feel” is the snap, and the knob refusing to turn past the last stop.

Filtering you can see

Alfred Perkins's 1925 edge-notched cards record values as notches along the edge. Run a needle through the stack and lift it: the matching cards drop out. That's a faceted filter, except you can see which cards each criterion keeps and which it holds back, instead of watching a list quietly shrink.

Status that announces itself

Fermo Solari's departure boards flip through printed blades until they reach the new value. The clatter and the movement are the point: a whole station notices that a platform changed, without anyone having to look for it. Deploy status, build queues and release trains all need that same tap on the shoulder.

What makes it work on a screen

Skeuomorphism earned its bad reputation partly through bad execution: heavy images, a different light direction on every element, motion that jammed the page. The parts above follow a few strict rules instead.

• One light source, from the top. Every highlight, shade and cast shadow comes from the same few tokens, so objects from different eras sit together on one desk.
• Only the compositor moves. Components animate transform and opacity, never layout. With a height transition, adding a card to the wallet cost 678ms of main-thread work. Without it, 94ms.
• The shape is a hint, not the message. Every state is also stated in words, so screen readers hear it. Live readouts are throttled so they don't chatter, and with reduced motion everything simply changes state.
• No images. Brass, plastic, paper and leather are CSS gradients and a grain texture, built from tokens you can retheme.

The details are in the design system and motion guides.

What doesn't make the cut

The easiest way to build a library like this is to make it big. Early on, five Bevel components gated an action behind a disabled button with a reason underneath, and two more were the same countdown in different costumes. The duplicates are gone. If an object doesn't do a job that no other component already does, it doesn't ship. Nostalgia isn't a job.

Try it

Bevel is a shadcn registry built on Base UI and Tailwind CSS v4. Components install as source files you own, with their styles merged into your global CSS. Add the registry once:

{
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

npx shadcn@latest add @bevel/guarded-switch @bevel/vigilance @bevel/meter

Then browse all 47 components, see them assembled in the demos, or read the code on GitHub. If you know an older patent for any of these objects, open an issue. I'd love to cite it.