Loupe

A glass tab bar where a lens slides over the active tab and magnifies what's under it.

A UI component for any site
Plain HTML, CSS and JavaScript, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleAll navigation: 13 pieces for $52, you save $13

Loupe: a look at the source

// Loupe — glass magnifier tab bar. No dependencies.
// The lens is a domed glass disc driven by one spring. Inside it sits a copy of
// the tab row, scaled up and moved every frame so the point under the lens
// centre lands on the lens centre: real magnifier maths, not a bigger icon.
// The lens can be tapped to a tab, or grabbed and dragged: while it is held the
// magnification, squash and tab states all follow the finger frame by frame.

const SPRING = { k: 230, c: 25 };        // stiffness, damping → response ≈ 0.41 s, slight overshoot
const SQUASH = 0.06;                     // how much the lens flattens along its travel at full speed
const FULL_SPEED = 1400;                 // px/s at which the squash is at its maximum
const EASE = 'cubic-bezier(.23, 1, .32, 1)';
const EASE_IN_OUT = 'cubic-bezier(.77, 0, .175, 1)';
const PROJECT = 0.12;                    // seconds of momentum projected forward on release
const SWIPE = { v: 0.5, d: 24, t: 300 }; // a flick: px/ms, px, ms
const CATCH = 120;                       // ms for the lens to reach a finger that grabbed the bar elsewhere
const WINDOW = 80;                       // ms of pointer history used for release velocity

// soft edge: the further past the end, the less the lens follows
const rubber = (over, dim) => (over * dim * 0.55) / (dim + 0.55 * over);

export function init(root, { onChange, onPreview, magnify, drag = true } = {}) {
  const tabs = root.querySelector('.loupe-tabs');
  const items = [...tabs.querySelectorAll('.loupe-tab')];
  const icons = items.map(t => t.querySelector('.loupe-icon'));
  const scale = magnify ?? (parseFloat(getComputedStyle(root).getPropertyValue('--loupe-magnify')) || 1.6);
  const valueOf = i => items[i].dataset.value ?? items[i].textContent.trim();

  // build the lens: caustic + lift shadow (under), dome (glass) › view (magnified copy) + sweep (finale glint)
  const el = (cls) => { const s = document.createElement('span'); s.className = cls; return s; };
  const lens = el('loupe-lens');
  lens.setAttribute('aria-hidden', 'true');
  const caustic = el('loupe-caustic');
  const lift = el('loupe-lift');
  const dome = el('loupe-dome');
  const view = el('loupe-view');
  const sweep = el('loupe-sweep');
  const clone = tabs.cloneNode(true);
  clone.classList.add('loupe-clone');
  clone.removeAttribute('role');
  clone.setAttribute('inert', '');
…  317 more lines in the zip

/* Loupe — a glass tab bar where a lens slides over the active tab and magnifies what's under it */
.loupe {
  /* colour: every token is light-dark(light, dark); data-theme or the system setting picks one */
  --loupe-accent: light-dark(#007aff, #4ea2ff);
  --loupe-ink: light-dark(#0b1220, #f2f5fa);
  --loupe-muted: light-dark(#59627a, #8e97ab);
  --loupe-cut: light-dark(#f3f6fb, #10131f);
  --loupe-glass: light-dark(rgb(255 255 255 / .52), rgb(26 28 44 / .56));
  --loupe-glass-solid: light-dark(#eef1f7, #1b1e2e);
  --loupe-sheen: light-dark(rgb(255 255 255 / .42), rgb(255 255 255 / .07));
  --loupe-blur: blur(26px) saturate(170%);
  --loupe-rim-top: light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .2));
  --loupe-rim-bottom: light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .05));
  --loupe-hairline: light-dark(rgb(15 25 45 / .08), rgb(255 255 255 / .08));
  --loupe-shadow: light-dark(rgb(15 30 60 / .4), rgb(0 0 0 / .8));
  /* the lens */
  --loupe-lens-bright: light-dark(1.06, 1.04);
  --loupe-lens-blur: blur(5px) saturate(160%) brightness(var(--loupe-lens-bright));
  /* dome fill: a clear tint (dark stays under 25% so the magnified row reads crisp) */
  --loupe-lens-hi: light-dark(rgb(255 255 255 / .72), rgb(255 255 255 / .18));
  --loupe-lens-mid: light-dark(rgb(255 255 255 / .16), rgb(255 255 255 / .06));
  --loupe-lens-lo: light-dark(rgb(255 255 255 / .03), rgb(255 255 255 / .02));
  --loupe-lens-muted: light-dark(#49536b, #e4e8f1);
  /* rim: bright refraction edge, a darker band inside it, the outer ring and the contact shadow */
  --loupe-lens-edge: light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .5));
  --loupe-lens-refract: light-dark(rgb(20 40 100 / .2), rgb(0 0 0 / .3));
  --loupe-lens-ring: light-dark(rgb(10 20 50 / .3), rgb(0 0 0 / .3));
  --loupe-lens-shade: light-dark(rgb(10 20 50 / .22), rgb(0 0 0 / .3));
  --loupe-lens-outline: light-dark(rgb(10 22 55 / .34), rgb(0 0 0 / .45));
  --loupe-lens-contact: light-dark(rgb(15 30 60 / .4), rgb(0 0 0 / .55));
  --loupe-lens-shadow: light-dark(rgb(15 30 60 / .5), rgb(0 0 0 / .75));
  --loupe-fringe-a: light-dark(rgb(0 196 255), rgb(90 230 255 / .65));
  --loupe-fringe-b: light-dark(rgb(255 36 200), rgb(255 100 230 / .6));
  --loupe-glint: light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .55));
  --loupe-caustic: light-dark(color-mix(in oklab, var(--loupe-accent), white 20%), color-mix(in oklab, var(--loupe-accent), white 45%));
  /* size */
  --loupe-h: 56px;
  --loupe-tab-w: 64px;
  --loupe-pad: 6px;
  --loupe-lens: 1.45;
…  247 more lines in the zip

Ask a question

What it does

A five-tab app bar in frosted glass with a domed lens riding on top of it. The lens really magnifies: inside it is a copy of the tab row, scaled 1.6× and moved every frame so whatever sits under the lens centre lands in the middle of the dome. Tap another tab and the lens glides there on a spring, flattening slightly in the direction it moves while the icons scroll through it at 1.6× speed. On arrival the icon under the lens goes from outline to filled in the accent colour, its label turns to ink, a glint sweeps across the dome and a small spot of light appears on the bar beneath the lens. The lens itself has a bright top glint, a dark refraction ring with a cyan fringe on one side and magenta on the other, and a soft shadow on the bar.

Good for: App-style web UIs, dashboards, mobile web apps, portfolio and product sites that want an iOS-like bottom bar.
How it works: Tap a tab, drag the lens, swipe the bar, or use the arrow keys. While you drag, the lens follows your finger 1:1 and the magnification, squash and tab highlight update every frame; past the ends it resists and springs back. On release it keeps your speed, projects it forward and settles on the nearest tab, so a throw goes further. A quick flick anywhere on the bar moves one tab. The lens is a spring, so you can grab it or redirect it mid-travel without a jump. The icon under the lens fades out as the lens covers it, so only the magnified copy shows.
How to use: Copy two files, paste the markup, call init(). It fires onChange once with the index and value of the selected tab, and onPreview while the lens is dragged over tabs. Swap in your own icons on a 24px grid: silhouette paths fill on selection, detail lines become cut-outs.

Price: $5, one payment
Version: 1.0.0
Code size: 7.8 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: loupe.css loupe.jsthe component
index.htmla plain example page
README.mdsetup, CSS variables, API, icon guide, React notes
package.json vite.config.js npm install npm run dev
LICENSE.md

Use it in your project

Copy loupe.css and loupe.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Five tabs are in the example; three to six work the same. Each tab is a <button> with an inline SVG icon and a label.
Start it:

import { init } from './loupe.js';
const loupe = init(document.querySelector('.loupe'), {
  onChange: (index, value) => console.log(index, value),
});

Mark the starting tab with aria-selected="true". Each tab's data-value is passed to onChange. The script builds the lens itself: a domed glass disc holding a hidden copy of the tab row, scaled up and moved every frame so the point under the lens centre lands on the lens centre.

### Your own icons

Draw them on a 24px grid, stroke 1.75, round caps. Give the silhouette paths class="loupe-shape" (they fill with the accent when the tab is active) and any inner detail lines class="loupe-line" (they turn into cut-outs on the filled shape). A path with no class keeps its stroke in both states.

useEffect(() => {
  const loupe = init(ref.current, { onChange });
  return () => loupe.destroy();
}, []);

Questions

What exactly do I get?

The full source, an example page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Does it really magnify, or is it just a bigger icon?

It magnifies. A hidden copy of the whole tab row sits inside the lens, scaled and repositioned every frame, so while the lens travels you see the neighbouring icons pass through it enlarged.

Can I use my own icons?

Yes. Inline SVG on a 24px grid. Give the silhouette class="loupe-shape" and inner lines class="loupe-line"; the README shows the pattern.

Is it keyboard accessible?

Yes. It is a tablist: Tab to the selected tab, then Left, Right, Home and End. The focus ring is drawn around the lens.

Light and dark?

Both are designed: white frosted glass with a clear dome in daylight, smoked glass with a darker marble at night. With no theme set it follows the system setting.

Reduced motion?

The lens crossfades to the new tab instead of travelling, and the icon still fills. A dragged lens still follows your finger, without squash or rubber-band. With reduced transparency the glass turns solid.

Does it work on phones?

Yes. Under 420px the bar spans the width, labels hide and the lens shrinks to 1.3× the tab height. It responds on touch-down, you can drag the lens or swipe the bar with a finger, and vertical swipes over the bar still scroll the page.

Can I turn off dragging?

Yes: init(el, { drag: false }). Taps and keys keep working.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Loupe

All navigation

index.html

<nav class="abacus" aria-label="Pagination">
  <button class="abacus-end abacus-prev" type="button"></button>
  <div class="abacus-rail"></div>
  <button class="abacus-end abacus-next" type="button"></button>
</nav>

abacus.css

.abacus-end {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--abacus-post);
  height: calc(var(--abacus-bead-h) + 10px);
  margin: 0;
  padding: 0;
  border: 0;

abacus.js

export function init(root, {
  pages = 9,
  page = 1,
  window: win = 7,        // beads shown at once when there are more than 12 pages (odd numbers work best)
  onChange,
  onPreview,              // called while a bead is pulled, with the page it would land on
  drag = true,            // pull beads along the rod with a finger or the mouse
  duration = 440,         // ms a bead takes to cross the gap and settle
  stagger = 40,           // ms between beads in a chain
  labels = {},
} = {}) {

Abacus

Pagination where numbered beads slide along a metal rod and clack into place

11.3 KB0 depsNavigation

index.html

<div class="aperture">
  <header class="aperture-bar">
    <a class="aperture-brand" href="#">Nocturne</a>
    <button class="aperture-toggle" type="button" aria-label="Menu">
      <svg class="aperture-iris" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="aperture-rim-g" gradientUnits="userSpaceOnUse" x1="8" y1="6" x2="56" y2="60">
            <stop offset="0" class="aperture-rim-a"/><stop offset=".42" class="aperture-rim-b"/><stop offset=".6" class="aperture-rim-c"/><stop offset="1" class="aperture-rim-d"/>
          </linearGradient>
          <linearGradient id="aperture-steel-g" gradientUnits="userSpaceOnUse" x1="6" y1="4" x2="58" y2="62">
            <stop offset="0" class="aperture-steel-a"/><stop offset=".34" class="aperture-steel-b"/><stop offset=".52" class="aperture-steel-c"/><stop offset="1" class="aperture-steel-d"/>

aperture.css

.aperture-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aperture-plate);
  box-shadow: inset 0 1px 0 var(--aperture-plate-hi), 0 1px 0 var(--aperture-plate-edge), var(--aperture-plate-shadow);
  transition: opacity 240ms var(--aperture-ease-out);
}
.aperture.is-open .aperture-bar::before { opacity: 0; }
.aperture-brand {

aperture.js

export function init(root, { onOpen, onClose, onSelect, onPreview, push, drag = true } = {}) {
  const toggle = root.querySelector('.aperture-toggle');
  const iris = toggle.querySelector('.aperture-iris');
  const menu = root.querySelector('.aperture-menu');
  const list = menu.querySelector('.aperture-list');
  const readout = root.querySelector('.aperture-readout-n');
  const glass = iris.querySelector('.aperture-glass');
  const flare = iris.querySelector('.aperture-flare');
  const links = [...menu.querySelectorAll('.aperture-link')];
  const blades = [...iris.querySelectorAll('.aperture-blade')];

Aperture

A menu button whose iris blades open into a full-screen menu and snap shut like a shutter

11.9 KB0 depsNavigation

index.html

<nav class="dimple" aria-label="Main">
  <button class="dimple-tab" type="button" aria-selected="true" data-value="home" data-tint="#ffb238">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/><path class="dimple-line" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/></svg>
    <span class="dimple-label">Home</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="explore" data-tint="#36d695">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17z"/><path class="dimple-line" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zM15.5 8.5l-2 5-5 2 2-5z"/></svg>
    <span class="dimple-label">Explore</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="inbox" data-tint="#ff6b57">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/><path class="dimple-line" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18zM3.5 13H8l1.5 2.5h5L16 13h4.5"/></svg>

dimple.css

.dimple {
  --dimple-h: 64px;                 /* the bar itself */
  --dimple-head: 30px;              /* room above the bar for the drop to hop */
  --dimple-drop: 46px;              /* drop diameter */
  --dimple-radius: 26px;            /* bar corners */
  --dimple-width: 420px;
  --dimple-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  --dimple-bar-top: #ffffff;
  --dimple-bar-bottom: #eef0f5;
  --dimple-rim: rgb(255 255 255 / .95);

dimple.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.dimple-tab')];
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const tintOf = t => t.dataset.tint || '';

  let index = Math.max(0, tabs.findIndex(t => t.getAttribute('aria-selected') === 'true'));
  root.setAttribute('role', 'tablist');
  tabs.forEach(t => {
    t.setAttribute('role', 'tab');
    t.setAttribute('aria-selected', 'false');
    t.tabIndex = -1;

Dimple

A bottom tab bar where a coloured drop hops between dips in the bar and lands with a ripple

8.4 KB0 depsNavigation

index.html

<nav class="fresnel" aria-label="Main">
  <svg class="fresnel-lamp" viewBox="0 0 120 140" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="fresnel-g-barrel" x1="0" y1="0" x2="1" y2="0">
        <stop class="fresnel-s-edge" offset="0"/>
        <stop class="fresnel-s-rim" offset=".07"/>
        <stop class="fresnel-s-hi" offset=".3"/>
        <stop class="fresnel-s-mid" offset=".58"/>
        <stop class="fresnel-s-shade" offset=".86"/>
        <stop class="fresnel-s-dark" offset="1"/>
      </linearGradient>

fresnel.css

.fresnel-lamp {
  grid-row: 1;
  position: relative;
  z-index: 3;
  height: var(--fresnel-lamp-h);
  width: auto;
  overflow: visible;
  translate: 0 0;
  transition: translate 100ms var(--fresnel-ease);
  pointer-events: none;
}

fresnel.js

export function init(root, {
  onChange,            // (index, href) => void, when the chosen link changes
  onPreview,           // (index, href) => void, while dragging: the link the beam is over
  followLinks = true,  // a plain click follows the link once the lamp strikes on it
  drag = true,         // press and drag (or flick) along the bar to aim the lamp
  travel = 560,        // ms, sets the spring's stiffness: with the default settle the beam is within 10% of
                       // the link after ~0.35 s, strikes at ~0.33–0.4 s and is fully still after ~0.9–1.2 s
  settle = .12,        // 0–.4, how much the lamp overshoots and settles on arrival
} = {}) {
  const $ = s => root.querySelector(s);
  const head = $('.fresnel-head');

Fresnel

A navigation bar lit by a stage spotlight that swings to the link you choose

10 KB0 depsNavigation

What it does

Use it in your project

Questions

More like Loupe

Abacus

Aperture

Dimple

Fresnel

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Loupe

Abacus

Aperture

Dimple

Fresnel