"use client"; import { Easing, interpolate, useCurrentFrame } from "remotion"; export interface SharedAxisZProps { fromText: string; toText: string; fontSize?: number; color?: string; fontWeight?: number; speed?: number; className?: string; } export function SharedAxisZ({ fromText, toText, fontSize = 72, color = "#171717", fontWeight = 600, speed = 1, className, }: SharedAxisZProps) { const frame = useCurrentFrame() * speed; const enterDur = 16; const exitDur = 11; const overlapF = 3; const microDelayF = 1; const exitTotal = exitDur; const newStart = Math.max(0, exitTotal - overlapF + microDelayF); const exitEasing = Easing.bezier(0.4, 0, 1, 1); const enterEasing = Easing.bezier(0.2, 0, 0, 1); const fromOpacity = interpolate(frame, [0, exitDur], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: exitEasing, }); const fromScale = interpolate(frame, [0, exitDur], [1, 1.06], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: exitEasing, }); const fromBlur = interpolate(frame, [0, exitDur], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: exitEasing, }); const local = frame - newStart; const toOpacity = interpolate(local, [0, enterDur], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: enterEasing, }); const toScale = interpolate(local, [0, enterDur], [0.9, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: enterEasing, }); const toBlur = interpolate(local, [0, enterDur], [2, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: enterEasing, }); const fontStack = "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif"; return (

{fromText}

{toText}

); }