4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1051,"use client"; import { interpolate } from "flubber"; import gsap from "gsap"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const DEFAULT_PATHS = { check: "M5 12 L10 17 L19 6 L19 6 L5 12 Z", circle: "M12 4 A8 8 0 0 1 20 12 A8 8 0 0 1 12 20 A8 8 0 0 1 4 12 A8 8 0 0 1 12 4", plus: "M12 2 L14 2 L14 10 L22 10 L22 12 L14 12 L14 22 L12 22 L12 12 L4 12 L4 10 L12 10 Z", x: "M12 4 L20 12 L12 20 L4 12 Z", } as const; type MorphState = "idle" | "hover" | "loading" | "success"; interface SvgMorphButtonProps { children?: React.ReactNode; className?: string; paths?: Partial>; customPaths?: Record; morphDuration?: number; idleLabel?: string; loadingLabel?: string; successLabel?: string; onIdle?: () => void; onHover?: () => void; onLoading?: () => void; onSuccess?: () => void; onClick?: () => void; } export function SvgMorphButton({ children, className, paths: pathsProp, customPaths, morphDuration = 0.35, idleLabel = "Click me", loadingLabel = "Loading...", successLabel = "Done!", onIdle, onHover, onLoading, onSuccess, onClick, }: SvgMorphButtonProps) { const [state, setState] = useState("idle"); const pathRef = useRef(null); const prevStateRef = useRef("idle"); const progressRef = useRef({ v: 0 }); const pathsRef = useRef({ ...DEFAULT_PATHS, ...customPaths, ...pathsProp }); pathsRef.current = { ...DEFAULT_PATHS, ...customPaths, ...pathsProp }; const getPath = useCallback((s: MorphState) => { const p = pathsRef.current; return p[s] ?? (s === "loading" ? p.circle : s === "hover" ? p.x : s === "success" ? p.check : p.plus); }, []); useEffect(() => { const pathEl = pathRef.current; if (!pathEl) { return; } const from = prevStateRef.current; const to = state; const fromPath = getPath(from); const toPath = getPath(to); if (!(fromPath && toPath) || from === to) { return; } prevStateRef.current = to; let interp: (t: number) => string; try { interp = interpolate(fromPath, toPath); } catch { pathEl.setAttribute("d", toPath); return; } progressRef.current.v = 0; const tween = gsap.to(progressRef.current, { duration: morphDuration, ease: "power2.inOut", onUpdate: () => { pathEl.setAttribute("d", interp(progressRef.current.v)); }, v: 1, }); return () => { tween.kill(); }; }, [state, morphDuration, getPath]); const handleClick = () => { if (state === "loading" || state === "success") { return; } setState("loading"); onLoading?.(); onClick?.(); setTimeout(() => { setState("success"); onSuccess?.(); }, 1500); setTimeout(() => { setState("idle"); onIdle?.(); }, 2500); }; return ( ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","flubber",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/flubber","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"flubber"}]]}]}],["$","li","gsap",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"gsap"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://pulkit.page/components/svg-morph-button.json","proxyUrl":"https://shadcnregistry.com/r/pulkitxm/svg-morph-button","itemId":"@pulkitxm/svg-morph-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york/svg-morph-button/svg-morph-button.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/svg-morph-button/flubber.d.ts","content":"declare module \"flubber\" {\n export function interpolate(\n fromShape: string | [number, number][],\n toShape: string | [number, number][],\n options?: { maxSegmentLength?: number; string?: boolean },\n ): (t: number) => string;\n}\n","type":"registry:file","target":"types/flubber.d.ts"}]}]]}],"$L53"]}]

SVG Morph Button

Installation

Files

components

types

Styles