react-native-laminar 1.4.5 → 1.5.0

package/lib/typescript/module/view/number-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-run.d.ts","sourceRoot":"","sources":["../../../../src/view/number-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAe3D,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,SAAS,yGASjB,QAAQ,CAAC,cAAc,CAAC,uBA8C5B,CAAC"}
+{"version":3,"file":"number-run.d.ts","sourceRoot":"","sources":["../../../../src/view/number-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAgB3D,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,SAAS,iJAajB,QAAQ,CAAC,cAAc,CAAC,uBAuG5B,CAAC"}

package/lib/typescript/module/view/slot-shadow.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type SlotShadowProps = {
+    readonly slotHeight: number;
+    readonly viewportHeight: number;
+    readonly color?: string;
+    readonly size?: number;
+    readonly children: React.ReactElement;
+};
+export declare const SlotShadow: React.NamedExoticComponent<SlotShadowProps>;
+export {};
+//# sourceMappingURL=slot-shadow.d.ts.map

package/lib/typescript/module/view/slot-shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-shadow.d.ts","sourceRoot":"","sources":["../../../../src/view/slot-shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkD1B,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CACvC,CAAC;AAIF,eAAO,MAAM,UAAU,6CA+BrB,CAAC"}

package/lib/typescript/module/view/slots-run.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { type StyleProp, type TextStyle } from "react-native";
-import type { LaminarAlign, MotionRecipe } from "../types";
+import type { LaminarAlign, LaminarShadow, MotionRecipe } from "../types";
 type SlotsRunProps = {
     readonly value: string;
     readonly motionRecipe: MotionRecipe;
@@ -9,7 +9,12 @@ type SlotsRunProps = {
     readonly textStyle?: StyleProp<TextStyle>;
     readonly staggerMs: number;
     readonly className?: string;
+    readonly leading?: ReactNode;
+    readonly leadingKey?: string | number;
+    readonly leadingGap?: number;
+    readonly ready?: boolean;
+    readonly shadow?: LaminarShadow;
 };
-export declare const SlotsRun: React.MemoExoticComponent<({ value, motionRecipe, align, fontSize, textStyle, staggerMs, className, }: Readonly<SlotsRunProps>) => React.JSX.Element>;
+export declare const SlotsRun: React.MemoExoticComponent<({ value, motionRecipe, align, fontSize, textStyle, staggerMs, className, leading, leadingKey, leadingGap, ready, shadow, }: Readonly<SlotsRunProps>) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=slots-run.d.ts.map

package/lib/typescript/module/view/slots-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slots-run.d.ts","sourceRoot":"","sources":["../../../../src/view/slots-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAwB,MAAM,UAAU,CAAC;AAmQjF,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,QAAQ,yGAShB,QAAQ,CAAC,aAAa,CAAC,uBAwF3B,CAAC"}
+{"version":3,"file":"slots-run.d.ts","sourceRoot":"","sources":["../../../../src/view/slots-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EAEb,MAAM,UAAU,CAAC;AAqSlB,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC;CACjC,CAAC;AAGF,eAAO,MAAM,QAAQ,yJAchB,QAAQ,CAAC,aAAa,CAAC,uBA+I3B,CAAC"}

package/lib/typescript/module/view/text-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,gJAYf,YAAY,uBAsHhB,CAAC"}
+{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,gJAYf,YAAY,uBAqFhB,CAAC"}

package/lib/typescript/module/view/ticker-run.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { LaminarAlign, LaminarShadow, MotionRecipe } from "../types";
+type TickerRunProps = {
+    readonly value: string;
+    readonly motionRecipe: MotionRecipe;
+    readonly align: LaminarAlign;
+    readonly fontSize?: number;
+    readonly textStyle?: StyleProp<TextStyle>;
+    readonly staggerMs: number;
+    readonly className?: string;
+    readonly leading?: ReactNode;
+    readonly leadingKey?: string | number;
+    readonly leadingGap?: number;
+    readonly ready?: boolean;
+    /** accepted for API compatibility; flow values stay crisp and unmasked */
+    readonly shadow?: LaminarShadow;
+};
+export declare const TickerRun: React.MemoExoticComponent<({ value, motionRecipe, align, textStyle, className, leading, leadingKey, leadingGap, ready, }: Readonly<TickerRunProps>) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=ticker-run.d.ts.map

package/lib/typescript/module/view/ticker-run.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker-run.d.ts","sourceRoot":"","sources":["../../../../src/view/ticker-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAKpE,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACb,MAAM,UAAU,CAAC;AAsBlB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC;CACjC,CAAC;AAKF,eAAO,MAAM,SAAS,4HAWjB,QAAQ,CAAC,cAAc,CAAC,uBAsG5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-laminar",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A React Native component for morphing text and numbers with character-level identity.",
   "keywords": [
     "react-native",
@@ -50,6 +50,8 @@
   },
   "sideEffects": false,
   "peerDependencies": {
+    "@react-native-masked-view/masked-view": ">=0.3",
+    "expo-linear-gradient": ">=15",
     "react": ">=18",
     "react-native": ">=0.74",
     "react-native-reanimated": ">=3"

package/src/hooks/use-leading-animation.ts

@@ -0,0 +1,74 @@
+import { useLayoutEffect, useMemo, useRef, type ReactNode } from "react";
+import { useSharedValue } from "react-native-reanimated";
+import {
+  createLeadingEnterTransition,
+  createLeadingExitTransition,
+} from "../motion/entry-exit-builders";
+import type { MotionRecipe } from "../types";
+
+type UseLeadingAnimationParams = {
+  readonly leading?: ReactNode;
+  readonly leadingKey?: string | number;
+  readonly leadingGap: number;
+  readonly motionRecipe: MotionRecipe;
+};
+
+// keep leading presence and replacement motion consistent across every content variant
+export const useLeadingAnimation = ({
+  leading,
+  leadingKey,
+  leadingGap,
+  motionRecipe,
+}: UseLeadingAnimationParams) => {
+  const lastLeadingPresenceRef = useRef(Boolean(leading));
+  const lastLeadingKeyRef = useRef(leadingKey);
+  const isLeadingSwap =
+    Boolean(leading) &&
+    lastLeadingPresenceRef.current &&
+    leadingKey !== lastLeadingKeyRef.current;
+  const isLeadingChange =
+    Boolean(leading) !== lastLeadingPresenceRef.current ||
+    (Boolean(leading) && leadingKey !== lastLeadingKeyRef.current);
+  const leadingSwapProgress = useSharedValue(0);
+
+  // update the worklet flag after commit so render never writes a shared value
+  useLayoutEffect(() => {
+    leadingSwapProgress.value = isLeadingSwap ? 1 : 0;
+  }, [isLeadingSwap, leadingSwapProgress]);
+
+  const elementEnterTransition = useMemo(
+    () =>
+      createLeadingEnterTransition({
+        durationMs: motionRecipe.durationMs,
+        easing: motionRecipe.easing,
+      }),
+    [motionRecipe.durationMs, motionRecipe.easing]
+  );
+  const elementExitTransition = useMemo(
+    () =>
+      createLeadingExitTransition({
+        durationMs: motionRecipe.durationMs,
+        easing: motionRecipe.easing,
+        leadingGap,
+        scale: leadingSwapProgress,
+      }),
+    [
+      leadingGap,
+      leadingSwapProgress,
+      motionRecipe.durationMs,
+      motionRecipe.easing,
+    ]
+  );
+
+  if (isLeadingChange) {
+    lastLeadingPresenceRef.current = Boolean(leading);
+    lastLeadingKeyRef.current = leadingKey;
+  }
+
+  return {
+    elementEnterTransition,
+    elementExitTransition,
+    isLeadingChange,
+    isLeadingSwap,
+  };
+};

package/src/hooks/use-morph-motion.ts

@@ -4,10 +4,12 @@ import type {
   MotionRecipe,
   MorphAnimationPresetName,
   MorphContentVariant,
+  MorphNumberMode,
 } from "../types";
 
 type Params = {
   readonly variant: MorphContentVariant;
+  readonly numberMode?: MorphNumberMode;
   readonly animationPreset?: MorphAnimationPresetName;
   readonly animationDuration?: number;
   readonly stagger: number;
@@ -21,13 +23,20 @@ type MorphMotion = {
 // resolve one motion recipe and one shared stagger unit for a render tree
 export const useMorphMotion = ({
   variant,
+  numberMode,
   animationPreset,
   animationDuration,
   stagger,
 }: Params): MorphMotion => {
+  const isTicker = variant === "number" && numberMode === "ticker";
   // numeric variants need a quicker default because their lanes update often
   const resolvedPreset =
-    animationPreset ?? (variant === "text" ? "default" : "snappy");
+    animationPreset ??
+    (isTicker
+      ? "ticker"
+      : variant === "text"
+        ? "default"
+        : "snappy");
 
   const motionRecipe = useMemo(
     () => resolveMotionRecipe(resolvedPreset, animationDuration),

package/src/index.tsx

@@ -11,6 +11,7 @@ import type { LaminarLeadingMap, MorphingTextProps } from "./types";
 import { MorphViewport } from "./view/morph-viewport";
 import { NumberRun } from "./view/number-run";
 import { SlotsRun } from "./view/slots-run";
+import { TickerRun } from "./view/ticker-run";
 import { TextRun } from "./view/text-run";
 
 // choose the content variant and connect it to the shared viewport and measurement flow
@@ -24,12 +25,14 @@ export const Laminar = React.memo(function Laminar({
     leading,
     leadingKey,
     leadingGap = 0,
+    numberMode = "morph",
+    shadow = false,
     style,
     containerStyle,
     fontStyle,
     animationDuration,
     animationPreset,
-    stagger = 0.02,
+    stagger,
     autoSize = true,
     clipToBounds = false,
   }: Readonly<MorphingTextProps>) {
@@ -40,11 +43,16 @@ export const Laminar = React.memo(function Laminar({
       ? leadingMap[resolvedValue]
       : (leading as React.ReactNode);
     const resolvedLeadingKey = leadingMap ? resolvedValue : leadingKey;
+    const resolvedStagger =
+      stagger ?? (variant === "number" && numberMode === "ticker" ? 0 : 0.02);
+    const useLayoutAutoSize =
+      autoSize && variant === "number" && numberMode === "ticker";
     const { motionRecipe, staggerMs } = useMorphMotion({
       variant,
+      numberMode,
       animationPreset,
       animationDuration,
-      stagger,
+      stagger: resolvedStagger,
     });
     const { textStyle } = useMorphTextStyle({
       fontSize,
@@ -67,9 +75,9 @@ export const Laminar = React.memo(function Laminar({
         flattenedStyle?.letterSpacing,
         flattenedStyle?.lineHeight,
         flattenedStyle?.textTransform,
-        variant === "text" && Boolean(resolvedLeading),
-        variant === "text" ? resolvedLeadingKey : undefined,
-        variant === "text" ? leadingGap : 0,
+        Boolean(resolvedLeading),
+        resolvedLeadingKey,
+        leadingGap,
       ]);
     }, [
       leadingGap,
@@ -109,6 +117,9 @@ export const Laminar = React.memo(function Laminar({
         align={align}
         containerStyle={containerStyle}
         animatedWidthStyle={animatedWidthStyle}
+        autoSizeLayoutTransition={
+          useLayoutAutoSize ? motionRecipe.layoutTransition : undefined
+        }
         onVisibleLayout={autoSize ? captureVisibleLayout : undefined}
         measurement={
           shouldMeasure ? (
@@ -117,7 +128,7 @@ export const Laminar = React.memo(function Laminar({
               onLayout={captureLayout}
               style={{ flexDirection: "row", alignSelf: "flex-start" }}
             >
-              {variant === "text" && resolvedLeading ? (
+              {resolvedLeading ? (
                 <View
                   style={{
                     alignItems: "center",
@@ -146,6 +157,26 @@ export const Laminar = React.memo(function Laminar({
             textStyle={textStyle}
             staggerMs={staggerMs}
             className={className}
+            leading={resolvedLeading}
+            leadingKey={resolvedLeadingKey}
+            leadingGap={leadingGap}
+            ready={!autoSize || isAutoSizeReady}
+            shadow={shadow}
+          />
+        ) : variant === "number" && numberMode === "ticker" ? (
+          <TickerRun
+            value={resolvedValue}
+            motionRecipe={motionRecipe}
+            align={align}
+            fontSize={fontSize}
+            textStyle={textStyle}
+            staggerMs={staggerMs}
+            className={className}
+            leading={resolvedLeading}
+            leadingKey={resolvedLeadingKey}
+            leadingGap={leadingGap}
+            ready={!autoSize || isAutoSizeReady}
+            shadow={shadow}
           />
         ) : variant === "number" ? (
           <NumberRun
@@ -156,6 +187,10 @@ export const Laminar = React.memo(function Laminar({
             textStyle={textStyle}
             staggerMs={staggerMs}
             className={className}
+            leading={resolvedLeading}
+            leadingKey={resolvedLeadingKey}
+            leadingGap={leadingGap}
+            ready={!autoSize || isAutoSizeReady}
           />
         ) : (
           <TextRun
@@ -190,8 +225,11 @@ function isLeadingMap(
 export type {
   LaminarAlign,
   LaminarLeadingMap,
+  LaminarShadow,
+  LaminarShadowOptions,
   LaminarProps,
   MorphAnimationPresetName,
   MorphContentVariant,
+  MorphNumberMode,
   MorphingTextProps,
 } from "./types";

package/src/motion/preset-map.ts

@@ -15,6 +15,7 @@ import type {
 
 // keep all presets on one curve family so layout and glyph motion agree
 const DEFAULT_CURVE = [0.19, 1, 0.22, 1] as const;
+const TICKER_CURVE = [0.33, 1, 0.68, 1] as const;
 
 export const MOTION_PRESETS: Record<
   MorphAnimationPresetName,
@@ -39,6 +40,10 @@ export const MOTION_PRESETS: Record<
     duration: 0.5,
     bounce: 0.3,
   },
+  ticker: {
+    duration: 0.3,
+    ease: TICKER_CURVE,
+  },
 } as const;
 
 // the public preset table uses seconds while reanimated timing uses milliseconds

package/src/types.ts

@@ -10,13 +10,24 @@ export type MorphAnimationPresetName =
   | "default"
   | "smooth"
   | "snappy"
-  | "bouncy";
+  | "bouncy"
+  | "ticker";
 
 export type MorphContentVariant = "text" | "number" | "slots";
+export type MorphNumberMode = "morph" | "ticker";
 export type LaminarAlign = "left" | "center" | "right";
 // text keys let leading content follow the same state as the displayed value
 export type LaminarLeadingMap = Readonly<Record<string, ReactNode>>;
 
+export type LaminarShadowOptions = {
+  /** surface color used by the alpha mask when a platform requires it */
+  readonly color?: string;
+  /** fade depth in pixels; defaults to roughly one third of the viewport */
+  readonly size?: number;
+};
+
+export type LaminarShadow = boolean | LaminarShadowOptions;
+
 type CubicBezierTuple = readonly [number, number, number, number];
 
 export type MorphAnimationPreset =
@@ -52,16 +63,20 @@ export type MotionRecipe = {
 export type MorphingTextProps = {
   readonly text: string | number;
   readonly variant?: MorphContentVariant;
+  /** number-only renderer mode; ticker uses crisp in-place digit flow */
+  readonly numberMode?: MorphNumberMode;
   readonly fontSize?: number;
   readonly color?: string;
   readonly align?: LaminarAlign;
   readonly className?: string;
-  /** optional inline element reconciled and animated as the leading token */
+  /** optional inline element reconciled and animated before the rendered value */
   readonly leading?: ReactNode | LaminarLeadingMap;
   /** identity for swapping one leading element for another */
   readonly leadingKey?: string | number;
   /** spacing between the leading element and the first text glyph */
   readonly leadingGap?: number;
+  /** opt-in top and bottom fades for slot reels */
+  readonly shadow?: LaminarShadow;
   readonly style?: StyleProp<TextStyle>;
   readonly containerStyle?: StyleProp<ViewStyle>;
   readonly fontStyle?: StyleProp<TextStyle>;

package/src/view/leading-element.tsx

@@ -0,0 +1,45 @@
+import React, { type ReactNode } from "react";
+import Animated, {
+  type EntryExitAnimationFunction,
+} from "react-native-reanimated";
+
+type LeadingElementProps = {
+  readonly leading?: ReactNode;
+  readonly leadingKey?: string | number;
+  readonly leadingGap: number;
+  readonly enterTransition?: EntryExitAnimationFunction;
+  readonly elementEnterTransition?: EntryExitAnimationFunction;
+  readonly exitTransition?: EntryExitAnimationFunction;
+  readonly elementExitTransition?: EntryExitAnimationFunction;
+};
+
+// render an inline element independently so it can enter, exit, and swap beside any run
+export const LeadingElement = React.memo(function LeadingElement({
+  leading,
+  leadingKey,
+  leadingGap,
+  enterTransition,
+  elementEnterTransition,
+  exitTransition,
+  elementExitTransition,
+}: LeadingElementProps) {
+  if (!leading) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      key={`leading:${String(leadingKey ?? "default")}`}
+      entering={elementEnterTransition ?? enterTransition}
+      exiting={elementExitTransition ?? exitTransition}
+      style={[
+        { alignItems: "center", justifyContent: "center" },
+        leadingGap > 0 ? { marginRight: leadingGap } : undefined,
+      ]}
+    >
+      {leading}
+    </Animated.View>
+  );
+});
+
+LeadingElement.displayName = "LeadingElement";

package/src/view/morph-viewport.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useRef } from "react";
 import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
 import { View } from "react-native";
 import Animated from "react-native-reanimated";
+import type { ComplexAnimationBuilder } from "react-native-reanimated";
 import type { LaminarAlign } from "../types";
 
 const shellStyle = {
@@ -52,6 +53,8 @@ type MorphViewportProps = {
   readonly align: LaminarAlign;
   readonly containerStyle?: StyleProp<ViewStyle>;
   readonly animatedWidthStyle?: React.ComponentProps<typeof Animated.View>["style"];
+  /** optional layout-driven auto-size path for content that needs an aligned anchor */
+  readonly autoSizeLayoutTransition?: ComplexAnimationBuilder;
   readonly onVisibleLayout?: (event: LayoutChangeEvent) => void;
   readonly measurement?: React.ReactNode;
   readonly children: React.ReactNode;
@@ -65,10 +68,16 @@ export const MorphViewport = React.memo(
     align,
     containerStyle,
     animatedWidthStyle,
+    autoSizeLayoutTransition,
     onVisibleLayout,
     measurement,
     children,
   }: MorphViewportProps) => {
+    const hasRenderedRef = useRef(false);
+    const shouldAnimateAutoSizeLayout =
+      autoSizeLayoutTransition !== undefined && hasRenderedRef.current;
+    hasRenderedRef.current = true;
+
     // compute alignment once so the animated shell and its child share one layout contract
     const resolvedViewportStyle = useMemo(
       () => [
@@ -80,6 +89,35 @@ export const MorphViewport = React.memo(
     );
 
     // keep measurement outside the visible viewport so it cannot affect accessibility or layout
+    if (autoSizeLayoutTransition) {
+      // Layout animation owns both width and the shell's aligned x-position.
+      // This is important for center/right auto-size: animating only a child
+      // width leaves the parent anchor at its old position.
+      return (
+        <Animated.View
+          layout={
+            shouldAnimateAutoSizeLayout
+              ? autoSizeLayoutTransition
+              : undefined
+          }
+          style={[shellStyle, shellAlignStyles[align], containerStyle]}
+        >
+          <View
+            accessibilityElementsHidden
+            collapsable={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            style={measuredContentStyle}
+          >
+            {measurement}
+          </View>
+          <Animated.View onLayout={onVisibleLayout} style={resolvedViewportStyle}>
+            {children}
+          </Animated.View>
+        </Animated.View>
+      );
+    }
+
     return (
       <View style={[shellStyle, shellAlignStyles[align], containerStyle]}>
         {autoSize ? (