feat(web): add stargazers avatar grid background to opensource hero section

[ComputelessComputer]

feat(web): add stargazers avatar grid background to opensource hero

Summary

Adds an animated grid of GitHub stargazer avatars as a background to the hero section on the opensource page. The avatars scroll horizontally in alternating directions, creating a subtle visual effect that showcases community engagement.

Changes:

• New useGitHubStargazers hook to fetch the most recent stargazers from GitHub API with error handling
• StargazersGrid component displaying avatars in 6 animated rows
• CSS keyframe animations for infinite horizontal scrolling
• Gradient overlays to fade the grid edges and ensure hero text remains readable
• Fixed incorrect route path in sitemap (/product/opensource → /opensource)

Updates since last revision

• Fixed the stargazer fetching logic to get the most recent stargazers (not oldest). The hook now:
  1. Fetches repo info to get total star count
  2. Calculates the last page of stargazers
  3. Fetches that page and reverses results so newest appear first
• Fixed pre-existing TypeScript error in sitemap.ts (incorrect route path)

Review & Testing Checklist for Human

• [ ] Visual review: Check that the animation speed, opacity (40%), and gradient overlays look good and don't distract from the hero text. Review the Argos visual diff for the 3 changed screenshots.
• [ ] Verify "most recent" logic: Confirm the displayed avatars are actually recent stargazers (you can cross-check a few usernames against the GitHub stargazers page)
• [ ] Mobile responsiveness: Test on smaller screens to ensure the grid doesn't cause layout issues
• [ ] Performance: Verify the page loads smoothly with 100 avatar images and infinite animations

Recommended test plan:

1. Visit the Netlify preview
2. Verify stargazer avatars appear as a background grid behind the hero text
3. Confirm avatars are clickable and link to correct GitHub profiles
4. Test on mobile viewport sizes
5. Check browser console for any API errors

Notes

• GitHub API rate limit is 60 requests/hour for unauthenticated requests. The hook now makes 2 API calls (repo info + stargazers) but has a 1-hour stale time to minimize requests.
• On API failure, the grid gracefully degrades to showing nothing (empty array fallback)

Link to Devin run: https://app.devin.ai/sessions/e453ca73e4dc474d82ff0dcb76d8bd52 Requested by: [email protected] (@ComputelessComputer)

[devin-ai-integration[bot]]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• [ ] Disable automatic comment and CI monitoring

[netlify[bot]]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	1a823f0733f8983fec794fe27cc0ee94b33038fd
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/692fec845599290008a70c32
😎 Deploy Preview	https://deploy-preview-2007--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify[bot]]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	1a823f0733f8983fec794fe27cc0ee94b33038fd
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692fec842092590008a58e3e
😎 Deploy Preview	https://deploy-preview-2007--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai[bot]]

[!WARNING]

Rate limit exceeded

@ComputelessComputer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 59 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between e93014576ae8a6cd408b7e02a715585a5e25a7dd and 1a823f0733f8983fec794fe27cc0ee94b33038fd.

📒 Files selected for processing (1)

• apps/web/src/queries.ts (1 hunks)

📝 Walkthrough

Walkthrough

Adds a React Query hook to fetch GitHub stargazers, an animated StargazersGrid overlay on the opensource hero, platform-aware DownloadButton rendering, new CSS keyframe animations, and two new download routes that redirect to external installers.

Changes

Cohort / File(s)	Summary
GitHub data & hook apps/web/src/queries.ts	Added Stargazer interface and useGitHubStargazers(count = 100) hook: fetches repo metadata to determine total stargazers (fallback to LAST_SEEN_STARS), computes pagination, requests stargazers, maps to { username, avatar }, reverses order, handles errors, caches with 1‑hour staleTime.
Opensource page & UI apps/web/src/routes/_view/opensource.tsx	Added StargazerAvatar and StargazersGrid internal components; calls useGitHubStargazers(500) in HeroSection; conditionally renders animated avatar grid overlay; adjusted layout/z-index; replaced some static CTAs with DownloadButton.
Download button behaviour apps/web/src/components/download-button.tsx	Made DownloadButton platform-aware via usePlatform; added getPlatformData() mapping to platform-specific icon, label, and href; rendering uses derived values. Public signature unchanged.
Animations / styles apps/web/src/styles.css	Added @keyframes scroll-left, @keyframes scroll-right, @keyframes fade-in-out and utility classes .animate-scroll-left, .animate-scroll-right, .animate-fade-in-out for animated avatar rows and fade effects.
Download redirects (routes) apps/web/src/routes/_view/download/linux.tsx, apps/web/src/routes/_view/download/windows.tsx	New file routes that immediately redirect in beforeLoad to external platform-specific installer URLs (AppImage for Linux, MSI for Windows).

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser UI (React)
  participant Hook as useGitHubStargazers
  participant Cache as React Query Cache
  participant GitHub as GitHub API

  Browser->>Hook: mount / call useGitHubStargazers(500)
  Hook->>Cache: check cache (staleTime = 1h)
  alt cache miss or stale
    Hook->>GitHub: GET /repos/:owner/:repo (fetch stargazers_count)
    GitHub-->>Hook: repo metadata
    Hook->>GitHub: GET /repos/:owner/:repo/stargazers?per_page=...&page=...
    GitHub-->>Hook: stargazer list
    Hook->>Hook: map -> [{username, avatar}] and reverse
    Hook->>Cache: store result
    Hook-->>Browser: stargazer array
  else cache hit
    Cache-->>Hook: cached stargazers
    Hook-->>Browser: stargazer array
  end
  Browser->>Browser: render StargazersGrid (CSS animations rows)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Inspect pagination/lastPage calculation and behavior when stargazer counts change or exceed API pagination limits in apps/web/src/queries.ts.
• Validate error handling and any GitHub rate-limit considerations.
• Review performance and accessibility impact of StargazersGrid (many DOM elements, animations) in apps/web/src/routes/_view/opensource.tsx.
• Verify platform detection, fallback cases, and link correctness in apps/web/src/components/download-button.tsx.
• Confirm redirect behavior and URLs in the new download route files.

Possibly related PRs

• fastrepl/hyprnote#1612 — related changes to apps/web/src/queries.ts that add or modify GitHub data hooks.
• fastrepl/hyprnote#1622 — modifies apps/web/src/components/download-button.tsx; overlaps with platform-aware DownloadButton changes.
• fastrepl/hyprnote#1980 — updates apps/web/src/routes/_view/opensource.tsx; related to the opensource page integration.

Suggested reviewers

• yujonglee

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main feature: adding an animated stargazers avatar grid background to the opensource hero section, which aligns with the primary changes across multiple files.
Description check	✅ Passed	The description is comprehensive and clearly related to the changeset, detailing the new hooks, components, animations, and fixes introduced in the pull request.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
web (Inspect)	⚠️ Changes detected (Review)	3 changed	Nov 30, 2025, 6:36 AM