Liquid Glass Tab Bar
A floating glass tab bar whose selection is a droplet: press and drag and it swells, stretches as it travels, magnifies the tabs beneath and lands on the nearest one.
Canvas 2D0 deps1 file · 23 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type {
KeyboardEvent as ReactKeyboardEvent,
MouseEvent as ReactMouseEvent,
PointerEvent as ReactPointerEvent,
ReactNode,
} from "react";
/**
* LiquidGlassTabBar — a floating glass tab bar whose selection is a drop of
* liquid glass.
*
* At rest the selection is a soft platter behind the current tab. Press
* anywhere on the bar and the platter turns into a clear droplet: it lifts a
* few pixels (never onto the next tab's icon, never past the bar's edge),
* follows your finger across the bar, stretches in the direction it travels
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
The tab bar is where the 2025 glass material does its best trick, and almost every web copy stops at a blurred pill with a highlight that jumps between tabs. Here the selection is a drop of glass. At rest it is a soft platter behind the current tab. Press the bar and it swells into a clear droplet under your finger; drag and it follows you, stretching in the direction it travels and squashing as it stops, while the icons underneath show through it magnified. Let go and it lands on the nearest tab. The active colour is not a class switched on the tab: it lives inside the droplet as a tinted copy of the whole row, lined up with the real one, so the colour slides continuously as the droplet moves. The bar is glass too, blurred and saturated, and in Chromium a displacement map sized to the bar bends whatever scrolls beneath its rim. It collapses to icons while a page scrolls down, takes a search or compose button in its own glass circle, works with links or buttons, and supports the arrow keys, Home and End.
Curator’s note
Part of the Glassmorphism kit, drop 1. Pro because the droplet is a small physics system: a spring, a stretch from velocity, and a magnifying copy of the row that carries the active colour.
