Skip to content

feat: grayscale photos that colorize on hover#99

Closed
kaiiiichen wants to merge 1 commit into
mainfrom
feat/grayscale-images-hover-color
Closed

feat: grayscale photos that colorize on hover#99
kaiiiichen wants to merge 1 commit into
mainfrom
feat/grayscale-images-hover-color

Conversation

@kaiiiichen

Copy link
Copy Markdown
Owner

Summary

  • All photographic images render black & white via CSS grayscale, completing the monochrome theme — no image assets changed
  • Color returns on hover with a 0.2s filter transition:
    • Home avatar — colorizes on direct hover
    • Album art in the Listening card, last month's tops panel, and playlist track lists — colorizes when the track row is hovered (replaces the old 18% partial desaturation)
    • Music for Life covers (index cards + detail hero) — colorize when the surrounding card/link is hovered
  • Touch devices (no hover) show the black & white version

Test plan

  • npm run lint / npm run typecheck / npm run test (23) / npm run build
  • Browser-verified: avatar + 6 home album arts + 7 playlist covers computed as grayscale(1) with filter 0.2s transition; detail page hero and all track arts carry the hover-reveal classes

🤖 Generated with Claude Code

Photos and cover art render black & white to match the monochrome
theme, regaining color on hover (0.2s filter transition):

- Home avatar colorizes on direct hover
- Track album art (Listening card, last month's tops, playlist tracks)
  colorizes on row hover, replacing the old partial desaturation
- Music for Life playlist covers colorize when their card/link is
  hovered

Touch devices simply show the black & white version.

Co-authored-by: Claude <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 10, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
kaichen.dev Ready Ready Preview, Comment Jul 10, 2026 7:54am

@kaiiiichen

Copy link
Copy Markdown
Owner Author

Decided against the grayscale-with-hover-color treatment — keeping images in full color.

@kaiiiichen kaiiiichen closed this Jul 10, 2026
@kaiiiichen kaiiiichen deleted the feat/grayscale-images-hover-color branch July 10, 2026 07:55
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