Marble

A bottom tab bar where a chrome ball rolls along a groove to the tab you tap.

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

Marble: a look at the source

// Marble — a bottom tab bar where a chrome ball rolls along a groove to the tab you tap. No dependencies.
// The ball is one spring on a requestAnimationFrame loop: picking another tab mid-roll only moves the
// target, so position and velocity carry on. Its rotation follows the distance travelled, so it rolls, not slides.
// It can also be grabbed and dragged along the groove (or dragged from anywhere on the bar) and flicked.

const STIFF = 200;                   // spring stiffness for a one-tab hop; longer rolls get a softer spring (see tune)
const ZETA = .62;                    // damping ratio for a one-tab hop; longer rolls damp a little more, so every landing overshoots a few px
const PUSH = 6000;                   // px/s², the most the ball can speed up: it leaves its dimple briskly, without a jolt
const LIFT = 4;                      // px an icon rises as the ball passes under it
const SEAT = 2;                      // px the selected icon sits raised
const EASE = 'cubic-bezier(.23, 1, .32, 1)';
const ECHO = 600;                    // ms: a landing this soon after the last one skips the ring, so quick taps don't stack ripples
const SLOP = 6;                      // px a press must move before it becomes a drag (4 on touch)
const THROW = .12;                   // s: on release the ball aims where the finger's speed would carry it in this time
const RECENT = 80;                   // ms of pointer samples used for the release speed; older ones count as standing still
const CATCH = 120;                   // ms for the ball to reach the finger when a drag starts away from it

const el = (cls, parent) => {
  const n = document.createElement('span');
  n.className = cls;
  parent.append(n);
  return n;
};
// past an end the ball follows less and less, like pulling against a spring
const band = (over, size) => (over * size * .55) / (size + .55 * Math.abs(over));

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

  // the parts the buyer never writes: groove with dimples, the ball, the ring
  const groove = el('marble-groove', root);
  groove.setAttribute('aria-hidden', 'true');
  const dimples = tabs.map(() => { const d = el('marble-dimple', groove); d.glow = el('marble-dimple-glow', d); return d; });
  const ball = el('marble-ball', root);
  ball.setAttribute('aria-hidden', 'true');
  el('marble-ball-pool', ball);
  el('marble-ball-shadow', ball);
  const spin = el('marble-ball-spin', el('marble-ball-body', ball));
…  276 more lines in the zip

/* Marble — a bottom tab bar where a chrome ball rolls along a groove to the tab you tap */
.marble {
  /* light theme: a brushed aluminium bar, a steel ball, a steel-blue accent */
  --marble-accent: #2b6de4;
  --marble-ink: #15181f;
  --marble-muted: #6b717c;
  --marble-fill: #2b6de4;
  --marble-glow: rgb(43 109 228 / .45);
  --marble-icon-halo: rgb(43 109 228 / .2);
  --marble-bar: linear-gradient(180deg, #f9fafc, #e2e5ea 52%, #d1d5db);
  --marble-brush: repeating-linear-gradient(180deg, rgb(255 255 255 / .32) 0 1px, rgb(20 26 40 / .035) 1px 2px);
  --marble-bar-edge: rgb(255 255 255 / .95);
  --marble-bar-line: rgb(20 26 40 / .16);
  --marble-bar-shadow: 0 1px 2px rgb(20 26 40 / .1), 0 26px 50px -24px rgb(20 26 40 / .5);
  --marble-groove: linear-gradient(180deg, #969ca6, #bfc3ca 60%, #d3d6dc);
  --marble-groove-shadow: inset 0 2px 3px rgb(20 26 40 / .5), inset 0 -1px 0 rgb(255 255 255 / .9);
  --marble-dimple: radial-gradient(60% 50% at 50% 30%, rgb(20 26 40 / .34), rgb(20 26 40 / .1) 60%, transparent 100%), radial-gradient(50% 40% at 50% 92%, rgb(255 255 255 / .85), transparent 100%);
  --marble-ball-base: radial-gradient(150% 100% at 50% 104%,
    #b9c3d2 0, #7d8796 18%, #4c5461 34%, #2b3039 41.5%, #c4cad3 42.5%, #eef1f5 55%, #fff 66%, #c9ced6 82%, #8c939e 100%);
  --marble-ball-shadow: rgb(20 26 40 / .55);
  --marble-ball-rim: rgb(20 26 40 / .45);
  --marble-ball-edge: rgb(30 38 52 / .55);
  --marble-ball-bounce: rgb(43 109 228 / .5);
  --marble-ball-lip: rgb(160 190 240 / .7);
  --marble-ball: 32px;
  --marble-groove-h: 18px;
  --marble-groove-bottom: 8px;
  --marble-groove-inset: 18px;
  --marble-radius: 26px;
  --marble-width: 400px;
  --marble-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --marble-ease: cubic-bezier(.23, 1, .32, 1);

  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: var(--marble-width);
  padding: 8px 8px 32px;
  border-radius: var(--marble-radius);
…  297 more lines in the zip

Ask a question

What it does

A five-tab bottom bar for app-style sites, cut as a black obsidian slab with a machined groove along its foot. A polished chrome ball sits in a dimple under the selected tab. Tap another tab and the ball rolls there: it turns as it travels, the icons it passes under rise in a wave, and it arrives with a small overshoot before settling into the next dimple. As it lands, a thin ring ripples out along the groove, the warm light under the ball blooms once, and the icon fills in. Tap again mid-roll and the ball simply changes course. You can also grab the ball and drag it along the groove: it rolls under your finger, the icons near it rise, and when you let go it rolls on at your speed to the nearest dimple. A quick flick on the bar moves one tab.

Good for: Mobile-first web apps, PWAs, portfolio and product sites that want a tab bar people notice, music, reading and gaming apps.
How it works: One spring on a requestAnimationFrame loop moves the ball; the reflection on the ball turns with the distance travelled, one full turn per tab, so it rolls rather than slides and comes to rest level. Each frame measures how close the ball is to each icon and lifts the near ones. Dragging uses Pointer Events: the ball follows the pointer 1:1, resists past the ends, and on release hands the pointer's speed to the same spring, aimed where that speed would carry it. Works with mouse, pen and touch; vertical swipes still scroll the page. The ball, groove and dimples are CSS gradients and shadows drawn by the script, so your markup is just five buttons with icons.
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.7 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: marble.css marble.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 marble.css and marble.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Each tab is a button with an icon and a label; the groove, the dimples and the ball are drawn by the script.
Start it:

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

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

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

### Your own icons

An icon is one 24 × 24 SVG with two paths that share a shape: .marble-fill (the solid shape, hidden until the tab is selected) and .marble-line (the outline, always drawn). Draw on a 24px grid with round caps; the stroke width is set in CSS. Any number of tabs works; the ball finds the centres itself.

useEffect(() => {
  const marble = init(ref.current, { onChange });
  return () => marble.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 use my own icons?

Yes. Each icon is one SVG with an outline path and a matching fill path; the README explains the two classes. 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, with a visible focus ring. Keyboard moves crossfade the ball instead of rolling it, so stepping through tabs stays quick. The ball and the groove are hidden from screen readers.

Can I drag it?

Yes. Drag the ball (or drag anywhere on the bar) and let go, or flick the bar to move one tab. onChange fires once, on release. Pass drag: false to turn it off.

What about reduced motion?

The ball crossfades between dimples instead of rolling, the icons fill without the wave, and the finale is the dimple's glow fading in. Dragging still follows the finger, without the bounce.

Light and dark?

Both are designed: brushed aluminium with a steel ball and a steel-blue accent in the light theme; obsidian with a chrome ball and lamp-warm light in the dark one. With no theme set it follows the system.

Does it work on small screens?

Yes. Under 400px the labels hide, the bar fills the width and the ball keeps rolling. 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 Marble

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 Marble

Abacus

Aperture

Dimple

Fresnel

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Marble

Abacus

Aperture

Dimple

Fresnel