Pinch

A glass segmented control whose pill stretches like a drop of water.

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 $120, you save $30

Pinch: a look at the source

// Pinch — glass segmented control. No dependencies.
// The pill is driven by two springs: the leading edge is stiff, the trailing
// edge is soft, so the pill stretches toward its target and then catches up.

const LEAD = { k: 520, c: 34 };   // stiffness, damping
const TRAIL = { k: 260, c: 26 };

const reducedMotion = () => matchMedia('(prefers-reduced-motion: reduce)').matches;

export function init(root, { onChange } = {}) {
  const options = [...root.querySelectorAll('.pinch-option')];
  const pill = document.createElement('span');
  pill.className = 'pinch-pill';
  pill.setAttribute('aria-hidden', 'true');
  root.prepend(pill);
  root.setAttribute('role', 'radiogroup');

  let index = Math.max(0, options.findIndex(o => o.getAttribute('aria-checked') === 'true'));
  // springs for the left and right edge of the pill, in px
  const L = { x: 0, v: 0, target: 0 };
  const R = { x: 0, v: 0, target: 0 };
  let raf = 0, last = 0, dragging = null;

  const edges = i => {
    const o = options[i];
    return [o.offsetLeft, o.offsetLeft + o.offsetWidth];
  };

  function paint() {
    pill.style.width = `${R.x - L.x}px`;
    pill.style.transform = `translateX(${L.x}px)`;
  }

  function snap() {
    const [l, r] = edges(index);
    L.x = L.target = l; R.x = R.target = r; L.v = R.v = 0;
    paint();
  }

  function step(t) {
…  107 more lines in the zip

/* Pinch — a glass segmented control whose pill stretches like a drop of water */
.pinch {
  --pinch-accent: #007aff;
  --pinch-ink: #0b1220;
  --pinch-muted: #4c5566;
  --pinch-glass: rgb(255 255 255 / .46);
  --pinch-pill: rgb(255 255 255 / .92);
  --pinch-rim-top: rgb(255 255 255 / .95);
  --pinch-rim-bottom: rgb(255 255 255 / .25);
  --pinch-hairline: rgb(15 25 45 / .08);
  --pinch-shadow: 0 1px 1px rgb(15 30 60 / .05), 0 18px 40px -20px rgb(15 30 60 / .45);
  --pinch-pill-shadow: 0 1px 2px rgb(15 30 60 / .10), 0 6px 16px -6px rgb(15 30 60 / .30);
  --pinch-blur: blur(28px) saturate(180%);
  --pinch-pad: 5px;
  --pinch-h: 44px;
  --pinch-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--pinch-pad);
  border-radius: 999px;
  background: var(--pinch-glass);
  -webkit-backdrop-filter: var(--pinch-blur);
          backdrop-filter: var(--pinch-blur);
  box-shadow:
    inset 0 1px 0 var(--pinch-rim-top),
    inset 0 -1px 0 var(--pinch-rim-bottom),
    inset 0 0 0 1px var(--pinch-hairline),
    var(--pinch-shadow);
  font-family: var(--pinch-font);
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.pinch::before {
  content: "";
…  79 more lines in the zip

Ask a question

What it does

A segmented control in frosted iOS-style glass for switching views, like Day / Week / Month / Year. When you pick another option, the pill stretches toward it and settles with a spring.

Good for: Dashboards, calendars, pricing toggles, app-style web UIs.
How it works: Tap an option or drag the pill across. The leading edge moves fast and the trailing edge catches up, so the pill stretches like a drop of water.
How to use: Copy two files, paste the markup, call init(). It fires onChange with the selected value.

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

Use it in your project

Copy pinch.css and pinch.js into your project.
Add the markup from index.html (the block between the COMPONENT comments).
Start it:

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

Mark the starting option with aria-checked="true". Each option's data-value is passed to onChange.

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

Questions

What exactly do I get?

The full source, a demo 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.

Do I need React?

No. The README shows how to use it in React or Next.js.

Is it keyboard accessible?

Yes. It works as a radio group with the arrow keys, Home and End.

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 Pinch

All navigation

index.html

<nav class="zipper" aria-label="Menu">
  <button class="zipper-pull" type="button" aria-expanded="false" aria-controls="zipper-links" aria-label="Menu">
    <span class="zipper-slider"></span>
    <span class="zipper-bail"></span>
    <span class="zipper-tag"></span>
  </button>
  <div class="zipper-body">
    <div class="zipper-lining"></div>
    <ul class="zipper-links" id="zipper-links">
      <li class="zipper-item"><a class="zipper-link" href="#home">Home</a></li>
      <li class="zipper-item"><a class="zipper-link" href="#shop">Shop</a></li>

zipper.css

.zipper-link {
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  margin: -2px -8px;
  border-radius: 8px;
  color: var(--zipper-ink);
  text-decoration: none;
  font: 600 var(--zipper-link-size)/1.2 var(--zipper-font);
  letter-spacing: -.012em;
  white-space: nowrap;

zipper.js

export function init(root, { onOpen, onClose, onSelect, threshold = 0.4 } = {}) {
  const $ = s => root.querySelector(s);
  const body = $('.zipper-body');
  const pull = $('.zipper-pull');
  const slider = $('.zipper-slider');
  const tag = $('.zipper-tag');
  const list = $('.zipper-links');
  const items = [...root.querySelectorAll('.zipper-item')];
  const links = [...root.querySelectorAll('.zipper-link')];
  const teethBox = $('.zipper-teeth');
  const flaps = ['l', 'r'].map(s => ({

Zipper

$15

A side menu you unzip: drag the pull down and the teeth part to reveal the links

9.8 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

$12

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

$12

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

$12

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 Pinch

Zipper

Aperture

Dimple

Fresnel

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Pinch

Zipper

Aperture

Dimple

Fresnel