panelui-native 0.77.0 → 0.78.0

package/src/components/section-rail/index.tsx

@@ -58,10 +58,10 @@ import { selectionTick } from '../../utils/haptics';
 
 const SPRING = { damping: 20, stiffness: 260, mass: 0.6 } as const;
 /** Bar width at the top level, and how much each nested level takes off it. */
-const BAR_WIDTH = 16;
-const BAR_LEVEL_STEP = 4;
+const BAR_WIDTH = 14;
+const BAR_LEVEL_STEP = 3;
 /** How much wider the active bar gets, so position is readable at a glance. */
-const BAR_ACTIVE_EXTRA = 12;
+const BAR_ACTIVE_EXTRA = 10;
 /**
  * How much of that extra the bars either side of the active one keep.
  *
@@ -83,8 +83,17 @@ const BAR_REST_OPACITY = 0.32;
  * that a jump which never lands does not mute the next one.
  */
 const JUMP_TIMEOUT = 900;
+/**
+ * How long the rail stays quiet *after* a jump has landed.
+ *
+ * A caller may set the value optimistically, before the scroll it triggers has
+ * started — so arriving at the target is not proof the journey is over. This
+ * covers the tail of the animation, in which the scroller passes through the
+ * sections either side of the destination and reports each of them.
+ */
+const JUMP_SETTLE = 260;
 /** Indent per level in the expanded panel. */
-const ITEM_INDENT = 12;
+const ITEM_INDENT = 10;
 /**
  * How wide the panel may grow by default. A row spends at least 40pt on
  * indent, padding and the panel's own border before any text, so a tighter cap
@@ -92,7 +101,7 @@ const ITEM_INDENT = 12;
  */
 const PANEL_MAX_WIDTH = '78%' as const;
 /** …and a floor, so a rail with one short section still opens a readable panel. */
-const PANEL_MIN_WIDTH = 200;
+const PANEL_MIN_WIDTH = 184;
 
 export type SectionRailPlacement = 'left' | 'right';
 export type SectionRailAlign = 'center' | 'top' | 'bottom';
@@ -232,7 +241,7 @@ function SectionRailRoot({
    * the panel lit up a row nobody chose. Nothing between the tap and the
    * arrival is a section the reader went to, so nothing between them ticks.
    */
-  const jumpTo = useRef<string | null>(null);
+  const jumpTo = useRef<{ target: string; landed: boolean } | null>(null);
 
   const endJump = useCallback(() => {
     jumpTo.current = null;
@@ -244,7 +253,7 @@ function SectionRailRoot({
 
   const handleValueChange = useCallback(
     (next: string) => {
-      jumpTo.current = next;
+      jumpTo.current = { target: next, landed: false };
       if (jumpTimer.current) clearTimeout(jumpTimer.current);
       /*
        * A backstop, not the normal way out. A jump to a section the scroller
@@ -279,12 +288,23 @@ function SectionRailRoot({
       return;
     }
 
-    const target = jumpTo.current;
-    if (target !== null) {
-      // Still on the way. Only the section that was asked for ends the jump,
-      // and only it is worth feeling.
-      if (value !== target) return;
-      endJump();
+    const jump = jumpTo.current;
+    if (jump !== null) {
+      // Still on the way. Nothing the screen passes through is a section the
+      // reader went to, so nothing between the tap and the arrival ticks.
+      if (value !== jump.target) return;
+
+      // Arrived — worth feeling, once. The window stays armed a moment longer
+      // rather than closing here, because a caller that sets the value
+      // optimistically hands it to us *before* the scroll starts: closing on
+      // the first match would disarm the rail for the whole animation, which
+      // is the entire journey it was there to cover. Every section the screen
+      // then passed lit a row and fired a tick of its own, several of them
+      // inside a few hundred milliseconds.
+      if (jump.landed) return;
+      jump.landed = true;
+      if (jumpTimer.current) clearTimeout(jumpTimer.current);
+      jumpTimer.current = setTimeout(endJump, JUMP_SETTLE);
     }
 
     if (haptics) selectionTick();
@@ -366,10 +386,10 @@ function SectionRailTrigger({ className, children, ...props }: SectionRailTrigge
       accessibilityState={{ expanded: open }}
       onPress={() => setOpen(!open)}
       // Generous padding is the hit target; the bars themselves are hairlines.
-      hitSlop={8}
+      hitSlop={10}
       className={cn(
-        'gap-2 py-3',
-        placement === 'right' ? 'items-end ps-6 pe-2' : 'items-start ps-2 pe-6',
+        'gap-1.5 py-2.5',
+        placement === 'right' ? 'items-end ps-5 pe-2' : 'items-start ps-2 pe-5',
         className
       )}
       {...props}
@@ -549,7 +569,7 @@ function SectionRailPanel({
       style={[style, { maxWidth, minWidth: PANEL_MIN_WIDTH }]}
       accessibilityRole="menu"
       className={cn(
-        'gap-0.5 rounded-2xl border border-border bg-popover p-2 shadow-lg',
+        'gap-0.5 rounded-xl border border-border bg-popover p-1.5 shadow-lg',
         className
       )}
       {...props}
@@ -582,9 +602,9 @@ function SectionRailItem({ className, value, level = 0, children }: SectionRailI
       onPress={() => onValueChange?.(value)}
       // `paddingStart`, not `paddingLeft`: the indent has to fall on the same
       // side as the bar it belongs to, which is the trailing edge under RTL.
-      style={{ paddingStart: 12 + level * ITEM_INDENT }}
+      style={{ paddingStart: 10 + level * ITEM_INDENT }}
       className={cn(
-        'rounded-lg py-2 pe-2.5 active:bg-accent',
+        'rounded-lg py-1.5 pe-2 active:bg-accent',
         selected && 'bg-accent',
         className
       )}

package/src/components/split-view/index.tsx

@@ -79,11 +79,45 @@ const splitViewVariants = tv({
     root: 'w-full flex-col overflow-hidden',
     top: 'w-full overflow-hidden',
     bottom: 'w-full flex-1 overflow-hidden',
-    dragArea: 'w-full items-center justify-center py-2',
-    handle: 'h-1 w-10 rounded-full bg-muted-foreground/30',
+    dragArea: 'w-full items-center justify-center',
+    handle: 'rounded-full',
+  },
+  variants: {
+    /*
+     * How the split is drawn. The mechanics are the same either way — this is
+     * only what the reader sees, and what they see decides what they think the
+     * control is.
+     *
+     * `panes` gives each half a surface of its own on a recessed ground, with
+     * the grip in the gap between them. Two things you can resize, and a
+     * handle that belongs to neither.
+     *
+     * `seam` is a hairline grip on a shared background: no surfaces, no gap,
+     * the two halves reading as one region with a line through it. It suits a
+     * split inside something that already has a surface — a card, a sheet —
+     * where a second one is a box in a box.
+     */
+    variant: {
+      panes: {
+        root: 'bg-inset',
+        top: 'rounded-2xl bg-surface',
+        bottom: 'rounded-2xl bg-surface',
+        dragArea: 'py-3',
+        handle: 'h-1.5 w-12 bg-muted-foreground/50',
+      },
+      seam: {
+        dragArea: 'py-2',
+        handle: 'h-1 w-10 bg-muted-foreground/30',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'panes',
   },
 });
 
+export type SplitViewVariant = 'panes' | 'seam';
+
 interface SplitViewContextValue {
   /** The top pane's height in points. Written by drags, read by both panes. */
   topHeight: SharedValue<number>;
@@ -101,6 +135,7 @@ interface SplitViewContextValue {
   snapTo: (index: number) => void;
   measureDragArea: (height: number) => void;
   dragAreaHeight: number;
+  variant: SplitViewVariant;
 }
 
 const SplitViewContext = createContext<SplitViewContextValue | null>(null);
@@ -123,6 +158,13 @@ export function useSplitView() {
 
 export interface SplitViewProps extends ViewProps {
   className?: string;
+  /**
+   * How the split is drawn. `panes` gives each half its own rounded surface on
+   * a recessed ground, with the grip in the gap between them; `seam` is a
+   * hairline grip on a shared background, for a split inside something that
+   * already has a surface of its own.
+   */
+  variant?: SplitViewVariant;
   /**
    * Heights the seam settles on. A number at or below `1` is a fraction of the
    * room the panes share; anything larger is points. Defaults to
@@ -154,6 +196,7 @@ export interface SplitViewProps extends ViewProps {
 
 function SplitViewRoot({
   className,
+  variant = 'panes',
   snapPoints,
   minHeight,
   maxHeight,
@@ -167,7 +210,7 @@ function SplitViewRoot({
   onLayout,
   ...props
 }: SplitViewProps) {
-  const { root } = splitViewVariants();
+  const { root } = splitViewVariants({ variant });
   const reducedMotion = useReducedMotion();
   const animate = !reducedMotion;
 
@@ -284,6 +327,7 @@ function SplitViewRoot({
       snapTo,
       measureDragArea,
       dragAreaHeight,
+      variant,
     }),
     [
       topHeight,
@@ -298,6 +342,7 @@ function SplitViewRoot({
       snapTo,
       measureDragArea,
       dragAreaHeight,
+      variant,
     ]
   );
 
@@ -325,7 +370,7 @@ export interface SplitViewPaneProps extends ViewProps {
  */
 function SplitViewTop({ className, children, style, ...props }: SplitViewPaneProps) {
   const context = useSplitViewContext('SplitView.Top');
-  const { top } = splitViewVariants();
+  const { top } = splitViewVariants({ variant: context.variant });
 
   const animatedStyle = useAnimatedStyle(() => ({
     height: context.topHeight.value,
@@ -356,8 +401,8 @@ function SplitViewTop({ className, children, style, ...props }: SplitViewPanePro
  * every frame of a drag rather than only at rest.
  */
 function SplitViewBottom({ className, children, ...props }: SplitViewPaneProps) {
-  useSplitViewContext('SplitView.Bottom');
-  const { bottom } = splitViewVariants();
+  const context = useSplitViewContext('SplitView.Bottom');
+  const { bottom } = splitViewVariants({ variant: context.variant });
 
   return (
     <View className={bottom({ className })} {...props}>
@@ -390,7 +435,7 @@ function SplitViewDragArea({
   ...props
 }: SplitViewDragAreaProps) {
   const context = useSplitViewContext('SplitView.DragArea');
-  const { dragArea } = splitViewVariants();
+  const { dragArea } = splitViewVariants({ variant: context.variant });
   const { topHeight, dragging, points, minPx, maxPx, room, disabled, snapTo } = context;
 
   const start = useSharedValue(0);
@@ -504,7 +549,7 @@ export interface SplitViewHandleProps extends ViewProps {
  */
 function SplitViewHandle({ className, children, style, ...props }: SplitViewHandleProps) {
   const context = useSplitViewContext('SplitView.Handle');
-  const { handle } = splitViewVariants();
+  const { handle } = splitViewVariants({ variant: context.variant });
   const { animate } = context;
 
   const animatedStyle = useAnimatedStyle(() => {

package/src/components/timeline/index.tsx

@@ -64,6 +64,9 @@ import {
 } from 'react-native';
 import Animated, {
   interpolate,
+  interpolateColor,
+  runOnJS,
+  useAnimatedReaction,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useReducedMotion,
@@ -73,9 +76,100 @@ import Animated, {
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
+import { selectionTick } from '../../utils/haptics';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { TIMELINE_WIDE_COLUMN, timelineColumnOffsets, timelineColumnWidth } from './timeline-geometry';
 
+const AnimatedText = Animated.createAnimatedComponent(Text);
+
+/**
+ * A tick as the reading edge passes from one column to the next.
+ *
+ * The comparison runs on the UI thread every frame; the call back to
+ * JavaScript happens once per column crossed, which is the difference between
+ * feedback and a haptic per frame. Fired at the crossing itself rather than
+ * when the scroll settles, so the tick and the column arriving are the same
+ * moment — a haptic that lags what caused it reads as a glitch.
+ */
+function useColumnDetent(
+  scrollX: SharedValue<number>,
+  offsets: number[],
+  enabled: boolean
+) {
+  const nearest = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (!enabled || offsets.length === 0) return 0;
+      let index = 0;
+      let best = Infinity;
+      for (let i = 0; i < offsets.length; i += 1) {
+        const distance = Math.abs(scrollX.value - (offsets[i] ?? 0));
+        if (distance < best) {
+          best = distance;
+          index = i;
+        }
+      }
+      return index;
+    },
+    (index, previous) => {
+      if (!enabled || previous === null || index === previous) return;
+      nearest.value = index;
+      runOnJS(selectionTick)();
+    }
+  );
+}
+
+
+/*
+ * Fallbacks for the two ends of the focus ramp, used only before the theme's
+ * variables have resolved. `interpolateColor` needs two real colours on the
+ * very first frame, and a missing one is a crash rather than a wrong shade.
+ */
+const INK_FALLBACK = { foreground: '#09090b', muted: '#71717a' };
+
+/**
+ * A column's text at full strength while it is the one being read, and muted
+ * while it is not.
+ *
+ * Horizontal only, and it is the piece that was missing. Scale and a small drop
+ * already picked the focused column out of the row, but every word in every
+ * column stayed the same muted grey — so the column you had scrolled to was
+ * nearer and no easier to read than the ones either side of it. Colour is what
+ * says *this is the one*, and it is the only cue that survives being looked at
+ * rather than glanced at.
+ *
+ * The ramp runs to the foreground token, which is what a heading uses. Anything
+ * softer is another grey, and the whole complaint about the old drawing was
+ * that it was grey.
+ *
+ * It is not disabled under reduced motion. The value is driven by scroll
+ * position rather than by a clock — the reader's own finger is what moves it —
+ * so there is no motion here to reduce. What that setting turns off is the
+ * scale and the drop, which is handled where those are.
+ */
+function useColumnInk(component: string) {
+  const { orientation, scrollX } = useTimeline(component);
+  const item = useContext(TimelineItemContext);
+  const foregroundToken = useCSSVariable('--color-foreground');
+  const mutedToken = useCSSVariable('--color-muted-foreground');
+
+  const horizontal = orientation === 'horizontal';
+  const offset = item?.offset ?? 0;
+  const width = Math.max(item?.columnWidth || TIMELINE_WIDE_COLUMN, 1);
+  const foreground =
+    typeof foregroundToken === 'string' ? foregroundToken : INK_FALLBACK.foreground;
+  const muted = typeof mutedToken === 'string' ? mutedToken : INK_FALLBACK.muted;
+
+  const style = useAnimatedStyle(() => {
+    const distance = Math.abs(scrollX.value - offset);
+    const away = interpolate(distance, [0, width], [0, 1], 'clamp');
+    return { color: interpolateColor(away, [0, 1], [foreground, muted]) };
+  });
+
+  return { horizontal, style };
+}
+
 export type TimelineVariant = 'dot' | 'icon' | 'numbered' | 'card' | 'compact';
 /** Semantic colour for a single event, independent of progress. */
 export type TimelineTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
@@ -315,6 +409,13 @@ export interface TimelineProps extends ViewProps {
    * halfway shows two half-columns and no whole one.
    */
   snap?: boolean;
+  /**
+   * Horizontal only: a tick as the reading edge passes from one column to the
+   * next. Needs `snap`, since a scroll that lands anywhere has no detents to
+   * feel. Off by default — a haptic per column is a lot for a long history, and
+   * whether this one is worth feeling is the caller's call.
+   */
+  haptics?: boolean;
   children?: ReactNode;
 }
 
@@ -326,6 +427,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
       variant = 'dot',
       orientation = 'vertical',
       snap = true,
+      haptics = false,
       children,
       ...props
     },
@@ -382,6 +484,8 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
       scrollX.value = event.contentOffset.x;
     });
 
+    useColumnDetent(scrollX, offsets, horizontal && snap && haptics);
+
     if (!horizontal) {
       return (
         <TimelineContext.Provider value={context}>
@@ -841,13 +945,17 @@ TimelineIndicator.displayName = 'Timeline.Indicator';
  */
 const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
   ({ className, children, style, ...props }, ref) => {
-    const { variant, orientation, scrollX, animate } = useTimeline('Timeline.Content');
-    const { completed, tone, offset, columnWidth } =
-      useTimelineItem('Timeline.Content');
+    const { variant, orientation } = useTimeline('Timeline.Content');
+    const { completed, tone } = useTimelineItem('Timeline.Content');
     const { body, panel } = timelineVariants({ variant, tone, completed, orientation });
     const horizontal = orientation === 'horizontal';
 
-    /* Horizontal content stays fully opaque; scale and translation provide focus. */
+    /*
+     * Horizontal content is not dimmed as a block. The column already carries
+     * the focus — it is nearer, and its text runs to the foreground as it comes
+     * to the reading edge — and fading the whole slot on top of that would take
+     * the neighbours out of the timeline rather than out of the way.
+     */
 
     const inner =
       variant === 'card' ? (
@@ -865,14 +973,9 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
     }
 
     return (
-      <Animated.View
-        ref={ref}
-        className={body({ className })}
-        {...props}
-        style={style}
-      >
+      <View ref={ref} className={body({ className })} style={style} {...props}>
         {inner}
-      </Animated.View>
+      </View>
     );
   }
 );
@@ -898,10 +1001,16 @@ const TimelineHeading = forwardRef<View, ViewProps & { className?: string }>(
 );
 TimelineHeading.displayName = 'Timeline.Heading';
 
-const TimelineDate = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+const TimelineDate = forwardRef<RNText, TextProps>(({ className, style, ...props }, ref) => {
   const { variant, orientation } = useTimeline('Timeline.Date');
   const { date } = timelineVariants({ variant, orientation });
-  return <Text ref={ref} className={date({ className })} {...props} />;
+  const ink = useColumnInk('Timeline.Date');
+  if (!ink.horizontal) {
+    return <Text ref={ref} className={date({ className })} style={style} {...props} />;
+  }
+  return (
+    <AnimatedText ref={ref} className={date({ className })} style={[style, ink.style]} {...props} />
+  );
 });
 TimelineDate.displayName = 'Timeline.Date';
 
@@ -915,10 +1024,16 @@ const TimelineLabel = forwardRef<RNText, TextProps>(({ className, ...props }, re
 TimelineLabel.displayName = 'Timeline.Label';
 
 /** Muted supporting line — a person's name, a source. */
-const TimelineMeta = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+const TimelineMeta = forwardRef<RNText, TextProps>(({ className, style, ...props }, ref) => {
   const { variant, orientation } = useTimeline('Timeline.Meta');
   const { meta } = timelineVariants({ variant, orientation });
-  return <Text ref={ref} className={meta({ className })} {...props} />;
+  const ink = useColumnInk('Timeline.Meta');
+  if (!ink.horizontal) {
+    return <Text ref={ref} className={meta({ className })} style={style} {...props} />;
+  }
+  return (
+    <AnimatedText ref={ref} className={meta({ className })} style={[style, ink.style]} {...props} />
+  );
 });
 TimelineMeta.displayName = 'Timeline.Meta';
 
@@ -940,10 +1055,21 @@ const TimelineTrailing = forwardRef<RNText, TextProps>(
 TimelineTrailing.displayName = 'Timeline.Trailing';
 
 const TimelineDescription = forwardRef<RNText, TextProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, style, ...props }, ref) => {
     const { variant, orientation } = useTimeline('Timeline.Description');
     const { content } = timelineVariants({ variant, orientation });
-    return <Text ref={ref} className={content({ className })} {...props} />;
+    const ink = useColumnInk('Timeline.Description');
+    if (!ink.horizontal) {
+      return <Text ref={ref} className={content({ className })} style={style} {...props} />;
+    }
+    return (
+      <AnimatedText
+        ref={ref}
+        className={content({ className })}
+        style={[style, ink.style]}
+        {...props}
+      />
+    );
   }
 );
 TimelineDescription.displayName = 'Timeline.Description';

package/src/components/toast/index.tsx

@@ -28,12 +28,16 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   Easing,
   Extrapolation,
+  FadeIn,
   FadeInDown,
   FadeInUp,
+  FadeOut,
   Keyframe,
   interpolate,
   runOnJS,
   useAnimatedStyle,
+  useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withDecay,
   withSpring,
@@ -58,6 +62,13 @@ import {
 } from './toast-store';
 
 const SPRING = { damping: 20, stiffness: 260, mass: 0.6 } as const;
+
+/**
+ * The deck reshuffling after a dismissal. Slower and softer than the drag's
+ * spring: the cards behind are not what the reader is acting on, and a stack
+ * that snaps draws the eye to the wrong thing.
+ */
+const STACK_SPRING = { duration: 350, dampingRatio: 0.9 } as const;
 /** Drag distance past which a release dismisses. */
 const DISMISS_DISTANCE = 50;
 /** Fling speed past which a release dismisses regardless of distance. */
@@ -91,15 +102,24 @@ const enteringBottom = FadeInDown.springify()
   .withInitialValues({ opacity: 1, transform: [{ translateY: ENTER_OFFSET }] })
   .mass(3);
 
+/*
+ * It leaves the way it arrived, a little quicker.
+ *
+ * The curve was an ease-*in*, which starts slow — it spends the first frames of
+ * the exit barely moving, which is exactly the moment the reader is looking at
+ * the thing that just changed. This is the ease-out used everywhere else in the
+ * library, and the duration is a fifth under the entrance: the arrival earns
+ * the time, the departure does not.
+ */
 const exitKeyframe = (offset: number) =>
   new Keyframe({
     0: { opacity: 1, transform: [{ translateY: 0 }, { scale: 1 }] },
     100: {
-      opacity: 0.5,
+      opacity: 0,
       transform: [{ translateY: offset }, { scale: 0.97 }],
-      easing: Easing.bezier(0.4, 0, 1, 1),
+      easing: Easing.bezier(0.23, 1, 0.32, 1),
     },
-  }).duration(150);
+  }).duration(240);
 
 const exitingTop = exitKeyframe(-ENTER_OFFSET);
 const exitingBottom = exitKeyframe(ENTER_OFFSET);
@@ -315,6 +335,7 @@ function ToastSlot({
   const placement = item.placement ?? 'bottom';
   const translateY = useSharedValue(0);
   const scale = useSharedValue(1);
+  const reducedMotion = useReducedMotion();
   const hide = useCallback(() => toastStore.hide(item.id), [item.id]);
 
   // Drop this toast's measurement when it leaves, so the map cannot grow
@@ -387,22 +408,35 @@ function ToastSlot({
    * The whole deck takes the *newest* toast's height so the cards behind read
    * as a uniform stack rather than a ragged pile.
    */
+  /*
+   * How far back in the deck this toast is: 0 is the front one.
+   *
+   * Sprung rather than read straight off the props. Position used to be
+   * computed from `index` and `total` directly, so dismissing a toast in the
+   * middle teleported every card behind it forward a step between two frames.
+   * The deck reshuffling is the one moment the stack is worth watching, and it
+   * was the one moment it did not move.
+   */
+  const depth = useDerivedValue(() =>
+    reducedMotion ? total - 1 - index : withSpring(total - 1 - index, STACK_SPRING)
+  );
+
   const stackStyle = useAnimatedStyle(() => {
     // Fall back to this toast's own height until the front one is measured.
     const frontHeight = heights.value[frontId] ?? heights.value[item.id];
 
-    // Newest sits at 0; each one behind steps back by STACK_OFFSET and shrinks.
-    const inputRange = [total - 1, total - 2];
-    const offset = interpolate(index, inputRange, [0, STACK_OFFSET * stackSign], {
+    // Front sits at 0; each one behind steps back by STACK_OFFSET and shrinks.
+    const back = depth.value;
+    const offset = interpolate(back, [0, 1], [0, STACK_OFFSET * stackSign], {
       extrapolateLeft: Extrapolation.CLAMP,
     });
-    const stackScale = interpolate(index, inputRange, [1, STACK_SCALE_STEP], {
+    const stackScale = interpolate(back, [0, 1], [1, STACK_SCALE_STEP], {
       extrapolateLeft: Extrapolation.CLAMP,
     });
     // Anything past MAX_VISIBLE fades out rather than piling up forever.
     const opacity = interpolate(
-      index,
-      [total - MAX_VISIBLE, total - MAX_VISIBLE - 1],
+      back,
+      [MAX_VISIBLE - 1, MAX_VISIBLE],
       [1, 0],
       Extrapolation.CLAMP
     );
@@ -443,8 +477,23 @@ function ToastSlot({
 
   return (
     <Animated.View
-      entering={placement === 'top' ? enteringTop : enteringBottom}
-      exiting={placement === 'top' ? exitingTop : exitingBottom}
+      /* Reduced motion keeps the fade — a toast that appears with no transition
+         at all is a jump-cut, and the arrival still has to be noticed — and
+         drops the travel and the scale. */
+      entering={
+        reducedMotion
+          ? FadeIn.duration(150)
+          : placement === 'top'
+            ? enteringTop
+            : enteringBottom
+      }
+      exiting={
+        reducedMotion
+          ? FadeOut.duration(120)
+          : placement === 'top'
+            ? exitingTop
+            : exitingBottom
+      }
       pointerEvents="box-none"
       // Every toast is pinned to the same edge, so they overlap as a deck.
       // Newest on top. Horizontal inset lives here rather than as padding on