react-native-screen-transitions 3.6.0-alpha.0 → 3.6.0-alpha.2

package/src/shared/utils/bounds/navigation/reveal/build.ts

@@ -1,61 +1,37 @@
 import { interpolate } from "react-native-reanimated";
-import {
-	EPSILON,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
+import { NAVIGATION_MASK_ELEMENT_STYLE_ID } from "../../../../constants";
 import { createLinkAccessor } from "../../helpers/create-link-accessor";
 import { getSourceBorderRadius } from "../helpers";
 import {
-	combineScales,
-	composeCompensatedTranslation,
-	computeCenterScaleShift,
-	resolveDirectionalDragScale,
-} from "../math";
-import {
+	CLOSE_SOURCE_HANDOFF_PROGRESS,
+	CONTENT_CLOSING_OPACITY_OUTPUT,
+	CONTENT_CLOSING_OPACITY_RANGE,
+	CONTENT_ENTERING_OPACITY_OUTPUT,
+	CONTENT_ENTERING_OPACITY_RANGE,
+	CONTENT_SHADOW_OPACITY_OUTPUT,
+	DRAG_MASK_HEIGHT_COLLAPSE_END,
+	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
+	IDENTITY_DRAG_SCALE_OUTPUT,
 	REVEAL_BORDER_RADIUS,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-	ZOOM_DRAG_TRANSLATION_EXPONENT,
-	ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-	ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-	ZOOM_SHARED_OPTIONS,
+	REVEAL_SHADOW_OFFSET,
+	REVEAL_USES_TRANSFORM_MASK,
+	UNFOCUSED_ELEMENT_OPACITY_OUTPUT,
+	ZERO_TO_ONE_RANGE,
 } from "./config";
-import { resolveDirectionalDragTranslation } from "./math";
+import {
+	interpolateClamped,
+	mixUnit,
+	resolveDismissScaleHandoff,
+	resolveRevealContentBaseTransform,
+	resolveRevealDirectionalDragScale,
+	resolveRevealGestureHandoff,
+	resolveSafeScale,
+	resolveTrackedSourceElementTransform,
+	resolveUniformScale,
+	resolveUnitDragTranslation,
+} from "./math";
 import type { BuildRevealStylesParams, RevealInterpolatedStyle } from "./types";
 
-const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
-
-function resolveRevealGestureHandoff(rawDrag: number) {
-	"worklet";
-
-	const gestureSensitivity = interpolate(
-		rawDrag,
-		[0, 0.25, 0.7],
-		[0.9, 0.62, 0.28],
-		"clamp",
-	);
-
-	const releaseBoost = interpolate(
-		rawDrag,
-		[0, 0.35, 1],
-		[1, 1.35, 1.75],
-		"clamp",
-	);
-
-	const releaseSensitivity = interpolate(
-		gestureSensitivity,
-		[0.28, 0.9],
-		[0.7, 1],
-		"clamp",
-	);
-
-	return {
-		gestureSensitivity,
-		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
-	};
-}
-
 /* -------------------------------------------------------------------------- */
 /*                              BUILD REVEAL STYLES                           */
 /* -------------------------------------------------------------------------- */
@@ -78,11 +54,6 @@ export function buildRevealStyles({
 		layouts: { screen: screenLayout },
 	} = props;
 
-	const baseRawOptions = {
-		raw: true,
-		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
-	} as const;
-
 	const boundsAccessor = createLinkAccessor(() => props);
 	const link = boundsAccessor.getLink(tag);
 
@@ -97,8 +68,10 @@ export function buildRevealStyles({
 	const initialGesture =
 		props.active.gesture.active ?? props.active.gesture.direction;
 
-	const isHorizontalDismiss = initialGesture?.includes("horizontal");
-	const isVerticalDismiss = initialGesture?.includes("vertical");
+	const isHorizontalDismiss =
+		initialGesture === "horizontal" || initialGesture === "horizontal-inverted";
+	const isVerticalDismiss =
+		initialGesture === "vertical" || initialGesture === "vertical-inverted";
 
 	const rawDrag = isHorizontalDismiss
 		? Math.abs(props.active.gesture.raw.normX)
@@ -106,48 +79,34 @@ export function buildRevealStyles({
 			? Math.abs(props.active.gesture.raw.normY)
 			: 0;
 
-	const dragX = resolveDirectionalDragTranslation({
-		translation: props.active.gesture.x,
-		dimension: screenLayout.width,
-		negativeMax: ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: ZOOM_DRAG_TRANSLATION_EXPONENT,
-	});
+	const dragX =
+		props.active.gesture.x === 0
+			? 0
+			: resolveUnitDragTranslation(props.active.gesture.x, screenLayout.width);
 
-	const dragY = resolveDirectionalDragTranslation({
-		translation: props.active.gesture.y,
-		dimension: screenLayout.height,
-		negativeMax: ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: ZOOM_DRAG_TRANSLATION_EXPONENT,
-	});
+	const dragY =
+		props.active.gesture.y === 0
+			? 0
+			: resolveUnitDragTranslation(props.active.gesture.y, screenLayout.height);
 
 	const dragXScale = isHorizontalDismiss
-		? resolveDirectionalDragScale({
-				normalized: props.active.gesture.normX,
-				dismissDirection:
-					initialGesture === "horizontal-inverted" ? "negative" : "positive",
-				shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-				growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-				exponent: ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-			})
+		? resolveRevealDirectionalDragScale(
+				props.active.gesture.normX,
+				initialGesture === "horizontal-inverted",
+			)
 		: IDENTITY_DRAG_SCALE_OUTPUT[0];
 
 	const dragYScale = isVerticalDismiss
-		? resolveDirectionalDragScale({
-				normalized: props.active.gesture.normY,
-				dismissDirection:
-					initialGesture === "vertical-inverted" ? "negative" : "positive",
-				shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-				growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-				exponent: ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-			})
+		? resolveRevealDirectionalDragScale(
+				props.active.gesture.normY,
+				initialGesture === "vertical-inverted",
+			)
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 
-	const dragScale = combineScales(dragXScale, dragYScale);
+	const dragScale = dragXScale * dragYScale;
 
 	const initialDestinationTarget =
-		focused && props.active.closing && link.initialDestination?.bounds
+		props.active.closing && link.initialDestination?.bounds
 			? link.initialDestination.bounds
 			: undefined;
 
@@ -155,57 +114,158 @@ export function buildRevealStyles({
 
 	if (focused) {
 		const contentRaw = link.compute({
-			...baseRawOptions,
+			raw: true,
+			scaleMode: "uniform",
 			method: "content",
 			target: initialDestinationTarget,
-		});
+		} as const);
 
 		const maskRaw = link.compute({
-			...baseRawOptions,
+			raw: true,
+			scaleMode: "uniform",
 			method: "size",
 			space: "absolute",
 			target: "fullscreen",
-		});
+		} as const);
 
-		const maskBorderRadius = interpolate(
+		const maskBorderRadius = mixUnit(
+			sourceBorderRadius,
+			REVEAL_BORDER_RADIUS,
 			progress,
-			[0, 1],
-			[sourceBorderRadius, REVEAL_BORDER_RADIUS],
-			"clamp",
 		);
 
-		const maskWidth = Math.max(1, maskRaw.width);
-		const maskHeight = Math.max(1, maskRaw.height);
-
+		const maskSizeMultiplier = props.active.closing
+			? mixUnit(0.9, 1, props.active.progress)
+			: 1;
+
+		const maskWidth = Math.max(1, maskRaw.width * maskSizeMultiplier);
+		const maskHeight = Math.max(1, maskRaw.height * maskSizeMultiplier);
+
+		const contentBaseScale = contentRaw.scale;
+		const safeContentBaseScale = resolveSafeScale(contentBaseScale);
+
+		let contentScale = contentBaseScale * dragScale;
+		if (props.active.gesture.dismissing) {
+			const contentTargetBounds =
+				initialDestinationTarget ?? link.destination.bounds;
+			const sourceContentScale = resolveUniformScale({
+				sourceWidth: link.source.bounds.width,
+				sourceHeight: link.source.bounds.height,
+				destinationWidth: contentTargetBounds.width,
+				destinationHeight: contentTargetBounds.height,
+			});
+			contentScale = resolveDismissScaleHandoff({
+				progress: props.active.progress,
+				releaseScale: dragScale,
+				targetScale: sourceContentScale,
+				velocity: props.active.gesture.velocity,
+			});
+		}
 		const contentTranslateX = contentRaw.translateX + dragX;
 		const contentTranslateY = contentRaw.translateY + dragY;
-		const contentScale = contentRaw.scale * dragScale;
 
-		const maskTranslateX = maskRaw.translateX + dragX;
-		const maskTranslateY = maskRaw.translateY + dragY;
+		const liveHorizontalDismissDrag =
+			initialGesture === "horizontal-inverted"
+				? -props.active.gesture.normX
+				: props.active.gesture.normX;
+
+		const liveVerticalDismissDrag =
+			initialGesture === "vertical-inverted"
+				? -props.active.gesture.normY
+				: props.active.gesture.normY;
+
+		const dismissProgressDrag = props.active.gesture.dismissing
+			? 1 - props.active.progress
+			: 0;
+
+		const maskHeightCollapseDrag =
+			isHorizontalDismiss || isVerticalDismiss
+				? Math.max(
+						0,
+						isHorizontalDismiss
+							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE
+							: 0,
+						isVerticalDismiss ? liveVerticalDismissDrag : 0,
+						dismissProgressDrag,
+					)
+				: 0;
+
+		const minMaskHeight = Math.min(
+			maskHeight,
+			Math.max(maskWidth, link.source.bounds.height),
+		);
 
-		const safeContentScale =
-			Math.abs(contentScale) > EPSILON ? contentScale : 1;
+		const renderedMaskHeight = interpolateClamped(
+			maskHeightCollapseDrag,
+			0,
+			DRAG_MASK_HEIGHT_COLLAPSE_END,
+			maskHeight,
+			minMaskHeight,
+		);
 
 		const maskCenterX = maskWidth / 2;
-		const maskCenterY = maskHeight / 2;
+		const maskCenterY = renderedMaskHeight / 2;
+		const maskCenteringOffsetX = (maskRaw.width - maskWidth) / 2;
+		const maskCenteringOffsetY = (maskRaw.height - maskHeight) / 2;
+		const verticalCollapseOffsetY =
+			initialGesture === "vertical-inverted"
+				? maskHeight - renderedMaskHeight
+				: 0;
 
 		const contentCenterX = screenLayout.width / 2;
 		const contentCenterY = screenLayout.height / 2;
 
+		// The mask lives inside the transformed content container. Compensate only
+		// for the reveal's base content scale; drag scale should be inherited from
+		// the same parent transform as the screen content.
 		const compensatedMaskTranslateX =
-			(maskTranslateX -
-				contentTranslateX +
-				(1 - contentScale) * (maskCenterX - contentCenterX)) /
-			safeContentScale;
+			(maskRaw.translateX -
+				contentRaw.translateX +
+				maskCenteringOffsetX +
+				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+			safeContentBaseScale;
 
 		const compensatedMaskTranslateY =
-			(maskTranslateY -
-				contentTranslateY +
-				(1 - contentScale) * (maskCenterY - contentCenterY)) /
-			safeContentScale;
-
-		const compensatedMaskScale = dragScale / safeContentScale;
+			(maskRaw.translateY -
+				contentRaw.translateY +
+				maskCenteringOffsetY +
+				verticalCollapseOffsetY +
+				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+			safeContentBaseScale;
+
+		const compensatedMaskScale = 1 / safeContentBaseScale;
+		const maskBaseWidth = Math.max(1, screenLayout.width);
+		const maskBaseHeight = Math.max(1, screenLayout.height);
+		const maskScaleX = maskWidth / maskBaseWidth;
+		const maskScaleY = renderedMaskHeight / maskBaseHeight;
+		const transformMaskTranslateX =
+			compensatedMaskTranslateX + (maskWidth - maskBaseWidth) / 2;
+		const transformMaskTranslateY =
+			compensatedMaskTranslateY + (renderedMaskHeight - maskBaseHeight) / 2;
+		const maskElementStyle = REVEAL_USES_TRANSFORM_MASK
+			? {
+					width: maskBaseWidth,
+					height: maskBaseHeight,
+					borderRadius: props.active.settled ? 0 : maskBorderRadius,
+					borderCurve: "continuous" as const,
+					transform: [
+						{ translateX: transformMaskTranslateX },
+						{ translateY: transformMaskTranslateY },
+						{ scaleX: maskScaleX * compensatedMaskScale },
+						{ scaleY: maskScaleY * compensatedMaskScale },
+					],
+				}
+			: {
+					width: maskWidth,
+					height: renderedMaskHeight,
+					borderRadius: props.active.settled ? 0 : maskBorderRadius,
+					borderCurve: "continuous" as const,
+					transform: [
+						{ translateX: compensatedMaskTranslateX },
+						{ translateY: compensatedMaskTranslateY },
+						{ scale: compensatedMaskScale },
+					],
+				};
 
 		const elementOffsetX = initialDestinationTarget
 			? initialDestinationTarget.pageX - link.destination.bounds.pageX
@@ -216,19 +276,30 @@ export function buildRevealStyles({
 			: 0;
 
 		const elementTX = props.active.closing
-			? interpolate(props.active.progress, [0, 1], [elementOffsetX, 0], "clamp")
-			: elementOffsetX;
-
+			? interpolateClamped(
+					props.active.progress,
+					CLOSE_SOURCE_HANDOFF_PROGRESS,
+					1,
+					elementOffsetX,
+					0,
+				)
+			: 0;
 		const elementY = props.active.closing
-			? interpolate(props.active.progress, [0, 1], [elementOffsetY, 0], "clamp")
-			: elementOffsetY;
+			? interpolateClamped(
+					props.active.progress,
+					CLOSE_SOURCE_HANDOFF_PROGRESS,
+					1,
+					elementOffsetY,
+					0,
+				)
+			: 0;
 
 		const { gestureSensitivity, gestureReleaseVelocityScale } =
 			resolveRevealGestureHandoff(rawDrag);
 
 		return {
 			options: {
-				gestureDrivesProgress: false,
+				gestureProgressMode: "freeform",
 				gestureSensitivity,
 				gestureReleaseVelocityScale,
 			},
@@ -240,30 +311,33 @@ export function buildRevealStyles({
 						{ scale: contentScale },
 					],
 					shadowColor: "#000",
-					shadowOffset: { width: 0, height: 2 },
-					shadowOpacity: interpolate(props.active.progress, [0, 1], [0, 0.25]),
+					shadowOffset: REVEAL_SHADOW_OFFSET,
+					shadowOpacity: interpolate(
+						props.active.progress,
+						ZERO_TO_ONE_RANGE,
+						CONTENT_SHADOW_OPACITY_OUTPUT,
+					),
 					shadowRadius: 32,
 					elevation: 5,
-					pointerEvents: props.active.logicallySettled ? "auto" : "none",
+					opacity: props.active.entering
+						? interpolate(
+								props.active.progress,
+								CONTENT_ENTERING_OPACITY_RANGE,
+								CONTENT_ENTERING_OPACITY_OUTPUT,
+							)
+						: interpolate(
+								props.active.progress,
+								CONTENT_CLOSING_OPACITY_RANGE,
+								CONTENT_CLOSING_OPACITY_OUTPUT,
+							),
 				},
 			},
 			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
-				style: {
-					width: maskWidth,
-					height: maskHeight,
-					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: "continuous",
-					transform: [
-						{ translateX: compensatedMaskTranslateX },
-						{ translateY: compensatedMaskTranslateY },
-						{ scale: compensatedMaskScale },
-					],
-				},
+				style: maskElementStyle,
 			},
 			[link.id]: {
 				style: {
 					position: "relative",
-					opacity: 1,
 					zIndex: 999,
 					transform: [{ translateX: elementTX }, { translateY: elementY }],
 				},
@@ -273,78 +347,99 @@ export function buildRevealStyles({
 
 	/* ---------------------------- Unfocused Screen ---------------------------- */
 
-	const unfocusedScale = interpolate(
-		props.active.progress,
-		[0, 1],
-		[1, 0.9375],
-		"clamp",
-	);
-
-	const elementRaw = link.compute({
-		...baseRawOptions,
-		method: "transform",
-		space: "relative",
-		target: initialDestinationTarget,
-	});
+	const unfocusedScale = mixUnit(1, 0.9375, props.active.progress);
+	const unfocusedContentScale = props.active.logicallySettled
+		? 1
+		: unfocusedScale;
 
-	const destinationBounds = link.destination.bounds;
-	const elementCenterX = destinationBounds.pageX + destinationBounds.width / 2;
-	const elementCenterY = destinationBounds.pageY + destinationBounds.height / 2;
+	const trackingContentTarget =
+		initialDestinationTarget ?? link.destination.bounds;
 
-	const scaleShiftX = computeCenterScaleShift({
-		center: elementCenterX,
-		containerCenter: screenLayout.width / 2,
-		scale: dragScale,
+	const trackingContentBaseTransform = resolveRevealContentBaseTransform({
+		progress: props.active.progress,
+		sourceBounds: link.source.bounds,
+		destinationBounds: trackingContentTarget,
+		screenLayout,
 	});
-
-	const scaleShiftY = computeCenterScaleShift({
-		center: elementCenterY,
-		containerCenter: screenLayout.height / 2,
-		scale: dragScale,
-	});
-
-	const compensatedGestureX = composeCompensatedTranslation({
-		gesture: dragX,
-		parentScale: unfocusedScale,
-		centerShift: scaleShiftX,
-		epsilon: EPSILON,
-	});
-
-	const compensatedGestureY = composeCompensatedTranslation({
-		gesture: dragY,
-		parentScale: unfocusedScale,
-		centerShift: scaleShiftY,
-		epsilon: EPSILON,
+	let trackingContentScale = trackingContentBaseTransform.scale * dragScale;
+	if (props.active.gesture.dismissing) {
+		const trackingTargetScale = resolveUniformScale({
+			sourceWidth: link.source.bounds.width,
+			sourceHeight: link.source.bounds.height,
+			destinationWidth: trackingContentTarget.width,
+			destinationHeight: trackingContentTarget.height,
+		});
+		trackingContentScale = resolveDismissScaleHandoff({
+			progress: props.active.progress,
+			releaseScale: dragScale,
+			targetScale: trackingTargetScale,
+			velocity: props.active.gesture.velocity,
+		});
+	}
+	const trackingContentTranslateX =
+		trackingContentBaseTransform.translateX + dragX;
+	const trackingContentTranslateY =
+		trackingContentBaseTransform.translateY + dragY;
+	const trackedSourceElement = resolveTrackedSourceElementTransform({
+		sourceBounds: link.source.bounds,
+		destinationBounds: trackingContentTarget,
+		contentTranslateX: trackingContentTranslateX,
+		contentTranslateY: trackingContentTranslateY,
+		contentScale: trackingContentScale,
+		parentScale: unfocusedContentScale,
+		screenWidth: screenLayout.width,
+		screenHeight: screenLayout.height,
 	});
 
-	const elementTranslateX = elementRaw.translateX + compensatedGestureX;
-	const elementTranslateY = elementRaw.translateY + compensatedGestureY;
-	const elementScaleX = elementRaw.scaleX * dragScale;
-	const elementScaleY = elementRaw.scaleY * dragScale;
-
-	const shouldShowUnfocusedElement =
-		props.active.entering || (props.active.closing && !props.active.settled);
-
 	return {
+		options: {
+			gestureProgressMode: "freeform",
+		},
 		content: {
 			style: {
-				transform: [{ scale: props.active.settled ? 1 : unfocusedScale }],
+				transform: [{ scale: unfocusedContentScale }],
 			},
 			props: {
-				pointerEvents: "none",
+				pointerEvents:
+					props.active.progress <= CLOSE_SOURCE_HANDOFF_PROGRESS
+						? "auto"
+						: "none",
 			},
 		},
 		[link.id]: {
 			style: {
-				transform: [
-					{ translateX: !shouldShowUnfocusedElement ? 0 : elementTranslateX },
-					{ translateY: !shouldShowUnfocusedElement ? 0 : elementTranslateY },
-					{ scaleX: !shouldShowUnfocusedElement ? 1 : elementScaleX },
-					{ scaleY: !shouldShowUnfocusedElement ? 1 : elementScaleY },
-				],
-				opacity: !shouldShowUnfocusedElement ? 0 : 1,
+				opacity: props.active.closing
+					? 1
+					: interpolate(
+							props.active.progress,
+							ZERO_TO_ONE_RANGE,
+							UNFOCUSED_ELEMENT_OPACITY_OUTPUT,
+						),
+
 				zIndex: 9999,
 				elevation: 9999,
+				transform: [
+					{
+						translateX: props.active.logicallySettled
+							? 0
+							: trackedSourceElement.translateX,
+					},
+					{
+						translateY: props.active.logicallySettled
+							? 0
+							: trackedSourceElement.translateY,
+					},
+					{
+						scaleX: props.active.logicallySettled
+							? 1
+							: trackedSourceElement.scaleX,
+					},
+					{
+						scaleY: props.active.logicallySettled
+							? 1
+							: trackedSourceElement.scaleY,
+					},
+				],
 			},
 		},
 	};

package/src/shared/utils/bounds/navigation/reveal/config.ts

@@ -6,21 +6,29 @@ export const REVEAL_BORDER_RADIUS = Platform.select({
 	default: 36,
 });
 
-export const ZOOM_SHARED_OPTIONS = Object.freeze({
-	anchor: "top" as const,
-	scaleMode: "uniform" as const,
-});
+export const REVEAL_USES_TRANSFORM_MASK = Platform.OS === "android";
 
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
-export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
-export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
-export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
+export const DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
+export const DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
+export const DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
+export const DRAG_MASK_HEIGHT_COLLAPSE_END = 0.7;
+export const HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE = 0.5;
+export const DISMISS_SCALE_ORBIT_DEPTH = 0.5;
+export const CLOSE_SOURCE_HANDOFF_PROGRESS = 0.25;
 
-export const ZOOM_MASK_OUTSET = Object.freeze({
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0,
-});
+export const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
+export const ZERO_TO_ONE_RANGE = [0, 1] as const;
+export const CONTENT_ENTERING_OPACITY_RANGE = [
+	0,
+	CLOSE_SOURCE_HANDOFF_PROGRESS,
+] as const;
+export const CONTENT_CLOSING_OPACITY_RANGE = [
+	0,
+	CLOSE_SOURCE_HANDOFF_PROGRESS,
+	1,
+] as const;
+export const CONTENT_ENTERING_OPACITY_OUTPUT = [0, 1] as const;
+export const CONTENT_CLOSING_OPACITY_OUTPUT = [0, 1, 1] as const;
+export const CONTENT_SHADOW_OPACITY_OUTPUT = [0, 0.25] as const;
+export const UNFOCUSED_ELEMENT_OPACITY_OUTPUT = [1, 0] as const;
+export const REVEAL_SHADOW_OFFSET = { width: 0, height: 2 } as const;