{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-between-text",
  "type": "registry:block",
  "title": "Media between text",
  "description": "Media between text",
  "files": [
    {
      "path": "components/usages/mediabetweentextusage.tsx",
      "content": "import React, { useRef, useState } from \"react\";\r\n\r\nimport MediaBetweenText, {\r\n\tMediaBetweenTextRef,\r\n} from \"@/registry/open-source/media-between-text\";\r\nimport { useWindowSize } from \"@/registry/utilities/useWindowSize\";\r\n\r\nimport { Button } from \"../ui/button\";\r\n\r\n// Credit:\r\n// https://www.fancycomponents.dev/docs/components/blocks/media-between-text\r\n\r\nexport const elements = [\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Tim\",\r\n\t\tright: \"Rodenböker\",\r\n\t\turl: \"https://www.instagram.com/tim_rodenbroeker/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Simon \",\r\n\t\tright: \"Alexander-Adams\",\r\n\t\turl: \"https://www.instagram.com/polyhop/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Andreion\",\r\n\t\tright: \"de Castro\",\r\n\t\turl: \"https://www.instagram.com/andreiongd/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Lorraine\",\r\n\t\tright: \"Li\",\r\n\t\turl: \"https://www.instagram.com/lorrr.l/\",\r\n\t},\r\n];\r\n\r\nexport default function MediaBetweenTextScrollDemo() {\r\n\tconst ref = React.useRef<HTMLDivElement>(null);\r\n\tconst { width } = useWindowSize();\r\n\r\n\tconst isMobile = width < 1024;\r\n\r\n\tconst ref2 = useRef<MediaBetweenTextRef>(null);\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\r\n\treturn (\r\n\t\t<section>\r\n\t\t\t<h3>Media between text</h3>\r\n\r\n\t\t\t<div\r\n\t\t\t\tclassName=\"w-full h-dvh items-center justify-center bg-background overflow-auto\"\r\n\t\t\t\tref={ref}\r\n\t\t\t>\r\n\t\t\t\t<div className=\"h-full relative w-full flex\">\r\n\t\t\t\t\t<h3 className=\"text-5xl sm:text-8xl tracking-wide absolute sm:bottom-12 sm:left-12 bottom-4 left-4 w-64\">\r\n\t\t\t\t\t\ttoday's inspo\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t<p className=\"bottom-4 right-4 sm:right-12 sm:bottom-12 absolute \">\r\n\t\t\t\t\t\tScroll down ↓\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"h-full w-full flex flex-col space-y-12 mt-24 justify-center items-center text-6xl px-6\">\r\n\t\t\t\t\t{elements.map((element, index) => (\r\n\t\t\t\t\t\t<a href={element.url} target=\"_blank\" rel=\"noreferrer\">\r\n\t\t\t\t\t\t\t<MediaBetweenText\r\n\t\t\t\t\t\t\t\tkey={index + \"media-between-text\"}\r\n\t\t\t\t\t\t\t\tfirstText={element.left}\r\n\t\t\t\t\t\t\t\tsecondText={element.right}\r\n\t\t\t\t\t\t\t\tmediaUrl={element.src}\r\n\t\t\t\t\t\t\t\tmediaType=\"video\"\r\n\t\t\t\t\t\t\t\ttriggerType=\"inView\"\r\n\t\t\t\t\t\t\t\tuseInViewOptionsProp={{\r\n\t\t\t\t\t\t\t\t\tonce: false,\r\n\t\t\t\t\t\t\t\t\tamount: 1,\r\n\t\t\t\t\t\t\t\t\troot: ref,\r\n\t\t\t\t\t\t\t\t\tmargin: \"-5% 0px -0% 0px\",\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tcontainerRef={ref}\r\n\t\t\t\t\t\t\t\tmediaContainerClassName=\"w-full h-[40px] sm:h-[80px] overflow-hidden mx-1 sm:mx-3 mt-1 sm:mt-4\"\r\n\t\t\t\t\t\t\t\tclassName=\"cursor-pointer text-lg sm:text-4xl font-light flex flex-row items-center justify-center\"\r\n\t\t\t\t\t\t\t\tanimationVariants={{\r\n\t\t\t\t\t\t\t\t\tinitial: { width: 0 },\r\n\t\t\t\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\t\t\t\twidth: isMobile ? \"40px\" : \"100px\",\r\n\t\t\t\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\t\t\t\tduration: 1,\r\n\t\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\r\n\t\t\t\t\t\t\t\t\t\t\tbounce: 0,\r\n\t\t\t\t\t\t\t\t\t\t\tdelay: 0.1,\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}}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"relative w-full h-dvh flex flex-col items-center justify-center bg-background\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\tsetIsOpen(!isOpen);\r\n\t\t\t\t\t\tif (!isOpen) {\r\n\t\t\t\t\t\t\tref2.current?.animate();\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tref2.current?.reset();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tsize={\"sm\"}\r\n\t\t\t\t\tvariant={\"outline\"}\r\n\t\t\t\t\tclassName=\"absolute top-4 left-4 h-8\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{isOpen ? \"Close\" : \"Open\"}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<MediaBetweenText\r\n\t\t\t\t\tfirstText=\"Artificial \"\r\n\t\t\t\t\tsecondText=\"Intelligence\"\r\n\t\t\t\t\tmediaUrl={\r\n\t\t\t\t\t\t\"https://cdn.cosmos.so/47c0223f-c704-4d5a-8b47-c48262ebe301?format=jpeg\"\r\n\t\t\t\t\t}\r\n\t\t\t\t\tmediaType=\"image\"\r\n\t\t\t\t\ttriggerType=\"ref\"\r\n\t\t\t\t\tref={ref2}\r\n\t\t\t\t\tmediaContainerClassName=\"w-full h-[60px] sm:h-[100px] overflow-hidden pt-1\"\r\n\t\t\t\t\tclassName=\"cursor-pointer text-3xl sm:text-7xl font-calendas flex flex-col font-light items-center justify-center\"\r\n\t\t\t\t\tleftTextClassName=\"\"\r\n\t\t\t\t\trightTextClassName=\"italic\"\r\n\t\t\t\t\tanimationVariants={{\r\n\t\t\t\t\t\tinitial: {\r\n\t\t\t\t\t\t\twidth: isMobile ? \"160px\" : \"280px\",\r\n\t\t\t\t\t\t\theight: 0,\r\n\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\tduration: 0.7,\r\n\t\t\t\t\t\t\t\tease: [0.944, 0.008, 0.147, 1.002],\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\twidth: isMobile ? \"200px\" : \"330px\",\r\n\t\t\t\t\t\t\theight: isMobile ? \"200px\" : \"300px\",\r\n\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\tduration: 0.7,\r\n\t\t\t\t\t\t\t\tease: [0.944, 0.008, 0.147, 1.002],\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/mediabetweentextusage.tsx",
      "content": "import React, { useRef, useState } from \"react\";\r\n\r\nimport MediaBetweenText, {\r\n\tMediaBetweenTextRef,\r\n} from \"@/registry/open-source/media-between-text\";\r\nimport { useWindowSize } from \"@/registry/utilities/useWindowSize\";\r\n\r\nimport { Button } from \"../ui/button\";\r\n\r\n// Credit:\r\n// https://www.fancycomponents.dev/docs/components/blocks/media-between-text\r\n\r\nexport const elements = [\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Tim\",\r\n\t\tright: \"Rodenböker\",\r\n\t\turl: \"https://www.instagram.com/tim_rodenbroeker/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Simon \",\r\n\t\tright: \"Alexander-Adams\",\r\n\t\turl: \"https://www.instagram.com/polyhop/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Andreion\",\r\n\t\tright: \"de Castro\",\r\n\t\turl: \"https://www.instagram.com/andreiongd/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Lorraine\",\r\n\t\tright: \"Li\",\r\n\t\turl: \"https://www.instagram.com/lorrr.l/\",\r\n\t},\r\n];\r\n\r\nexport default function MediaBetweenTextScrollDemo() {\r\n\tconst ref = React.useRef<HTMLDivElement>(null);\r\n\tconst { width } = useWindowSize();\r\n\r\n\tconst isMobile = width < 1024;\r\n\r\n\tconst ref2 = useRef<MediaBetweenTextRef>(null);\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\r\n\treturn (\r\n\t\t<section>\r\n\t\t\t<h3>Media between text</h3>\r\n\r\n\t\t\t<div\r\n\t\t\t\tclassName=\"w-full h-dvh items-center justify-center bg-background overflow-auto\"\r\n\t\t\t\tref={ref}\r\n\t\t\t>\r\n\t\t\t\t<div className=\"h-full relative w-full flex\">\r\n\t\t\t\t\t<h3 className=\"text-5xl sm:text-8xl tracking-wide absolute sm:bottom-12 sm:left-12 bottom-4 left-4 w-64\">\r\n\t\t\t\t\t\ttoday's inspo\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t<p className=\"bottom-4 right-4 sm:right-12 sm:bottom-12 absolute \">\r\n\t\t\t\t\t\tScroll down ↓\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"h-full w-full flex flex-col space-y-12 mt-24 justify-center items-center text-6xl px-6\">\r\n\t\t\t\t\t{elements.map((element, index) => (\r\n\t\t\t\t\t\t<a href={element.url} target=\"_blank\" rel=\"noreferrer\">\r\n\t\t\t\t\t\t\t<MediaBetweenText\r\n\t\t\t\t\t\t\t\tkey={index + \"media-between-text\"}\r\n\t\t\t\t\t\t\t\tfirstText={element.left}\r\n\t\t\t\t\t\t\t\tsecondText={element.right}\r\n\t\t\t\t\t\t\t\tmediaUrl={element.src}\r\n\t\t\t\t\t\t\t\tmediaType=\"video\"\r\n\t\t\t\t\t\t\t\ttriggerType=\"inView\"\r\n\t\t\t\t\t\t\t\tuseInViewOptionsProp={{\r\n\t\t\t\t\t\t\t\t\tonce: false,\r\n\t\t\t\t\t\t\t\t\tamount: 1,\r\n\t\t\t\t\t\t\t\t\troot: ref,\r\n\t\t\t\t\t\t\t\t\tmargin: \"-5% 0px -0% 0px\",\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tcontainerRef={ref}\r\n\t\t\t\t\t\t\t\tmediaContainerClassName=\"w-full h-[40px] sm:h-[80px] overflow-hidden mx-1 sm:mx-3 mt-1 sm:mt-4\"\r\n\t\t\t\t\t\t\t\tclassName=\"cursor-pointer text-lg sm:text-4xl font-light flex flex-row items-center justify-center\"\r\n\t\t\t\t\t\t\t\tanimationVariants={{\r\n\t\t\t\t\t\t\t\t\tinitial: { width: 0 },\r\n\t\t\t\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\t\t\t\twidth: isMobile ? \"40px\" : \"100px\",\r\n\t\t\t\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\t\t\t\tduration: 1,\r\n\t\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\r\n\t\t\t\t\t\t\t\t\t\t\tbounce: 0,\r\n\t\t\t\t\t\t\t\t\t\t\tdelay: 0.1,\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}}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"relative w-full h-dvh flex flex-col items-center justify-center bg-background\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\tsetIsOpen(!isOpen);\r\n\t\t\t\t\t\tif (!isOpen) {\r\n\t\t\t\t\t\t\tref2.current?.animate();\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tref2.current?.reset();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tsize={\"sm\"}\r\n\t\t\t\t\tvariant={\"outline\"}\r\n\t\t\t\t\tclassName=\"absolute top-4 left-4 h-8\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{isOpen ? \"Close\" : \"Open\"}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<MediaBetweenText\r\n\t\t\t\t\tfirstText=\"Artificial \"\r\n\t\t\t\t\tsecondText=\"Intelligence\"\r\n\t\t\t\t\tmediaUrl={\r\n\t\t\t\t\t\t\"https://cdn.cosmos.so/47c0223f-c704-4d5a-8b47-c48262ebe301?format=jpeg\"\r\n\t\t\t\t\t}\r\n\t\t\t\t\tmediaType=\"image\"\r\n\t\t\t\t\ttriggerType=\"ref\"\r\n\t\t\t\t\tref={ref2}\r\n\t\t\t\t\tmediaContainerClassName=\"w-full h-[60px] sm:h-[100px] overflow-hidden pt-1\"\r\n\t\t\t\t\tclassName=\"cursor-pointer text-3xl sm:text-7xl font-calendas flex flex-col font-light items-center justify-center\"\r\n\t\t\t\t\tleftTextClassName=\"\"\r\n\t\t\t\t\trightTextClassName=\"italic\"\r\n\t\t\t\t\tanimationVariants={{\r\n\t\t\t\t\t\tinitial: {\r\n\t\t\t\t\t\t\twidth: isMobile ? \"160px\" : \"280px\",\r\n\t\t\t\t\t\t\theight: 0,\r\n\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\tduration: 0.7,\r\n\t\t\t\t\t\t\t\tease: [0.944, 0.008, 0.147, 1.002],\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\twidth: isMobile ? \"200px\" : \"330px\",\r\n\t\t\t\t\t\t\theight: isMobile ? \"200px\" : \"300px\",\r\n\t\t\t\t\t\t\ttransition: {\r\n\t\t\t\t\t\t\t\tduration: 0.7,\r\n\t\t\t\t\t\t\t\tease: [0.944, 0.008, 0.147, 1.002],\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/useWindowSize.tsx",
      "content": "import { useEffect, useState } from \"react\";\r\n\r\ninterface Size {\r\n\twidth: number | undefined;\r\n\theight: number | undefined;\r\n}\r\n\r\nexport const useWindowSize = () => {\r\n\tconst [windowSize, setWindowSize] = useState<Size>({\r\n\t\twidth: undefined,\r\n\t\theight: undefined,\r\n\t});\r\n\r\n\tuseEffect(() => {\r\n\t\tfunction handleResize() {\r\n\t\t\tsetWindowSize({\r\n\t\t\t\twidth: window.innerWidth,\r\n\t\t\t\theight: window.innerHeight,\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\twindow.addEventListener(\"resize\", handleResize);\r\n\r\n\t\thandleResize();\r\n\t\treturn () => window.removeEventListener(\"resize\", handleResize);\r\n\t}, []);\r\n\r\n\treturn windowSize;\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\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/media-between-text.tsx",
      "content": "\"use client\";\r\n\r\nimport { forwardRef, useImperativeHandle, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { motion, useInView, UseInViewOptions, Variants } from \"motion/react\";\r\n\r\ntype MediaBetweenTextProps = {\r\n\tfirstText: string;\r\n\tsecondText: string;\r\n\t// Media props\r\n\tmediaUrl: string;\r\n\tmediaType: \"image\" | \"video\";\r\n\tmediaContainerClassName?: string;\r\n\tfallbackUrl?: string;\r\n\t// Video props\r\n\tautoPlay?: boolean;\r\n\tloop?: boolean;\r\n\tmuted?: boolean;\r\n\tplaysInline?: boolean;\r\n\t// Image props\r\n\talt?: string;\r\n\t// Animation props\r\n\ttriggerType?: \"hover\" | \"ref\" | \"inView\";\r\n\tcontainerRef?: React.RefObject<HTMLDivElement>;\r\n\tuseInViewOptionsProp?: UseInViewOptions;\r\n\tanimationVariants?: {\r\n\t\tinitial: Variants[\"initial\"];\r\n\t\tanimate: Variants[\"animate\"];\r\n\t};\r\n\tclassName?: string;\r\n\t// Text styling\r\n\tleftTextClassName?: string;\r\n\trightTextClassName?: string;\r\n};\r\n\r\nexport type MediaBetweenTextRef = {\r\n\tanimate: () => void;\r\n\treset: () => void;\r\n};\r\n\r\nconst MediaBetweenText = forwardRef<MediaBetweenTextRef, MediaBetweenTextProps>(\r\n\t(\r\n\t\t{\r\n\t\t\tfirstText,\r\n\t\t\tsecondText,\r\n\t\t\tmediaUrl,\r\n\t\t\tmediaType,\r\n\t\t\tmediaContainerClassName,\r\n\t\t\tfallbackUrl,\r\n\t\t\tautoPlay = true,\r\n\t\t\tloop = true,\r\n\t\t\tmuted = true,\r\n\t\t\tplaysInline = true,\r\n\t\t\talt,\r\n\t\t\ttriggerType = \"hover\",\r\n\t\t\tcontainerRef,\r\n\t\t\tuseInViewOptionsProp = {\r\n\t\t\t\tonce: true,\r\n\t\t\t\tamount: 0.5,\r\n\t\t\t\troot: containerRef,\r\n\t\t\t},\r\n\t\t\tanimationVariants = {\r\n\t\t\t\tinitial: { width: 0, opacity: 1 },\r\n\t\t\t\tanimate: {\r\n\t\t\t\t\twidth: \"auto\",\r\n\t\t\t\t\topacity: 1,\r\n\t\t\t\t\ttransition: { duration: 0.4, type: \"spring\", bounce: 0 },\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\tclassName,\r\n\t\t\tleftTextClassName,\r\n\t\t\trightTextClassName,\r\n\t\t},\r\n\t\tref\r\n\t) => {\r\n\t\tconst componentRef = useRef<HTMLDivElement>(null);\r\n\t\tconst [isAnimating, setIsAnimating] = useState(false);\r\n\r\n\t\tconst isInView =\r\n\t\t\ttriggerType === \"inView\"\r\n\t\t\t\t? useInView(componentRef || containerRef, useInViewOptionsProp)\r\n\t\t\t\t: false;\r\n\t\tconst [isHovered, setIsHovered] = useState(false);\r\n\r\n\t\tuseImperativeHandle(ref, () => ({\r\n\t\t\tanimate: () => setIsAnimating(true),\r\n\t\t\treset: () => setIsAnimating(false),\r\n\t\t}));\r\n\r\n\t\tconst shouldAnimate =\r\n\t\t\ttriggerType === \"hover\"\r\n\t\t\t\t? isHovered\r\n\t\t\t\t: triggerType === \"inView\"\r\n\t\t\t\t\t? isInView\r\n\t\t\t\t\t: triggerType === \"ref\"\r\n\t\t\t\t\t\t? isAnimating\r\n\t\t\t\t\t\t: false;\r\n\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tclassName={cn(\"flex\", className)}\r\n\t\t\t\tref={componentRef}\r\n\t\t\t\tonMouseEnter={() => triggerType === \"hover\" && setIsHovered(true)}\r\n\t\t\t\tonMouseLeave={() => triggerType === \"hover\" && setIsHovered(false)}\r\n\t\t\t>\r\n\t\t\t\t<motion.p layout className={leftTextClassName}>\r\n\t\t\t\t\t{firstText}\r\n\t\t\t\t</motion.p>\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tclassName={mediaContainerClassName}\r\n\t\t\t\t\tvariants={animationVariants}\r\n\t\t\t\t\tinitial=\"initial\"\r\n\t\t\t\t\tanimate={shouldAnimate ? \"animate\" : \"initial\"}\r\n\t\t\t\t>\r\n\t\t\t\t\t{mediaType === \"video\" ? (\r\n\t\t\t\t\t\t<video\r\n\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\r\n\t\t\t\t\t\t\tautoPlay={autoPlay}\r\n\t\t\t\t\t\t\tloop={loop}\r\n\t\t\t\t\t\t\tmuted={muted}\r\n\t\t\t\t\t\t\tplaysInline={playsInline}\r\n\t\t\t\t\t\t\tposter={fallbackUrl}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<source src={mediaUrl} type=\"video/mp4\" />\r\n\t\t\t\t\t\t</video>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tsrc={mediaUrl}\r\n\t\t\t\t\t\t\talt={alt || `${firstText} ${secondText}`}\r\n\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</motion.div>\r\n\t\t\t\t<motion.p layout className={rightTextClassName}>\r\n\t\t\t\t\t{secondText}\r\n\t\t\t\t</motion.p>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nexport default MediaBetweenText;\r\n",
      "type": "registry:ui"
    }
  ]
}