Build tactile UI components without frameworks using pure Vanilla JS

Web interfaces often feel weightless and synthetic, lacking the tactile feedback of physical devices. Inspired by mechanical switches, knobs, and buttons, one developer set out to bridge that gap by building a UI component library that mimics real-world interactions.

Crafting components with physical presence

Most web components operate on a flat, instantaneous level—click a toggle and it moves, but it doesn’t feel real. The developer behind the new library sought to change that by prioritizing depth, shadow, and resistance in every component. The result is Aetheric UI, a collection of hardware-inspired elements designed to evoke the satisfaction of interacting with physical hardware rather than abstract digital widgets.

The project avoids skeuomorphism—the visual imitation of real-world objects—and instead focuses on tactile qualities: subtle depressions, responsive shadows, and deliberate resistance in interactions. Unlike traditional skeuomorphic designs, these components don’t attempt to replicate the appearance of physical objects but aim to replicate their feel.

Why forgo frameworks and build tools?

Aetheric UI is built entirely in Vanilla JavaScript, CSS, and HTML, with no build steps, dependencies, or package.json files required. Each component is a single file that can be dropped into a project and work immediately. This approach prioritizes simplicity and accessibility, ensuring developers aren’t forced to adopt complex tooling just to add a functional toggle or button.

The philosophy is clear: a toggle shouldn’t require 500MB of node_modules to function. By eliminating frameworks like React or styling systems like Tailwind, the library remains lightweight—most components weigh under 4KB, with none exceeding 10KB. This makes it ideal for performance-conscious projects where bundle size matters.

First release: toggles and buttons with depth

The initial release, labeled Wave 1, introduces five components designed to deliver a tangible interaction experience:

• Depression Toggle: A circular switch that appears sunken into its surface. When activated, a small amber dot glows at its center, reinforcing the illusion of a pressed button.

• Half-Pill Toggle: A split pill-shaped switch where one half is always recessed and the other raised. This mimics the mechanical action of a rocker switch, providing clear visual feedback on state changes.

• Sliding Toggle: A more dramatic design featuring an amber glow that bleeds from the left when active. The sliding mechanism casts a hard shadow, enhancing the perception of depth and movement.

• Toggle Pack: A bundled release containing all three toggles, ready for immediate integration.

• Hardware Button: A pill-shaped container with a pressable button on the right. Pressing it triggers an action (in the demo, it changes text), but the functionality is entirely customizable to fit the project’s needs.

All interactions are handled via JavaScript state changes, while animations are driven by CSS transitions triggered through class swaps. No images, SVGs, or canvas elements are used—only layered box shadows, inset values, and gradients to create the illusion of physical depth.

Designed for performance and extensibility

The entire library is engineered for minimalism and efficiency. Since every component is self-contained and dependency-free, it integrates seamlessly into any project, from static sites to complex web applications. The CSS-driven approach ensures smooth animations and responsive behavior without relying on JavaScript for visual effects.

The developer has outlined a roadmap for future releases, with plans to expand the library in "waves." Upcoming additions include navbars, input fields, and cards, each designed to maintain the tactile, hardware-inspired aesthetic. New components are scheduled to drop every Friday, giving users regular updates and opportunities to provide feedback.

Get started with Aetheric UI

Aetheric UI is available now for direct download. The components can be accessed at aethericlabs.lemonsqueezy.com, where they can be licensed and implemented immediately. For developers interested in following the project’s progress, updates are shared publicly on X and LinkedIn under the handle Aetheric Labs.

This isn’t just another UI library—it’s a reimagining of how digital interfaces can engage users through tactile feedback and intentional design. As web experiences grow increasingly abstract, libraries like Aetheric UI remind us that sometimes, the most satisfying interactions are those that feel almost real.