@expokit/cli 0.3.0 → 0.4.1

package/registry/text-animation/files/src/components/ui/text-animation.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
   type LayoutChangeEvent,
   type StyleProp,
   type TextStyle,
@@ -114,10 +115,10 @@ function nextStop(text: string, from: number) {
 
 const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
 const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
-/** A soft spring (~8% overshoot) sampled as a curve, so it can run on the native driver. */
-const soft = (t: number) => 1 - Math.exp(-6.5 * t) * Math.cos(8 * t);
-/** A firmer settle (~4% overshoot). */
-const settle = (t: number) => 1 - Math.exp(-7 * t) * Math.cos(7 * t);
+/** A soft, critically damped settle (no overshoot), sampled as a curve so it runs on the native driver. */
+const soft = (t: number) => 1 - Math.exp(-7 * t) * (1 + 7 * t);
+/** A firmer settle, also without overshoot. */
+const settle = (t: number) => 1 - Math.exp(-8 * t) * (1 + 8 * t);
 
 /**
  * Maps a millisecond clock onto `from → to` between `start` and `start + dur` through `ease`.
@@ -152,6 +153,7 @@ function useReduceMotion() {
 
 interface Ctx {
   glyph: StyleProp<TextStyle>;
+  /** Line height as rendered (after the user's text size). */
   lh: number;
   space: number;
   justify: ViewStyle['justifyContent'];
@@ -584,6 +586,9 @@ export function AnimatedText({
 }: AnimatedTextProps) {
   const { colors, font, text: type } = useKit();
   const reduce = useReduceMotion();
+  // Content text: it scales all the way with the user's text size, so the one-line clip windows,
+  // roll distances and word gaps (all derived from the line height) scale with it.
+  const { fontScale } = useWindowDimensions();
   const text = String(children ?? '');
   const mode = trigger ?? (variant === 'cascade' || variant === 'typewriter' ? 'change' : 'mount');
 
@@ -603,8 +608,8 @@ export function AnimatedText({
   const layout = useMemo(() => tokenize(text), [text]);
   const ctx: Ctx = {
     glyph: [styles.glyph, { fontSize, fontFamily: font.family }, textStyle, { lineHeight: lh, color: tint }],
-    lh,
-    space: fontSize * 0.28,
+    lh: lh * fontScale,
+    space: fontSize * 0.28 * fontScale,
     justify,
     reduce,
     live,

package/registry/text-animation/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/textarea/files/src/components/ui/textarea.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -8,6 +9,7 @@ import {
   Text,
   TextInput,
   View,
+  useWindowDimensions,
   type StyleProp,
   type TextInputProps,
   type TextStyle,
@@ -79,6 +81,9 @@ export const TEXTAREA_SIZES = {
   lg: { font: 18, line: 26, floated: 13.5, padX: 18, padY: 16 },
 };
 
+// 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 BORDER = 1.5;
 const HALO = 4;
 /** Font size of the static label used when `floatingLabel` is false. */
@@ -97,7 +102,7 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
  * optional floating label, a focus halo, a counter that morphs into a progress ring near
  * `maxLength`, and a `toolbar` slot for chat composers.
  */
-export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
+export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps>(function Textarea(
   {
     label,
     floatingLabel = true,
@@ -133,6 +138,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
   ref
 ) {
   const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const S = TEXTAREA_SIZES[size];
   // Height is driven by rows, so the user's `height` is dropped; their border colour replaces the resting one.
@@ -142,17 +148,25 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
   const FONT = typeof userInput.fontSize === 'number' ? userInput.fontSize : S.font;
   const LINE = typeof userInput.lineHeight === 'number' ? userInput.lineHeight : Math.round((FONT * S.line) / S.font);
   const corner = typeof userField.borderRadius === 'number' ? userField.borderRadius : radius.md;
+  // The typed text is content, so it scales with the system text size (lineHeight too). Row maths use
+  // the rendered line height, so rows, the resting label and the check stay on the lines.
+  const { fontScale } = useWindowDimensions();
+  const userCap = props.maxFontSizeMultiplier;
+  const textScale = props.allowFontScaling === false ? 1 : userCap && userCap >= 1 ? Math.min(fontScale, userCap) : fontScale;
+  const ROW = LINE * textScale;
   // The hidden mirror must measure text exactly like the input does.
-  const metrics: TextStyle = { ...ff };
-  if (userInput.fontFamily !== undefined) metrics.fontFamily = userInput.fontFamily;
-  if (userInput.fontWeight !== undefined) metrics.fontWeight = userInput.fontWeight;
-  if (userInput.fontStyle !== undefined) metrics.fontStyle = userInput.fontStyle;
-  if (userInput.letterSpacing !== undefined) metrics.letterSpacing = userInput.letterSpacing;
+  const metrics: TextStyle = {
+    ...ff,
+    ...(userInput.fontFamily !== undefined ? { fontFamily: userInput.fontFamily } : null),
+    ...(userInput.fontWeight !== undefined ? { fontWeight: userInput.fontWeight } : null),
+    ...(userInput.fontStyle !== undefined ? { fontStyle: userInput.fontStyle } : null),
+    ...(userInput.letterSpacing !== undefined ? { letterSpacing: userInput.letterSpacing } : null),
+  };
   const tint = accent ?? colors.accent;
   const bg = surface ?? colors.background;
   const filled = variant === 'filled';
-  const inputRef = useRef<TextInput>(null);
-  useImperativeHandle(ref, () => inputRef.current as TextInput);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
 
   const [focused, setFocused] = useState(false);
   const [inner, setInner] = useState(defaultValue ?? '');
@@ -171,11 +185,11 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
 
   const lo = Math.max(1, minRows);
   const hi = Math.max(lo, maxRows);
-  const lines = Math.round((contentH ?? LINE) / LINE);
+  const lines = Math.round((contentH ?? ROW) / ROW);
   const rows = Math.min(hi, Math.max(lo, lines));
   const padTop = filled && inLabel ? S.padY + 14 : S.padY;
   const padBottom = toolbar ? 4 : filled ? S.padY - 2 : S.padY;
-  const height = padTop + rows * LINE + padBottom + (toolbar ? toolbarH ?? 0 : 0) + BORDER * 2;
+  const height = padTop + rows * ROW + padBottom + (toolbar ? toolbarH ?? 0 : 0) + BORDER * 2;
 
   const grow = useRef(new Animated.Value(height)).current; // JS: height
   const focus = useRef(new Animated.Value(0)).current; // JS: colours
@@ -186,35 +200,40 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
   const settled = useRef(false);
 
   useEffect(() => {
-    // Snap to the first measured size; glide on every change after that.
-    if (!settled.current) {
+    // Snap to the first measured size (and always with Reduce Motion); glide on every change after that.
+    if (!settled.current || reduce) {
       grow.setValue(height);
       if (contentH !== null && toolbarH !== null) settled.current = true;
       return;
     }
     Animated.timing(grow, { toValue: height, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
-  }, [height, grow, contentH, toolbarH]);
+  }, [height, grow, contentH, toolbarH, reduce]);
 
   useEffect(() => {
-    Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [floating, float]);
+    if (reduce) float.setValue(floating ? 1 : 0);
+    else Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [floating, float, reduce]);
 
   useEffect(() => {
     Animated.timing(focus, { toValue: isFocused ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [isFocused, focus, glow]);
+    // Reduce Motion: the halo only fades (its scale is pinned below).
+    if (reduce) Animated.timing(glow, { toValue: isFocused ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [isFocused, focus, glow, 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 still flag the error.
+    if (!error || 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]);
+  }, [error, shake, reduce]);
 
   const setText = (next: string) => {
     if (value === undefined) setInner(next);
@@ -235,7 +254,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
   });
 
   // Label rests on the first line; floats onto the border (outlined) or into the top padding (filled).
-  const restCenter = padTop + LINE / 2;
+  const restCenter = padTop + ROW / 2;
   const floatY = filled ? S.padY + 1 - restCenter : -restCenter - BORDER / 2;
   const floatX = filled ? 0 : 12 - S.padX;
   const floatScale = S.floated / S.font;
@@ -270,7 +289,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
               borderRadius: corner + HALO,
               backgroundColor: active,
               opacity: glow.interpolate({ inputRange: [0, 1], outputRange: [0, 0.18], extrapolate: 'clamp' }),
-              transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.98, 1] }) }],
+              transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.98, 1] }) }],
             },
           ]}
         />
@@ -290,6 +309,8 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
             {/* Invisible mirror of the text: its height tells us how many lines to show, on every platform. */}
             <View pointerEvents="none" style={[styles.mirrorBox, { left: S.padX - BORDER, right: S.padX - BORDER + (ok ? 28 : 0) }]}>
               <Text
+                allowFontScaling={props.allowFontScaling}
+                maxFontSizeMultiplier={props.maxFontSizeMultiplier}
                 onLayout={(e) => setContentH(e.nativeEvent.layout.height)}
                 style={[styles.mirror, metrics, { fontSize: FONT, lineHeight: LINE }]}
               >
@@ -348,7 +369,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
                     top: padTop,
                     left: S.padX - BORDER,
                     right: S.padX,
-                    height: LINE,
+                    height: ROW,
                     transform: [
                       { translateY: float.interpolate({ inputRange: [0, 1], outputRange: [0, floatY] }) },
                       { translateX: float.interpolate({ inputRange: [0, 1], outputRange: [0, floatX] }) },
@@ -358,6 +379,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
                 ]}
               >
                 <Animated.Text
+                  maxFontSizeMultiplier={FONT_CAP}
                   numberOfLines={1}
                   style={[
                     styles.label,
@@ -382,12 +404,12 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
               style={[
                 styles.check,
                 {
-                  top: padTop - BORDER + (LINE - checkSize) / 2,
+                  top: padTop - BORDER + (ROW - checkSize) / 2,
                   right: S.padX - BORDER - 4,
                   opacity: check.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
                   transform: [
-                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) },
-                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: ['-30deg', '0deg'] }) },
+                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.3, 1] }) },
+                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? '0deg' : '-30deg', '0deg'] }) },
                   ],
                 },
               ]}
@@ -403,9 +425,9 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
       {message || counting ? (
         <View style={styles.footer}>
           <View style={styles.messageSlot}>
-            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} /> : null}
+            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} reduce={reduce} /> : null}
           </View>
-          {counting ? <Counter length={text.length} max={maxLength} tint={tint} style={counterStyle} /> : null}
+          {counting ? <Counter length={text.length} max={maxLength} tint={tint} style={counterStyle} reduce={reduce} /> : null}
         </View>
       ) : null}
     </Animated.View>
@@ -414,13 +436,27 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
 
 type MessageTone = 'error' | 'success' | 'helper';
 
-/** Helper / error / success line. Error and success slide up and fade in. */
-function FieldMessage({ text, tone, color, style }: { text: string; tone: MessageTone; color: string; style?: StyleProp<TextStyle> }) {
+/** Helper / error / success line. Error and success slide up and fade in (only fade with Reduce Motion). */
+function FieldMessage({
+  text,
+  tone,
+  color,
+  style,
+  reduce,
+}: {
+  text: string;
+  tone: MessageTone;
+  color: string;
+  style?: StyleProp<TextStyle>;
+  reduce: boolean;
+}) {
   const { font } = useKit();
   const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
   useEffect(() => {
-    if (tone !== 'helper') Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [tone, enter]);
+    if (tone === 'helper') return;
+    if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [tone, enter, reduce]);
 
   return (
     <Animated.View
@@ -428,7 +464,7 @@ function FieldMessage({ text, tone, color, style }: { text: string; tone: Messag
         styles.message,
         {
           opacity: enter.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }],
+          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }],
         },
       ]}
     >
@@ -456,7 +492,19 @@ function FieldMessage({ text, tone, color, style }: { text: string; tone: Messag
 }
 
 /** "42/280", turning into a filling ring with the characters left once you get close. */
-function Counter({ length, max, tint, style }: { length: number; max: number; tint: string; style?: StyleProp<TextStyle> }) {
+function Counter({
+  length,
+  max,
+  tint,
+  style,
+  reduce,
+}: {
+  length: number;
+  max: number;
+  tint: string;
+  style?: StyleProp<TextStyle>;
+  reduce: boolean;
+}) {
   const { colors, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const remaining = max - length;
@@ -469,19 +517,22 @@ function Counter({ length, max, tint, style }: { length: number; max: number; ti
   const progress = useRef(new Animated.Value(Math.min(1, ratio))).current; // JS (SVG prop)
 
   useEffect(() => {
-    Animated.spring(mode, { toValue: near ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [near, mode]);
+    // Reduce Motion: cross-fade only (the ring's scale is pinned below).
+    if (reduce) Animated.timing(mode, { toValue: near ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(mode, { toValue: near ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [near, mode, reduce]);
 
   useEffect(() => {
-    Animated.spring(progress, { toValue: Math.min(1, ratio), useNativeDriver: false, ...motion.snappy }).start();
-  }, [ratio, progress]);
+    if (reduce) progress.setValue(Math.min(1, ratio));
+    else Animated.spring(progress, { toValue: Math.min(1, ratio), useNativeDriver: false, ...motion.snappy }).start();
+  }, [ratio, progress, reduce]);
 
   const limitHit = remaining <= 0;
   useEffect(() => {
-    if (!limitHit) return;
+    if (!limitHit || reduce) return;
     pulse.setValue(1.35);
     Animated.spring(pulse, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [limitHit, pulse]);
+  }, [limitHit, pulse, reduce]);
 
   return (
     <View
@@ -491,6 +542,7 @@ function Counter({ length, max, tint, style }: { length: number; max: number; ti
       accessibilityLabel={remaining >= 0 ? `${remaining} of ${max} characters left` : `${-remaining} characters over the ${max} limit`}
     >
       <Animated.Text
+        maxFontSizeMultiplier={FONT_CAP}
         style={[
           styles.count,
           ff,
@@ -504,10 +556,12 @@ function Counter({ length, max, tint, style }: { length: number; max: number; ti
       <Animated.View
         style={[
           styles.ringRow,
-          { opacity: mode, transform: [{ scale: mode.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) }] },
+          { opacity: mode, transform: [{ scale: mode.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.6, 1] }) }] },
         ]}
       >
-        <Text style={[styles.count, ff, { color: colors.mutedForeground }, style, ratio >= 0.9 && { color }]}>{remaining}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.count, ff, { color: colors.mutedForeground }, style, ratio >= 0.9 && { color }]}>
+          {remaining}
+        </Text>
         <Animated.View style={{ transform: [{ scale: pulse }] }}>
           <Svg width={RING} height={RING}>
             <Circle cx={RING / 2} cy={RING / 2} r={RING_R} stroke={colors.border} strokeWidth={RING_STROKE} fill="none" />
@@ -530,6 +584,22 @@ function Counter({ length, max, tint, style }: { length: number; max: number; ti
   );
 }
 
+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({
   disabled: { opacity: 0.5 },
   halo: { position: 'absolute', top: -HALO, left: -HALO, right: -HALO, bottom: -HALO },
@@ -547,7 +617,7 @@ const styles = StyleSheet.create({
   message: { flexDirection: 'row', alignItems: 'flex-start', gap: 5 },
   messageIcon: { marginTop: 1.5 },
   helper: { flexShrink: 1, fontSize: 12.5, lineHeight: 17 },
-  counter: { minWidth: 56, height: RING, alignItems: 'flex-end', justifyContent: 'center' },
+  counter: { minWidth: 56, minHeight: RING, alignItems: 'flex-end', justifyContent: 'center' },
   count: { fontSize: 12.5, fontVariant: ['tabular-nums'], fontWeight: '400' },
   ringRow: { position: 'absolute', right: 0, flexDirection: 'row', alignItems: 'center', gap: 6 },
 });

package/registry/textarea/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/ticket-shape/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/tilt-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',