Physical UI is not decoration. It gives every command a clear state: raised, armed, pressed, complete. When I started building the LookADev portfolio, I wanted every interaction to communicate something — not just look nice, but feel deliberate.
The retro interface wasn't an aesthetic choice alone. It was an engineering decision. CRT-style buttons with visible depth, scanline overlays, and tactile press states solve a real UX problem: they make state transitions obvious. A flat button with a color change is ambiguous. A button that visibly depresses, emits a glow, and snaps back? That's unambiguous feedback.
I implemented this using CSS custom properties for the depth layers — a highlight edge on top, a shadow edge on bottom, and an inset transform on :active. The trick is keeping the transition under 120ms. Anything slower feels laggy; anything faster feels twitchy. 80ms for the press, 120ms for the release. That asymmetry is what makes it feel physical.
The radio-dial contact buttons on the contact page pushed this further. Each dial rotates with pointer tracking, has a detent snap at specific angles, and triggers the corresponding channel (WhatsApp, Email, GitHub, LinkedIn). The rotation uses Math.atan2 on pointer coordinates relative to the dial center, quantized to 45-degree steps.
One mistake I made early: applying box-shadow transitions on hover for every button simultaneously. On a page with 20+ interactive elements, that's 20 composite layers. I switched to will-change: transform on only the hovered element and saw paint times drop by 60%.
The takeaway isn't about retro aesthetics. It's about state legibility. Every interactive element should answer three questions without the user thinking: What can I do? What did I just do? What happened because of it?