@expokit/cli 0.4.0 → 0.4.2

package/registry/date-picker/files/src/components/ui/date-picker.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Modal,
@@ -132,6 +133,9 @@ type FlatProps = DatePickerBaseProps & {
   presets?: boolean | DatePickerPreset<Picked>[];
 };
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const SIZES: Record<DatePickerSize, { h: number; font: number; pad: number; icon: number }> = {
   sm: { h: 46, font: 15, pad: 12, icon: 17 },
   md: { h: 56, font: 16, pad: 16, icon: 19 },
@@ -241,6 +245,10 @@ export function DatePicker(props: DatePickerProps) {
   const restIcon = iconColor ?? colors.mutedForeground;
   const { width: winW, height: winH } = useWindowDimensions();
   const ranged = mode === 'range';
+  const reduce = useReduceMotion();
+  // The pan responder is built once; it reads Reduce Motion through this ref.
+  const live = useRef({ reduce });
+  live.current = { reduce };
 
   const [inner, setInner] = useState<Picked>(defaultValue);
   const current = value !== undefined ? value : inner;
@@ -269,26 +277,36 @@ export function DatePicker(props: DatePickerProps) {
   const wide = presentation === 'dialog' || (presentation === 'auto' && winW >= 640);
 
   useEffect(() => {
+    if (reduce) {
+      float.setValue(floating ? 1 : 0);
+      return;
+    }
     Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [floating, float]);
+  }, [floating, float, reduce]);
   useEffect(() => {
     Animated.timing(focus, { toValue: open ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(halo, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [open, focus, halo]);
+    // Reduce Motion: the halo fades in place (its scale interpolation is flat).
+    if (reduce) Animated.timing(halo, { toValue: open ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(halo, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [open, focus, halo, reduce]);
   useEffect(() => {
-    Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [ok, check]);
+    if (reduce) Animated.timing(check, { toValue: ok ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [ok, check, reduce]);
   useEffect(() => {
-    if (!error) return;
+    // Reduce Motion: no shake — the red border and message carry the error.
+    if (!error || live.current.reduce) return;
     shake.setValue(0);
     Animated.sequence([10, -8, 6, -4, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 55, useNativeDriver: true }))).start();
   }, [error, shake]);
   useEffect(() => {
     if (open) {
       drag.setValue(0);
-      Animated.spring(show, { toValue: 1, useNativeDriver: true, ...(asSheet ? motion.gentle : motion.snappy) }).start();
+      // Reduce Motion: the panel fades in place (its translate / scale interpolations are flat).
+      if (reduce) Animated.timing(show, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+      else Animated.spring(show, { toValue: 1, useNativeDriver: true, ...(asSheet ? motion.gentle : motion.snappy) }).start();
     } else if (mounted) {
-      Animated.timing(show, { toValue: 0, duration: motion.fast + 40, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(
+      Animated.timing(show, { toValue: 0, duration: reduce ? 150 : motion.fast + 40, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(
         ({ finished }) => finished && setMounted(false)
       );
     }
@@ -395,21 +413,23 @@ export function DatePicker(props: DatePickerProps) {
   const same = (a: Picked, b: Picked) =>
     isRange(a) && isRange(b) ? isSameDay(a.start, b.start) && isSameDay(a.end, b.end) : !isRange(a) && !isRange(b) && isSameDay(a, b);
 
-  const pan = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
-        onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
-        onPanResponderRelease: (_, g) => {
-          if (g.dy > 110 || g.vy > 1.1) {
-            setOpen(false);
-            onOpenChange?.(false);
-          } else Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
-        },
-        onPanResponderTerminate: () => Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start(),
-      }),
-    [drag, onOpenChange]
-  );
+  const pan = useMemo(() => {
+    const settle = () =>
+      live.current.reduce
+        ? Animated.timing(drag, { toValue: 0, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true }).start()
+        : Animated.spring(drag, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > 110 || g.vy > 1.1) {
+          setOpen(false);
+          onOpenChange?.(false);
+        } else settle();
+      },
+      onPanResponderTerminate: settle,
+    });
+  }, [drag, onOpenChange]);
 
   const active = error ? colors.danger : tint;
   const rest = error ? colors.danger : ok ? colors.success : ((userBorder as string | undefined) ?? colors.input);
@@ -469,7 +489,7 @@ export function DatePicker(props: DatePickerProps) {
                   },
                 ]}
               >
-                <Text style={[styles.presetText, ff, { color: on ? tint : colors.foreground }]}>{p.label}</Text>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.presetText, ff, { color: on ? tint : colors.foreground }]}>{p.label}</Text>
               </Pressable>
             );
           })}
@@ -498,14 +518,16 @@ export function DatePicker(props: DatePickerProps) {
             accessibilityRole="button"
             style={({ pressed }) => [styles.footBtn, { borderRadius: radius.md, opacity: draft ? (pressed ? 0.6 : 1) : 0.4 }]}
           >
-            <Text style={[styles.footText, ff, { color: colors.foreground }]}>Clear</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: colors.foreground }]}>
+              Clear
+            </Text>
           </Pressable>
           <Pressable
             onPress={done}
             accessibilityRole="button"
             style={({ pressed }) => [styles.footBtn, styles.footMain, { backgroundColor: tint, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}
           >
-            <Text style={[styles.footText, ff, { color: readableOn(tint) }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.footText, ff, { color: readableOn(tint) }]}>
               {draftDays > 1 ? `Done · ${draftDays} days` : 'Done'}
             </Text>
           </Pressable>
@@ -558,13 +580,14 @@ export function DatePicker(props: DatePickerProps) {
               borderRadius: fieldRadius + 4,
               borderColor: alpha(active, 0.2),
               opacity: halo,
-              transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.97, 1] }) }],
+              transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.97, 1] }) }],
             },
           ]}
         />
-        <Animated.View style={[styles.field, { height: sz.h, borderRadius: fieldRadius, backgroundColor: bg }, userField, { borderColor }]}>
+        <Animated.View style={[styles.field, { minHeight: sz.h, borderRadius: fieldRadius, backgroundColor: bg }, userField, { borderColor }]}>
           <Text
             numberOfLines={1}
+            maxFontSizeMultiplier={FONT_CAP}
             style={[
               styles.value,
               ff,
@@ -592,7 +615,7 @@ export function DatePicker(props: DatePickerProps) {
               ]}
             >
               {/* The notch: the label paints the surface over the border, so it matches the rendered width. */}
-              <Animated.Text numberOfLines={1} style={[styles.label, ff, { fontSize: sz.font, backgroundColor: bg }, labelStyle, { color: labelColor }]}>
+              <Animated.Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { fontSize: sz.font, backgroundColor: bg }, labelStyle, { color: labelColor }]}>
                 {label}
               </Animated.Text>
             </Animated.View>
@@ -603,7 +626,7 @@ export function DatePicker(props: DatePickerProps) {
               style={{
                 display: ok ? 'flex' : 'none',
                 opacity: check,
-                transform: [{ scale: check.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) }],
+                transform: [{ scale: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.3, 1] }) }],
               }}
             >
               <Icon name="check" size={sz.icon} color={colors.success} />
@@ -623,7 +646,7 @@ export function DatePicker(props: DatePickerProps) {
           </View>
         </Animated.View>
       </Pressable>
-      {message ? <FieldMessage key={tone + message} text={message} tone={tone} style={messageStyle} /> : null}
+      {message ? <FieldMessage key={tone + message} text={message} tone={tone} reduce={reduce} style={messageStyle} /> : null}
 
       <Modal visible={mounted} transparent animationType="none" statusBarTranslucent onRequestClose={close}>
         <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: asSheet ? colors.overlay : 'transparent', opacity: show }]}>
@@ -644,11 +667,15 @@ export function DatePicker(props: DatePickerProps) {
                   ? {
                       opacity: show,
                       transform: [
-                        { scale: show.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] }) },
-                        { translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [16, 0] }), drag) },
+                        { scale: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.94, 1] }) },
+                        { translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 16, 0] }), drag) },
                       ],
                     }
-                  : { transform: [{ translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [winH * 0.85, 0] }), drag) }] },
+                  : {
+                      // Reduce Motion: the sheet fades in place instead of sliding up.
+                      opacity: reduce ? show : 1,
+                      transform: [{ translateY: Animated.add(show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : winH * 0.85, 0] }), drag) }],
+                    },
               ]}
             >
               <View {...pan.panHandlers} style={styles.sheetHeader}>
@@ -681,8 +708,8 @@ export function DatePicker(props: DatePickerProps) {
               {
                 opacity: show,
                 transform: [
-                  { translateY: show.interpolate({ inputRange: [0, 1], outputRange: [below ? -8 : 8, 0] }) },
-                  { scale: show.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
+                  { translateY: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : below ? -8 : 8, 0] }) },
+                  { scale: show.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.96, 1] }) },
                 ],
               },
               below ? { top: anchor.y + anchor.h + 6 } : { bottom: Math.max(12, winH - anchor.y + 6) },
@@ -697,17 +724,28 @@ export function DatePicker(props: DatePickerProps) {
 }
 
 /** Helper / error / success line that slides in; error and success carry an icon. */
-function FieldMessage({ text, tone, style }: { text: string; tone: 'error' | 'success' | 'helper'; style?: StyleProp<TextStyle> }) {
+function FieldMessage({
+  text,
+  tone,
+  reduce,
+  style,
+}: {
+  text: string;
+  tone: 'error' | 'success' | 'helper';
+  reduce: boolean;
+  style?: StyleProp<TextStyle>;
+}) {
   const { colors, font } = useKit();
   const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
   useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [enter]);
+    if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [enter, reduce]);
   const color = tone === 'error' ? colors.danger : tone === 'success' ? colors.success : colors.mutedForeground;
   return (
     <Animated.View
       accessibilityLiveRegion="polite"
-      style={[styles.message, { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] }]}
+      style={[styles.message, { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }] }]}
     >
       {tone !== 'helper' ? <Icon name={tone === 'error' ? 'alert' : 'checkCircle'} size={14} color={color} /> : null}
       <Text style={[styles.helper, font.family ? { fontFamily: font.family } : null, { color }, style, tone !== 'helper' && { color }]}>{text}</Text>
@@ -747,6 +785,22 @@ function Icon({ name, size, color, strokeWidth = 1.8 }: { name: IconName; size:
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   field: { borderWidth: 1.5, justifyContent: 'center' },
   halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4, borderWidth: 4 },
@@ -775,11 +829,11 @@ const styles = StyleSheet.create({
   presetScroll: { flexGrow: 0, flexShrink: 0 },
   calendarScroll: { flexGrow: 0, flexShrink: 1 },
   presets: { gap: 8, paddingHorizontal: 16, paddingVertical: 8 },
-  preset: { height: 34, paddingHorizontal: 14, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
+  preset: { minHeight: 34, paddingHorizontal: 14, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
   presetText: { fontSize: 13.5, fontWeight: '400' },
   calendar: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 6 },
   footer: { flexDirection: 'row', flexShrink: 0, gap: 8, paddingTop: 12, paddingHorizontal: 16, borderTopWidth: StyleSheet.hairlineWidth },
-  footBtn: { height: 46, paddingHorizontal: 20, alignItems: 'center', justifyContent: 'center' },
+  footBtn: { minHeight: 46, paddingHorizontal: 20, alignItems: 'center', justifyContent: 'center' },
   footMain: { flex: 1 },
   footText: { fontSize: 15, fontWeight: '400' },
   popover: {

package/registry/dialog/files/src/components/ui/dialog.tsx

@@ -104,6 +104,9 @@ export interface DialogProps {
 }
 
 const SHAKE = [10, -9, 7, -5, 3, 0];
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 
 /**
  * A centred alert dialog. The scrim fades in while the card springs from 0.92 to full size; an
@@ -325,6 +328,7 @@ export function Dialog({
       maxLength={prompt.maxLength}
       selectTextOnFocus={prompt.selectTextOnFocus ?? true}
       autoFocus
+      maxFontSizeMultiplier={FONT_CAP}
       returnKeyType="done"
       onSubmitEditing={() => run(list[confirmIndex], confirmIndex)}
       onFocus={() => setFocused(true)}
@@ -542,7 +546,7 @@ function PillButton({
           },
         ]}
       >
-        <Text numberOfLines={1} style={[styles.pillText, ff, { color: fg, opacity: loading ? 0 : 1 }]}>
+        <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.pillText, ff, { color: fg, opacity: loading ? 0 : 1 }]}>
           {label}
         </Text>
         {loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size="small" color={fg} /> : null}
@@ -587,7 +591,7 @@ function IosButton({
       style={[styles.iosButton, style]}
     >
       <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: highlight, opacity: hl }]} />
-      <Text numberOfLines={1} style={[styles.iosText, ff, { color, opacity: loading ? 0 : disabled ? 0.4 : 1 }]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.iosText, ff, { color, opacity: loading ? 0 : disabled ? 0.4 : 1 }]}>
         {label}
       </Text>
       {loading ? <ActivityIndicator style={StyleSheet.absoluteFill} size="small" color={color} /> : null}
@@ -750,14 +754,14 @@ const styles = StyleSheet.create({
   textCenter: { textAlign: 'center' },
   field: { marginTop: 16 },
   fieldIos: { marginTop: 14 },
-  input: { height: 48, paddingHorizontal: 14, fontSize: 16, borderWidth: 1 },
-  inputIos: { height: 36, paddingHorizontal: 10, fontSize: 14, borderWidth: StyleSheet.hairlineWidth },
+  input: { minHeight: 48, paddingHorizontal: 14, fontSize: 16, borderWidth: 1 },
+  inputIos: { minHeight: 36, paddingHorizontal: 10, fontSize: 14, borderWidth: StyleSheet.hairlineWidth },
   error: { fontSize: 13, lineHeight: 18, fontWeight: '400', marginTop: 8 },
   children: { marginTop: 14 },
   row: { flexDirection: 'row' },
   flex: { flex: 1 },
   actions: { gap: 10, padding: 22, paddingTop: 22 },
-  pill: { height: 48, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 18 },
+  pill: { minHeight: 48, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 18 },
   pillText: { fontSize: 16, lineHeight: 21, fontWeight: '400', letterSpacing: -0.1 },
   iosActions: { borderTopWidth: StyleSheet.hairlineWidth },
   iosButton: { minHeight: 46, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 12 },

package/registry/drawer/files/src/components/ui/drawer.tsx

@@ -38,6 +38,10 @@ const INLINE_BOTTOM = Platform.select({ ios: 18, android: 12, default: 10 }) ??
 const MODAL_TOP = Platform.select({ ios: 52, android: (StatusBar.currentHeight ?? 24) + 8, default: 16 }) ?? 16;
 const MODAL_BOTTOM = Platform.select({ ios: 28, android: 16, default: 12 }) ?? 12;
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 /** Panel surface hidden past the screen edge, so overshoot and rubber-banding never show a gap. */
 const EXTRA = 48;
 /** Extra travel when closed so the panel's shadow is off-screen too. */
@@ -673,7 +677,7 @@ function ProfileAvatar({ name, src, size, status }: { name: string; src?: string
           },
         ]}
       >
-        <Text style={[{ color: ink, fontSize: size * 0.36, fontWeight: '400', letterSpacing: -0.2 }, ff]}>{initials}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize: size * 0.36, fontWeight: '400', letterSpacing: -0.2 }, ff]}>{initials}</Text>
         {src ? <Image source={{ uri: src }} alt="" style={StyleSheet.absoluteFill} /> : null}
       </View>
       {status ? (
@@ -925,7 +929,7 @@ export function DrawerItem({
               { borderRadius: radius.capsule(22), backgroundColor: badgeColors.bg, transform: [{ scale: badgePop }] },
             ]}
           >
-            <Text style={[styles.badgeText, ff, { color: badgeColors.fg }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: badgeColors.fg }]}>
               {typeof badge === 'number' && badge > 99 ? '99+' : badge}
             </Text>
           </Animated.View>
@@ -1117,7 +1121,7 @@ const styles = StyleSheet.create({
   item: { minHeight: ITEM_H, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, gap: 14 },
   itemIcon: { width: 24, alignItems: 'center', justifyContent: 'center' },
   itemLabel: { flex: 1, fontSize: 15.5, fontWeight: '400', letterSpacing: -0.15 },
-  badge: { minWidth: 22, height: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
+  badge: { minWidth: 22, minHeight: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
   badgePlain: { paddingHorizontal: 2, minWidth: 0 },
   badgeText: { fontSize: 13, fontWeight: '400', fontVariant: ['tabular-nums'] },
   section: {
@@ -1131,7 +1135,7 @@ const styles = StyleSheet.create({
     paddingBottom: 2,
   },
   sectionFlush: { paddingTop: 10 },
-  sectionText: { fontSize: 13, lineHeight: 18, fontWeight: '400', letterSpacing: 0.1 },
+  sectionText: { flexShrink: 1, fontSize: 13, lineHeight: 18, fontWeight: '400', letterSpacing: 0.1 },
   divider: { height: StyleSheet.hairlineWidth, marginHorizontal: 14, marginTop: 10, marginBottom: 4 },
   footerRow: { minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: 14, paddingHorizontal: 12, paddingVertical: 8 },
   footerText: { flex: 1, minWidth: 0, gap: 5 },

package/registry/flip-card/files/src/components/ui/flip-card.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { motion } from '@/lib/kit';
 
@@ -48,12 +48,15 @@ const SQUEEZE = {
  * The flip as an animated 0 → 1 value, springing like FlipCard's own, plus `shadowScaleX` — pass
  * `progress` to the FlipCard and `shadowScaleX` to a TiltCard wrapped round it, so the tilt
  * shadow narrows as the card turns edge-on instead of showing as a dark box behind it.
+ * With Reduce Motion on, the card turns over at once (no 3D turn).
  */
 export function useFlipProgress(flipped: boolean) {
+  const reduce = useReduceMotion();
   const progress = useRef(new Animated.Value(flipped ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
-  }, [flipped, progress]);
+    if (reduce) progress.setValue(flipped ? 1 : 0);
+    else Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
+  }, [flipped, progress, reduce]);
   const shadowScaleX = useMemo(() => progress.interpolate(SQUEEZE), [progress]);
   return { progress, shadowScaleX };
 }
@@ -185,6 +188,22 @@ export function FlipCard({
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   face: { overflow: 'hidden', backfaceVisibility: 'hidden' },
   back: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },