{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cielia-replication",
  "type": "registry:block",
  "title": "Cielia replication",
  "description": "Cielia replication",
  "files": [
    {
      "path": "components/usages/cieliareplicationusage.tsx",
      "content": "import Link from \"next/link\";\r\n\r\nimport AboutSection from \"@/registry/open-source/cielia-replication/About\";\r\nimport Features from \"@/registry/open-source/cielia-replication/Features\";\r\nimport Gallery from \"@/registry/open-source/cielia-replication/Gallery\";\r\nimport { GsapProvider } from \"@/registry/open-source/cielia-replication/GsapProvider\";\r\nimport Improvements from \"@/registry/open-source/cielia-replication/Improvements\";\r\nimport Introduction from \"@/registry/open-source/cielia-replication/Introduction\";\r\nimport Services from \"@/registry/open-source/cielia-replication/Services\";\r\nimport { ReactLenis } from \"lenis/react\";\r\n\r\nconst ExampleReplication = () => {\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<ReactLenis root>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div className=\"grid min-h-screen place-items-center bg-background py-20 text-secondary\">\r\n\t\t\t\t\t\t<div className=\"container flex min-h-[50vh] flex-col justify-center gap-y-20 text-center\">\r\n\t\t\t\t\t\t\t<h1 className=\"fs-40-85\">\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.cielia.com/m/special/plus/\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"underline transition duration-300 hover:text-blue-600\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tCielia\r\n\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\tReplication\r\n\t\t\t\t\t\t\t</h1>\r\n\r\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-center gap-x-5 text-center fs-25-43\">\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\r\n\t\t\t\t\t\t\t\t\t\t\"https://github.com/PhanDangKhoa96/cielia-replication\"\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tSource code\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t\t<span>|</span>\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.pldkhoa.dev/playground\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tAll demos\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t\t<span>|</span>\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.lummi.ai/\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tImages\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"container grid h-screen place-items-center lg:hidden\">\r\n\t\t\t\t\t\t<h2 className=\"text-balance uppercase fs-38-56\">\r\n\t\t\t\t\t\t\tApologies, this screen is currently not optimized for\r\n\t\t\t\t\t\t\tmobile devices and is only available for screens wider than\r\n\t\t\t\t\t\t\t1024px.\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"hidden space-y-52 lg:block\">\r\n\t\t\t\t\t\t<Introduction />\r\n\t\t\t\t\t\t<Features />\r\n\t\t\t\t\t\t<AboutSection />\r\n\t\t\t\t\t\t<Services />\r\n\t\t\t\t\t\t<Improvements />\r\n\t\t\t\t\t\t<Gallery />\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"container grid h-screen place-items-center\">\r\n\t\t\t\t\t\t<h2 className=\"text-balance uppercase fs-40-85\">\r\n\t\t\t\t\t\t\tHave a good day!\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</ReactLenis>\r\n\t\t\t<GsapProvider scrollTrigger />\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default ExampleReplication;\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cieliareplicationusage.tsx",
      "content": "import Link from \"next/link\";\r\n\r\nimport AboutSection from \"@/registry/open-source/cielia-replication/About\";\r\nimport Features from \"@/registry/open-source/cielia-replication/Features\";\r\nimport Gallery from \"@/registry/open-source/cielia-replication/Gallery\";\r\nimport { GsapProvider } from \"@/registry/open-source/cielia-replication/GsapProvider\";\r\nimport Improvements from \"@/registry/open-source/cielia-replication/Improvements\";\r\nimport Introduction from \"@/registry/open-source/cielia-replication/Introduction\";\r\nimport Services from \"@/registry/open-source/cielia-replication/Services\";\r\nimport { ReactLenis } from \"lenis/react\";\r\n\r\nconst ExampleReplication = () => {\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<ReactLenis root>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<div className=\"grid min-h-screen place-items-center bg-background py-20 text-secondary\">\r\n\t\t\t\t\t\t<div className=\"container flex min-h-[50vh] flex-col justify-center gap-y-20 text-center\">\r\n\t\t\t\t\t\t\t<h1 className=\"fs-40-85\">\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.cielia.com/m/special/plus/\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"underline transition duration-300 hover:text-blue-600\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tCielia\r\n\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\tReplication\r\n\t\t\t\t\t\t\t</h1>\r\n\r\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-center gap-x-5 text-center fs-25-43\">\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\r\n\t\t\t\t\t\t\t\t\t\t\"https://github.com/PhanDangKhoa96/cielia-replication\"\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tSource code\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t\t<span>|</span>\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.pldkhoa.dev/playground\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tAll demos\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t\t<span>|</span>\r\n\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\thref={\"https://www.lummi.ai/\"}\r\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tImages\r\n\t\t\t\t\t\t\t\t</Link>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"container grid h-screen place-items-center lg:hidden\">\r\n\t\t\t\t\t\t<h2 className=\"text-balance uppercase fs-38-56\">\r\n\t\t\t\t\t\t\tApologies, this screen is currently not optimized for\r\n\t\t\t\t\t\t\tmobile devices and is only available for screens wider than\r\n\t\t\t\t\t\t\t1024px.\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"hidden space-y-52 lg:block\">\r\n\t\t\t\t\t\t<Introduction />\r\n\t\t\t\t\t\t<Features />\r\n\t\t\t\t\t\t<AboutSection />\r\n\t\t\t\t\t\t<Services />\r\n\t\t\t\t\t\t<Improvements />\r\n\t\t\t\t\t\t<Gallery />\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"container grid h-screen place-items-center\">\r\n\t\t\t\t\t\t<h2 className=\"text-balance uppercase fs-40-85\">\r\n\t\t\t\t\t\t\tHave a good day!\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</ReactLenis>\r\n\t\t\t<GsapProvider scrollTrigger />\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default ExampleReplication;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/About.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport SectionHeader from \"./SectionHeader\";\n\nconst AboutSection = () => {\n\tconst sectionRef = useRef<HTMLDivElement>(null);\n\tconst introRef = useRef<HTMLDivElement>(null);\n\tconst imgRef = useRef<HTMLImageElement>(null);\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tuseGSAP(\n\t\t() => {\n\t\t\tconst introMovAnim = gsap.timeline({\n\t\t\t\tscrollTrigger: {\n\t\t\t\t\t// scroller: \".scroll-container\",\n\t\t\t\t\ttrigger: introRef.current,\n\t\t\t\t\tstart: \"top 0%\",\n\t\t\t\t\tendTrigger: textRef.current,\n\t\t\t\t\tend: \"top center\",\n\t\t\t\t\tscrub: true,\n\t\t\t\t},\n\t\t\t});\n\t\t\tgsap.set(imgRef.current, {\n\t\t\t\ttransformOrigin: \"left bottom\",\n\t\t\t});\n\t\t\tintroMovAnim.to(imgRef.current, {\n\t\t\t\tscale: 0.5,\n\t\t\t});\n\t\t},\n\t\t{ scope: sectionRef }\n\t);\n\treturn (\n\t\t<section ref={sectionRef} id=\"#about\">\n\t\t\t<SectionHeader>About Section</SectionHeader>\n\n\t\t\t<div className=\"sticky top-0 z-10 h-screen w-full\" ref={introRef}>\n\t\t\t\t<div className=\"h-full\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tref={imgRef}\n\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\talt=\"about section image\"\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\tclassName=\"h-full w-full object-cover object-[50%_35%]\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"container relative z-0 pb-[500px] pt-40\" ref={textRef}>\n\t\t\t\t<div className=\"sticky top-0 isolate z-20 grid h-[50vh] place-items-center\">\n\t\t\t\t\t<h2 className=\"mx-auto max-w-(--breakpoint-md) text-center fs-25-43\">\n\t\t\t\t\t\tChoosing what matters most and adding it mindfully creates a\n\t\t\t\t\t\tlife true to yourself.\n\t\t\t\t\t</h2>\n\t\t\t\t\t<div className=\"absolute inset-0 -z-10 bg-linear-to-b from-[rgb(255,255,255)] from-75% to-[rgba(255,255,255,0)] to-100%\"></div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"ml-auto w-1/2 pl-[10vw] pt-36 pb-40\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\tMany feel suffocated by the pressure to seek more than\n\t\t\t\t\t\tnecessary or follow others' choices.\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tIn the rush of daily life, it’s time to rethink what truly\n\t\t\t\t\t\tbrings fulfillment.\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tThe scent of fresh greenery carried by the wind,\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tthe warmth of sunlight,\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tthe cheerful chirping of birds—moments like these enrich our\n\t\t\t\t\t\tsenses and transform a house into a cherished home.\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tBy focusing on what truly matters and adding thoughtful\n\t\t\t\t\t\tdetails,\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\twe create spaces that reflect individuality.\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\twe craft homes with this vision at heart.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default AboutSection;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/SectionHeader.tsx",
      "content": "import React, { PropsWithChildren } from \"react\";\n\nconst SectionHeader = ({ children }: PropsWithChildren) => {\n\treturn <div className=\"container py-10 fs-40-85\">{children}</div>;\n};\n\nexport default SectionHeader;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/Features.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\n\r\nimport { useGSAP } from \"@gsap/react\";\r\nimport gsap from \"gsap\";\r\n\r\nimport SectionHeader from \"./SectionHeader\";\r\n\r\nconst features = [\r\n\t{\r\n\t\tid: \"01\",\r\n\t\ttotalItems: \"03\",\r\n\t\ttitle: \"EQUIPMENT\",\r\n\t\tsubtitle: \"Features & Specifications\",\r\n\t\tdescription:\r\n\t\t\t\"Carefully curated equipment and specifications\\nthat adapt seamlessly to your individual lifestyle\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: \"02\",\r\n\t\ttotalItems: \"03\",\r\n\t\ttitle: \"STORAGE\",\r\n\t\tsubtitle: \"Storage Solutions\",\r\n\t\tdescription:\r\n\t\t\t\"Refined storage systems that create\\nspace and harmony in your daily life\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: \"03\",\r\n\t\ttotalItems: \"03\",\r\n\t\ttitle: \"KITCHEN\",\r\n\t\tsubtitle: \"Kitchen Design\",\r\n\t\tdescription:\r\n\t\t\t\"Functional kitchen spaces that elevate\\nyour culinary experience\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nconst Features = () => {\r\n\tconst sectionRef = useRef<HTMLDivElement>(null);\r\n\tuseGSAP(\r\n\t\t() => {\r\n\t\t\tconst features = gsap.utils.toArray(\".feature\") as HTMLDivElement[];\r\n\r\n\t\t\tfeatures.forEach((feature) => {\r\n\t\t\t\tgsap.to(feature, {\r\n\t\t\t\t\tyPercent: 20,\r\n\t\t\t\t\tstartAt: {\r\n\t\t\t\t\t\tfilter: \"brightness(1)\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\tfilter: \"brightness(0.5)\",\r\n\t\t\t\t\tease: \"none\",\r\n\t\t\t\t\tscrollTrigger: {\r\n\t\t\t\t\t\t// scroller: \".scroll-container\",\r\n\t\t\t\t\t\ttrigger: feature,\r\n\t\t\t\t\t\tstart: \"top top\",\r\n\t\t\t\t\t\tend: \"bottom top\",\r\n\t\t\t\t\t\tscrub: true,\r\n\t\t\t\t\t\t// markers: true,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t},\r\n\t\t{ scope: sectionRef }\r\n\t);\r\n\treturn (\r\n\t\t<section\r\n\t\t\tref={sectionRef}\r\n\t\t\tclassName=\"overflow-hidden\"\r\n\t\t\tid=\"parallax-content-image\"\r\n\t\t>\r\n\t\t\t<SectionHeader>Parallax Content Image</SectionHeader>\r\n\t\t\t{features.map((feature, index) => (\r\n\t\t\t\t<div\r\n\t\t\t\t\tkey={index + \"features-item\"}\r\n\t\t\t\t\tclassName=\"feature relative isolate overflow-hidden\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div className=\"container grid min-h-[60vh] place-items-center py-28 text-foreground lg:min-h-[80vh]\">\r\n\t\t\t\t\t\t<div className=\"flex h-full w-full flex-col items-center justify-between\">\r\n\t\t\t\t\t\t\t<div className=\"flex w-full items-start justify-between gap-x-[20vw] border-t border-white pt-5 lg:mr-auto lg:max-w-[40vw] xl:max-w-[30vw]\">\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<span className=\"fs-38-56\">0{index + 1}</span>\r\n\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">/0{features.length}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<p className=\"text-xxs\">Number of contents.</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"text-center\">\r\n\t\t\t\t\t\t\t\t<h2 className=\"mb-2 uppercase fs-40-85\">\r\n\t\t\t\t\t\t\t\t\t{feature.title}\r\n\t\t\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t\t\t\t<p>{feature.subtitle}</p>\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div className=\"flex w-full items-start justify-between gap-x-[20vw] border-t border-white pt-5 lg:ml-auto lg:w-fit lg:max-w-[48vw] xl:max-w-[35vw]\">\r\n\t\t\t\t\t\t\t\t<p className=\"text-xs\">{feature.description}</p>\r\n\t\t\t\t\t\t\t\t<p className=\"text-xxs\">Description.</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<img\r\n\t\t\t\t\t\tsrc={feature.image}\r\n\t\t\t\t\t\talt=\"feature image\"\r\n\t\t\t\t\t\tclassName=\"absolute inset-0 -z-10 h-full w-full object-cover brightness-50\"\r\n\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t))}\r\n\t\t</section>\r\n\t);\r\n};\r\n\r\nexport default Features;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/Gallery.tsx",
      "content": "\"use client\";\n\nimport React, { MouseEvent, useEffect, useRef } from \"react\";\n\nimport Image from \"next/image\";\n\nimport SectionHeader from \"./SectionHeader\";\n\nconst tiles = [\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#D5D5D5 \",\n\t\t\ttop: \"22%\",\n\t\t\tleft: \"28%\",\n\t\t\taspectRatio: 16 / 11,\n\t\t\twidth: \"15%\",\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#D5D5D5 \",\n\t\t\ttop: \"19%\",\n\t\t\tleft: \"50%\",\n\t\t\twidth: \"8%\",\n\t\t\taspectRatio: 9 / 11,\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#EDEDED\",\n\t\t\ttop: \"50%\",\n\t\t\tleft: \"24%\",\n\t\t\twidth: \"12%\",\n\t\t\taspectRatio: 4 / 3,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#E5E5E5 \",\n\t\t\ttop: \"71%\",\n\t\t\tleft: \"26%\",\n\t\t\twidth: \"12%\",\n\t\t\taspectRatio: 4 / 3,\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#E5E5E5 \",\n\t\t\ttop: \"63%\",\n\t\t\tleft: \"46%\",\n\t\t\twidth: \"15%\",\n\t\t\taspectRatio: 4 / 3,\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#EDEDED\",\n\t\t\ttop: \"36%\",\n\t\t\tleft: \"64%\",\n\t\t\twidth: \"12%\",\n\t\t\taspectRatio: 4 / 6,\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#F0F0F0\",\n\t\t\ttop: \"71%\",\n\t\t\tleft: \"73%\",\n\t\t\twidth: \"6%\",\n\t\t\taspectRatio: 4 / 6,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#EDEDED\",\n\t\t\ttop: \"54%\",\n\t\t\tleft: \"82%\",\n\t\t\twidth: \"10%\",\n\t\t\taspectRatio: 16 / 14,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#E9E9E9\",\n\t\t\ttop: \"9%\",\n\t\t\tleft: \"74%\",\n\t\t\twidth: \"8%\",\n\t\t\taspectRatio: 9 / 10,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#E5E5E5\",\n\t\t\ttop: \"12%\",\n\t\t\tleft: \"15%\",\n\t\t\twidth: \"6%\",\n\t\t\taspectRatio: 9 / 12,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#E1E1E1\",\n\t\t\ttop: \"40%\",\n\t\t\tleft: \"11%\",\n\t\t\twidth: \"7%\",\n\t\t\taspectRatio: 10 / 16,\n\t\t},\n\t},\n\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#DDDDDD\",\n\t\t\ttop: \"69%\",\n\t\t\tleft: \"5%\",\n\t\t\twidth: \"15%\",\n\t\t\taspectRatio: 20 / 16,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#D5D5D5\",\n\t\t\ttop: \"10%\",\n\t\t\tleft: \"4%\",\n\t\t\twidth: \"10%\",\n\t\t\taspectRatio: 16 / 23,\n\t\t},\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\tstyles: {\n\t\t\tbackgroundColor: \"#D9D9D9\",\n\t\t\ttop: \"30%\",\n\t\t\tleft: \"80%\",\n\t\t\twidth: \"17%\",\n\t\t\taspectRatio: 16 / 9,\n\t\t},\n\t},\n];\n\nconst Gallery = () => {\n\tconst $backdrop = useRef<HTMLDivElement>(null);\n\tconst vw = useRef(0);\n\tconst vh = useRef(0);\n\n\tconst handleOnMouseMove = (e: MouseEvent) => {\n\t\tconst mouseX = e.clientX;\n\t\tconst mouseY = e.clientY;\n\n\t\tconst percentageX = ((mouseX / vw.current - 0.5) * -100) / 4;\n\t\tconst percentageY = ((mouseY / vh.current - 0.5) * -100) / 4;\n\n\t\t$backdrop.current?.animate(\n\t\t\t{\n\t\t\t\ttransform: `translateX(${percentageX}%) translateY(${percentageY}%)`,\n\t\t\t},\n\t\t\t{ fill: \"forwards\", duration: 4000, easing: \"ease\" }\n\t\t);\n\t};\n\n\tconst updateViewDimension = () => {\n\t\tvw.current = window.innerWidth;\n\t\tvh.current = window.innerHeight;\n\t};\n\tuseEffect(() => {\n\t\tvw.current = window.innerWidth;\n\t\tvh.current = window.innerHeight;\n\n\t\twindow.addEventListener(\"resize\", updateViewDimension);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", updateViewDimension);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<section>\n\t\t\t<SectionHeader>Gallery</SectionHeader>\n\t\t\t<div className=\"relative grid h-screen place-items-center overflow-hidden bg-background\">\n\t\t\t\t<div className=\"relative z-10 inline-block text-center text-foreground\">\n\t\t\t\t\t<h1 className=\"text-foreground fs-38-56\">Gallery</h1>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute -bottom-[20vh] -left-[20vw] -right-[20vw] -top-[20vh]\"\n\t\t\t\t\tref={$backdrop}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"relative h-full w-full\"\n\t\t\t\t\t\tonMouseMove={handleOnMouseMove}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tiles.map((tile, index) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={index + \"gallery-item\"}\n\t\t\t\t\t\t\t\t\tstyle={{ ...tile.styles }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute overflow-hidden rounded-2xl transition-transform duration-700 ease-out hover:scale-105\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"relative h-full w-full opacity-0 transition-opacity duration-700 ease-out hover:opacity-100\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tsrc={tile.image}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"Tile images\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default Gallery;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/GsapProvider.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport Tempus from \"tempus\";\r\nimport gsap from \"gsap\";\r\n\r\nimport { ScrollTriggerConfig } from \"./ScrollTriggerContext\";\r\n\r\nexport function GsapProvider({ scrollTrigger = true }) {\r\n\tconst [isMounted, setIsMounted] = useState(false);\r\n\tuseEffect(() => {\r\n\t\tgsap.defaults({ ease: \"none\" });\r\n\r\n\t\t// merge rafs\r\n\t\tgsap.ticker.lagSmoothing(0);\r\n\t\tgsap.ticker.remove(gsap.updateRoot);\r\n\t\tTempus?.add((time: number) => {\r\n\t\t\tgsap.updateRoot(time / 1000);\r\n\t\t}, 0);\r\n\r\n\t\tsetIsMounted(true);\r\n\t}, []);\r\n\r\n\tif (!isMounted) return null;\r\n\r\n\treturn scrollTrigger && <ScrollTriggerConfig />;\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/ScrollTriggerContext.tsx",
      "content": "\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\nimport { useLenis } from \"lenis/react\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport function ScrollTriggerConfig() {\n\tconst lenis = useLenis(ScrollTrigger.update);\n\n\tuseEffect(() => {\n\t\tScrollTrigger.clearScrollMemory(\"manual\");\n\n\t\treturn () => {\n\t\t\tScrollTrigger.clearScrollMemory(\"manual\");\n\t\t};\n\t}, []);\n\n\tuseEffect(() => ScrollTrigger.refresh(), [lenis]);\n\n\treturn null;\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/Improvements.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\n\r\nimport { useGSAP } from \"@gsap/react\";\r\nimport gsap from \"gsap\";\r\n\r\nimport SectionHeader from \"./SectionHeader\";\r\n\r\nconst galleryItems = [\r\n\t[\"/itjustworks.jpg\", \"/itjustworks.jpg\", \"/itjustworks.jpg\"],\r\n\t[\"/itjustworks.jpg\", \"/itjustworks.jpg\", \"/itjustworks.jpg\"],\r\n\t[\"/itjustworks.jpg\", \"/itjustworks.jpg\", \"/itjustworks.jpg\"],\r\n];\r\n\r\nconst Improvements = () => {\r\n\tconst sectionRef = useRef<HTMLDivElement>(null);\r\n\tconst galleryRef = useRef<HTMLDivElement>(null);\r\n\tuseGSAP(\r\n\t\t() => {\r\n\t\t\tconst GridSecAnim = gsap.timeline({\r\n\t\t\t\tscrollTrigger: {\r\n\t\t\t\t\t// scroller: \".scroll-container\",\r\n\t\t\t\t\ttrigger: \".gallery-wrapper\",\r\n\t\t\t\t\tstart: \"top 100%\",\r\n\t\t\t\t\tend: \"top 0%\",\r\n\t\t\t\t\tscrub: true,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t\tGridSecAnim.fromTo(\r\n\t\t\t\t\".gallery-col:nth-of-type(1)\",\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(-10vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(0vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t\"<\"\r\n\t\t\t);\r\n\t\t\tGridSecAnim.fromTo(\r\n\t\t\t\t\".gallery-col:nth-of-type(2)\",\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(10vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(0vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t\"<\"\r\n\t\t\t);\r\n\t\t\tGridSecAnim.fromTo(\r\n\t\t\t\t\".gallery-col:nth-of-type(3)\",\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(-10vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttransform: \"translateY(0vh)\",\r\n\t\t\t\t},\r\n\t\t\t\t\"<\"\r\n\t\t\t);\r\n\r\n\t\t\tconst gridSecPinAnim = gsap.timeline({\r\n\t\t\t\tscrollTrigger: {\r\n\t\t\t\t\t// scroller: \".scroll-container\",\r\n\t\t\t\t\ttrigger: \".gallery-wrapper\",\r\n\t\t\t\t\tstart: \"top 0%\",\r\n\t\t\t\t\tend: \"+=200%\",\r\n\t\t\t\t\tscrub: true,\r\n\t\t\t\t\tpin: true,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\r\n\t\t\tgridSecPinAnim.fromTo(\r\n\t\t\t\t\".gallery-col\",\r\n\t\t\t\t{\r\n\t\t\t\t\twidth: \"31.97vw\",\r\n\t\t\t\t\theight: \"150vh\",\r\n\t\t\t\t\tfilter: \"brightness(1)\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\twidth: \"100vw\",\r\n\t\t\t\t\theight: \"300vh\",\r\n\t\t\t\t\tfilter: \"brightness(0.7)\",\r\n\t\t\t\t},\r\n\t\t\t\t\"<\"\r\n\t\t\t);\r\n\r\n\t\t\tgridSecPinAnim.fromTo(\r\n\t\t\t\t[\".title-wrap\", \".desc-wrap\"],\r\n\t\t\t\t{\r\n\t\t\t\t\topacity: 0,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\topacity: 1,\r\n\t\t\t\t},\r\n\t\t\t\t\"<\"\r\n\t\t\t);\r\n\t\t\tgridSecPinAnim.fromTo(\r\n\t\t\t\t\".title-wrap h2 span\",\r\n\t\t\t\t{\r\n\t\t\t\t\tclipPath: \"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tclipPath: \"polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)\",\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t\t{ scope: sectionRef }\r\n\t);\r\n\treturn (\r\n\t\t<section className=\"overflow-hidden\" ref={sectionRef}>\r\n\t\t\t<SectionHeader>Improvements</SectionHeader>\r\n\t\t\t<div className=\"gallery-wrapper relative h-screen overflow-hidden\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"gallery absolute left-1/2 top-1/2 flex h-[150vh] w-fit -translate-x-1/2 -translate-y-1/2 scale-110 items-center justify-between gap-8\"\r\n\t\t\t\t\tref={galleryRef}\r\n\t\t\t\t>\r\n\t\t\t\t\t{galleryItems.map((cols, index) => (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tkey={index + \"improvements\"}\r\n\t\t\t\t\t\t\tclassName=\"gallery-col flex h-full w-[33vw] flex-col gap-8\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{cols.map((img, colIndex) => (\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tkey={colIndex}\r\n\t\t\t\t\t\t\t\t\tclassName=\"gallery-row grid h-[33%] w-full place-items-center overflow-hidden bg-background text-foreground\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t\t\tsrc={img}\r\n\t\t\t\t\t\t\t\t\t\talt=\"improve images\"\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"title-wrap absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground fs-25-43\">\r\n\t\t\t\t\t<h2 className=\"w-max text-center\">\r\n\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\tReevaluating past housing facilities and storage features.\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<br />\r\n\t\t\t\t\t\t<br />\r\n\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\tSmall improvements can bring great satisfaction to your\r\n\t\t\t\t\t\t\tdaily life.\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</h2>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"desc-wrap absolute bottom-10 right-[3vw] w-[31vw] border-t border-white pt-2.5 text-right text-foreground\">\r\n\t\t\t\t\tこれまで\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n};\r\n\r\nexport default Improvements;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/Introduction.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\n\nimport LottieScrollTrigger from \"./LottieScrollTrigger\";\nimport SectionHeader from \"./SectionHeader\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst Introduction = () => {\n\tconst sectionRef = useRef<HTMLDivElement>(null);\n\n\tuseGSAP(\n\t\t() => {\n\t\t\t// Layout animation\n\t\t\tLottieScrollTrigger({\n\t\t\t\ttarget: \"#lottie-container\",\n\t\t\t\tpath: \"/lottie.json\",\n\t\t\t});\n\n\t\t\tconst layoutTimeline = gsap.timeline({\n\t\t\t\tscrollTrigger: {\n\t\t\t\t\t// scroller: \".scroll-container\",\n\t\t\t\t\ttrigger: \"#lottie-container\",\n\t\t\t\t\tstart: \"top 60%\",\n\t\t\t\t\tend: \"top -40%\",\n\t\t\t\t\tscrub: 0.6,\n\t\t\t\t},\n\t\t\t});\n\t\t\tlayoutTimeline.to(\n\t\t\t\t\".mask-right\",\n\t\t\t\t{\n\t\t\t\t\tscaleX: 0,\n\t\t\t\t\ttransformOrigin: \"right\",\n\t\t\t\t},\n\t\t\t\t\"<\"\n\t\t\t);\n\t\t\tlayoutTimeline.to(\n\t\t\t\t\".mask-top\",\n\t\t\t\t{\n\t\t\t\t\tscaleY: 0,\n\t\t\t\t\ttransformOrigin: \"top\",\n\t\t\t\t},\n\t\t\t\t\"<\"\n\t\t\t);\n\t\t\tlayoutTimeline.fromTo(\n\t\t\t\t\".title\",\n\t\t\t\t{\n\t\t\t\t\txPercent: 30,\n\t\t\t\t\ty: \"10vh\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ty: 0,\n\t\t\t\t\txPercent: 0,\n\t\t\t\t},\n\t\t\t\t\"<\"\n\t\t\t);\n\t\t\tlayoutTimeline.fromTo(\n\t\t\t\t\".content\",\n\t\t\t\t{\n\t\t\t\t\ttransform: \"translate(30%,10vh)\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttransform: \"translate(0%,0%)\",\n\t\t\t\t},\n\t\t\t\t\"<\"\n\t\t\t);\n\t\t\tlayoutTimeline.fromTo(\n\t\t\t\t\"#lottie-container\",\n\t\t\t\t{\n\t\t\t\t\ttransform: \"translateY(20vh)\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttransform: \"translateY(0vh)\",\n\t\t\t\t},\n\t\t\t\t\"<\"\n\t\t\t);\n\n\t\t\t// Image animation\n\t\t\tconst contentImages = gsap.utils.toArray(\n\t\t\t\t\".content-image\"\n\t\t\t) as HTMLDivElement[];\n\n\t\t\tcontentImages?.forEach((contentImage) => {\n\t\t\t\tconst overlay = contentImage.querySelector(\".overlay\");\n\t\t\t\tconst imageWrapper = contentImage.querySelector(\".image\");\n\t\t\t\tconst image = contentImage.querySelector(\".image img\");\n\n\t\t\t\tconst overlayTimeline = gsap.timeline({\n\t\t\t\t\tscrollTrigger: {\n\t\t\t\t\t\t// scroller: \".scroll-container\",\n\t\t\t\t\t\ttrigger: contentImage,\n\t\t\t\t\t\tstart: \"top 100%\",\n\t\t\t\t\t\tend: \"top 80%\",\n\t\t\t\t\t\ttoggleActions: \"play play reverse none\",\n\t\t\t\t\t},\n\t\t\t\t\tdefaults: {\n\t\t\t\t\t\tduration: 0.6,\n\t\t\t\t\t},\n\t\t\t\t});\n\n\t\t\t\toverlayTimeline.fromTo(\n\t\t\t\t\toverlay,\n\t\t\t\t\t{\n\t\t\t\t\t\tclipPath: \"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tclipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\toverlayTimeline.fromTo(\n\t\t\t\t\timageWrapper,\n\t\t\t\t\t{\n\t\t\t\t\t\tclipPath: \"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tclipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tconst imageTimeline = gsap.timeline({\n\t\t\t\t\tscrollTrigger: {\n\t\t\t\t\t\t// scroller: \".scroll-container\",\n\t\t\t\t\t\ttrigger: contentImage,\n\t\t\t\t\t\tstart: \"top 100%\",\n\t\t\t\t\t\tend: \"bottom 0%\",\n\t\t\t\t\t\tscrub: 0.6,\n\t\t\t\t\t},\n\t\t\t\t});\n\n\t\t\t\tgsap.set(image, { scale: 1.1 });\n\t\t\t\timageTimeline.fromTo(\n\t\t\t\t\timage,\n\t\t\t\t\t{\n\t\t\t\t\t\tyPercent: -5,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tyPercent: 5,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t});\n\t\t},\n\t\t{ scope: sectionRef }\n\t);\n\n\treturn (\n\t\t<section id=\"introduction\" className=\"overflow-hidden\" ref={sectionRef}>\n\t\t\t<SectionHeader>Introduction</SectionHeader>\n\t\t\t<div className=\"relative bg-background pb-64 pt-[calc(70vh+120px)]\">\n\t\t\t\t<div className=\"mask-top absolute left-0 top-0 h-[60vh] w-full bg-background will-change-transform\"></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute left-0 top-0 w-full will-change-transform\"\n\t\t\t\t\tid=\"lottie-container\"\n\t\t\t\t></div>\n\t\t\t\t<div className=\"mask-right absolute right-0 top-0 z-10 h-full w-[70vw] bg-background will-change-transform\"></div>\n\t\t\t\t<div className=\"container space-y-52 leading-normal text-foreground\">\n\t\t\t\t\t<h2 className=\"title fs-25-43\">\n\t\t\t\t\t\tLive the way you are\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\tEnjoy the joy of being yourself.\n\t\t\t\t\t</h2>\n\t\t\t\t\t<div className=\"content ml-auto flex w-[66vw] justify-between\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you're unsure, choose the fun option’—a great saying\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tBut when it comes to living spaces, it's a different matter\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tEven when chosen intuitively, people change.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tAnd they will continue to change.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<div className=\"content-image relative aspect-square w-[23vw] overflow-hidden\">\n\t\t\t\t\t\t\t<div className=\"overlay absolute h-full w-full bg-background\"></div>\n\t\t\t\t\t\t\t<div className=\"image relative h-full w-full\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex gap-x-[18vw]\">\n\t\t\t\t\t\t<div className=\"content-image relative aspect-square w-[46vw] overflow-hidden\">\n\t\t\t\t\t\t\t<div className=\"overlay absolute h-full w-full bg-background\"></div>\n\t\t\t\t\t\t\t<div className=\"image relative h-full w-full\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSo, when thinking about your home,\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tI hope you'll pause for just a moment,\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tand take a long-term view, looking far into the future.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tThinking about the future may feel a little overwhelming,\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tbut when you think of it as being for your future,\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tyou’ll find your heart mysteriously uplifted.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"ml-auto flex w-[85vw] justify-between\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIn the ordinary moments of everyday life,\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tyou suddenly feel a sense of being yourself.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tinto each aspect of your home.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tSo, where shall we begin together?\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\tFirst, let us hear your story.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<div className=\"content-image relative aspect-square w-[35vw] overflow-hidden\">\n\t\t\t\t\t\t\t<div className=\"overlay absolute h-full w-full bg-background\"></div>\n\t\t\t\t\t\t\t<div className=\"image relative h-full w-full\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex items-start gap-x-[12vw]\">\n\t\t\t\t\t\t<div className=\"content-image relative aspect-square w-[35vw] overflow-hidden\">\n\t\t\t\t\t\t\t<div className=\"overlay absolute h-full w-full bg-background\"></div>\n\t\t\t\t\t\t\t<div className=\"image relative h-full w-full\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"content-image relative mt-52 aspect-square w-[26vw] overflow-hidden\">\n\t\t\t\t\t\t\t<div className=\"overlay absolute h-full w-full bg-background\"></div>\n\t\t\t\t\t\t\t<div className=\"image relative h-full w-full\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default Introduction;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/LottieScrollTrigger.tsx",
      "content": "import gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\nimport lottie, { AnimationConfigWithPath, AnimationItem } from \"lottie-web\";\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface PlayheadType {\n\tframe: number;\n}\n\ntype SpeedOptions = {\n\treadonly slow: string;\n\treadonly medium: string;\n\treadonly fast: string;\n};\n\ntype RendererSettings = {\n\tpreserveAspectRatio: string;\n\t[key: string]: unknown;\n};\n\ninterface LottieScrollTriggerVars {\n\ttarget: string | Element | Element[];\n\tpath: string;\n\tspeed?: keyof SpeedOptions;\n\trenderer?: \"svg\";\n\trendererSettings?: RendererSettings;\n\t[key: string]: unknown;\n}\n\ninterface ScrollTriggerConfig {\n\ttrigger: Element;\n\tpin: boolean;\n\tstart: string;\n\tend: string;\n\tscrub: number;\n\t[key: string]: unknown;\n}\n\ninterface GSAPContext {\n\tadd: (fn: () => void) => void;\n}\n\nfunction LottieScrollTrigger(vars: LottieScrollTriggerVars): AnimationItem {\n\tconst playhead: PlayheadType = { frame: 0 };\n\tconst target = gsap.utils.toArray(vars.target)[0] as Element;\n\n\tconst speeds: SpeedOptions = {\n\t\tslow: \"+=2000\",\n\t\tmedium: \"+=1000\",\n\t\tfast: \"+=500\",\n\t} as const;\n\n\tconst st: ScrollTriggerConfig = {\n\t\ttrigger: target,\n\t\tpin: false,\n\t\tstart: \"top 60%\",\n\t\tend: \"top -40%\",\n\t\tscrub: 0.6,\n\t};\n\n\tconst ctx = (gsap.context && gsap.context()) as GSAPContext | undefined;\n\n\tconst animationConfig: AnimationConfigWithPath = {\n\t\tcontainer: target,\n\t\trenderer: vars.renderer || \"svg\",\n\t\tloop: false,\n\t\tautoplay: false,\n\t\tpath: vars.path,\n\t\trendererSettings: vars.rendererSettings || {\n\t\t\tpreserveAspectRatio: \"xMidYMid slice\",\n\t\t},\n\t};\n\n\tconst animation: AnimationItem = lottie.loadAnimation(animationConfig);\n\n\t// Add ScrollTrigger properties from vars\n\tfor (const p in vars) {\n\t\tif (Object.prototype.hasOwnProperty.call(vars, p)) {\n\t\t\tst[p] = vars[p];\n\t\t}\n\t}\n\n\tanimation.addEventListener(\"DOMLoaded\", function (): void {\n\t\tconst createTween = function (): () => void {\n\t\t\t(\n\t\t\t\tanimation as AnimationItem & { frameTween?: gsap.core.Tween }\n\t\t\t).frameTween = gsap.to(playhead, {\n\t\t\t\tframe: animation.totalFrames - 1,\n\t\t\t\tease: \"none\",\n\t\t\t\tonUpdate: () =>\n\t\t\t\t\tanimation.goToAndStop(Math.round(playhead.frame), true),\n\t\t\t\tscrollTrigger: st,\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tif (typeof animation.destroy === \"function\") {\n\t\t\t\t\tanimation.destroy();\n\t\t\t\t}\n\t\t\t};\n\t\t};\n\n\t\tif (ctx?.add) {\n\t\t\tctx.add(createTween);\n\t\t} else {\n\t\t\tcreateTween();\n\t\t}\n\n\t\tScrollTrigger.sort();\n\t\tScrollTrigger.refresh();\n\t});\n\n\treturn animation;\n}\n\nexport default LottieScrollTrigger;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cielia-replication/Services.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport SectionHeader from \"./SectionHeader\";\n\nconst features = [\n\t{\n\t\ttitle: \"EQUIPMENT\",\n\t\tsubtitle: \"Home Features and Storage Solutions\",\n\t\tdescription:\n\t\t\t\"Tailored living spaces with thoughtfully designed home features and storage options to seamlessly suit every lifestyle.\",\n\t\timg: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\ttitle: \"PLAN DESIGN\",\n\t\tsubtitle: \"Floor Plan Design\",\n\t\tdescription:\n\t\t\t\"Creating spaces that feel like home, with floor plans meticulously crafted to enhance comfort, including considerations for furniture placement and functional flow.\",\n\t\timg: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\ttitle: \"PRIVATE GARDEN\",\n\t\tsubtitle: \"Exclusive Garden Design\",\n\t\tdescription:\n\t\t\t\"Expanding your lifestyle with private garden spaces, perfect for sunny days as an additional living area where you can bring your ideal outdoor experiences to life.\",\n\t\timg: \"/itjustworks.jpg\",\n\t},\n];\n\nconst Services = () => {\n\tconst sectionRef = useRef<HTMLDivElement>(null);\n\n\tuseGSAP(\n\t\t() => {\n\t\t\tconst services = gsap.utils.toArray(\".service\") as HTMLDivElement[];\n\t\t\tservices.forEach((service) => {\n\t\t\t\tconst img = service.querySelector(\".bg-img\") as HTMLImageElement;\n\t\t\t\tgsap.to(img, {\n\t\t\t\t\tyPercent: 50,\n\t\t\t\t\tease: \"none\",\n\t\t\t\t\tscrollTrigger: {\n\t\t\t\t\t\t// scroller: \".scroll-container\",\n\t\t\t\t\t\ttrigger: service,\n\t\t\t\t\t\tstart: \"top 0%\",\n\t\t\t\t\t\tend: \"bottom -50%\",\n\t\t\t\t\t\tscrub: true,\n\t\t\t\t\t\t// markers: true,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t},\n\t\t{ scope: sectionRef }\n\t);\n\treturn (\n\t\t<section ref={sectionRef}>\n\t\t\t<SectionHeader>Services</SectionHeader>\n\t\t\t<div>\n\t\t\t\t{features.map(({ title, description, subtitle, img }, index) => {\n\t\t\t\t\tconst isFirstAndLast = !index || index === features.length - 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index + \"services-items\"}\n\t\t\t\t\t\t\tclassName=\"service relative h-screen w-full text-foreground will-change-[contain] contain-paint\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"absolute w-full\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t// The height of middle items should cover the previous and next item\n\t\t\t\t\t\t\t\t\theight: isFirstAndLast ? `200vh` : \"300vh\",\n\t\t\t\t\t\t\t\t\ttop: index ? `-100vh` : \"0\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"sticky top-0 isolate h-screen w-full\">\n\t\t\t\t\t\t\t\t\t<div className=\"container flex h-full justify-between gap-x-[150px] py-[20vh]\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-668 flex-col justify-between\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex justify-between border-t border-t-white pt-2.5\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"fs-25-43\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0{index + 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t/0\n\t\t\t\t\t\t\t\t\t\t\t\t\t{features.length}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tNumber of products.\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t<h3 className=\"mb-3 uppercase fs-38-56\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"fs-17-20\">{subtitle}</p>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-2xl\">{description}</p>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex-768 bg-background\">\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={img}\n\t\t\t\t\t\t\t\t\t\t\t\talt={title}\n\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"bg-img absolute inset-0 top-auto -z-10 brightness-50 grayscale will-change-transform\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={img}\n\t\t\t\t\t\t\t\t\talt={title}\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default Services;\n",
      "type": "registry:ui"
    }
  ]
}