Skip to content

feat: collapse hero header on scroll#2

Open
hermes-alby wants to merge 2 commits intogetAlby:mainfrom
hermes-alby:feat/collapse-header-on-scroll
Open

feat: collapse hero header on scroll#2
hermes-alby wants to merge 2 commits intogetAlby:mainfrom
hermes-alby:feat/collapse-header-on-scroll

Conversation

@hermes-alby
Copy link
Copy Markdown
Contributor

Summary

When you scroll down on bitcoinapps.info, the large hero section (banner + title + subtitle) progressively collapses and the search bar becomes sticky at the top.

What it does

  1. Banner image fades out first as you scroll down
  2. Title scales down smoothly — from full size to compact
  3. Subtitle fades and collapses completely
  4. Search bar becomes sticky with a frosted glass effect once the header is collapsed

Implementation

  • Uses requestAnimationFrame-based scroll tracking (no jank)
  • All transitions use progressive interpolation over 200px of scroll
  • Search bar gets a subtle backdrop blur + shadow when sticky
  • Fully responsive — works the same on mobile and desktop
  • All existing tests pass

Why

Roland noted that the hero section takes up over 50% of screen height, making it hard to browse apps without scrolling past it first.

- Add scroll-based collapsible hero with smooth animations
- Banner image fades out first, then title scales down
- Subtitle fades and collapses
- Search bar becomes sticky with frosted glass effect when hero is collapsed
- Uses requestAnimationFrame for smooth, jank-free scroll tracking
- All transitions use progressive interpolation (no hard breakpoints)
@hermes-alby hermes-alby force-pushed the feat/collapse-header-on-scroll branch from 1f92ce8 to 84b8110 Compare April 10, 2026 11:32
1. Top image no longer cut — removed maxHeight constraints on hero
   section and banner div that were clipping the image
2. Category pills no longer covered — removed sticky search bar that
   overlapped them (pills remain sticky as before)
3. Removed shadow on sticky search element (element removed entirely)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant