Skip to content

feat: Homebrew badge + animated star counter#266

Merged
timothytlewis merged 1 commit intomainfrom
feature/pr1-badge-stars
Mar 10, 2026
Merged

feat: Homebrew badge + animated star counter#266
timothytlewis merged 1 commit intomainfrom
feature/pr1-badge-stars

Conversation

@timothytlewis
Copy link
Contributor

Summary

Adds two UI enhancements to the pkgx.sh hero section:

1. Homebrew Heritage Badge

  • Subtle badge above the hero headline: "From the creator of Homebrew" 🍺
  • Lightweight implementation (styled Box, not MUI Chip)
  • Responsive: shorter text on mobile
  • Hover state with primary color border transition

2. Animated Star Counter

  • Counter animates from 0 to the actual star count (9,718)
  • Smooth 60fps animation using requestAnimationFrame
  • Ease-out cubic easing for satisfying deceleration
  • Tabular-nums for stable width during counting

Accessibility (WCAG 2.1 AA)

  • role="status" and aria-label on badge
  • aria-live="polite" for counter updates to screen readers
  • prefers-reduced-motion respected (instant display, no animation)
  • tabIndex={0} and focus-visible outline on badge
  • role="img" aria-hidden="true" on decorative emoji

Bundle Impact

  • +1.75 KB raw JS (462.85 KB -> 464.57 KB)
  • +0.76 KB gzip (148.89 KB -> 149.65 KB)
  • Well under the 6 KB budget

Files Changed

  • src/components/HomebrewBadge.tsx (new)
  • src/components/Stars.tsx (enhanced with animation)
  • src/pkgx.sh/Hero.tsx (badge integration)
  • public/stars.json (star count data)

- Add HomebrewBadge component (lightweight styled Box, not MUI Chip)
  - 'From the creator of Homebrew' with beer mug icon
  - Responsive: shorter text on mobile
  - Accessible: role=status, aria-label, tabIndex, focus-visible outline
  - Hover: border color transitions to primary

- Enhance Stars component with animated counter
  - Counts from 0 to actual value using requestAnimationFrame
  - Ease-out cubic easing for smooth deceleration
  - Respects prefers-reduced-motion (instant display)
  - Tabular-nums for stable width during animation
  - aria-live=polite for screen reader updates

- Integrate badge into hero section (above 'Run Anything' heading)

- Add public/stars.json with current count (9718)

Bundle impact: +1.75KB raw, +0.76KB gzip (budget was 6KB)
@timothytlewis timothytlewis merged commit 2ea9b94 into main Mar 10, 2026
6 of 7 checks passed
@timothytlewis timothytlewis deleted the feature/pr1-badge-stars branch March 10, 2026 15:43
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