5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T17f3,"use client"; import { useState } from "react"; import NumberFlow from "@number-flow/react"; import { motion } from "motion/react"; const HEART_PATH = "m18.199 2.04c-2.606-.284-4.262.961-6.199 3.008-2.045-2.047-3.593-3.292-6.199-3.008-3.544.388-6.321 4.43-5.718 7.96.966 5.659 5.944 9 11.917 12 5.973-3 10.951-6.341 11.917-12 .603-3.53-2.174-7.572-5.718-7.96z"; const CIRCLE_RADIUS = 20; const CUBIC_OUT = [0.33, 1, 0.68, 1] as const; const QUAD_IN = [0.55, 0.085, 0.68, 0.53] as const; const QUINT_OUT = [0.23, 1, 0.32, 1] as const; const CircleAnimation = () => ( ); // One entry per particle; each fades from `from` to `to` over its flight. const PARTICLE_COLOR_PAIRS = [ { from: "#9EC9F5", to: "#9ED8C6" }, { from: "#91D3F7", to: "#9AE4CF" }, { from: "#DC93CF", to: "#E3D36B" }, { from: "#CF8EEF", to: "#CBEB98" }, { from: "#87E9C6", to: "#1FCC93" }, { from: "#A7ECD0", to: "#9AE4CF" }, { from: "#87E9C6", to: "#A635D9" }, { from: "#D58EB3", to: "#E0B6F5" }, { from: "#F48BA2", to: "#CF8EEF" }, { from: "#91D3F7", to: "#A635D9" }, { from: "#CF8EEF", to: "#CBEB98" }, { from: "#87E9C6", to: "#A635D9" }, { from: "#9EC9F5", to: "#9ED8C6" }, { from: "#91D3F7", to: "#9AE4CF" }, ].map((colors, index, pairs) => ({ angle: (index / pairs.length) * 360 + 45, from: colors.from, to: colors.to, })); const BURST_RADIUS = 32; const START_RADIUS = 4; const PATH_SCALE_FACTOR = 0.8; interface Flight { angle: number; from: string; to: string; burstDistance: number; duration: number; } // Rolled once per burst, in the click handler rather than in render: a re-render // mid-flight would otherwise hand motion new targets and jolt the particles. const rollBurst = (): Flight[] => PARTICLE_COLOR_PAIRS.map((colors) => ({ ...colors, // Add randomness to the burst distance (±15%) burstDistance: BURST_RADIUS * (0.85 + Math.random() * 0.3), // Randomize duration between 500-700ms duration: 500 + Math.random() * 200, })); const Particle = ({ from: fromColor, to: toColor, angle, burstDistance, duration }: Flight) => { const radians = (angle * Math.PI) / 180; // Calculate the degree shift (13 degrees in radians) const degreeShift = (13 * Math.PI) / 180; return ( ); }; const BurstAnimation = ({ flights }: { flights: Flight[] }) => (

{flights.map((flight) => ( ))}

); export const LikeButton = () => { const [isLiked, setIsLiked] = useState(false); const [burst, setBurst] = useState(null); const isAnimating = burst !== null; const toggleLike = () => { if (isLiked) { setIsLiked(false); } else { setIsLiked(true); setBurst(rollBurst()); } }; return ( ); }; 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@number-flow/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@uicapsule","registryDependencies":[]}]]}],null]}],["$","$L60",null,{"files":[{"path":"/like-button.tsx","content":"$61","type":"registry:file","target":"uicapsule/like-button/like-button.tsx"},{"path":"/preview.tsx","content":"\"use client\";\n\nimport { LikeButton } from \"./like-button\";\n\nconst Preview = () => (\n

\n \n

\n);\n\nexport default Preview;\n","type":"registry:file","target":"uicapsule/like-button/preview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]