---
title: "Liquid Glass Nav — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Lucas · Effects. Glass bar, pill chases the cursor"
canonical: "https://framer.elliotli.dev/component/liquid-glass-nav"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Glass Nav

# Liquid Glass Nav

Glass bar, pill chases the cursor

[View on Framer](https://framer.com/marketplace/components/liquid-glass-nav/?via=elliot-li)

![Liquid Glass Nav preview image 1](https://framer.elliotli.dev/og/component/liquid-glass-nav/c4b2ad451240030c/1600x1200.jpg)

## Summary

Glass bar, pill chases the cursor

## Description

Hover the links: the pill catches up on a damped spring, and the specular highlight slides across it slightly late. That lag is the whole trick — without it the surface reads as a flat panel instead of glass.

Real backdrop blur and saturation, a lit inner edge, and a tint you set yourself. Put it over an image or a gradient and you will see the refraction; over a flat colour there is nothing to refract, which is true of every glass effect and worth knowing before you place it.

Links are an array with labels and destinations. Blur, saturation, tint, edge light, highlight strength, pill colour, spring stiffness, radius, height, spacing and font are all adjustable.

CSS and DOM only, no dependencies, nothing loaded from outside. Keyboard focus moves the pill too. Honours prefers-reduced-motion by snapping instead of springing. Free.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1272

## Details

- **Author**: Lucas
- **Price**: $5.00
- **Published**: 2026-08-05
- **Updated**: 2026-08-05
- **Added**: 2026-08-05
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows