{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spatial-push",
  "title": "Spatial Push",
  "description": "A new scene physically presses the old one back into the frame.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/spatial-push/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface SpatialPushProps {\n  from?: ReactNode;\n  to?: ReactNode;\n  direction?: \"up\" | \"down\" | \"left\" | \"right\";\n  transitionStart?: number;\n  transitionDuration?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction DefaultPanel({ label, color }: { label: string; color: string }) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: color,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        color: \"white\",\n        fontFamily: FONT_FAMILY,\n        fontSize: 96,\n        fontWeight: 700,\n        letterSpacing: \"-0.05em\",\n      }}\n    >\n      {label}\n    </div>\n  );\n}\n\nexport function SpatialPush({\n  from,\n  to,\n  direction = \"up\",\n  transitionStart,\n  transitionDuration = 30,\n  speed = 1,\n  className,\n}: SpatialPushProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps, durationInFrames } = useVideoConfig();\n\n  const start =\n    typeof transitionStart === \"number\"\n      ? transitionStart\n      : Math.floor(durationInFrames * 0.4);\n\n  const aProgress = interpolate(\n    frame,\n    [start, start + transitionDuration],\n    [0, 1],\n    {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    },\n  );\n\n  const aScale = interpolate(aProgress, [0, 1], [1, 0.92]);\n  const aBrightness = interpolate(aProgress, [0, 1], [1, 0.5]);\n  const aRadius = interpolate(aProgress, [0, 1], [0, 16]);\n\n  const bSpring = spring({\n    frame: frame - start,\n    fps,\n    config: { mass: 1.2, damping: 14, stiffness: 90 },\n    durationInFrames: 40,\n  });\n\n  const bTransform =\n    direction === \"up\"\n      ? `translateY(${(1 - bSpring) * 100}%)`\n      : direction === \"down\"\n        ? `translateY(${(bSpring - 1) * 100}%)`\n        : direction === \"left\"\n          ? `translateX(${(1 - bSpring) * 100}%)`\n          : `translateX(${(bSpring - 1) * 100}%)`;\n\n  const bShadow =\n    direction === \"up\"\n      ? \"0 -40px 100px rgba(0,0,0,0.8)\"\n      : direction === \"down\"\n        ? \"0 40px 100px rgba(0,0,0,0.8)\"\n        : direction === \"left\"\n          ? \"-40px 0 100px rgba(0,0,0,0.8)\"\n          : \"40px 0 100px rgba(0,0,0,0.8)\";\n\n  const fromContent = from ?? <DefaultPanel label=\"Scene A\" color=\"#0f172a\" />;\n  const toContent = to ?? <DefaultPanel label=\"Scene B\" color=\"#22c55e\" />;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        background: \"black\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          transform: `scale(${aScale})`,\n          filter: `brightness(${aBrightness})`,\n          borderRadius: `${aRadius}px`,\n          overflow: \"hidden\",\n          willChange: \"transform\",\n        }}\n      >\n        {fromContent}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          transform: bTransform,\n          boxShadow: bShadow,\n          willChange: \"transform\",\n        }}\n      >\n        {toContent}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/spatial-push.tsx"
    }
  ],
  "type": "registry:component"
}