{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rotate-in",
  "type": "registry:ui",
  "title": "Rotate In",
  "description": "The RotateIn component creates a smooth rotation animation for its children when they enter the viewport.",
  "author": "Michael (https://github.com/lappemic)",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/demo/animation/rotate-in.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport {\n  motion,\n  useInView,\n  useReducedMotion,\n  type Variants,\n} from \"motion/react\";\n\ninterface RotateInProps {\n  children: React.ReactNode;\n  duration?: number;\n  delay?: number;\n  rotateFrom?: number;\n  className?: string;\n  once?: boolean;\n}\n\nconst RotateIn: React.FC<RotateInProps> = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  rotateFrom = 90,\n  className = \"\",\n  once = true,\n}) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const isInView = useInView(ref, { once, amount: 0.1 });\n  const prefersReducedMotion = useReducedMotion();\n\n  // A quarter turn is the most vestibular-provoking entrance in the set, so\n  // this one matters most: settled and unrotated from the first frame.\n  const variants: Variants = prefersReducedMotion\n    ? { hidden: { rotate: 0, opacity: 1 }, visible: { rotate: 0, opacity: 1 } }\n    : {\n        hidden: { rotate: rotateFrom, opacity: 0 },\n        visible: {\n          rotate: 0,\n          opacity: 1,\n          transition: {\n            duration: duration,\n            delay: delay,\n            ease: [0.215, 0.61, 0.355, 1],\n          },\n        },\n      };\n\n  return (\n    <motion.div\n      ref={ref}\n      initial=\"hidden\"\n      animate={isInView ? \"visible\" : \"hidden\"}\n      variants={variants}\n      className={className}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport default RotateIn;\n",
      "type": "registry:ui",
      "target": "components/ui/rotate-in.tsx"
    }
  ]
}