Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/thatdeveloperguy-website / app/experience/MotionPreferenceControl.tsx |
| Date | Not specified in source |
| Repository | Janady13/thatdeveloperguy-website |
| Revision | 2bea2ebdff0e34494bff597d4fa9c8422a0c3a94 |
| Branch | main |
| Path or archive member | app/experience/MotionPreferenceControl.tsx |
| Original SHA-256 | 3d2dcb805000925a9d67c23a1384aa1f7f927e98a892f3e4f32787335a1e0c5f |
| Git blob SHA | a9644f2a17c967b4b0a17f0042031e7b481db239 |
| Reading-copy SHA-256 | 3d2dcb805000925a9d67c23a1384aa1f7f927e98a892f3e4f32787335a1e0c5f |
Recovered source transcript
Download complete source text ↓19 lines · 1.0 KB
import { useEffect, useState } from 'react';
const KEY = 'tdg-motion';
/** Visible control for prolonged ambient motion. Stored per browser; reduced-motion media query always wins. */
export function useMotionPreference(): [boolean, (on: boolean) => void] {
const [on, setOn] = useState(true);
useEffect(() => {
try { const stored = localStorage.getItem(KEY); if (stored === 'off') setOn(false); } catch { /* storage unavailable: default on */ }
const media = matchMedia('(prefers-reduced-motion: reduce)');
if (media.matches) setOn(false);
}, []);
const set = (next: boolean) => { setOn(next); try { localStorage.setItem(KEY, next ? 'on' : 'off'); } catch { /* ignore */ } };
return [on, set];
}
export function MotionPreferenceControl({ on, onChange }: { on: boolean; onChange: (on: boolean) => void }) {
return <button type="button" className="motion-control" aria-pressed={!on} onClick={() => onChange(!on)}>{on ? 'Pause motion' : 'Resume motion'}</button>;
}