Header Style Transition
A transparent header floats over a full-bleed fjord hero; once 120px of content has slid under it, a blurred solid bar fades in, a hairline draws across, the CTA turns accent and the bar compacts — switched at a threshold, scrubbed, or at the hero edge.
- Scroll
- scroll · navigation-ui
- gsap
- scrolltrigger
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1652 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 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
Featured light Fullscreen Section Snap
GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
- gsap
- scrolltrigger
light Section Dot Indicator
A fixed column of six dots tracks six full-height chapters: the active dot grows, turns accent and reveals its chapter name; hovering shows any label; clicking scrolls smoothly to that section with ScrollToPlugin.
- gsap
- scrolltrigger