Skip to content

Polish contribution graph UX and profile page nits#76

Merged
stylessh merged 1 commit intomainfrom
styles/contributor-graph-nits
Apr 12, 2026
Merged

Polish contribution graph UX and profile page nits#76
stylessh merged 1 commit intomainfrom
styles/contributor-graph-nits

Conversation

@stylessh
Copy link
Copy Markdown
Owner

Summary

  • Contribution graph tooltip — NumberFlow counter animation, direction-aware date parts (month fades, day rolls), flip-to-left when near viewport edge with eased transition, animated show/hide
  • Hover ring — SVG stroke rect slides across tiles using --primary color
  • Performance — cursor position tracked via motion values (zero React re-renders on mouse move); cell elements memoized; col:row map replaces new Date() in hot path; static style string hoisted to module level
  • Color tuning — lighter level-0 tiles in light mode (barely visible), brighter high-level tiles in dark mode
  • Activity feed skeleton — shown while activity query is loading
  • Participant avatars — link to profile pages in PR/issue sidebars
  • Edit button — hidden for now

Test plan

  • Hover across contribution graph — tooltip follows cursor, counter animates, no flicker in gaps
  • Hover near right edge — tooltip flips to left side with smooth transition
  • Dark mode — high-activity tiles visibly brighter; light mode — empty tiles barely visible
  • Navigate to a PR/issue, click a participant avatar — lands on their profile
  • Load profile page — activity skeleton visible before feed loads

- Smooth tooltip with NumberFlow counter, direction-aware date animation, flip-to-left on viewport edge, show/hide motion
- Eliminate mouse-move re-renders by tracking cursor position via motion values; only re-render on cell change
- Memoize cell elements so tile reconciliation is skipped on hover
- Add col:row map to avoid new Date() in hot path; hoist static style string
- Animate ring indicator on hovered tile using SVG stroke
- Add activity feed skeleton
- Link participant avatars to profile pages
- Tune dark/light mode contribution level colors
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Apr 12, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
diffkit 2d2d2c3 Commit Preview URL

Branch Preview URL
Apr 12 2026, 03:35 AM

@stylessh stylessh merged commit c151bd2 into main Apr 12, 2026
4 checks passed
stylessh added a commit that referenced this pull request Apr 18, 2026
- Smooth tooltip with NumberFlow counter, direction-aware date animation, flip-to-left on viewport edge, show/hide motion
- Eliminate mouse-move re-renders by tracking cursor position via motion values; only re-render on cell change
- Memoize cell elements so tile reconciliation is skipped on hover
- Add col:row map to avoid new Date() in hot path; hoist static style string
- Animate ring indicator on hovered tile using SVG stroke
- Add activity feed skeleton
- Link participant avatars to profile pages
- Tune dark/light mode contribution level colors
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