{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lottie-scroll-trigger",
  "type": "registry:block",
  "title": "Lottie scroll trigger",
  "description": "Lottie scroll trigger",
  "files": [
    {
      "path": "components/usages/lottiescrolltriggerusage.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\nimport LottieScrollTrigger from \"@/registry/open-source/cielia-replication/LottieScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport default function Usage() {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst lottieContainerRef = useRef<HTMLDivElement>(null);\n\n\tuseGSAP(\n\t\t() => {\n\t\t\tif (lottieContainerRef.current) {\n\t\t\t\t// Initialize LottieScrollTrigger\n\t\t\t\t// Replace the path with your own Lottie JSON file URL or local path\n\t\t\t\tLottieScrollTrigger({\n\t\t\t\t\ttarget: lottieContainerRef.current,\n\t\t\t\t\tpath: \"https://assets5.lottiefiles.com/packages/lf20_jcikwtux.json\", // Example: animated loading icon\n\t\t\t\t\tspeed: \"medium\", // Options: \"slow\", \"medium\", \"fast\"\n\t\t\t\t\trenderer: \"svg\",\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\t{ scope: containerRef }\n\t);\n\n\treturn (\n\t\t<div ref={containerRef} className=\"relative w-full\">\n\t\t\t{/* Spacer to allow scrolling */}\n\t\t\t<div className=\"h-screen flex items-center justify-center bg-linear-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800\">\n\t\t\t\t<div className=\"text-center space-y-4\">\n\t\t\t\t\t<h2 className=\"text-3xl font-bold\">Scroll down to see the animation</h2>\n\t\t\t\t\t<p className=\"text-neutral-600 dark:text-neutral-400\">\n\t\t\t\t\t\tThe Lottie animation will play as you scroll\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Lottie container */}\n\t\t\t<div className=\"relative w-full h-[80vh] flex items-center justify-center bg-neutral-100 dark:bg-neutral-900\">\n\t\t\t\t<div\n\t\t\t\t\tref={lottieContainerRef}\n\t\t\t\t\tid=\"lottie-container\"\n\t\t\t\t\tclassName=\"w-full max-w-2xl h-full\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{/* Bottom spacer */}\n\t\t\t<div className=\"h-screen flex items-center justify-center bg-linear-to-b from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900\">\n\t\t\t\t<div className=\"text-center space-y-4\">\n\t\t\t\t\t<h2 className=\"text-3xl font-bold\">Keep scrolling</h2>\n\t\t\t\t\t<p className=\"text-neutral-600 dark:text-neutral-400\">\n\t\t\t\t\t\tThe animation is controlled by scroll position\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/lottiescrolltriggerusage.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\nimport LottieScrollTrigger from \"@/registry/open-source/cielia-replication/LottieScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport default function Usage() {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst lottieContainerRef = useRef<HTMLDivElement>(null);\n\n\tuseGSAP(\n\t\t() => {\n\t\t\tif (lottieContainerRef.current) {\n\t\t\t\t// Initialize LottieScrollTrigger\n\t\t\t\t// Replace the path with your own Lottie JSON file URL or local path\n\t\t\t\tLottieScrollTrigger({\n\t\t\t\t\ttarget: lottieContainerRef.current,\n\t\t\t\t\tpath: \"https://assets5.lottiefiles.com/packages/lf20_jcikwtux.json\", // Example: animated loading icon\n\t\t\t\t\tspeed: \"medium\", // Options: \"slow\", \"medium\", \"fast\"\n\t\t\t\t\trenderer: \"svg\",\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\t{ scope: containerRef }\n\t);\n\n\treturn (\n\t\t<div ref={containerRef} className=\"relative w-full\">\n\t\t\t{/* Spacer to allow scrolling */}\n\t\t\t<div className=\"h-screen flex items-center justify-center bg-linear-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800\">\n\t\t\t\t<div className=\"text-center space-y-4\">\n\t\t\t\t\t<h2 className=\"text-3xl font-bold\">Scroll down to see the animation</h2>\n\t\t\t\t\t<p className=\"text-neutral-600 dark:text-neutral-400\">\n\t\t\t\t\t\tThe Lottie animation will play as you scroll\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Lottie container */}\n\t\t\t<div className=\"relative w-full h-[80vh] flex items-center justify-center bg-neutral-100 dark:bg-neutral-900\">\n\t\t\t\t<div\n\t\t\t\t\tref={lottieContainerRef}\n\t\t\t\t\tid=\"lottie-container\"\n\t\t\t\t\tclassName=\"w-full max-w-2xl h-full\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{/* Bottom spacer */}\n\t\t\t<div className=\"h-screen flex items-center justify-center bg-linear-to-b from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900\">\n\t\t\t\t<div className=\"text-center space-y-4\">\n\t\t\t\t\t<h2 className=\"text-3xl font-bold\">Keep scrolling</h2>\n\t\t\t\t\t<p className=\"text-neutral-600 dark:text-neutral-400\">\n\t\t\t\t\t\tThe animation is controlled by scroll position\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\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"
    }
  ]
}