@expokit/cli 0.3.0 → 0.4.1

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { alpha, useKit } from '@/lib/kit';
@@ -38,7 +38,9 @@ export function Checkbox({
   shape = 'square',
   style,
 }: CheckboxProps) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const corner = shape === 'circle' ? size / 2 : Math.min(size / 2, radius.sm + 1);
   const [inner, setInner] = useState(defaultChecked);
@@ -49,12 +51,17 @@ export function Checkbox({
   const burst = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    Animated.spring(progress, { toValue: on ? 1 : 0, useNativeDriver: false, speed: 14, bounciness: 6 }).start();
+    // Reduce Motion: a short fill fade, no burst ring and no press squish.
+    if (reduce) {
+      Animated.timing(progress, { toValue: on ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+      return;
+    }
+    Animated.spring(progress, { toValue: on ? 1 : 0, useNativeDriver: false, speed: 14, bounciness: 0 }).start();
     if (on) {
       burst.setValue(0);
       Animated.timing(burst, { toValue: 1, duration: 450, useNativeDriver: true }).start();
     }
-  }, [on, progress, burst]);
+  }, [on, progress, burst, reduce]);
 
   const toggle = () => {
     if (checked === undefined) setInner(!on);
@@ -71,8 +78,8 @@ export function Checkbox({
       accessibilityState={{ checked: on, disabled }}
       disabled={disabled}
       onPress={toggle}
-      onPressIn={() => Animated.spring(press, { toValue: 0.82, useNativeDriver: true, speed: 50 }).start()}
-      onPressOut={() => Animated.spring(press, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 14 }).start()}
+      onPressIn={() => !reduce && Animated.spring(press, { toValue: 0.82, useNativeDriver: true, speed: 50, bounciness: 0 }).start()}
+      onPressOut={() => !reduce && Animated.spring(press, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 0 }).start()}
       style={[styles.row, { opacity: disabled ? 0.5 : 1 }, style]}
     >
       <Animated.View style={{ transform: [{ scale: press }] }}>
@@ -119,7 +126,7 @@ export function Checkbox({
       {label ? (
         <View style={styles.text}>
           <View style={styles.labelBox}>
-            <Animated.Text style={[styles.label, { color: progress.interpolate({ inputRange: [0, 1], outputRange: [fg, strike ? muted : fg] }) }]}>
+            <Animated.Text style={[styles.label, ff, { color: progress.interpolate({ inputRange: [0, 1], outputRange: [fg, strike ? muted : fg] }) }]}>
               {label}
             </Animated.Text>
             {strike ? (
@@ -131,13 +138,29 @@ export function Checkbox({
               />
             ) : null}
           </View>
-          {description ? <Text style={[styles.description, { color: muted }]}>{description}</Text> : null}
+          {description ? <Text style={[styles.description, ff, { color: muted }]}>{description}</Text> : null}
         </View>
       ) : null}
     </Pressable>
   );
 }
 
+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({
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
   box: { borderWidth: 2, alignItems: 'center', justifyContent: 'center' },

package/registry/checkbox/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/registry/chip-group/files/src/components/ui/chip-group.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   ScrollView,
@@ -56,6 +57,10 @@ export interface ChipGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// 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<ChipGroupSize, { h: number; px: number; font: number; check: number }> = {
   sm: { h: 30, px: 12, font: 13, check: 14 },
   md: { h: 36, px: 14, font: 14.5, check: 16 },
@@ -84,6 +89,7 @@ export function ChipGroup({
   style,
 }: ChipGroupProps) {
   const { colors } = useKit();
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const items: ChipOption[] = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const [inner, setInner] = useState<string[]>(defaultValue);
@@ -114,6 +120,7 @@ export function ChipGroup({
       showCheck={showCheck}
       multiple={multiple}
       disabled={disabled || o.disabled}
+      reduce={reduce}
     />
   ));
 
@@ -148,20 +155,26 @@ interface ChipProps {
   showCheck: boolean;
   multiple: boolean;
   disabled?: boolean;
+  reduce: boolean;
 }
 
-function Chip({ option, active, onPress, variant, size, tint, showCheck, multiple, disabled }: ChipProps) {
-  const { colors, radius } = useKit();
+function Chip({ option, active, onPress, variant, size, tint, showCheck, multiple, disabled, reduce }: ChipProps) {
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   // p: colours, check width + stroke (JS driver). press: squish (native, on the outer view).
   const p = useRef(new Animated.Value(active ? 1 : 0)).current;
   const press = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
-  }, [active, p]);
+    // Reduce Motion: the chip swaps state at once (no widening, no check draw).
+    if (reduce) p.setValue(active ? 1 : 0);
+    else Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+  }, [active, p, reduce]);
 
-  const pressTo = (to: number) =>
+  const pressTo = (to: number) => {
+    if (reduce) return;
     Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+  };
 
   const look: Record<ChipGroupVariant, { bg: [string, string]; border: [string, string]; fg: [string, string] }> = {
     solid: {
@@ -200,7 +213,7 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
           style={[
             styles.chip,
             {
-              height: size.h,
+              minHeight: size.h,
               borderRadius: radius.capsule(size.h),
               paddingHorizontal: size.px - 1,
               backgroundColor: p.interpolate({ ...range, outputRange: l.bg }),
@@ -237,15 +250,18 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
           {option.label ? (
             <Animated.Text
               numberOfLines={1}
-              style={[styles.label, { fontSize: size.font, color: p.interpolate({ ...range, outputRange: l.fg }) }]}
+              maxFontSizeMultiplier={FONT_CAP}
+              style={[styles.label, ff, { fontSize: size.font, color: p.interpolate({ ...range, outputRange: l.fg }) }]}
             >
               {option.label}
             </Animated.Text>
           ) : null}
           {option.count !== undefined ? (
             <Animated.Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.count,
+                ff,
                 { fontSize: size.font - 1.5, color: p.interpolate({ ...range, outputRange: [colors.mutedForeground, l.fg[1]] }) },
               ]}
             >
@@ -258,6 +274,22 @@ function Chip({ option, active, onPress, variant, size, tint, showCheck, multipl
   );
 }
 
+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({
   row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   wrap: { flexWrap: 'wrap' },

package/registry/chip-group/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/registry/confetti/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
 import { FlipCard, useFlipProgress } from '@/components/ui/flip-card';
@@ -170,6 +170,10 @@ function contrast(a: string, b: string) {
   return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
 }
 
+// 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 DAY = 86_400_000;
 const pad2 = (n: number) => String(n).padStart(2, '0');
 
@@ -197,7 +201,9 @@ function useRemaining(at?: Date | number) {
 }
 
 /** The promo code in a dashed chip; a tap copies it and flips the icon to a check for a moment. */
-function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels> }) {
+function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels>; reduce: boolean }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const [copied, setCopied] = useState(false);
   const [box, setBox] = useState({ w: 0, h: 0 });
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
@@ -206,8 +212,10 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string
   const copy = () => {
     onCopy?.(code);
     setCopied(true);
-    pop.setValue(0.4);
-    Animated.spring(pop, { toValue: 1, ...motion.bouncy, useNativeDriver: true }).start();
+    if (!reduce) {
+      pop.setValue(0.4);
+      Animated.spring(pop, { toValue: 1, ...motion.bouncy, useNativeDriver: true }).start();
+    }
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setCopied(false), 1600);
   };
@@ -226,7 +234,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string
           <Rect x={0.75} y={0.75} width={box.w - 1.5} height={box.h - 1.5} rx={8} fill="none" stroke={alpha(color, 0.75)} strokeWidth={1.5} strokeDasharray={[5, 4]} />
         </Svg>
       ) : null}
-      <Text numberOfLines={1} style={{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }, ff]}>
         {code}
       </Text>
       {onCopy ? (
@@ -325,7 +333,9 @@ export function Coupon({
   labels: labelsProp,
   style,
 }: CouponProps) {
-  const { colors, dark } = useKit();
+  const { colors, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const theme = typeof themeProp === 'object' ? themeProp : couponThemes[themeProp];
   const fills = typeof theme.fill === 'string' ? [theme.fill] : theme.fill;
   const accent = theme.accent ?? fills[fills.length - 1];
@@ -421,7 +431,7 @@ export function Coupon({
     left !== undefined && left > 0 && !spent ? (
       <View style={[styles.timer, { backgroundColor: timerBg }]}>
         <Icon d={ICON.clock} size={11} color={timerInk} />
-        <Text style={{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }, ff]}>
           {labels.endsIn} {formatCountdown(left)}
         </Text>
       </View>
@@ -433,7 +443,7 @@ export function Coupon({
         <View style={[styles.row, { gap: 6, flexShrink: 1 }]}>
           {logo}
           {brand ? (
-            <Text numberOfLines={1} style={{ color: horizontal ? bodySoft : valueSoft, fontSize: 10.5, fontWeight: '800', letterSpacing: 1.2, flexShrink: 1 }}>
+            <Text numberOfLines={1} style={[{ color: horizontal ? bodySoft : valueSoft, fontSize: 10.5, fontWeight: '800', letterSpacing: 1.2, flexShrink: 1 }, ff]}>
               {brand.toUpperCase()}
             </Text>
           ) : null}
@@ -445,15 +455,15 @@ export function Coupon({
   // Value panel ------------------------------------------------------------------------------------
   const valueBlock = (
     <View style={{ alignItems: 'center' }}>
-      {prefix ? <Text style={[{ color: valueSoft, fontSize: 10.5, fontWeight: '900', letterSpacing: 1.6 }, lift]}>{prefix.toUpperCase()}</Text> : null}
+      {prefix ? <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueSoft, fontSize: 10.5, fontWeight: '900', letterSpacing: 1.6 }, ff, lift]}>{prefix.toUpperCase()}</Text> : null}
       {locked ? <Icon d={ICON.lock} size={valueSize * 0.6} color={valueInk} /> : null}
       {/* Vertical coupons set "50% OFF" on one line when it fits, and stack a long unit ("CASHBACK"). */}
       <View style={{ flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'flex-end' : 'center', gap: inline ? 6 : 0 }}>
-        <Text numberOfLines={1} adjustsFontSizeToFit style={[{ color: valueInk, fontSize: valueSize, lineHeight: valueSize * 1.08, fontWeight: '900', letterSpacing: -1.2 }, lift]}>
+        <Text numberOfLines={1} adjustsFontSizeToFit maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueInk, fontSize: valueSize, lineHeight: valueSize * 1.08, fontWeight: '900', letterSpacing: -1.2 }, ff, lift]}>
           {value}
         </Text>
         {unit ? (
-          <Text style={[{ color: valueInk, fontSize: horizontal ? 12.5 : 16, fontWeight: '900', letterSpacing: 2.4, marginBottom: inline ? valueSize * 0.14 : 0 }, lift]}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueInk, fontSize: horizontal ? 12.5 : 16, fontWeight: '900', letterSpacing: 2.4, marginBottom: inline ? valueSize * 0.14 : 0 }, ff, lift]}>
             {unit.toUpperCase()}
           </Text>
         ) : null}
@@ -482,7 +492,7 @@ export function Coupon({
           {brandRow}
           {valueBlock}
           {title ? (
-            <Text numberOfLines={2} style={[{ color: valueInk, fontSize: s.title + 1, fontWeight: '800', textAlign: 'center', letterSpacing: -0.3 }, lift]}>
+            <Text numberOfLines={2} style={[{ color: valueInk, fontSize: s.title + 1, fontWeight: '800', textAlign: 'center', letterSpacing: -0.3 }, ff, lift]}>
               {title}
             </Text>
           ) : null}
@@ -505,13 +515,13 @@ export function Coupon({
         {
           marginLeft: 'auto',
           backgroundColor: applied ? '#16a34a' : locked || spent ? alpha(bodyInk, 0.12) : accent,
-          transform: [{ scale: pressed ? 0.95 : 1 }],
+          transform: [{ scale: pressed && !reduce ? 0.95 : 1 }],
           paddingHorizontal: size === 'sm' ? 11 : size === 'md' ? 13 : 16,
         },
       ]}
     >
       {applied || locked ? <Icon d={applied ? ICON.check : ICON.lock} size={13} color={applied ? '#ffffff' : bodySoft} /> : null}
-      <Text numberOfLines={1} style={{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }, ff]}>
         {applied ? labels.applied : locked ? labels.locked : labels.apply}
       </Text>
     </Pressable>
@@ -520,11 +530,11 @@ export function Coupon({
   const footer =
     expires || canFlip ? (
       <View style={[styles.row, { justifyContent: 'flex-start', gap: 6 }]}>
-        {expires ? <Text style={{ color: bodySoft, fontSize: 11, fontWeight: '600' }}>{expires}</Text> : null}
-        {expires && canFlip ? <Text style={{ color: bodySoft, fontSize: 11 }}>·</Text> : null}
+        {expires ? <Text style={[{ color: bodySoft, fontSize: 11, fontWeight: '600', flexShrink: 1 }, ff]}>{expires}</Text> : null}
+        {expires && canFlip ? <Text style={[{ color: bodySoft, fontSize: 11 }, ff]}>·</Text> : null}
         {canFlip ? (
           <Pressable onPress={toggle} hitSlop={10} accessibilityRole="button" accessibilityLabel={labels.termsTitle}>
-            <Text style={{ color: textAccent, fontSize: 11, fontWeight: '800', textDecorationLine: 'underline' }}>{labels.terms}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: textAccent, fontSize: 11, fontWeight: '800', textDecorationLine: 'underline' }, ff]}>{labels.terms}</Text>
           </Pressable>
         ) : null}
       </View>
@@ -552,16 +562,16 @@ export function Coupon({
     >
       {horizontal ? brandRow : null}
       {horizontal && title ? (
-        <Text numberOfLines={2} style={{ color: bodyInk, fontSize: s.title, fontWeight: '800', letterSpacing: -0.3 }}>
+        <Text numberOfLines={2} style={[{ color: bodyInk, fontSize: s.title, fontWeight: '800', letterSpacing: -0.3 }, ff]}>
           {title}
         </Text>
       ) : null}
       {locked && lockedHint ? (
-        <Text numberOfLines={2} style={{ color: textAccent, fontSize: s.desc, fontWeight: '700' }}>
+        <Text numberOfLines={2} style={[{ color: textAccent, fontSize: s.desc, fontWeight: '700' }, ff]}>
           {lockedHint}
         </Text>
       ) : description ? (
-        <Text numberOfLines={size === 'sm' ? 1 : 2} style={{ color: bodySoft, fontSize: s.desc, lineHeight: s.desc * 1.35 }}>
+        <Text numberOfLines={size === 'sm' ? 1 : 2} style={[{ color: bodySoft, fontSize: s.desc, lineHeight: s.desc * 1.35 }, ff]}>
           {description}
         </Text>
       ) : null}
@@ -569,7 +579,7 @@ export function Coupon({
         // The code never gets cut short: when it and the button don't fit side by side, the button
         // wraps under it (and stays right-aligned).
         <View style={[styles.row, { gap: 8, marginTop: 2, flexWrap: 'wrap' }]}>
-          {code ? <CodeChip code={code} color={textAccent} ink={bodyInk} fontSize={s.chip} onCopy={spent || locked ? undefined : onCopy} labels={labels} /> : <View />}
+          {code ? <CodeChip code={code} color={textAccent} ink={bodyInk} fontSize={s.chip} onCopy={spent || locked ? undefined : onCopy} labels={labels} reduce={reduce} /> : <View />}
           {action}
         </View>
       ) : null}
@@ -579,7 +589,8 @@ export function Coupon({
 
   const { width: _w, height: _h, ...shape } = outline;
   const glareClip = measured ? ticketSafeRects(outline) : undefined;
-  const valueWindows = shine && measured && !spent && !locked
+  // The sweep is decorative, so Reduce Motion drops it.
+  const valueWindows = shine && !reduce && measured && !spent && !locked
     ? ticketSafeRects({ width: valueBox.width, height: valueBox.height, corners: valueCorners, edges: valueEdges, edgeSize: v.edgeSize })
     : null;
 
@@ -627,23 +638,23 @@ export function Coupon({
       <TicketShape {...shape} fill={body} style={StyleSheet.absoluteFill}>
         <Pressable onPress={toggle} accessibilityRole="button" accessibilityHint={labels.back} style={[StyleSheet.absoluteFill, { padding: s.pad + edgePad, gap: 6, flexDirection: horizontal ? 'row' : 'column' }]}>
           <View style={{ flex: 1, gap: 4 }}>
-            <Text style={{ color: bodyInk, fontSize: 12, fontWeight: '800', letterSpacing: 0.3 }}>{labels.termsTitle}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodyInk, fontSize: 12, fontWeight: '800', letterSpacing: 0.3 }, ff]}>{labels.termsTitle}</Text>
             {terms!.slice(0, size === 'lg' ? 5 : 4).map((t, i) => (
               <View key={i} style={{ flexDirection: 'row', gap: 6 }}>
-                <Text style={{ color: textAccent, fontSize: 11, fontWeight: '900' }}>•</Text>
-                <Text numberOfLines={2} style={{ color: bodySoft, fontSize: 11, lineHeight: 14.5, flex: 1 }}>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: textAccent, fontSize: 11, fontWeight: '900' }, ff]}>•</Text>
+                <Text numberOfLines={2} maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodySoft, fontSize: 11, lineHeight: 14.5, flex: 1 }, ff]}>
                   {t}
                 </Text>
               </View>
             ))}
-            <Text style={{ color: alpha(bodyInk, 0.4), fontSize: 10, fontWeight: '700', marginTop: 'auto' }}>{labels.back}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: alpha(bodyInk, 0.4), fontSize: 10, fontWeight: '700', marginTop: 'auto' }, ff]}>{labels.back}</Text>
           </View>
           {code ? (
             <View style={{ alignItems: 'center', justifyContent: 'center', gap: 4 }}>
               <View style={styles.plate}>
                 <BarcodeLike code={code} width={horizontal ? 74 : 200} height={horizontal ? 54 : 46} />
               </View>
-              <Text style={{ color: bodyInk, fontSize: 10, fontWeight: '800', letterSpacing: 1.2 }}>{code}</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodyInk, fontSize: 10, fontWeight: '800', letterSpacing: 1.2 }, ff]}>{code}</Text>
             </View>
           ) : null}
         </Pressable>
@@ -665,7 +676,7 @@ export function Coupon({
   return (
     <Pressable onPress={onPress} disabled={!onPress} accessibilityRole={onPress ? 'button' : undefined} style={style}>
       {({ pressed }) => (
-        <View style={{ transform: [{ scale: pressed ? 0.985 : 1 }] }}>
+        <View style={{ transform: [{ scale: pressed && !reduce ? 0.985 : 1 }] }}>
           {/* The plate waits for the painted outline (no black flash on mount), and a dimmed (used /
               expired) coupon is see-through, so it gets none. */}
           {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, shadowOpacity: dark ? 0.5 : 0.2 }]} />}
@@ -677,6 +688,22 @@ export function Coupon({
   );
 }
 
+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({
   row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
   center: { alignItems: 'center', justifyContent: 'center' },

package/registry/coupon/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 };
 }
@@ -121,7 +124,7 @@ export function FlipCard({
       borderRadius: radius,
       opacity,
       transform: [{ perspective }, { [axis]: turn } as never, { scale: lift }],
-    }) as Animated.WithAnimatedObject<ViewStyle>;
+    }) as Animated.WithAnimatedValue<ViewStyle>;
 
   // The shadow squeezes along the turning axis as the card goes edge-on (see SQUEEZE) and fades a little.
   const squeeze = p.interpolate(SQUEEZE);
@@ -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 },