📌 Description
src/components/landing-page/ui/StarField.tsx renders a large decorative
star background. It should not animate for users who prefer reduced motion, must
be hidden from assistive tech as decorative, and should not regress landing-page
performance.
This issue adds a prefers-reduced-motion guard, marks the field as decorative
(aria-hidden), and ensures it does not block interaction or hurt rendering cost.
🎯 Requirements and Context
- Respect
prefers-reduced-motion: reduce (disable/limit animation).
- Mark the decorative layer
aria-hidden and ensure pointer-events: none.
- Keep render cost bounded (no per-frame layout thrash; CSS over JS where possible).
- No visual regression for default-motion users.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b perf/starfield-reduced-motion
2. Implement changes
- Update
src/components/landing-page/ui/StarField.tsx with the motion guard and
ARIA/pointer fixes.
- Add
src/components/landing-page/__tests__/StarField.test.tsx covering
reduced-motion behaviour, aria-hidden, and pointer-events (mock matchMedia).
- Add
docs/performance/STARFIELD.md documenting the motion and cost decisions.
- Validate it does not intercept clicks or announce to screen readers.
3. Test and commit
- Run
pnpm test.
- Cover edge cases: reduced-motion on/off, SSR (no window), large viewport.
Example commit message
perf: reduced-motion guard and a11y for landing StarField
✅ Guidelines
- Minimum 95% test coverage on new/changed lines.
- Clear, reviewer-friendly documentation.
- Timeframe: 96 hours.
🏷️ Labels
type-performance · type-security · area-frontend · MAYBE REWARDED ·
GRANTFOX OSS · OFFICIAL CAMPAIGN
💬 Community & Support
- Join the CommitLabs contributor Discord to coordinate and get unblocked fast:
https://discord.gg/WV7tdYkJk
- Introduce yourself before starting so we can avoid duplicate work and pair you
with a reviewer. Maintainers triage actively and review fast.
📌 Description
src/components/landing-page/ui/StarField.tsxrenders a large decorativestar background. It should not animate for users who prefer reduced motion, must
be hidden from assistive tech as decorative, and should not regress landing-page
performance.
This issue adds a
prefers-reduced-motionguard, marks the field as decorative(
aria-hidden), and ensures it does not block interaction or hurt rendering cost.🎯 Requirements and Context
prefers-reduced-motion: reduce(disable/limit animation).aria-hiddenand ensurepointer-events: none.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
src/components/landing-page/ui/StarField.tsxwith the motion guard andARIA/pointer fixes.
src/components/landing-page/__tests__/StarField.test.tsxcoveringreduced-motion behaviour,
aria-hidden, and pointer-events (mock matchMedia).docs/performance/STARFIELD.mddocumenting the motion and cost decisions.3. Test and commit
pnpm test.Example commit message
✅ Guidelines
🏷️ Labels
type-performance·type-security·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support
https://discord.gg/WV7tdYkJk
with a reviewer. Maintainers triage actively and review fast.