4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:Tec1,"use client"; import * as React from "react"; import { animate } from "motion"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { boundedNumber, boundedCount } from "@/lib/cojeev/reference-effect-geometry"; import { cn } from "@/lib/utils"; export type PixelSwapProps = Omit, "children"> & { first: React.ReactNode; second: React.ReactNode; active: boolean; duration?: number; columns?: number; }; /** A staggered tiled mask reveals the selected content without cloning interactive DOM. */ export function PixelSwap({ first, second, active, duration = 850, columns = 10, className, ref, ...props }: PixelSwapProps) { const host = React.useRef(null), clip = React.useRef(null), outgoing = React.useRef(null); const id = `pixel-${React.useId().replace(/:/g, "")}`; const { enabled, inView } = useMotionVisibility(host); const [initialActive] = React.useState(active); const previous = React.useRef(active), n = boundedCount(columns, 10, 20), rows = Math.max(3, Math.round(n * .6)); React.useEffect(() => { const changed = previous.current !== active; previous.current = active; let cancelled = false; if (outgoing.current) outgoing.current.style.visibility = "visible"; const rects = Array.from(clip.current?.children ?? []); const animations = rects.map((node, i) => { const x = (i % n) / n, y = Math.floor(i / n) / rows; const target = active ? 1 : 0; if (!changed || !enabled || !inView) { node.setAttribute("x", String(x)); node.setAttribute("y", String(y)); node.setAttribute("width", String(target / n + (target ? .001 : 0))); node.setAttribute("height", String(target / rows + (target ? .001 : 0))); return null; } const from = Number(node.getAttribute("width")) * n; return animate(from, target, { duration: boundedNumber(duration, 850, 0, 3000) / 1000 * .58, delay: ((i * 17) % rects.length) / rects.length * boundedNumber(duration, 850, 0, 3000) / 1000 * .42, ease: [.22, 1, .36, 1], onUpdate: value => { node.setAttribute("x", String(x + (1 - value) / n / 2)); node.setAttribute("y", String(y + (1 - value) / rows / 2)); node.setAttribute("width", String(Math.max(0, value / n + (value ? .001 : 0)))); node.setAttribute("height", String(Math.max(0, value / rows + (value ? .001 : 0)))); } }); }); const settle = () => { if (!cancelled && outgoing.current) outgoing.current.style.visibility = active ? "hidden" : "visible"; }; if (!changed || !enabled || !inView) settle(); else void Promise.all(animations).then(settle); return () => { cancelled = true; animations.forEach(animation => animation?.stop()); }; }, [active, enabled, inView, duration, n, rows]); return

{ host.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node; }, [ref])} data-slot="pixel-swap" data-active={active ? "true" : "false"} className={cn("v-pixel-swap", className)}>

{first}

{second}

; } 4c:["$","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","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/pixel-swap.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/pixel-swap.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/pixel-swap.css","content":"@layer cojeev-states {\n.v-pixel-swap { position:relative; display:grid; width:100%; min-width:0; overflow:hidden; border-radius:24px; }\n.v-pixel-swap__layer { grid-area:1/1; min-width:0; }\n.v-pixel-swap__incoming { z-index:1; }\n\n}\n","type":"registry:file","target":"styles/cojeev/pixel-swap.css"}],"className":"h-[70svh] min-h-80"}]]}]