Biblioteca
Navigation bar that turns to glass on scroll
The large title fades and the bar becomes frosted glass as soon as content scrolls underneath it.
Settings
Code
<div class="uv-gsn"><header><span class="sm">Library</span><button type="button" aria-label="Add"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></header><div class="sc" tabindex="0" aria-label="Library"><h3 class="lg">Library</h3><div class="it" style="--h:0"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:47"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:94"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:141"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:188"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:235"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:282"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:329"><i></i><span><b></b><b></b></span></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Large titles that collapse into a compact glass bar are a signature of modern mobile apps. At the top of this list the header is invisible and the page shows a big bold title; as soon as content scrolls beneath it, the bar blurs what passes underneath, gains a hairline divider and the small centered title fades in.
A tiny script only toggles a class at a scroll threshold, and all the visual change happens in CSS. The demo scrolls down and back once to show the effect, and the blur and tint sliders set how frosted the bar becomes.