{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compare",
  "type": "registry:block",
  "title": "Compare",
  "description": "Compare",
  "files": [
    {
      "path": "components/usages/compareusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Compare } from \"@/registry/open-source/compare\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<Compare firstImage=\"itjustworks.jpg\" secondImage=\"itjustworks.jpg\" />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/compareusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Compare } from \"@/registry/open-source/compare\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<Compare firstImage=\"itjustworks.jpg\" secondImage=\"itjustworks.jpg\" />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/compare.tsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { SparklesCore } from \"./sparkles\";\n\n//ui.aceternity.com/components/compare\n\ninterface CompareProps {\n\tfirstImage?: string;\n\tsecondImage?: string;\n\tclassName?: string;\n\tfirstImageClassName?: string;\n\tsecondImageClassname?: string;\n\tinitialSliderPercentage?: number;\n\tslideMode?: \"hover\" | \"drag\";\n\tshowHandlebar?: boolean;\n\tautoplay?: boolean;\n\tautoplayDuration?: number;\n}\nexport const Compare = ({\n\tfirstImage = \"\",\n\tsecondImage = \"\",\n\tclassName,\n\tfirstImageClassName,\n\tsecondImageClassname,\n\tinitialSliderPercentage = 50,\n\tslideMode = \"hover\",\n\tshowHandlebar = true,\n\tautoplay = false,\n\tautoplayDuration = 5000,\n}: CompareProps) => {\n\tconst [sliderXPercent, setSliderXPercent] = useState(\n\t\tinitialSliderPercentage\n\t);\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst sliderRef = useRef<HTMLDivElement>(null);\n\n\tconst [isMouseOver, setIsMouseOver] = useState(false);\n\n\tconst autoplayRef = useRef<NodeJS.Timeout | null>(null);\n\n\tconst startAutoplay = useCallback(() => {\n\t\tif (!autoplay) return;\n\n\t\tconst startTime = Date.now();\n\t\tconst animate = () => {\n\t\t\tconst elapsedTime = Date.now() - startTime;\n\t\t\tconst progress =\n\t\t\t\t(elapsedTime % (autoplayDuration * 2)) / autoplayDuration;\n\t\t\tconst percentage =\n\t\t\t\tprogress <= 1 ? progress * 100 : (2 - progress) * 100;\n\n\t\t\tsetSliderXPercent(percentage);\n\t\t\tautoplayRef.current = setTimeout(animate, 16); // ~60fps\n\t\t};\n\n\t\tanimate();\n\t}, [autoplay, autoplayDuration]);\n\n\tconst stopAutoplay = useCallback(() => {\n\t\tif (autoplayRef.current) {\n\t\t\tclearTimeout(autoplayRef.current);\n\t\t\tautoplayRef.current = null;\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\tstartAutoplay();\n\t\treturn () => stopAutoplay();\n\t}, [startAutoplay, stopAutoplay]);\n\n\tfunction mouseEnterHandler() {\n\t\tsetIsMouseOver(true);\n\t\tstopAutoplay();\n\t}\n\n\tfunction mouseLeaveHandler() {\n\t\tsetIsMouseOver(false);\n\t\tif (slideMode === \"hover\") {\n\t\t\tsetSliderXPercent(initialSliderPercentage);\n\t\t}\n\t\tif (slideMode === \"drag\") {\n\t\t\tsetIsDragging(false);\n\t\t}\n\t\tstartAutoplay();\n\t}\n\n\tconst handleStart = useCallback(\n\t\t(clientX: number) => {\n\t\t\tif (slideMode === \"drag\") {\n\t\t\t\tsetIsDragging(true);\n\t\t\t}\n\t\t},\n\t\t[slideMode]\n\t);\n\n\tconst handleEnd = useCallback(() => {\n\t\tif (slideMode === \"drag\") {\n\t\t\tsetIsDragging(false);\n\t\t}\n\t}, [slideMode]);\n\n\tconst handleMove = useCallback(\n\t\t(clientX: number) => {\n\t\t\tif (!sliderRef.current) return;\n\t\t\tif (slideMode === \"hover\" || (slideMode === \"drag\" && isDragging)) {\n\t\t\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\t\t\tconst x = clientX - rect.left;\n\t\t\t\tconst percent = (x / rect.width) * 100;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tsetSliderXPercent(Math.max(0, Math.min(100, percent)));\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\t[slideMode, isDragging]\n\t);\n\n\tconst handleMouseDown = useCallback(\n\t\t(e: React.MouseEvent) => handleStart(e.clientX),\n\t\t[handleStart]\n\t);\n\tconst handleMouseUp = useCallback(() => handleEnd(), [handleEnd]);\n\tconst handleMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => handleMove(e.clientX),\n\t\t[handleMove]\n\t);\n\n\tconst handleTouchStart = useCallback(\n\t\t(e: React.TouchEvent) => {\n\t\t\tif (!autoplay) {\n\t\t\t\thandleStart(e.touches[0].clientX);\n\t\t\t}\n\t\t},\n\t\t[handleStart, autoplay]\n\t);\n\n\tconst handleTouchEnd = useCallback(() => {\n\t\tif (!autoplay) {\n\t\t\thandleEnd();\n\t\t}\n\t}, [handleEnd, autoplay]);\n\n\tconst handleTouchMove = useCallback(\n\t\t(e: React.TouchEvent) => {\n\t\t\tif (!autoplay) {\n\t\t\t\thandleMove(e.touches[0].clientX);\n\t\t\t}\n\t\t},\n\t\t[handleMove, autoplay]\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={sliderRef}\n\t\t\tclassName={cn(\"w-[400px] h-[400px] overflow-hidden\", className)}\n\t\t\tstyle={{\n\t\t\t\tposition: \"relative\",\n\t\t\t\tcursor: slideMode === \"drag\" ? \"grab\" : \"col-resize\",\n\t\t\t}}\n\t\t\tonMouseMove={handleMouseMove}\n\t\t\tonMouseLeave={mouseLeaveHandler}\n\t\t\tonMouseEnter={mouseEnterHandler}\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonMouseUp={handleMouseUp}\n\t\t\tonTouchStart={handleTouchStart}\n\t\t\tonTouchEnd={handleTouchEnd}\n\t\t\tonTouchMove={handleTouchMove}\n\t\t>\n\t\t\t<AnimatePresence initial={false}>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"h-full w-px absolute top-0 m-auto z-30 bg-linear-to-b from-transparent from-5% to-95% via-indigo-500 to-transparent\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: `${sliderXPercent}%`,\n\t\t\t\t\t\ttop: \"0\",\n\t\t\t\t\t\tzIndex: 40,\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{ duration: 0 }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"w-36 h-full mask-[radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50\" />\n\t\t\t\t\t<div className=\"w-10 h-1/2 mask-[radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100\" />\n\t\t\t\t\t<div className=\"w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 mask-[radial-gradient(100px_at_left,white,transparent)]\">\n\t\t\t\t\t\t<MemoizedSparklesCore\n\t\t\t\t\t\t\tbackground=\"transparent\"\n\t\t\t\t\t\t\tminSize={0.4}\n\t\t\t\t\t\t\tmaxSize={1}\n\t\t\t\t\t\t\tparticleDensity={1200}\n\t\t\t\t\t\t\tclassName=\"w-full h-full\"\n\t\t\t\t\t\t\tparticleColor=\"#FFFFFF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{showHandlebar && (\n\t\t\t\t\t\t<div className=\"h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-background z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]\">\n\t\t\t\t\t\t\t...{\" \"}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t\t<div className=\"overflow-hidden w-full h-full relative z-20 pointer-events-none\">\n\t\t\t\t<AnimatePresence initial={false}>\n\t\t\t\t\t{firstImage ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none overflow-hidden\",\n\t\t\t\t\t\t\t\tfirstImageClassName\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tclipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{ duration: 0 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\talt=\"first image\"\n\t\t\t\t\t\t\t\tsrc={firstImage}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute inset-0  z-20 rounded-2xl shrink-0 w-full h-full select-none\",\n\t\t\t\t\t\t\t\t\tfirstImageClassName\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) : null}\n\t\t\t\t</AnimatePresence>\n\t\t\t</div>\n\n\t\t\t<AnimatePresence initial={false}>\n\t\t\t\t{secondImage ? (\n\t\t\t\t\t<motion.img\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"absolute top-0 left-0 z-19  rounded-2xl w-full h-full select-none\",\n\t\t\t\t\t\t\tsecondImageClassname\n\t\t\t\t\t\t)}\n\t\t\t\t\t\talt=\"second image\"\n\t\t\t\t\t\tsrc={secondImage}\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n};\n\nconst MemoizedSparklesCore = React.memo(SparklesCore);\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/sparkles.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport type { Container, SingleOrMultiple } from \"@tsparticles/engine\";\r\nimport Particles, { initParticlesEngine } from \"@tsparticles/react\";\r\nimport { loadSlim } from \"@tsparticles/slim\";\r\nimport { motion, useAnimation } from \"motion/react\";\r\n\r\n// ui.aceternity.com / components / sparkles;\r\n\r\ntype ParticlesProps = {\r\n\tid?: string;\r\n\tclassName?: string;\r\n\tbackground?: string;\r\n\tparticleSize?: number;\r\n\tminSize?: number;\r\n\tmaxSize?: number;\r\n\tspeed?: number;\r\n\tparticleColor?: string;\r\n\tparticleDensity?: number;\r\n};\r\nexport const SparklesCore = (props: ParticlesProps) => {\r\n\tconst {\r\n\t\tid,\r\n\t\tclassName,\r\n\t\tbackground,\r\n\t\tminSize,\r\n\t\tmaxSize,\r\n\t\tspeed,\r\n\t\tparticleColor,\r\n\t\tparticleDensity,\r\n\t} = props;\r\n\tconst [init, setInit] = useState(false);\r\n\tuseEffect(() => {\r\n\t\tinitParticlesEngine(async (engine) => {\r\n\t\t\tawait loadSlim(engine);\r\n\t\t}).then(() => {\r\n\t\t\tsetInit(true);\r\n\t\t});\r\n\t}, []);\r\n\tconst controls = useAnimation();\r\n\r\n\tconst particlesLoaded = async (container?: Container) => {\r\n\t\tif (container) {\r\n\t\t\tcontrols.start({\r\n\t\t\t\topacity: 1,\r\n\t\t\t\ttransition: {\r\n\t\t\t\t\tduration: 1,\r\n\t\t\t\t\tdelay: 0,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<motion.div animate={controls} className={cn(\"opacity-0\", className)}>\r\n\t\t\t{init && (\r\n\t\t\t\t<Particles\r\n\t\t\t\t\tid={id || \"tsparticles\"}\r\n\t\t\t\t\t// className={cn(\"h-full w-full\")}\r\n\t\t\t\t\tparticlesLoaded={particlesLoaded}\r\n\t\t\t\t\toptions={{\r\n\t\t\t\t\t\tbackground: {\r\n\t\t\t\t\t\t\tcolor: {\r\n\t\t\t\t\t\t\t\tvalue: background || \"transparent\",\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tfullScreen: {\r\n\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\tzIndex: 1,\r\n\t\t\t\t\t\t},\r\n\r\n\t\t\t\t\t\tfpsLimit: 120,\r\n\t\t\t\t\t\tinteractivity: {\r\n\t\t\t\t\t\t\tevents: {\r\n\t\t\t\t\t\t\t\tonClick: {\r\n\t\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\t\tmode: \"push\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tonHover: {\r\n\t\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\t\tmode: \"repulse\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tresize: true as any,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tmodes: {\r\n\t\t\t\t\t\t\t\tpush: {\r\n\t\t\t\t\t\t\t\t\tquantity: 4,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\trepulse: {\r\n\t\t\t\t\t\t\t\t\tdistance: 50,\r\n\t\t\t\t\t\t\t\t\tduration: 0.4,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tparticles: {\r\n\t\t\t\t\t\t\tbounce: {\r\n\t\t\t\t\t\t\t\thorizontal: {\r\n\t\t\t\t\t\t\t\t\tvalue: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tvertical: {\r\n\t\t\t\t\t\t\t\t\tvalue: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tcollisions: {\r\n\t\t\t\t\t\t\t\tabsorb: {\r\n\t\t\t\t\t\t\t\t\tspeed: 2,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tbounce: {\r\n\t\t\t\t\t\t\t\t\thorizontal: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: 1,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tvertical: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: 1,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\tmaxSpeed: 50,\r\n\t\t\t\t\t\t\t\tmode: \"bounce\",\r\n\t\t\t\t\t\t\t\toverlap: {\r\n\t\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\t\tretries: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tcolor: {\r\n\t\t\t\t\t\t\t\tvalue: particleColor || \"#ffffff\",\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\th: {\r\n\t\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\t\tspeed: 1,\r\n\t\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\t\tsync: true,\r\n\t\t\t\t\t\t\t\t\t\toffset: 0,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\ts: {\r\n\t\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\t\tspeed: 1,\r\n\t\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\t\tsync: true,\r\n\t\t\t\t\t\t\t\t\t\toffset: 0,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tl: {\r\n\t\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\t\tspeed: 1,\r\n\t\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\t\tsync: true,\r\n\t\t\t\t\t\t\t\t\t\toffset: 0,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\teffect: {\r\n\t\t\t\t\t\t\t\tclose: true,\r\n\t\t\t\t\t\t\t\tfill: true,\r\n\t\t\t\t\t\t\t\toptions: {},\r\n\t\t\t\t\t\t\t\ttype: {} as SingleOrMultiple<string> | undefined,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tgroups: {},\r\n\t\t\t\t\t\t\tmove: {\r\n\t\t\t\t\t\t\t\tangle: {\r\n\t\t\t\t\t\t\t\t\toffset: 0,\r\n\t\t\t\t\t\t\t\t\tvalue: 90,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tattract: {\r\n\t\t\t\t\t\t\t\t\tdistance: 200,\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\trotate: {\r\n\t\t\t\t\t\t\t\t\t\tx: 3000,\r\n\t\t\t\t\t\t\t\t\t\ty: 3000,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tcenter: {\r\n\t\t\t\t\t\t\t\t\tx: 50,\r\n\t\t\t\t\t\t\t\t\ty: 50,\r\n\t\t\t\t\t\t\t\t\tmode: \"percent\",\r\n\t\t\t\t\t\t\t\t\tradius: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\tdistance: {},\r\n\t\t\t\t\t\t\t\tdirection: \"none\",\r\n\t\t\t\t\t\t\t\tdrift: 0,\r\n\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\tgravity: {\r\n\t\t\t\t\t\t\t\t\tacceleration: 9.81,\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tinverse: false,\r\n\t\t\t\t\t\t\t\t\tmaxSpeed: 50,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tpath: {\r\n\t\t\t\t\t\t\t\t\tclamp: true,\r\n\t\t\t\t\t\t\t\t\tdelay: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\toptions: {},\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\toutModes: {\r\n\t\t\t\t\t\t\t\t\tdefault: \"out\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\trandom: false,\r\n\t\t\t\t\t\t\t\tsize: false,\r\n\t\t\t\t\t\t\t\tspeed: {\r\n\t\t\t\t\t\t\t\t\tmin: 0.1,\r\n\t\t\t\t\t\t\t\t\tmax: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tspin: {\r\n\t\t\t\t\t\t\t\t\tacceleration: 0,\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tstraight: false,\r\n\t\t\t\t\t\t\t\ttrail: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tlength: 10,\r\n\t\t\t\t\t\t\t\t\tfill: {},\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tvibrate: false,\r\n\t\t\t\t\t\t\t\twarp: false,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tnumber: {\r\n\t\t\t\t\t\t\t\tdensity: {\r\n\t\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\t\twidth: 400,\r\n\t\t\t\t\t\t\t\t\theight: 400,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tlimit: {\r\n\t\t\t\t\t\t\t\t\tmode: \"delete\",\r\n\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tvalue: particleDensity || 120,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\topacity: {\r\n\t\t\t\t\t\t\t\tvalue: {\r\n\t\t\t\t\t\t\t\t\tmin: 0.1,\r\n\t\t\t\t\t\t\t\t\tmax: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\tenable: true,\r\n\t\t\t\t\t\t\t\t\tspeed: speed || 4,\r\n\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t\tmode: \"auto\",\r\n\t\t\t\t\t\t\t\t\tstartValue: \"random\",\r\n\t\t\t\t\t\t\t\t\tdestroy: \"none\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\treduceDuplicates: false,\r\n\t\t\t\t\t\t\tshadow: {\r\n\t\t\t\t\t\t\t\tblur: 0,\r\n\t\t\t\t\t\t\t\tcolor: {\r\n\t\t\t\t\t\t\t\t\tvalue: \"#000\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\toffset: {\r\n\t\t\t\t\t\t\t\t\tx: 0,\r\n\t\t\t\t\t\t\t\t\ty: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tshape: {\r\n\t\t\t\t\t\t\t\tclose: true,\r\n\t\t\t\t\t\t\t\tfill: true,\r\n\t\t\t\t\t\t\t\toptions: {},\r\n\t\t\t\t\t\t\t\ttype: \"circle\",\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tsize: {\r\n\t\t\t\t\t\t\t\tvalue: {\r\n\t\t\t\t\t\t\t\t\tmin: minSize || 1,\r\n\t\t\t\t\t\t\t\t\tmax: maxSize || 3,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tspeed: 5,\r\n\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t\tmode: \"auto\",\r\n\t\t\t\t\t\t\t\t\tstartValue: \"random\",\r\n\t\t\t\t\t\t\t\t\tdestroy: \"none\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tstroke: {\r\n\t\t\t\t\t\t\t\twidth: 0,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tzIndex: {\r\n\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\topacityRate: 1,\r\n\t\t\t\t\t\t\t\tsizeRate: 1,\r\n\t\t\t\t\t\t\t\tvelocityRate: 1,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tdestroy: {\r\n\t\t\t\t\t\t\t\tbounds: {},\r\n\t\t\t\t\t\t\t\tmode: \"none\",\r\n\t\t\t\t\t\t\t\tsplit: {\r\n\t\t\t\t\t\t\t\t\tcount: 1,\r\n\t\t\t\t\t\t\t\t\tfactor: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: 3,\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\trate: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: {\r\n\t\t\t\t\t\t\t\t\t\t\tmin: 4,\r\n\t\t\t\t\t\t\t\t\t\t\tmax: 9,\r\n\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tsizeOffset: true,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\troll: {\r\n\t\t\t\t\t\t\t\tdarken: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\tenlighten: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tmode: \"vertical\",\r\n\t\t\t\t\t\t\t\tspeed: 25,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\ttilt: {\r\n\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tspeed: 0,\r\n\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tdirection: \"clockwise\",\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\ttwinkle: {\r\n\t\t\t\t\t\t\t\tlines: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tfrequency: 0.05,\r\n\t\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tparticles: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tfrequency: 0.05,\r\n\t\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\twobble: {\r\n\t\t\t\t\t\t\t\tdistance: 5,\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\tspeed: {\r\n\t\t\t\t\t\t\t\t\tangle: 50,\r\n\t\t\t\t\t\t\t\t\tmove: 10,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tlife: {\r\n\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\tdelay: {\r\n\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tduration: {\r\n\t\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\trotate: {\r\n\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tspeed: 0,\r\n\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tdirection: \"clockwise\",\r\n\t\t\t\t\t\t\t\tpath: false,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\torbit: {\r\n\t\t\t\t\t\t\t\tanimation: {\r\n\t\t\t\t\t\t\t\t\tcount: 0,\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tspeed: 1,\r\n\t\t\t\t\t\t\t\t\tdecay: 0,\r\n\t\t\t\t\t\t\t\t\tdelay: 0,\r\n\t\t\t\t\t\t\t\t\tsync: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\trotation: {\r\n\t\t\t\t\t\t\t\t\tvalue: 45,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\twidth: 1,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tlinks: {\r\n\t\t\t\t\t\t\t\tblink: false,\r\n\t\t\t\t\t\t\t\tcolor: {\r\n\t\t\t\t\t\t\t\t\tvalue: \"#fff\",\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\tconsent: false,\r\n\t\t\t\t\t\t\t\tdistance: 100,\r\n\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\tfrequency: 1,\r\n\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\tshadow: {\r\n\t\t\t\t\t\t\t\t\tblur: 5,\r\n\t\t\t\t\t\t\t\t\tcolor: {\r\n\t\t\t\t\t\t\t\t\t\tvalue: \"#000\",\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\ttriangles: {\r\n\t\t\t\t\t\t\t\t\tenable: false,\r\n\t\t\t\t\t\t\t\t\tfrequency: 1,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\twidth: 1,\r\n\t\t\t\t\t\t\t\twarp: false,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\trepulse: {\r\n\t\t\t\t\t\t\t\tvalue: 0,\r\n\t\t\t\t\t\t\t\tenabled: false,\r\n\t\t\t\t\t\t\t\tdistance: 1,\r\n\t\t\t\t\t\t\t\tduration: 1,\r\n\t\t\t\t\t\t\t\tfactor: 1,\r\n\t\t\t\t\t\t\t\tspeed: 1,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tdetectRetina: true,\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</motion.div>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    }
  ]
}