"use client"; import { Easing, interpolate } from "remotion"; import { drawnPathProps, type IconAnimationProps, useIconAnimation, } from "@/lib/remocn-icons"; const TOP_PATH = "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"; const BOTTOM_PATH = "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"; const TIMINGS = { drawDurationInFrames: 14, actionDelayInFrames: 2, actionDurationInFrames: 20, loop: false, } as const; export function LinkIcon({ animation = "both", loop, speed, size = 48, color = "currentColor", strokeWidth = 2, className, }: IconAnimationProps) { const { drawProgress, scaleIn, actionProgress, actionFrame } = useIconAnimation({ animation, loop, speed }, TIMINGS); const acting = animation !== "draw" && actionFrame >= 0; const pull = acting ? interpolate(actionProgress, [0, 0.4, 0.75], [0, 1.06, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.quad), }) : 0; const pop = acting ? interpolate(actionProgress, [0.6, 0.78, 1], [1, 1.06, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.quad), }) : 1; const top = drawnPathProps(TOP_PATH, drawProgress); const bottom = drawnPathProps(BOTTOM_PATH, drawProgress); const scale = (0.85 + 0.15 * scaleIn) * pop; return ( ); } export function LinkIconStatic({ size = 48, color = "currentColor", strokeWidth = 2, className, }: { size?: number; color?: string; strokeWidth?: number; className?: string; }) { return ( ); }