react-native-laminar 1.0.0

package/lib/typescript/module/types.d.ts

@@ -0,0 +1,43 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { ComplexAnimationBuilder, EntryExitAnimationFunction, WithTimingConfig } from "react-native-reanimated";
+export type MorphAnimationPresetName = "default" | "smooth" | "snappy" | "bouncy";
+export type MorphContentVariant = "text" | "number";
+type CubicBezierTuple = readonly [number, number, number, number];
+export type MorphAnimationPreset = {
+    readonly duration: number;
+    readonly ease: CubicBezierTuple;
+} | {
+    readonly type: "spring";
+    readonly duration: number;
+    readonly bounce: number;
+};
+export type GlyphToken = {
+    readonly id: string;
+    readonly value: string;
+};
+export type NumericFlowDirection = -1 | 0 | 1;
+export type MotionRecipe = {
+    readonly durationMs: number;
+    readonly easing: NonNullable<WithTimingConfig["easing"]>;
+    readonly layoutTransition: ComplexAnimationBuilder;
+    readonly enterTransition: EntryExitAnimationFunction;
+    readonly exitTransition: EntryExitAnimationFunction;
+    readonly driveNumber: (toValue: number, delayMs?: number) => number;
+};
+export type MorphingTextProps = {
+    readonly text: string | number;
+    readonly variant?: MorphContentVariant;
+    readonly fontSize?: number;
+    readonly color?: string;
+    readonly style?: StyleProp<TextStyle>;
+    readonly containerStyle?: StyleProp<ViewStyle>;
+    readonly fontStyle?: StyleProp<TextStyle>;
+    readonly animationDuration?: number;
+    readonly animationPreset?: MorphAnimationPresetName;
+    readonly stagger?: number;
+    readonly autoSize?: boolean;
+    readonly clipToBounds?: boolean;
+};
+export type LaminarProps = MorphingTextProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC1B,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,wBAAwB,GAChC,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,KAAK,gBAAgB,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IACE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAC;CACjC,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,EAAE,uBAAuB,CAAC;IACnD,QAAQ,CAAC,eAAe,EAAE,0BAA0B,CAAC;IACrD,QAAQ,CAAC,cAAc,EAAE,0BAA0B,CAAC;IACpD,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,eAAe,CAAC,EAAE,wBAAwB,CAAC;IACpD,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC"}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { ComplexAnimationBuilder, EntryExitAnimationFunction } from "react-native-reanimated";
+import type { GlyphToken } from "../types";
+export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, enterTransition, exitTransition, textStyle, }: Readonly<{
+    glyphs: readonly GlyphToken[];
+    layoutTransition: ComplexAnimationBuilder;
+    enterTransition?: EntryExitAnimationFunction;
+    exitTransition?: EntryExitAnimationFunction;
+    textStyle?: StyleProp<TextStyle>;
+}>) => React.JSX.Element>;
+//# sourceMappingURL=glyph-run.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAQ3C,eAAO,MAAM,QAAQ,wGAOhB,QAAQ,CAAC;IACV,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC,uBAgBH,CAAC"}

package/lib/typescript/module/view/morph-viewport.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import Animated from "react-native-reanimated";
+type MorphViewportProps = {
+    readonly autoSize: boolean;
+    readonly clipToBounds: boolean;
+    readonly containerStyle?: StyleProp<ViewStyle>;
+    readonly animatedWidthStyle?: React.ComponentProps<typeof Animated.View>["style"];
+    readonly measurement?: React.ReactNode;
+    readonly children: React.ReactNode;
+};
+export declare const MorphViewport: React.MemoExoticComponent<({ autoSize, clipToBounds, containerStyle, animatedWidthStyle, measurement, children, }: MorphViewportProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=morph-viewport.d.ts.map

package/lib/typescript/module/view/morph-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AA4B/C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,qHAQrB,kBAAkB,uBAgCtB,CAAC"}

package/lib/typescript/module/view/number-lane.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { MotionRecipe, NumericFlowDirection } from "../types";
+type NumberLaneProps = {
+    readonly unit: string;
+    readonly tokenKey: number;
+    readonly isLead: boolean;
+    readonly hasAnimated: boolean;
+    readonly delayMs: number;
+    readonly direction: NumericFlowDirection;
+    readonly travelDistance: number;
+    readonly motionRecipe: MotionRecipe;
+    readonly textStyle?: StyleProp<TextStyle>;
+};
+export declare const NumberLane: React.MemoExoticComponent<({ unit, tokenKey, isLead, hasAnimated, delayMs, direction, travelDistance, motionRecipe, textStyle, }: NumberLaneProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=number-lane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-lane.d.ts","sourceRoot":"","sources":["../../../../src/view/number-lane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAiBnE,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC;IACzC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,UAAU,oIAWlB,eAAe,uBAgFnB,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import type { MotionRecipe } from "../types";
+type NumberRunProps = {
+    readonly value: string;
+    readonly motionRecipe: MotionRecipe;
+    readonly fontSize?: number;
+    readonly textStyle?: StyleProp<TextStyle>;
+    readonly staggerMs: number;
+};
+export declare const NumberRun: React.MemoExoticComponent<({ value, motionRecipe, fontSize, textStyle, staggerMs, }: Readonly<NumberRunProps>) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=number-run.d.ts.map

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

@@ -0,0 +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,MAAM,UAAU,CAAC;AAS7C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,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;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS,uFAOjB,QAAQ,CAAC,cAAc,CAAC,uBA2C5B,CAAC"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import type { StyleProp, TextStyle } from "react-native";
+import type { MotionRecipe } from "../types";
+type TextRunProps = {
+    readonly value: string;
+    readonly motionRecipe: MotionRecipe;
+    readonly textStyle?: StyleProp<TextStyle>;
+};
+export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, textStyle }: TextRunProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=text-run.d.ts.map

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

@@ -0,0 +1 @@
+{"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,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,OAAO,iEACmB,YAAY,uBAwBlD,CAAC"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "react-native-laminar",
+  "version": "1.0.0",
+  "description": "A React Native component for morphing text and numbers with character-level identity.",
+  "keywords": [
+    "react-native",
+    "animation",
+    "text",
+    "morphing",
+    "reanimated"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cajaun/laminar"
+  },
+  "license": "MIT",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "prepare": "bob build"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-reanimated": ">=3"
+  },
+  "devDependencies": {
+    "react-native-builder-bob": "*",
+    "typescript": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      ["module", { "esm": true }],
+      "typescript"
+    ]
+  }
+}

package/src/hooks/use-display-units.ts

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import {
+  normalizeDisplayUnit,
+  splitDisplayUnits,
+} from "../model/display-units";
+
+export const useDisplayUnits = (
+  value: string,
+  enabled = true
+): readonly string[] =>
+  useMemo(
+    () =>
+      // skip unit work when auto size is off
+      enabled
+        ? splitDisplayUnits(value).map(normalizeDisplayUnit)
+        : [],
+    [enabled, value]
+  );

package/src/hooks/use-inline-auto-width.ts

@@ -0,0 +1,57 @@
+import { useCallback, useRef, useState } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+
+type Params = {
+  enabled: boolean;
+  driveToWidth: (toValue: number) => number;
+};
+
+export const useInlineAutoWidth = ({ enabled, driveToWidth }: Params) => {
+  const widthValue = useSharedValue(0);
+  const measuredWidthRef = useRef<number | null>(null);
+  const bootstrappedRef = useRef(false);
+  const [hasBootstrappedWidth, setHasBootstrappedWidth] = useState(false);
+
+  const captureLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!enabled) {
+        return;
+      }
+
+      const nextWidth = Math.max(0, Math.ceil(event.nativeEvent.layout.width));
+
+      if (measuredWidthRef.current === nextWidth) {
+        return;
+      }
+
+      measuredWidthRef.current = nextWidth;
+
+      // snap the first width so mount does not animate from zero
+      if (!bootstrappedRef.current) {
+        bootstrappedRef.current = true;
+        widthValue.value = nextWidth;
+        setHasBootstrappedWidth(true);
+        return;
+      }
+
+      widthValue.value = driveToWidth(nextWidth);
+    },
+    [driveToWidth, enabled, widthValue]
+  );
+
+  const animatedWidthStyle = useAnimatedStyle(
+    () =>
+      enabled && hasBootstrappedWidth
+        ? {
+            width: widthValue.value,
+          }
+        : {},
+    [enabled, hasBootstrappedWidth]
+  );
+
+  return {
+    captureLayout,
+    animatedWidthStyle,
+  };
+};

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

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { resolveMotionRecipe } from "../motion/preset-map";
+import type {
+  MotionRecipe,
+  MorphAnimationPresetName,
+  MorphContentVariant,
+} from "../types";
+
+type Params = {
+  readonly variant: MorphContentVariant;
+  readonly animationPreset?: MorphAnimationPresetName;
+  readonly animationDuration?: number;
+  readonly stagger: number;
+};
+
+type MorphMotion = {
+  readonly motionRecipe: MotionRecipe;
+  readonly staggerMs: number;
+};
+
+export const useMorphMotion = ({
+  variant,
+  animationPreset,
+  animationDuration,
+  stagger,
+}: Params): MorphMotion => {
+  // numbers feel better with snappy unless you pick something else
+  const resolvedPreset =
+    animationPreset ?? (variant === "text" ? "default" : "snappy");
+
+  const motionRecipe = useMemo(
+    () => resolveMotionRecipe(resolvedPreset, animationDuration),
+    [animationDuration, resolvedPreset]
+  );
+
+  return {
+    motionRecipe,
+    staggerMs: Math.round(stagger * 1000),
+  };
+};

package/src/hooks/use-morph-text-style.ts

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import type { StyleProp, TextStyle } from "react-native";
+
+type Params = {
+  readonly fontSize?: number;
+  readonly color?: string;
+  readonly fontStyle?: StyleProp<TextStyle>;
+  readonly style?: StyleProp<TextStyle>;
+};
+
+type MorphTextStyle = {
+  readonly textStyle: StyleProp<TextStyle>;
+};
+
+export const useMorphTextStyle = ({
+  fontSize,
+  color,
+  fontStyle,
+  style,
+}: Params): MorphTextStyle => {
+  const baseTextStyle = useMemo(() => {
+    const nextStyle: TextStyle = {
+      includeFontPadding: false,
+    };
+
+    if (fontSize !== undefined) {
+      nextStyle.fontSize = fontSize;
+    }
+
+    if (color !== undefined) {
+      nextStyle.color = color;
+    }
+
+    return nextStyle;
+  }, [color, fontSize]);
+
+  const textStyle = useMemo(
+    () => [baseTextStyle, fontStyle, style],
+    [baseTextStyle, fontStyle, style]
+  );
+
+  return {
+    textStyle,
+  };
+};

package/src/hooks/use-numeric-lanes.ts

@@ -0,0 +1,55 @@
+import { useMemo, useRef } from "react";
+import type { NumericFlowDirection } from "../types";
+import {
+  findNumericLeadLength,
+  splitDisplayUnits,
+} from "../model/display-units";
+import { reconcileNumericLanes } from "../model/numeric-lanes";
+
+type NumericLedger = {
+  previousValue: string;
+  laneKeys: readonly number[];
+  nextSeed: number;
+  direction: NumericFlowDirection;
+};
+
+type NumericLaneSnapshot = {
+  readonly units: readonly string[];
+  readonly laneKeys: readonly number[];
+  readonly direction: NumericFlowDirection;
+  readonly leadLength: number;
+};
+
+export const useNumericLanes = (value: string): NumericLaneSnapshot => {
+  const units = useMemo(() => splitDisplayUnits(value), [value]);
+  const ledgerRef = useRef<NumericLedger>({
+    previousValue: value,
+    laneKeys: units.map((_, index) => index),
+    nextSeed: units.length,
+    direction: 0,
+  });
+
+  // keep lane ids in a ref so the number can reflow without remounting everything
+  if (value !== ledgerRef.current.previousValue) {
+    const nextLedger = reconcileNumericLanes(
+      ledgerRef.current.previousValue,
+      value,
+      ledgerRef.current.laneKeys,
+      ledgerRef.current.nextSeed
+    );
+
+    ledgerRef.current = {
+      previousValue: value,
+      laneKeys: nextLedger.laneKeys,
+      nextSeed: nextLedger.nextSeed,
+      direction: nextLedger.direction,
+    };
+  }
+
+  return {
+    units,
+    laneKeys: ledgerRef.current.laneKeys,
+    direction: ledgerRef.current.direction,
+    leadLength: findNumericLeadLength(units),
+  };
+};

package/src/hooks/use-text-glyphs.ts

@@ -0,0 +1,56 @@
+import { useMemo, useRef } from "react";
+import {
+  normalizeDisplayUnit,
+  splitDisplayUnits,
+} from "../model/display-units";
+import { reconcileTextGlyphKeys } from "../model/text-keys";
+import type { GlyphToken } from "../types";
+
+type TextGlyphLedger = {
+  previousValue: string;
+  previousUnits: readonly string[];
+  glyphKeys: readonly string[];
+  nextSeed: number;
+};
+
+export const useTextGlyphs = (
+  value: string,
+  namespace: string
+): readonly GlyphToken[] => {
+  const units = useMemo(() => splitDisplayUnits(value), [value]);
+  const ledgerRef = useRef<TextGlyphLedger>({
+    previousValue: value,
+    previousUnits: units,
+    glyphKeys: units.map((_, index) => `${namespace}:c${index}`),
+    nextSeed: units.length,
+  });
+
+  if (value !== ledgerRef.current.previousValue) {
+    // keep ids stable so unchanged glyphs stay mounted between updates
+    const nextLedger = reconcileTextGlyphKeys(
+      ledgerRef.current.previousUnits,
+      units,
+      ledgerRef.current.glyphKeys,
+      ledgerRef.current.nextSeed,
+      namespace
+    );
+
+    ledgerRef.current = {
+      previousValue: value,
+      previousUnits: units,
+      glyphKeys: nextLedger.glyphKeys,
+      nextSeed: nextLedger.nextSeed,
+    };
+  }
+
+  const glyphKeys = ledgerRef.current.glyphKeys;
+
+  return useMemo(
+    () =>
+      units.map((unit, index) => ({
+        id: glyphKeys[index],
+        value: normalizeDisplayUnit(unit),
+      })),
+    [glyphKeys, units]
+  );
+};

package/src/index.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Text } from "react-native";
+import { useInlineAutoWidth } from "./hooks/use-inline-auto-width";
+import { useMorphMotion } from "./hooks/use-morph-motion";
+import { useMorphTextStyle } from "./hooks/use-morph-text-style";
+import {
+  normalizeDisplayUnit,
+  splitDisplayUnits,
+} from "./model/display-units";
+import type { MorphingTextProps } from "./types";
+import { MorphViewport } from "./view/morph-viewport";
+import { NumberRun } from "./view/number-run";
+import { TextRun } from "./view/text-run";
+
+export const Laminar = React.memo(function Laminar({
+    text,
+    variant = "text",
+    fontSize,
+    color,
+    style,
+    containerStyle,
+    fontStyle,
+    animationDuration,
+    animationPreset,
+    stagger = 0.02,
+    autoSize = true,
+    clipToBounds = false,
+  }: Readonly<MorphingTextProps>) {
+    const resolvedValue = String(text ?? "");
+    const { motionRecipe, staggerMs } = useMorphMotion({
+      variant,
+      animationPreset,
+      animationDuration,
+      stagger,
+    });
+    const { textStyle } = useMorphTextStyle({
+      fontSize,
+      color,
+      fontStyle,
+      style,
+    });
+
+    const { captureLayout, animatedWidthStyle } = useInlineAutoWidth({
+      enabled: autoSize,
+      driveToWidth: motionRecipe.driveNumber,
+    });
+    const measuredValue = React.useMemo(() => {
+      if (!autoSize) {
+        return "";
+      }
+
+      return splitDisplayUnits(resolvedValue).map(normalizeDisplayUnit).join("");
+    }, [autoSize, resolvedValue]);
+
+    return (
+      <MorphViewport
+        autoSize={autoSize}
+        clipToBounds={clipToBounds}
+        containerStyle={containerStyle}
+        animatedWidthStyle={animatedWidthStyle}
+        measurement={
+          <Text
+            numberOfLines={1}
+            onLayout={captureLayout}
+            style={textStyle}
+          >
+            {measuredValue}
+          </Text>
+        }
+      >
+        {variant === "number" ? (
+          <NumberRun
+            value={resolvedValue}
+            motionRecipe={motionRecipe}
+            fontSize={fontSize}
+            textStyle={textStyle}
+            staggerMs={staggerMs}
+          />
+        ) : (
+          <TextRun
+            value={resolvedValue}
+            motionRecipe={motionRecipe}
+            textStyle={textStyle}
+          />
+      )}
+    </MorphViewport>
+  );
+  });
+
+export const MorphingText = Laminar;
+
+export default Laminar;
+export type {
+  LaminarProps,
+  MorphAnimationPresetName,
+  MorphContentVariant,
+  MorphingTextProps,
+} from "./types";

package/src/model/display-units.ts

@@ -0,0 +1,28 @@
+const NBSP = "\u00A0";
+const graphemeSegmenter =
+  typeof Intl !== "undefined" && typeof Intl.Segmenter === "function"
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+
+export const splitDisplayUnits = (input: string): string[] => {
+  if (graphemeSegmenter) {
+    return Array.from(
+      graphemeSegmenter.segment(input),
+      (part) => part.segment
+    );
+  }
+
+  return Array.from(input);
+};
+
+// swap plain spaces so measured text keeps its width
+export const normalizeDisplayUnit = (unit: string) =>
+  unit === " " ? NBSP : unit;
+
+export const isAsciiDigit = (unit: string) => unit >= "0" && unit <= "9";
+
+export const findNumericLeadLength = (units: readonly string[]) => {
+  const firstDigitIndex = units.findIndex(isAsciiDigit);
+
+  return firstDigitIndex === -1 ? units.length : firstDigitIndex;
+};