Blittech/braidsbymira
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make Home's portrait parallax respect prefers-reduced-motion

Browse Source 
The About section's portrait image now checks useReducedMotion() and
disables parallax scroll motion when the user has set OS-level reduced
motion preferences.

Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
This commit is contained in:
belviskhoremk
2026-08-03 23:02:21 +00:00
parent 726893ab87
commit e24c1c7be7
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/Home.tsx
View File

@@ -1,5 +1,5 @@
import { Link, useNavigate } from 'react-router-dom' import { Link, useNavigate } from 'react-router-dom'
import { motion, useScroll, useTransform } from 'framer-motion' import { motion, useScroll, useTransform, useReducedMotion } from 'framer-motion'
import Hero3DScene from '../components/Hero3DScene' import Hero3DScene from '../components/Hero3DScene'
import ScrollReveal from '../components/ScrollReveal' import ScrollReveal from '../components/ScrollReveal'
import ServiceCard from '../components/ServiceCard' import ServiceCard from '../components/ServiceCard'
@@ -17,7 +17,8 @@ const TESTIMONIALS = [
function Home() { function Home() {
const navigate = useNavigate() const navigate = useNavigate()
const { scrollYProgress } = useScroll() const { scrollYProgress } = useScroll()
const portraitY = useTransform(scrollYProgress, [0, 1], [0, -40]) const prefersReducedMotion = useReducedMotion()
const portraitY = useTransform(scrollYProgress, [0, 1], prefersReducedMotion ? [0, 0] : [0, -40])
return ( return (
<div> <div>