Skip to content

feat(CherryBlossom): respect prefers-reduced-motion accessibility set…#6145

Open
aisshwaryaa8-collab wants to merge 4 commits into
JhaSourav07:mainfrom
aisshwaryaa8-collab:feat/cherry-blossom-reduced-motion-clean
Open

feat(CherryBlossom): respect prefers-reduced-motion accessibility set…#6145
aisshwaryaa8-collab wants to merge 4 commits into
JhaSourav07:mainfrom
aisshwaryaa8-collab:feat/cherry-blossom-reduced-motion-clean

Conversation

@aisshwaryaa8-collab

Copy link
Copy Markdown
Contributor

…ting

Description

CherryBlossom renders 25 falling petals on an infinite (repeat: Infinity) loop across the full viewport, with no way for the user to opt out. This adds a check using framer-motion's useReducedMotion() hook — if the user has prefers-reduced-motion: reduce set at the OS level, the component now returns null instead of forcing the animation on them. This aligns with WCAG 2.3.3 guidance on perpetual background motion.
Also updated the existing framer-motion mocks across 7 other CherryBlossom.*.test.tsx files to include useReducedMotion, since they previously only mocked motion.div and broke once the component started calling the new hook. Added 2 new tests to CherryBlossom.test.tsx covering both the reduced-motion and normal-motion paths.

Fixes #6142

Pillar

  • 🎨 Pillar 1 — New Theme Design
  • 📐 Pillar 2 — Geometric SVG Improvement
  • 🕐 Pillar 3 — Timezone Logic Optimization
  • 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

N/A

Checklist before requesting a review:

  • I have read the CONTRIBUTING.md file.
  • I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
  • I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
  • My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
  • I have updated README.md if I added a new theme or URL parameter.
  • I have started the repo.
  • I have made sure that i have only one commit to merge in this PR.
  • The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
  • (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

@vercel

vercel Bot commented Jun 21, 2026

Copy link
Copy Markdown
Contributor

@aisshwaryaa8-collab is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the status:blocked This PR is blocked due to a failing CI check. label Jun 21, 2026
@github-actions github-actions Bot removed the status:blocked This PR is blocked due to a failing CI check. label Jun 21, 2026
@github-actions

Copy link
Copy Markdown
Contributor

📦 Next.js Bundle Size Report (Gzipped Sizes)

✨ No significant bundle size changes detected.

📊 Summary of Totals

Category PR Size Base Size Difference
Total JS 3697.00 KB 3697.00 KB 0 B
Total CSS 296.58 KB 296.58 KB 0 B

@Aamod-Dev Aamod-Dev left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great focus on accessibility! Using framer-motion's useReducedMotion hook in components/CherryBlossom.tsx ensures that we respect user OS preferences according to WCAG guidelines. Modifying the mocks across all the test files, like components/CherryBlossom.empty-fallback.test.tsx, is very thorough and prevents test regressions. Approved!

@Aamod-Dev Aamod-Dev added GSSoC 2026 mentor:Aamod007 level:intermediate Moderate complexity tasks quality:clean PR follows clean coding practices, proper formatting, documentation, and maintainability standards. accessibility feature A completely new feature or major addition to the project. labels Jun 21, 2026
@github-actions github-actions Bot added the type:feature New features, additions, or enhancements label Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility feature A completely new feature or major addition to the project. GSSoC 2026 level:intermediate Moderate complexity tasks mentor:Aamod007 quality:clean PR follows clean coding practices, proper formatting, documentation, and maintainability standards. type:feature New features, additions, or enhancements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Respect prefers-reduced-motion for CherryBlossom background animation

2 participants