{
  "name": "slide-left",
  "type": "registry:ui",
  "description": "Slide in from either side, with an optional mask reveal and automatic exit",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-primitive",
    "motion-wrapper",
    "layout"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/slide-left.tsx",
      "type": "registry:ui",
      "content": "import { useVideoConfig } from \"remotion\";\nimport { scaleFont } from \"@/remotion/lib/layout\";\nimport {\n  useEnterExit,\n  type MotionPrimitiveProps,\n} from \"@/remotion/lib/motion-primitive\";\nimport { MotionWrapper } from \"@/remotion/lib/motion-wrapper\";\n\nexport type SlideLeftProps = MotionPrimitiveProps & {\n  /**\n   * Horizontal offset in pixels at the start. Scales with the frame by default\n   * — and under `mask`, defaults to the element's own width.\n   */\n  distance?: number;\n  /** Side the child travels in from. */\n  from?: \"left\" | \"right\";\n  /** Clip the child to its own box so it slides out of a mask. */\n  mask?: boolean;\n};\n\n/**\n * Slides in on the horizontal — the reading axis, so it suits list rows and\n * lower thirds where a rise would fight the line above it.\n */\nexport const SlideLeft: React.FC<SlideLeftProps> = ({\n  children,\n  distance: distanceProp,\n  from = \"left\",\n  mask = false,\n  block,\n  style,\n  className,\n  ...motionProps\n}) => {\n  const { width } = useVideoConfig();\n  const { displace, opacity, sign } = useEnterExit(motionProps);\n  const direction = from === \"left\" ? -1 : 1;\n\n  if (mask) {\n    /* Percentages are of the element's own width, so any box clears its mask. */\n    const travel =\n      distanceProp === undefined\n        ? `${displace * 100 * direction * sign}%`\n        : `${displace * distanceProp * direction * sign}px`;\n\n    return (\n      <MotionWrapper\n        block={block}\n        className={className}\n        style={{ overflow: \"hidden\", ...style }}\n      >\n        <div style={{ translate: `${travel} 0px` }}>{children}</div>\n      </MotionWrapper>\n    );\n  }\n\n  const offset = displace * (distanceProp ?? scaleFont(60, width)) * direction * sign;\n\n  return (\n    <MotionWrapper\n      block={block}\n      className={className}\n      style={{\n        ...style,\n        opacity,\n        translate: `${offset}px 0px`,\n        transformOrigin: from === \"left\" ? \"left center\" : \"right center\",\n      }}\n    >\n      {children}\n    </MotionWrapper>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "core",
    "tags": [
      "enter"
    ]
  }
}