Modern websites compete for attention with ever grander visuals. Parallax heroes stretch deep into the viewport. Carouse

Tovuti za kisasa zinashindania usikivu kwa kutumia picha na michoro inayozidi kuwa mikubwa na yenye kuvutia. Sehemu kuu za parallax (parallax heroes) zinajipanua ndani ya dirisha la mtumiaji (viewport). Karuseli (carousels) zinajisogeza bila mwisho. Video za mandhari (background videos) hujicheza zenyewe nyuma ya fomu za usajili. Mitindo hii huonekana kama kazi iliyokamilika na inayovutia kwenye jalada la usanifu (design portfolio). Kwa sehemu ya hadhira yako, mitindo hii ni kichocheo cha kifizikia.

Watu wanaoishi na matatizo ya mfumo wa usawa (vestibular disorders) hupata kichefuchefu, kizunguzungu, au maumivu makali ya kichwa (migraines) wanapokabiliwa na maeneo makubwa yenye mwendo endelevu. Ili kuwalinda, kila mfumo mkuu wa uendeshaji sasa unajumuisha mpangilio wa ufikiaji wa "Reduce Motion" (Punguza Mwendo). Vivinjari vya wavuti huonyesha upendeleo huo kupitia prefers-reduced-motion media query. Watengenezaji wa React wanaotaka kuheshimu mpangilio huo kwa usahihi wanaweza kutumia hook ya useReducedMotion kutoka @reactuses/core. Inasoma upendeleo wa OS na kuuweka katika hali ya boolean, inajisasisha papo hapo ikiwa mtumiaji atabadili mawazo, na inashughulikia uwasilishaji wa upande wa seva (server-side rendering) bila kusababisha hitilafu.

Kwa Nini Suluhisho za Kujitengenezea Huleta Matatizo

Unaweza kuulizia upendeleo huo mwenyewe kwa kutumia window.matchMedia('(prefers-reduced-motion: reduce)'). Watengenezaji wengi hufanya hivyo, na wengi huleta hitilafu ndogo ndogo.

Kwanza, unaweza kusahau kwa urahisi msikilizaji wa mabadiliko (change listener). Swali la awali hufanya kazi mara moja wakati sehemu (component) inapowekwa. Ikiwa mtumiaji atafungua programu yako, kisha akawasha au kuzima "Reduce Motion" kwenye mipangilio ya mfumo kwa sababu karuseli inamfanya ajisikie vibaya, sehemu yako haitapata taarifa hiyo ya mabadiliko. Kitu cha media query kinaunga mkono addEventListener, lakini kukiunganisha kwa usahihi, kukiondoa wakati wa unmount, na kuweka polyfill kwa sintaksi ya zamani ya addListener ni kazi ya ziada (boilerplate) inayochochea makosa ya kunakili na kubandika (copy-paste).

Pili, window haipo wakati wa SSR. Ikiwa programu yako inawasilishwa kwenye seva, wito wa matchMedia usiozingatia mazingira utasababisha hitilafu ya rejea (reference error) na kusitisha uwasilishaji. Unajikuta unajifunika ukaguzi huo kwa typeof window !== 'undefined' guards, ukikisia thamani ya asili, na kutumaini kuwa hydration ya mteja italingana.

Tatu, kurudia mantiki hiyo katika kila sehemu inayocheza (animated component) kunageuka kuwa mzigo wa matengenezo. Mwanachama mmoja wa timu anaandika msikilizaji kwa njia moja, mwingine anauacha kabisa, na wa tatu anaweka thamani ya asili inayopendelea mwendo. Hook inatengeneza utaratibu wa vurugu hizo.

useReducedMotion inatatua matatizo yote matatu. Inarudisha boolean rahisi. Inafanya kazi bila kuleta hitilafu (no-ops) kwenye seva. Inauunganisha na kuusafisha msikilizaji kiotomatiki.

Njia Tatu za Kuitumia

Mara tu unapopata boolean hiyo, unahitaji mkakati wa kuifanyia kazi. Hapa kuna mifumo mitatu inayoweza kutumika kuanzia kwenye sehemu moja hadi kwenye programu nzima.

1. Zuia Madarasa ya CSS Ili Kuepuka Kazi Isiyo na Lazima

Njia ya moja kwa moja zaidi ni kuzuia mizunguko mizito ya michoro ya JavaScript isianze kabisa. Wazia kuwa una sehemu ya picha ya parallax ambayo kwa kawaida husikiliza matukio ya kusogeza (scroll events) na kusogeza tabaka ndani ya mzunguko wa requestAnimationFrame. Badala ya kuendesha mantiki hiyo kisha kuzuia matokeo ya picha, kagua useReducedMotion kwanza.

Ikiwa hook itarudisha true, wasilisha sehemu hiyo kwa kutumia darasa la hali ya utulivu (static variant class) na uruke useEffect inayounganisha wasikilizaji wa kusogeza. Kivinjari hufanya kazi kidogo. Watumiaji wenye hisia kali dhidi ya mwendo huona picha iliyozingatiwa (fixed image). Wengine wote hupata tabaka zinazosogea. Kwa sababu kodi ya michoro haijawahi kuanza, unaokoa CPU na betri wakati huo huo.

2. Ipe Moja kwa Moja Maktaba za Michoro

Ikiwa unatumia maktaba kama Framer Motion, hook hiyo inaunganishwa moja kwa moja kwenye maelezo yako ya prop. Sehemu za michoro (motion components) hukubali vitu vya usanidi (configuration objects) kwa ajili ya aina (variants), mabadiliko (transitions), na ishara (gestures). Unaweza kutumia boolean kutoka useReducedMotion kuweka duration: 0 kwa masharti kwenye mabadiliko, au