Skip to content

feat(rhythm): visual depth — continuous heatmap, session chart, and scroll fix#125

Merged
dinesh-git17 merged 4 commits intomainfrom
feat/rhythm-visual-depth
Feb 27, 2026
Merged

feat(rhythm): visual depth — continuous heatmap, session chart, and scroll fix#125
dinesh-git17 merged 4 commits intomainfrom
feat/rhythm-visual-depth

Conversation

@dinesh-git17
Copy link
Owner

@dinesh-git17 dinesh-git17 commented Feb 27, 2026

Summary

Overhaul the rhythm page with layered visual improvements:

  • Pulse hero: streak counter with activity-driven pulse animation and radial glow
  • Overview sparklines: inline sparklines and 7-day trend indicators on metric cards
  • Heatmap continuous gradient: replace 5 discrete level classes with per-cell opacity scaled linearly against the activity maximum; CSS hover glow proportional to intensity; month labels faded by temporal distance
  • Session bar chart: SVG gradient fill (surface → accent-cool), 7-day trailing moving average polyline, portal-based hover tooltips
  • Mood timeline: scroll-to-end, connecting dot lines, today highlight
  • Scroll fix: clip rhythm-glow negative inset overflow that caused horizontal page scroll

Test plan

  • pnpm lint passes
  • pnpm build passes
  • Protocol Zero scan clean
  • Heatmap shows continuous color gradient with hover glow
  • Session chart shows gradient bars, moving average line, and tooltips on hover
  • Month labels fade by distance from current month
  • No horizontal scroll on rhythm page
  • Light theme adapts correctly

Introduce PulseHero streak visualization with activity-driven pulse
animation. Extend MetricCard with inline sparklines and trend indicators.
Enhance MoodTimeline with scroll-to-end behavior and connecting lines.
Add loading skeleton, animated value counter, and shared svg-utils.
Swap 5 fixed level classes for a single heatmap-cell-active class driven
by per-cell opacity scaled linearly against the activity maximum. Add
CSS hover glow proportional to cell intensity. Fade month labels by
temporal distance from current month.
…ion chart

Extract SessionBarChart into a client component with SVG gradient fill
(surface → accent-cool), 7-day trailing moving average polyline overlay,
and portal-based hover tooltips matching the heatmap tooltip pattern.
rhythm-glow uses negative inset (-4rem) which extends beyond the
viewport on narrow screens. Add overflow-x-hidden to the page wrapper
to clip the glow at the content boundary.
@vercel
Copy link

vercel bot commented Feb 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
claudehome-web Building Building Preview, Comment Feb 27, 2026 1:34pm

@github-actions
Copy link

github-actions bot commented Feb 27, 2026

CI Status Report

Workflow Status Failure Path
Quality ✅ Passed -
Delivery ✅ Passed -

Updated: 2026-02-27T13:35:44Z

@dinesh-git17 dinesh-git17 merged commit fac88a1 into main Feb 27, 2026
15 checks passed
@dinesh-git17 dinesh-git17 deleted the feat/rhythm-visual-depth branch February 27, 2026 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant