Magnifying Glass Navigation

Navigation should not be a static list; it should be a spotlight on user intent. This component reimagines the humble tab bar as a physical instrument. By simulating a magnifying glass that glides over options, we create a tactile sense of selection. It transforms the active state from a mere color change into a focused, immersive event.

Core Technique

The magic here is not in complex canvas rendering, but in the intelligent use of CSS Clip-Path masking.

• Dual Layering: We render the icons twice. One set is small and monochrome (background), the other is large and colorful (foreground).
• The Portal: The foreground layer (.nav__fake-icons) is hidden by a circular clip-path.
• Orchestration: JavaScript calculates the exact center of the target item and updates CSS variables. The clip-path circle moves to these coordinates, revealing the “magnified” version of the icon underneath, while the glass overlay (.nav__glass) follows physically.

Customization

The design is built on a system of CSS variables, allowing for effortless theming. You can adjust the “glass” physics or the color palette without touching the JavaScript logic.

:root {
  /* Animation Speed */
  --trans-dur: 0.3s;  /* Color change */
  --trans-dur2: 0.6s; /* Movement */

  /* Brand Colors */
  --primary: hsl(223, 90%, 55%);
  --red: hsl(3, 90%, 55%);
}

.nav__glass {
  /* Glass Opacity & Blur */
  background-color: hsla(0, 0%, 100%, 0.05);
  /* Adjust size of the lens */
  width: 4em; 
  height: 4em;
}

Browser Support

The component relies on clip-path, which has excellent support in all modern browsers.