Sticky Logo Shrink Nav
A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.
- Navigation
- scroll · navigation-ui
- gsap
- scrolltrigger
- flip
- advanced
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1928 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Headline to Logo Scale
A viewport-filling serif wordmark shrinks and travels into the header's logo slot as you scroll a pinned hero — Flip.fit measures the exact transform — while the header background and nav links fade in behind it.
- gsap
- scrolltrigger
- flip
light Command Palette Spring
⌘K (or the search button) fades in a blurred backdrop and springs a command panel from scale .96 / y 12 with back.out; typing filters 12 commands with a Flip re-flow and staggered re-entry, a highlight pill glides between rows via Flip, Enter pulses and runs.
- gsap
- flip
light Smooth Anchor Travel
Section links glide the page to their target instead of jumping: the stop clears the fixed header, longer trips take longer, focus moves to the heading, the nav ink follows, and any wheel, touch or key press hands control straight back.
- gsap
- scrolltrigger
light Hide / Show Header on Scroll
A fixed header slides out of view when you scroll down faster than a velocity threshold and slides back the moment you scroll up; past a set offset it shrinks into a compact strip with a frosted backdrop.
- gsap
- scrolltrigger