Most UI components feel like UI components.
You click a toggle and it moves. Fine. It works. But it doesn't feel like anything.
I wanted to change that.
The idea
I've always been drawn to physical interfaces — the satisfying click of a mechanical switch, the weight of a hardware knob, the way a button depresses when you press it.
Web UI almost never captures that. Everything is flat, instant, weightless.
So I started building components that feel like they exist in the real world. Not skeuomorphic in the old iOS 6 sense — but tactile. Depth. Shadow. Resistance.
That became Aetheric UI.
Why Vanilla JS
No React. No Tailwind. No build step.
Not because frameworks are bad — they're great for what they do. But a toggle component shouldn't require a package.json. It should be a file you drop in and it works.
Every component in Aetheric UI is a single file. You copy it in, it runs. That's it.
Wave 1: Toggles and a Button
The first drop is five components:
Depression Toggle — a circular switch that sits pressed into the surface. When it's on, a small amber dot glows at the center. The whole thing feels sunken.
Half-Pill Toggle — a pill-shaped switch split into two halves. One side is always recessed, the other raised. It mimics the feel of a physical rocker switch.
Sliding Toggle — the most dramatic of the three. An ambient amber glow bleeds out from the left when it's active. The knob itself casts a hard shadow.
Toggle Pack — all three together, bundled.
Hardware Button — a pill-shaped container with a pressable button on the right. Press it and it fires its action. The label is fully customizable — the demo shows a text change on press, but what it does is entirely up to you.
What makes them different
The depth is all CSS — layered box shadows, carefully tuned inset values, subtle gradients. No images, no SVGs, no canvas.
The interactions are pure JS state. Toggle on, toggle off. The animations are CSS transitions triggered by a class swap.
Every component is under 10KB. Most are closer to 4KB.
This is just Wave 1
Navbars are next. Then input fields. Then cards.
Each wave drops on Fridays.
If you want to follow along, I'm building this in public on X and LinkedIn as Aetheric Labs.
And if you want the components themselves — they're available now at aethericlabs.lemonsqueezy.com
Built with zero dependencies. Designed to feel real.
Top comments (0)