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

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.

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

1 participant