@expokit/cli 0.3.0 → 0.4.1

package/registry/password-input/files/src/components/ui/password-input.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type TextInput } from 'react-native';
+import React, { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type TextInput } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { FloatingInput, type FloatingInputProps } from '@/components/ui/floating-input';
@@ -34,6 +34,10 @@ export interface PasswordInputProps extends Omit<FloatingInputProps, 'secureText
   mismatchMessage?: string;
 }
 
+// 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 LEVEL_LABELS = ['Too short', 'Weak', 'Okay', 'Strong', 'Very strong'];
 const ICON = { sm: 18, md: 22, lg: 24 };
 
@@ -50,7 +54,7 @@ export function scorePassword(pw: string) {
  * Floating-label password field with an eye / eye-off toggle that cross-fades, a spring-filled
  * strength meter, an optional requirements checklist and a confirm-password mode.
  */
-export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function PasswordInput(
+export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, PasswordInputProps>(function PasswordInput(
   {
     strength = true,
     score = scorePassword,
@@ -70,6 +74,7 @@ export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function
   ref
 ) {
   const { colors } = useKit();
+  const reduce = useReduceMotion();
   const [hidden, setHidden] = useState(true);
   const [inner, setInner] = useState(defaultValue ?? '');
   const text = value ?? inner;
@@ -84,17 +89,21 @@ export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function
 
   const eye = useRef(new Animated.Value(hidden ? 0 : 1)).current; // native: 1 = visible
   useEffect(() => {
-    Animated.spring(eye, { toValue: hidden ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [hidden, eye]);
+    if (reduce) Animated.timing(eye, { toValue: hidden ? 0 : 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(eye, { toValue: hidden ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [hidden, eye, reduce]);
 
   const iconColor = iconColorProp ?? colors.mutedForeground;
   const iconSize = ICON[size];
   const fade = (on: 0 | 1) => ({
     opacity: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0, 1] : [1, 0], extrapolate: 'clamp' }),
-    transform: [
-      { scale: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0.6, 1] : [1, 0.6] }) },
-      { rotate: eye.interpolate({ inputRange: [0, 1], outputRange: on ? ['-45deg', '0deg'] : ['0deg', '45deg'] }) },
-    ],
+    // Reduce Motion: a plain cross-fade, no spin or scale.
+    transform: reduce
+      ? []
+      : [
+          { scale: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0.6, 1] : [1, 0.6] }) },
+          { rotate: eye.interpolate({ inputRange: [0, 1], outputRange: on ? ['-45deg', '0deg'] : ['0deg', '45deg'] }) },
+        ],
   });
 
   return (
@@ -137,8 +146,8 @@ export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function
           </Pressable>
         }
       />
-      {strength && !confirming && text.length > 0 ? <Meter level={level} /> : null}
-      {rules && !confirming ? <Checklist rules={rules} value={text} /> : null}
+      {strength && !confirming && text.length > 0 ? <Meter level={level} reduce={reduce} /> : null}
+      {rules && !confirming ? <Checklist rules={rules} value={text} reduce={reduce} /> : null}
     </View>
   );
 });
@@ -151,7 +160,7 @@ const EYE_OFF =
   'M2 2l20 20';
 
 /** Four segments that spring-fill left to right; the colour slides with the score. */
-function Meter({ level }: { level: number }) {
+function Meter({ level, reduce }: { level: number; reduce: boolean }) {
   const { colors, dark, font } = useKit();
   const palette = [colors.mutedForeground, colors.danger, colors.warning, colors.success, colors.success];
   const fills = useRef([0, 1, 2, 3].map(() => new Animated.Value(0))).current; // native: scaleX
@@ -159,16 +168,24 @@ function Meter({ level }: { level: number }) {
   const enter = useRef(new Animated.Value(0)).current; // native
 
   useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    if (reduce) enter.setValue(1);
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enter]);
 
   useEffect(() => {
+    if (reduce) {
+      // Segments appear filled at once; the colour still fades.
+      fills.forEach((a, i) => a.setValue(i < level ? 1 : 0));
+      Animated.timing(tone, { toValue: level, duration: 150, useNativeDriver: false }).start();
+      return;
+    }
     Animated.stagger(
       50,
       fills.map((a, i) => Animated.spring(a, { toValue: i < level ? 1 : 0, useNativeDriver: true, ...motion.snappy }))
     ).start();
     Animated.timing(tone, { toValue: level, duration: 220, useNativeDriver: false }).start();
-  }, [level, fills, tone]);
+  }, [level, fills, tone, reduce]);
 
   const color = tone.interpolate({ inputRange: [0, 1, 2, 3, 4], outputRange: palette });
   const track = dark ? colors.muted : colors.border;
@@ -199,27 +216,28 @@ function Meter({ level }: { level: number }) {
           </View>
         ))}
       </View>
-      <Text style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{LEVEL_LABELS[level]}</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{LEVEL_LABELS[level]}</Text>
     </Animated.View>
   );
 }
 
-function Checklist({ rules, value }: { rules: PasswordRequirement[]; value: string }) {
+function Checklist({ rules, value, reduce }: { rules: PasswordRequirement[]; value: string; reduce: boolean }) {
   return (
     <View style={styles.checklist} accessibilityRole="list">
       {rules.map((r) => (
-        <Requirement key={r.label} label={r.label} met={r.test(value)} />
+        <Requirement key={r.label} label={r.label} met={r.test(value)} reduce={reduce} />
       ))}
     </View>
   );
 }
 
-function Requirement({ label, met }: { label: string; met: boolean }) {
+function Requirement({ label, met, reduce }: { label: string; met: boolean; reduce: boolean }) {
   const { colors, dark, font } = useKit();
   const tick = useRef(new Animated.Value(met ? 1 : 0)).current; // native
   useEffect(() => {
-    Animated.spring(tick, { toValue: met ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [met, tick]);
+    if (reduce) Animated.timing(tick, { toValue: met ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(tick, { toValue: met ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [met, tick, reduce]);
 
   return (
     <View
@@ -237,7 +255,7 @@ function Requirement({ label, met }: { label: string; met: boolean }) {
             StyleSheet.absoluteFill,
             {
               opacity: tick.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-              transform: [{ scale: tick.interpolate({ inputRange: [0, 1], outputRange: [0.2, 1] }) }],
+              transform: reduce ? [] : [{ scale: tick.interpolate({ inputRange: [0, 1], outputRange: [0.2, 1] }) }],
             },
           ]}
         >
@@ -258,6 +276,22 @@ function Requirement({ label, met }: { label: string; met: boolean }) {
   );
 }
 
+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({
   meter: { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 10, marginHorizontal: 4 },
   bars: { flex: 1, flexDirection: 'row', gap: 6 },

package/registry/password-input/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/payment-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 };
 }
@@ -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 },

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

@@ -13,6 +13,7 @@ import Svg, { Circle, ClipPath, Defs, G, Line, LinearGradient, Path, Rect, Stop
 
 import { FlipCard, useFlipProgress } from '@/components/ui/flip-card';
 import { TiltCard } from '@/components/ui/tilt-card';
+import { useKit } from '@/lib/kit';
 
 export type PaymentCardBrand = 'visa' | 'mastercard' | 'amex' | 'rupay' | 'none';
 
@@ -30,8 +31,8 @@ export interface PaymentCardProps {
   bank?: string;
   /** Small label top-right, e.g. "Debit", "World Elite". */
   label?: string;
-  /** Card art — a photo or texture (`require('./card.jpg')` or `{ uri }`). Default: brushed graphite. */
-  image?: ImageSourcePropType;
+  /** Card art — a photo or texture (`require('./card.jpg')` or `{ uri }`). Or any element drawn as the art, e.g. `<GrainGradient palette=\"ocean\" style={{ flex: 1 }} />`. Default: brushed graphite. */
+  image?: ImageSourcePropType | React.ReactElement;
   /** `light` text for dark art (default), `dark` text for pale art. */
   tone?: 'light' | 'dark';
   /** EMV chip finish. */
@@ -70,6 +71,10 @@ export interface PaymentCardLabels {
   accessibility?: string;
 }
 
+// Everything is printed on a fixed-shape card, so all its text is control text: it stops growing at iOS's largest
+// standard text size (xxxL ≈ 1.35×) so the card keeps its shape.
+const FONT_CAP = 1.35;
+
 /**
  * "4821 7590 1234 0317" → groups of 4 (Amex 4-6-5, 14-digit Diners 4-6-4, 19-digit cards get a
  * fifth group). Masking hides every digit but the last four, whatever the length. Keeps • placeholders.
@@ -110,19 +115,19 @@ function BrandMark({ brand, ink }: { brand: PaymentCardBrand; ink: string }) {
     );
   }
   if (brand === 'visa') {
-    return <Text style={[styles.visa, { color: ink }]}>VISA</Text>;
+    return <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.visa, { color: ink }]}>VISA</Text>;
   }
   if (brand === 'amex') {
     return (
       <View style={[styles.amex, { borderColor: ink }]}>
-        <Text style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>AMERICAN</Text>
-        <Text style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>EXPRESS</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>AMERICAN</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: ink, fontSize: 9, fontWeight: '800', letterSpacing: 0.6, lineHeight: 10 }}>EXPRESS</Text>
       </View>
     );
   }
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
-      <Text style={{ color: ink, fontSize: 18, fontWeight: '800', fontStyle: 'italic', letterSpacing: -0.3 }}>RuPay</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: ink, fontSize: 18, fontWeight: '800', fontStyle: 'italic', letterSpacing: -0.3 }}>RuPay</Text>
       <Svg width={14} height={16} viewBox="0 0 14 16">
         <Path d="M2 1 L10 8 L2 15 Z" fill="#F47920" />
         <Path d="M6 1 L14 8 L6 15 Z" fill="#0B8E36" />
@@ -222,6 +227,8 @@ export function PaymentCard({
   labels,
   style,
 }: PaymentCardProps) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const controlled = flippedProp !== undefined;
   const [own, setOwn] = useState(defaultFlipped);
   // A frozen card always shows its front (where the frost and the label are).
@@ -253,7 +260,17 @@ export function PaymentCard({
 
   const art = (darken: number) => (
     <>
-      {image ? <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors /> : <Graphite />}
+      {image ? (
+        React.isValidElement(image) ? (
+          <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            {image}
+          </View>
+        ) : (
+          <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors />
+        )
+      ) : (
+        <Graphite />
+      )}
       {darken > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${darken})` }]} /> : null}
     </>
   );
@@ -265,28 +282,28 @@ export function PaymentCard({
       {tone === 'light' ? <Shade strength={image ? 0.38 : 0.2} /> : null}
       <View style={styles.inner}>
         <View style={styles.row}>
-          <Text style={[{ color: ink, fontSize: 16, fontWeight: '700', letterSpacing: -0.2 }, emboss]}>{bank ?? ''}</Text>
-          {label ? <Text style={[{ color: soft, fontSize: 11, fontWeight: '600', letterSpacing: 1 }, emboss]}>{label.toUpperCase()}</Text> : null}
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ flexShrink: 1, color: ink, fontSize: 16, fontWeight: '700', letterSpacing: -0.2 }, ff, emboss]}>{bank ?? ''}</Text>
+          {label ? <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: soft, fontSize: 11, fontWeight: '600', letterSpacing: 1 }, ff, emboss]}>{label.toUpperCase()}</Text> : null}
         </View>
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
           <Chip finish={chip} />
           <Contactless ink={ink} />
         </View>
         <View style={{ gap: 10 }}>
-          <Text style={[{ color: ink, fontSize: 19, fontWeight: '500', letterSpacing: 2, fontVariant: ['tabular-nums'] }, emboss]}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize: 19, fontWeight: '500', letterSpacing: 2, fontVariant: ['tabular-nums'] }, ff, emboss]}>
             {formatNumber(number, brand, masked)}
           </Text>
           <View style={[styles.row, { alignItems: 'flex-end' }]}>
             <View style={{ flexDirection: 'row', gap: 20, flexShrink: 1 }}>
               <View style={{ flexShrink: 1 }}>
-                <Text style={[styles.tiny, { color: soft }]}>{text.cardholder}</Text>
-                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', letterSpacing: 0.8 }, emboss]} numberOfLines={1}>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.tiny, ff, { color: soft }]}>{text.cardholder}</Text>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize: 13, fontWeight: '600', letterSpacing: 0.8 }, ff, emboss]} numberOfLines={1}>
                   {name.toUpperCase()}
                 </Text>
               </View>
               <View>
-                <Text style={[styles.tiny, { color: soft }]}>{text.validThru}</Text>
-                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', fontVariant: ['tabular-nums'] }, emboss]}>{expiry}</Text>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.tiny, ff, { color: soft }]}>{text.validThru}</Text>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize: 13, fontWeight: '600', fontVariant: ['tabular-nums'] }, ff, emboss]}>{expiry}</Text>
               </View>
             </View>
             <BrandMark brand={brand} ink={ink} />
@@ -296,7 +313,7 @@ export function PaymentCard({
       {frozen ? (
         <View style={[StyleSheet.absoluteFill, styles.center, { backgroundColor: 'rgba(214,232,255,0.28)' }]}>
           <View style={styles.frozenPill}>
-            <Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '700', letterSpacing: 0.4 }}>❄︎  {text.frozen}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: '#ffffff', fontSize: 13, fontWeight: '700', letterSpacing: 0.4 }, ff]}>❄︎  {text.frozen}</Text>
           </View>
         </View>
       ) : null}
@@ -317,15 +334,15 @@ export function PaymentCard({
           </Svg>
         </View>
         <View style={styles.cvv}>
-          <Text style={{ color: '#111', fontSize: 15, fontWeight: '700', fontStyle: 'italic', letterSpacing: 1.5, fontVariant: ['tabular-nums'] }}>{cvv ?? '•••'}</Text>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: '#111', fontSize: 15, fontWeight: '700', fontStyle: 'italic', letterSpacing: 1.5, fontVariant: ['tabular-nums'] }, ff]}>{cvv ?? '•••'}</Text>
         </View>
       </View>
       <View style={styles.backFoot}>
         <View style={{ flex: 1, gap: 3 }}>
-          <Text style={{ color: 'rgba(255,255,255,0.78)', fontSize: 9, lineHeight: 12 }}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: 'rgba(255,255,255,0.78)', fontSize: 9, lineHeight: 12 }, ff]}>
             {fill(text.legal)}
           </Text>
-          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: 10, fontWeight: '600' }}>{fill(text.back)}</Text>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: 'rgba(255,255,255,0.9)', fontSize: 10, fontWeight: '600' }, ff]}>{fill(text.back)}</Text>
         </View>
         {/* Security hologram. */}
         <Svg width={40} height={30} viewBox="0 0 40 30">

package/registry/payment-card/files/src/components/ui/tilt-card.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Image,
@@ -92,7 +93,8 @@ export interface TiltState {
   height: number;
 }
 
-const Ctx = createContext<TiltState | null>(null);
+// `reduce` (Reduce Motion) rides along privately so layers stay flat too; useTilt still returns a TiltState.
+const Ctx = createContext<(TiltState & { reduce: boolean }) | null>(null);
 
 /** The surrounding TiltCard's live tilt (null outside one) — for your own layers and effects. */
 export function useTilt() {
@@ -105,6 +107,8 @@ const PAINT = 96;
 
 // Six colour cycles across the paint, so a couple of bands cross the card like real foil. Cool
 // pinks, violets and cyans stay clean when blended over dark cards (yellow and green turn olive).
+const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
+
 const HOLO = Array.from({ length: 37 }, (_, i) => ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'][i % 6]);
 
 function GlarePaint({ variant }: { variant: 'soft' | 'sharp' }) {
@@ -256,6 +260,7 @@ export function TiltCard({
   accessibilityLabel,
   style,
 }: TiltCardProps) {
+  const reduce = useReduceMotion();
   const [size, setSize] = useState({ w: 0, h: 0 });
   const sizeRef = useRef(size);
   sizeRef.current = size;
@@ -267,14 +272,16 @@ export function TiltCard({
   const touching = useRef(false);
   const origin = useRef({ x: 0, y: 0 });
   const moved = useRef(false);
-  const viewRef = useRef<View>(null);
+  const viewRef = useRef<ComponentRef<typeof View>>(null);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
+  const reduceRef = useRef(reduce);
+  reduceRef.current = reduce;
 
   // Idle sway: a slow figure-eight while nobody is touching.
   const idleLoop = useRef<Animated.CompositeAnimation | null>(null);
   const startIdle = () => {
-    if (!idle) return;
+    if (!idle || reduce) return;
     const ease = Easing.inOut(Easing.sin);
     const leg = (v: Animated.Value, to: number, ms: number) =>
       Animated.timing(v, {
@@ -292,10 +299,15 @@ export function TiltCard({
     idleLoop.current.start();
   };
   useEffect(() => {
+    // Reduce Motion: no sway; settle where it stopped back at rest.
+    if (reduce && !touching.current) {
+      tx.setValue(0);
+      ty.setValue(0);
+    }
     startIdle();
     return () => idleLoop.current?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [idle]);
+  }, [idle, reduce]);
 
   const aim = (pageX: number, pageY: number) => {
     const { w, h } = sizeRef.current;
@@ -307,6 +319,12 @@ export function TiltCard({
   const release = (tapped: boolean) => {
     touching.current = false;
     if (tapped && !moved.current) onPressRef.current?.();
+    if (reduce) {
+      // The card never leaves flat, so only the light has to settle: a short ease, no spring.
+      const settle = (v: Animated.Value) => Animated.timing(v, { toValue: 0, duration: 150, easing: SMOOTH, useNativeDriver: true });
+      Animated.parallel([settle(tx), settle(ty), settle(press)]).start();
+      return;
+    }
     Animated.parallel([
       Animated.spring(tx, {
         toValue: 0,
@@ -355,11 +373,15 @@ export function TiltCard({
             if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
           });
           aim(pageX, pageY);
-          Animated.spring(press, {
-            toValue: 1,
-            ...motion.snappy,
-            useNativeDriver: true,
-          }).start();
+          if (reduceRef.current) {
+            Animated.timing(press, { toValue: 1, duration: 150, easing: SMOOTH, useNativeDriver: true }).start();
+          } else {
+            Animated.spring(press, {
+              toValue: 1,
+              ...motion.snappy,
+              useNativeDriver: true,
+            }).start();
+          }
         },
         onPanResponderMove: (e, g) => {
           if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
@@ -380,21 +402,24 @@ export function TiltCard({
     if (width !== size.w || height !== size.h) setSize({ w: width, h: height });
   };
 
+  // Reduce Motion keeps the card flat and still: no tilt, lift or parallax. The reflection (light,
+  // not movement of the content) still follows the finger.
+  const tilt = reduce ? 0 : maxTilt;
   const rotateY = tx.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${-maxTilt}deg`, `${maxTilt}deg`],
+    outputRange: [`${-tilt}deg`, `${tilt}deg`],
   });
   const rotateX = ty.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${maxTilt}deg`, `${-maxTilt}deg`],
+    outputRange: [`${tilt}deg`, `${-tilt}deg`],
   });
   const scale = press.interpolate({
     inputRange: [0, 1],
-    outputRange: [1, pressScale],
+    outputRange: [1, reduce ? 1 : pressScale],
   });
 
-  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h }), [tx, ty, press, size.w, size.h]);
-  const drift = Math.min(10, size.w * 0.03);
+  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h, reduce }), [tx, ty, press, size.w, size.h, reduce]);
+  const drift = reduce ? 0 : Math.min(10, size.w * 0.03);
   // The plate sits well inside the outline — far enough that it never shows through a notch or a
   // see-through corner, even at full tilt; the shadow offset does the downward shift.
   const body = shadowRect ?? { x: 0, y: 0, width: size.w, height: size.h };
@@ -433,7 +458,7 @@ export function TiltCard({
                 {
                   scale: press.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [1, 1.035],
+                    outputRange: [1, reduce ? 1 : 1.035],
                   }),
                 },
                 { scaleX: shadowScaleX ?? 1 },
@@ -516,7 +541,7 @@ export function TiltCard({
 export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
   const ctx = useContext(Ctx);
   if (!ctx) throw new Error('TiltLayer must be inside TiltCard');
-  const d = depth * 14;
+  const d = ctx.reduce ? 0 : depth * 14;
   return (
     <Animated.View
       pointerEvents="box-none"
@@ -539,7 +564,7 @@ export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
             {
               scale: ctx.press.interpolate({
                 inputRange: [0, 1],
-                outputRange: [1, 1 + Math.max(0, depth) * 0.035],
+                outputRange: [1, ctx.reduce ? 1 : 1 + Math.max(0, depth) * 0.035],
               }),
             },
           ],
@@ -616,6 +641,22 @@ export function TiltFoil({ children, radius = 8, base = '#d7dbe2', style }: Tilt
   );
 }
 
+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({
   plate: {
     position: 'absolute',

package/registry/payment-card/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,
 };