{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-share-app",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-share-app.tsx",
      "content": "'use client'\r\nimport React, { useRef } from 'react'\r\nimport { Apple, ArrowDownCircle } from 'lucide-react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { useMediaQuery } from '@/hooks/use-media-query'\r\nimport MotionDrawer from '@/components/ui/motion-drawer'\r\n\r\nexport const HeroShareApp = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n  const isMobile = useMediaQuery('(max-width: 768px)')\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"min-h-screen bg-red-50 text-neutral-900 relative overflow-hidden flex flex-col\"\r\n    >\r\n      {/* Mobile Navigation */}\r\n      {isMobile && (\r\n        <div className=\"flex gap-4 justify-between items-center px-10 pt-4\">\r\n          <MotionDrawer\r\n            direction=\"left\"\r\n            width={300}\r\n            backgroundColor={'#ffffff'}\r\n            clsBtnClassName=\"bg-neutral-800 border-r border-neutral-900 text-white\"\r\n            contentClassName=\"bg-white border-r border-neutral-200 text-black\"\r\n            btnClassName=\"bg-white text-black relative w-fit p-2 left-0 top-0 rounded-full shadow-xs border border-neutral-200\"\r\n          >\r\n            <nav className=\"space-y-4 \">\r\n              <div className=\"flex items-center gap-2 text-black\">\r\n                <svg\r\n                  className=\"fill-black w-8 h-8\"\r\n                  width=\"97\"\r\n                  height=\"108\"\r\n                  viewBox=\"0 0 97 108\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n                </svg>\r\n                <span>UI-Layouts</span>\r\n              </div>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                About Us\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Press\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Careers\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Contact\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n          <button className=\"cursor-pointer bg-red-500 text-white px-3 py-2.5  relative z-10 rounded-full font-bold text-sm shadow-xl flex items-center gap-2 transition\">\r\n            <ArrowDownCircle size={18} /> Download the App\r\n          </button>\r\n        </div>\r\n      )}\r\n\r\n      {/* Navbar */}\r\n      {!isMobile && (\r\n        <header className=\"relative z-10 w-full max-w-7xl mx-auto px-10 py-10 flex items-center justify-between\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={0}\r\n            className=\"flex items-center gap-2\"\r\n          >\r\n            <svg\r\n              className=\"fill-black w-8 h-8\"\r\n              width=\"97\"\r\n              height=\"108\"\r\n              viewBox=\"0 0 97 108\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n            </svg>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"nav\"\r\n            timelineRef={timelineRef}\r\n            animationNum={1}\r\n            className=\"hidden md:flex items-center gap-10 text-sm text-neutral-800 font-semibold\"\r\n          >\r\n            <a href=\"#\" className=\"hover:text-black transition\">\r\n              About Us\r\n            </a>\r\n            <a href=\"#\" className=\"hover:text-black transition\">\r\n              Press\r\n            </a>\r\n            <a href=\"#\" className=\"hover:text-black transition\">\r\n              Careers\r\n            </a>\r\n            <a href=\"#\" className=\"hover:text-black transition\">\r\n              Contact\r\n            </a>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={2}\r\n            className=\"cursor-pointer bg-red-500 text-white px-3 py-2.5 rounded-full font-bold text-sm shadow-xl flex items-center gap-2 transition\"\r\n          >\r\n            <ArrowDownCircle size={18} /> Download the App\r\n          </TimelineAnimation>\r\n        </header>\r\n      )}\r\n\r\n      <TimelineAnimation\r\n        timelineRef={timelineRef}\r\n        animationNum={1}\r\n        className=\"absolute inset-0 z-0\"\r\n        style={{\r\n          background:\r\n            'radial-gradient(125% 125% at 50% 90%, #fff 40%, #f16d63 100%)',\r\n        }}\r\n      />\r\n      <div className=\"relative z-10 grow flex flex-col items-center justify-center text-center px-4 pt-10\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={3}\r\n          className=\"flex items-center gap-2 bg-red-100 px-4 py-2 rounded-full border border-neutral-100 shadow-sm mb-8\"\r\n        >\r\n          <div className=\"flex -space-x-3\">\r\n            <img\r\n              className=\"w-7 h-7 rounded-full border-2 border-white\"\r\n              src=\"https://picsum.photos/seed/u1/100\"\r\n            />\r\n            <img\r\n              className=\"w-7 h-7 rounded-full border-2 border-white\"\r\n              src=\"https://picsum.photos/seed/u2/100\"\r\n            />\r\n            <img\r\n              className=\"w-7 h-7 rounded-full border-2 border-white\"\r\n              src=\"https://picsum.photos/seed/u3/100\"\r\n            />\r\n          </div>\r\n          <span className=\"text-sm font-bold text-neutral-600\">\r\n            Trusted by 12,000+ People\r\n          </span>\r\n        </TimelineAnimation>\r\n\r\n        <h1 className=\"text-7xl md:text-9xl font-black tracking-tighter text-neutral-800 max-w-5xl leading-[0.9] mb-10\">\r\n          <TimelineAnimation\r\n            as=\"span\"\r\n            timelineRef={timelineRef}\r\n            animationNum={4}\r\n          >\r\n            Share What Matters,\r\n          </TimelineAnimation>\r\n          <br />\r\n          <TimelineAnimation\r\n            as=\"span\"\r\n            timelineRef={timelineRef}\r\n            animationNum={5}\r\n          >\r\n            Inspire What's Real\r\n          </TimelineAnimation>\r\n        </h1>\r\n\r\n        <TimelineAnimation\r\n          as=\"p\"\r\n          timelineRef={timelineRef}\r\n          animationNum={6}\r\n          className=\"text-xl md:text-2xl text-neutral-800 font-bold max-w-2xl mb-12\"\r\n        >\r\n          Emphasizes meaningful sharing and inspiration, inviting users to join\r\n          a positive community.\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"flex flex-col sm:flex-row gap-4 items-center mb-24\">\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={7}\r\n            className=\"bg-linear-to-t from-red-400 to-red-500 cursor-pointer text-white px-4 py-4 rounded-xl font-semibold text-xl shadow-2xl flex items-center gap-3 transition\"\r\n          >\r\n            <svg viewBox=\"0 0 814 1000\" className=\"w-8 h-8\">\r\n              <path\r\n                fill=\"#fff\"\r\n                d=\"M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z\"\r\n              />\r\n            </svg>\r\n            Download for App Store\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={8}\r\n            className=\"cursor-pointer bg-black text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl flex items-center gap-3 transition\"\r\n          >\r\n            <svg\r\n              fillRule=\"evenodd\"\r\n              clipRule=\"evenodd\"\r\n              className=\"w-8 h-8\"\r\n              imageRendering=\"optimizeQuality\"\r\n              shapeRendering=\"geometricPrecision\"\r\n              textRendering=\"geometricPrecision\"\r\n              viewBox=\"0 0 466 511.98\"\r\n            >\r\n              <g fillRule=\"nonzero\">\r\n                <path\r\n                  fill=\"#EA4335\"\r\n                  d=\"M199.9 237.8 1.4 470.17c7.22 24.57 30.16 41.81 55.8 41.81 11.16 0 20.93-2.79 29.3-8.37l244.16-139.46L199.9 237.8z\"\r\n                />\r\n                <path\r\n                  fill=\"#FBBC04\"\r\n                  d=\"m433.91 205.1-104.65-60-111.61 110.22 113.01 108.83 104.64-58.6c18.14-9.77 30.7-29.3 30.7-50.23-1.4-20.93-13.95-40.46-32.09-50.22z\"\r\n                />\r\n                <path\r\n                  fill=\"#34A853\"\r\n                  d=\"M199.42 273.45 329.27 145.1 87.9 8.37C79.53 2.79 68.36 0 57.2 0 30.7 0 6.98 18.14 1.4 41.86l198.02 231.59z\"\r\n                />\r\n                <path\r\n                  fill=\"#4285F4\"\r\n                  d=\"M1.39 41.86C0 46.04 0 51.63 0 57.2v397.64c0 5.57 0 9.76 1.4 15.34l216.27-214.86L1.39 41.86z\"\r\n                />\r\n              </g>\r\n            </svg>\r\n            Download from Play Store\r\n          </TimelineAnimation>\r\n        </div>\r\n\r\n        {/* Floating Cards */}\r\n        <div className=\"relative w-full max-w-7xl h-[300px]\">\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={9}\r\n            className=\"absolute left-0 bottom-[-100px] w-105 h-96 bg-white rounded-4xl shadow-2xl overflow-hidden transform rotate-[-15deg] translate-x-12 translate-y-12 border-4 border-white\"\r\n          >\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=710&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={10}\r\n            className=\"absolute left-1/2 -translate-x-1/2 bottom-[-150px] w-100 h-[450px] bg-white rounded-4xl shadow-2xl z-20 overflow-hidden border-4 border-white\"\r\n          >\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1500835556837-99ac94a94552?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={11}\r\n            className=\"absolute right-0 bottom-[-100px] w-105 h-96 bg-white rounded-4xl shadow-2xl overflow-hidden transform rotate-15 -translate-x-12 translate-y-12 border-4 border-white\"\r\n          >\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1768361435257-819e2c22f0b4?q=80&w=713&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/motion-drawer.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Menu, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nexport type SideMenuDirection = 'left' | 'right';\nexport type ButtonOpeningVariants = 'push' | 'merge' | 'stay';\n\ninterface SideMenuProps {\n  // Appearance\n  overlayColor?: string;\n  width?: number;\n  direction?: SideMenuDirection;\n  backgroundColor?: string;\n\n  // Content\n  children: React.ReactNode;\n\n  // Behavior\n  isOpen?: boolean;\n  onToggle?: (isOpen: boolean) => void;\n  showToggleButton?: boolean;\n  toggleButtonText?: {\n    open: string;\n    close: string;\n  };\n\n  // Styling\n  btnClassName?: string;\n  className?: string;\n  contentClassName?: string;\n  clsBtnClassName?: string;\n  overlayClassName?: string;\n\n  // Animation\n  animationConfig?: {\n    type?: 'spring' | 'tween';\n    damping?: number;\n    stiffness?: number;\n    duration?: number;\n  };\n\n  // Drag behavior\n  enableDrag?: boolean;\n  dragThreshold?: number;\n\n  // New prop\n  buttonOpeningVariants?: ButtonOpeningVariants;\n}\n\nconst getOpenButtonVariants = (\n  direction: SideMenuDirection,\n  width: number,\n  type: ButtonOpeningVariants\n) => {\n  switch (type) {\n    case 'merge':\n      return direction === 'left'\n        ? {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: width - 68,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          }\n        : {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: 68 - width,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          };\n\n    case 'push':\n      return direction === 'left'\n        ? { closed: { x: 0, opacity: 1 }, open: { x: width + 20, opacity: 0 } }\n        : {\n            closed: { x: 0, opacity: 1 },\n            open: { x: -(width + 20), opacity: 0 },\n          };\n\n    case 'stay':\n    default:\n      return {\n        closed: { x: 0, opacity: 1 },\n        open: { x: 0, opacity: 0 },\n      };\n  }\n};\n\nconst MotionDrawer: React.FC<SideMenuProps> = ({\n  // Appearance\n  overlayColor = 'rgba(0, 0, 0, 0.3)',\n  width = 250,\n  direction = 'left',\n  backgroundColor = '#ffffff',\n\n  // Content\n  children,\n\n  // Behavior\n  isOpen: controlledIsOpen,\n  onToggle,\n  showToggleButton = true,\n\n  // Styling\n  btnClassName = '',\n  clsBtnClassName = '',\n  className = '',\n  contentClassName = '',\n  overlayClassName = '',\n\n  // Animation\n  animationConfig = {\n    type: 'spring',\n    damping: 25,\n    stiffness: 120,\n  },\n\n  // Drag behavior\n  enableDrag = true,\n  dragThreshold = 0.3,\n\n  buttonOpeningVariants = 'merge',\n}) => {\n  const [internalIsOpen, setInternalIsOpen] = useState<boolean>(false);\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;\n  const setIsOpen = (value: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(value);\n    }\n    onToggle?.(value);\n  };\n\n  const getDrawerVariants = () => {\n    if (direction === 'left') {\n      return {\n        closed: { x: -width },\n        open: { x: 0 },\n      };\n    } else {\n      return {\n        closed: { x: width },\n        open: { x: 0 },\n      };\n    }\n  };\n\n  const buttonVariants = getOpenButtonVariants(direction, width, buttonOpeningVariants);\n\n  const getDragConstraints = () => {\n    if (direction === 'left') {\n      return { left: -width, right: 0 };\n    } else {\n      return { left: 0, right: width };\n    }\n  };\n\n  const handleDragEnd = (_event: any, info: any) => {\n    if (!enableDrag) return;\n\n    const threshold = width * dragThreshold;\n    const dragDistance = Math.abs(info.offset.x);\n\n    if (direction === 'left') {\n      const isDraggingLeft = info.offset.x < 0;\n      if (isDraggingLeft && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingLeft && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    } else {\n      const isDraggingRight = info.offset.x > 0;\n      if (isDraggingRight && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingRight && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const drawerPositionClasses = direction === 'left' ? 'left-0' : 'right-0';\n  const openButtonPositionClasses = direction === 'left' ? 'top-4 left-4' : 'top-4 right-4';\n\n  return (\n    <>\n      {showToggleButton && (\n        <motion.button\n          className={cn(\n            `fixed z-99 text-primary cursor-pointer ${openButtonPositionClasses}`,\n            btnClassName\n          )}\n          onClick={() => setIsOpen(true)}\n          variants={buttonVariants}\n          animate={isOpen ? 'open' : 'closed'}\n          transition={animationConfig}\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <Menu />\n          {/* Open */}\n        </motion.button>\n      )}\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className={`fixed w-full h-full top-0 left-0 z-9999 ${className}`}>\n            {/* Overlay */}\n            <motion.div\n              className={`absolute w-full h-full top-0 left-0 ${overlayClassName}`}\n              style={{ backgroundColor: overlayColor }}\n              onClick={() => setIsOpen(false)}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.3 }}\n            />\n\n            {/* Drawer */}\n            <motion.div\n              className={`absolute h-full shadow-[8px_1px_21px_0px_rgba(17,17,26,0.1)] ${drawerPositionClasses} ${contentClassName}`}\n              style={{\n                backgroundColor,\n                width: `${width}px`,\n                padding: '60px 30px 30px 30px',\n                boxSizing: 'border-box',\n              }}\n              drag={enableDrag ? 'x' : false}\n              dragElastic={0.1}\n              dragConstraints={getDragConstraints()}\n              dragMomentum={false}\n              onDragEnd={handleDragEnd}\n              variants={getDrawerVariants()}\n              initial='closed'\n              animate='open'\n              exit='closed'\n              transition={animationConfig}\n            >\n              {/* Close Button */}\n              {showToggleButton && (\n                <motion.button\n                  className={cn(\n                    'absolute top-2 right-8 p-2 text-black cursor-pointer',\n                    clsBtnClassName\n                  )}\n                  onClick={() => setIsOpen(false)}\n                  whileHover={{ scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  transition={{ duration: 0.2 }}\n                >\n                  <X size={20} /> {/* Close */}\n                </motion.button>\n              )}\n\n              {/* Content */}\n              <div className='h-full overflow-y-auto'>{children}</div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};\n\nexport default MotionDrawer;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "./hooks/use-media-query.tsx",
      "content": "'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = useState(false);\n\n  useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches);\n    }\n\n    const result = matchMedia(query);\n    result.addEventListener('change', onChange);\n    setValue(result.matches);\n\n    return () => result.removeEventListener('change', onChange);\n  }, [query]);\n\n  return value;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}