Expanding Navbar Reveal

A fixed 16:9 navbar card centered over a full-bleed image; scrolling the first viewport expands the card's background and link row to fill the screen while the logo FLIPs from the card's bottom center up to a pinned top bar, uncovering the hero beneath.

Component

Index Studio

Archive Connect

Designing movement beyond fixed frames and rigid form

The frame dissolves, but the movement continues forward

Install

npx shadcn@latest add https://ui.aryank.space/r/expanding-navbar-reveal.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
backdropImage / logoImage	string	BLANK-hosted JPG / SVG	Revealed backdrop and the navbar wordmark.
leftLinks / rightLinks	[NavLink, NavLink]	Index/Studio and Archive/Connect	The link pairs flanking the logo.
embedded	boolean	true	Own the scroll container and scope the fixed navbar to it; set false to ride the window scroll with a viewport-fixed navbar.

Customize

leftLinks / rightLinkslinks

The two navbar link pairs.

backdropImage / logoImageasset-url

The revealed image and the FLIPping wordmark.

Dependencies

gsaplenis

Designing movement beyond fixed frames and rigid form

The frame dissolves, but the movement continues forward

components

ui