Dimple

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

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

Dimple: a look at the source

// Dimple — a bottom tab bar whose surface dips under the selected tab. A coloured drop sits in the dip;
// pick another tab and the drop hops there, the dip follows it as a shallow wake, and the landing
// sends ripples along the bar's top edge. No dependencies.
// Everything moves on one requestAnimationFrame loop of springs, so a new tap mid-flight only moves
// the target: position and velocity carry on. The drop can also be grabbed and dragged along the bar.

const MOVE = [170, .86];             // stiffness, damping ratio: the drop's sideways travel
const LIFT = [260, .62];             // the drop's height; under-damped so a landing sinks into the cup and floats back up
const CUP = [320, .28];              // the dip's depth; very under-damped, so the surface wobbles like liquid
const SQUISH = [480, .34];           // squash and stretch of the drop
const HOP = [12, .08, 26];            // px: hop height = min(max, base + distance × per-px)
const DESCEND = .38;                 // the drop starts to come down when this share of the trip is left
const WAKE = .72;                    // how much the dip flattens while the drop is in the air (1 = flat)
const RIPPLE = { speed: 520, wave: .11, decay: 3.2, reach: 240, life: 1.2, max: 3.2 };   // px/s, rad/px, 1/s, px, s, px
const SLOP = 6;                      // px a press must move before it becomes a drag (4 on touch)
const THROW = .12;                   // s: on release the drop aims where the finger's speed would carry it in this time
const RECENT = 80;                   // ms of pointer samples used for the release speed
const STEP = 3;                      // px between samples of the bar's top edge

const NS = 'http://www.w3.org/2000/svg';
let uid = 0;
const svg = (tag, attrs, parent) => {
  const n = document.createElementNS(NS, tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  parent?.append(n);
  return n;
};
const span = (cls, parent) => {
  const n = document.createElement('span');
  n.className = cls;
  parent.append(n);
  return n;
};
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
// a spring step: returns [value, velocity]
const spring = (x, v, to, [k, z], dt) => {
  const a = -k * (x - to) - 2 * z * Math.sqrt(k) * v;
  v += a * dt;
  return [x + v * dt, v];
};
…  405 more lines in the zip

/* Dimple — a bottom tab bar whose surface dips under the selected tab, with a coloured drop in the dip.
   Every colour and size is a custom property on .dimple; override them per instance. */

@property --dimple-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffb238;
}

.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-shadow: drop-shadow(0 0 .6px rgb(22 28 48 / .28)) drop-shadow(0 14px 22px rgb(30 36 70 / .14));
  --dimple-ink: #161821;
  --dimple-muted: #8b909d;
  --dimple-on-drop: rgb(28 18 4 / .84);
  --dimple-glow: .32;               /* strength of the tinted light in the cup */
  --dimple-halo: 30%;               /* how much of the tint glows around the drop */
  --dimple-label-mix: 58%;          /* label colour: this much tint, the rest ink */

  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: var(--dimple-width);
  height: calc(var(--dimple-head) + var(--dimple-h));
  padding: var(--dimple-head) 22px 0;
  font-family: var(--dimple-font);
  color: var(--dimple-muted);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
…  164 more lines in the zip

Ask a question

What it does

A five-tab bottom bar for app-style sites. The bar's top edge dips under the selected tab, and a glossy drop in that tab's colour floats in the dip, carrying the tab's icon. Tap another tab and the drop hops there: it stretches as it leaves, its colour blends to the new tab's on the way, and the dip follows underneath as a shallow wake that the other icons sink into. It lands with a squash, the dip sinks under its weight and wobbles back, and a ripple runs out along the bar in both directions. Tap again mid-hop and it simply changes course. You can also grab the drop and slide it along the bar: it takes on the colour and icon of each tab it passes, and when you let go it hops to the nearest one at your speed.

Good for: Mobile-first web apps, PWAs, travel, social, food and lifestyle apps, any product site that wants a tab bar with character.
How it works: A handful of springs on one requestAnimationFrame loop move the drop, the dip and the squash. Each frame the script redraws the bar's outline as an SVG path: rounded ends, the dip under the drop and any ripples still travelling. Dragging uses Pointer Events and hands the pointer's speed to the same springs on release. Works with mouse, pen and touch; vertical swipes still scroll the page. Your markup is just five buttons with icons, labels and a data-tint colour each.
How to use: Copy two files, paste the markup, call init(). It fires onChange with the tab's index and value.

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

Use it in your project

Copy dimple.css and dimple.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Each tab is a button with an icon, a label and a colour; the bar's surface, the dip and the drop are drawn by the script.
Start it:

import { init } from './dimple.js';

const dimple = init(document.querySelector('.dimple'), {
  onChange: (index, value) => console.log(index, value),
});

Mark the starting tab with aria-selected="true". Each tab's data-value is passed to onChange, and its data-tint is the colour of the drop while that tab is selected (any CSS colour). Leave data-tint out and the drop uses --dimple-tint.

### Your own icons

An icon is one 24 × 24 SVG with the class dimple-icon and two paths that share a shape: .dimple-fill (the solid shape, shown only inside the drop) and .dimple-line (the outline). Draw on a 24px grid with round caps. Any number of tabs works; the dip and the drop size themselves to the space each tab gets.

useEffect(() => {
  const dimple = init(ref.current, { onChange });
  return () => dimple.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.

Do I need React?

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

Can I change the colours and icons?

Yes. Each tab has its own data-tint colour; each icon is one SVG with an outline path and a matching fill path. Any number of tabs works.

Is it keyboard accessible?

Yes. It is a tab list: Tab to focus, arrow keys, Home and End to change, Enter and Space to select, with a visible focus ring. Keyboard changes fade the drop to the new tab instead of hopping. The drawn parts are hidden from screen readers.

Can I drag it?

Yes. Drag the drop, or drag sideways anywhere on the bar, and let go. onChange fires once, on release. Pass drag: false to turn it off.

What about reduced motion?

The drop fades between tabs instead of hopping, with no stretch, wobble or ripple. Dragging still follows the finger and settles without overshoot.

Light and dark?

Both are designed: a white porcelain bar with a soft shadow in the light theme, a graphite bar with a fine rim highlight in the dark one, and the drop's light glowing in the dip in both. With no theme set it follows the system.

Does it work on small screens?

Yes. The drop and the dip size themselves to the space each tab gets. Tested at 320px.

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 Dimple

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="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

index.html

<nav class="lantern" aria-label="Main">
  <ul class="lantern-list">
    <li><a class="lantern-link" href="#overview" aria-current="page">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><rect x="13.5" y="13.5" width="7" height="7" rx="2"/></svg>
      <span class="lantern-label">Overview</span>
    </a></li>
    <li><a class="lantern-link" href="#orders">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 8.2 12 4l8.5 4.2v7.6L12 20l-8.5-4.2Z"/><path d="M3.5 8.2 12 12.4l8.5-4.2M12 12.4V20"/></svg>
      <span class="lantern-label">Orders</span>
    </a></li>
    <li><a class="lantern-link" href="#clients">

lantern.css

.lantern-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lantern-row);
  padding: 0 14px 0 calc(var(--lantern-icon-x) - var(--lantern-inset));
  border-radius: 12px;
  text-decoration: none;
  color: var(--lantern-ink);
  -webkit-tap-highlight-color: transparent;

lantern.js

export function init(root, { onChange, onPreview, reach, drag = true } = {}) {
  const id = `lantern-${++instances}`;
  const links = [...root.querySelectorAll('.lantern-link')];
  if (!links.length) throw new Error('Lantern: no .lantern-link found');
  if (root.tagName !== 'NAV' && !root.getAttribute('role')) root.setAttribute('role', 'navigation');

  const hooks = links.map(link => {
    const hook = drawHook(id);
    link.prepend(hook);
    const dot = document.createElement('span');
    dot.className = 'lantern-dot';

Lantern

A sidebar where a hanging lantern swings to the item you choose and lights the labels around it

10.5 KB0 depsNavigation

What it does

Use it in your project

Questions

More like Dimple

Abacus

Aperture

Fresnel

Lantern

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Dimple

Abacus

Aperture

Fresnel

Lantern