{
  "name": "slide-up",
  "type": "registry:ui",
  "description": "Rise into place, with an optional mask reveal and automatic exit",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "motion-primitive",
    "motion-wrapper",
    "layout"
  ],
  "files": [
    {
      "path": "registry/bases/default/primitives/slide-up.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 SlideUpProps = MotionPrimitiveProps & {\n  /**\n   * Vertical offset in pixels at the start. Scales with the frame by default —\n   * and under `mask`, defaults to the element's own height instead, which is\n   * the only travel that actually clears the mask.\n   */\n  distance?: number;\n  /**\n   * Clip the child to its own box so it rises out of a mask rather than\n   * fading up. The editorial move for a headline; leaves opacity alone.\n   */\n  mask?: boolean;\n  /** Extra room inside the mask so descenders are not clipped. */\n  maskPadding?: number;\n};\n\n/**\n * Rises into place. Opacity finishes at 55% of the travel, so the line lands\n * solid instead of still resolving as it stops.\n */\nexport const SlideUp: React.FC<SlideUpProps> = ({\n  children,\n  distance: distanceProp,\n  mask = false,\n  maskPadding = 0,\n  block,\n  style,\n  className,\n  ...motionProps\n}) => {\n  const { width } = useVideoConfig();\n  const { displace, opacity, sign } = useEnterExit(motionProps);\n\n  if (mask) {\n    /* Percentages are of the element's own height, so any box clears its mask\n     * without the caller having to know how tall the content came out. */\n    const travel =\n      distanceProp === undefined\n        ? `${displace * 100 * sign}%`\n        : `${displace * distanceProp * sign}px`;\n\n    return (\n      <MotionWrapper\n        block={block}\n        className={className}\n        style={{\n          overflow: \"hidden\",\n          paddingBottom: maskPadding,\n          marginBottom: -maskPadding,\n          ...style,\n        }}\n      >\n        <div style={{ translate: `0px ${travel}` }}>{children}</div>\n      </MotionWrapper>\n    );\n  }\n\n  const offset = displace * (distanceProp ?? scaleFont(40, width)) * sign;\n\n  return (\n    <MotionWrapper\n      block={block}\n      className={className}\n      style={{\n        ...style,\n        opacity,\n        translate: `0px ${offset}px`,\n        transformOrigin: \"center bottom\",\n      }}\n    >\n      {children}\n    </MotionWrapper>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "atoms",
    "drive": "time",
    "tier": "core",
    "tags": [
      "enter"
    ]
  }
}