{
  "name": "rotate-in",
  "type": "registry:ui",
  "description": "Swing into place in plane or hinged in depth on the x/y axis",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-primitive",
    "motion-wrapper"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/rotate-in.tsx",
      "type": "registry:ui",
      "content": "import { interpolate } from \"remotion\";\nimport {\n  resolveOrigin,\n  useEnterExit,\n  type MotionPrimitiveProps,\n  type TransformOrigin,\n} from \"@/remotion/lib/motion-primitive\";\nimport { MotionWrapper } from \"@/remotion/lib/motion-wrapper\";\n\nexport type RotateAxis = \"z\" | \"x\" | \"y\";\n\nexport type RotateInProps = MotionPrimitiveProps & {\n  /** Angle it starts at, in degrees. Negative tilts anticlockwise. */\n  degrees?: number;\n  /** `z` spins in plane; `x` and `y` hinge in depth. */\n  axis?: RotateAxis;\n  /** Depth of the 3D projection for the `x` and `y` axes. */\n  perspective?: number;\n  /** Scale at the start — a rotation that also grows reads as one gesture. */\n  scaleFrom?: number;\n  /** Point the rotation pivots around. */\n  origin?: TransformOrigin;\n};\n\n/**\n * Swings into place. On the `x`/`y` axes it hinges in depth, which is how a\n * card or a panel should arrive; `z` is the in-plane spin for badges and marks.\n */\nexport const RotateIn: React.FC<RotateInProps> = ({\n  children,\n  degrees = -12,\n  axis = \"z\",\n  perspective = 1200,\n  scaleFrom = 0.96,\n  origin = \"center\",\n  block,\n  style,\n  className,\n  ...motionProps\n}) => {\n  const { motion, opacity } = useEnterExit(motionProps);\n  const rotation = interpolate(motion, [0, 1], [degrees, 0]);\n  const scale = interpolate(motion, [0, 1], [scaleFrom, 1]);\n\n  return (\n    <MotionWrapper\n      block={block}\n      className={className}\n      style={{\n        ...style,\n        opacity,\n        scale,\n        transformOrigin: resolveOrigin(origin),\n        ...(axis === \"z\"\n          ? { rotate: `${rotation}deg` }\n          : {\n              transform: `perspective(${perspective}px) rotate${axis.toUpperCase()}(${rotation}deg)`,\n              transformStyle: \"preserve-3d\",\n            }),\n      }}\n    >\n      {children}\n    </MotionWrapper>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "core",
    "tags": [
      "enter"
    ]
  }
}