{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-modal",
  "title": "Morphing Modal",
  "description": "A bento card lifts off the grid and blooms into a full-screen modal driven by a single heavy spring.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/morphing-modal/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface MorphingModalRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface MorphingModalProps {\n  from?: MorphingModalRect;\n  to?: MorphingModalRect;\n  borderRadiusFrom?: number;\n  borderRadiusTo?: number;\n  morphAt?: number;\n  background?: string;\n  cardColor?: string;\n  textColor?: string;\n  mutedColor?: string;\n  sourceTitle?: string;\n  sourceBody?: string;\n  modalTitle?: string;\n  modalBody?: string;\n  source?: ReactNode;\n  modal?: ReactNode;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst VIEWPORT_W = 1280;\nconst VIEWPORT_H = 720;\n\nconst DEFAULT_FROM: MorphingModalRect = {\n  left: 460,\n  top: 260,\n  width: 360,\n  height: 200,\n};\n\nconst DEFAULT_TO: MorphingModalRect = {\n  left: 80,\n  top: 60,\n  width: VIEWPORT_W - 160,\n  height: VIEWPORT_H - 120,\n};\n\nexport function MorphingModal({\n  from = DEFAULT_FROM,\n  to = DEFAULT_TO,\n  borderRadiusFrom = 24,\n  borderRadiusTo = 0,\n  morphAt = 30,\n  background = \"#050505\",\n  cardColor = \"#0a0a0a\",\n  textColor = \"#fafafa\",\n  mutedColor = \"#71717a\",\n  sourceTitle = \"Compose video\",\n  sourceBody = \"Click to start a new project\",\n  modalTitle = \"New project\",\n  modalBody = \"Pick a template, drop your assets, and ship a 30s video in under five minutes. Everything renders deterministically — no flicker, no flaky frames.\",\n  source,\n  modal,\n  speed = 1,\n  className,\n}: MorphingModalProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // ONE heavy spring drives all 5 morph properties at once. High mass +\n  // low stiffness so the modal \"blooms\" instead of jumping.\n  const morph = spring({\n    frame: frame - morphAt,\n    fps,\n    config: { mass: 1.5, damping: 22, stiffness: 110 },\n  });\n\n  const left = interpolate(morph, [0, 1], [from.left, to.left]);\n  const top = interpolate(morph, [0, 1], [from.top, to.top]);\n  const width = interpolate(morph, [0, 1], [from.width, to.width]);\n  const height = interpolate(morph, [0, 1], [from.height, to.height]);\n  const radius = interpolate(morph, [0, 1], [borderRadiusFrom, borderRadiusTo]);\n\n  // Backdrop fades in alongside the morph spring.\n  const backdropAlpha = interpolate(morph, [0, 1], [0, 0.8]);\n\n  // Source content vanishes in the FIRST third of the morph.\n  const sourceOpacity = interpolate(morph, [0, 0.33], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // Modal content arrives in the LAST third with a translateY offset.\n  const modalOpacity = interpolate(morph, [0.66, 1], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const modalTy = interpolate(morph, [0.66, 1], [20, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        fontFamily: FONT_FAMILY,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Backdrop dim layer */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: `rgba(0, 0, 0, ${backdropAlpha})`,\n          pointerEvents: \"none\",\n        }}\n      />\n\n      {/* Suggestion of a bento grid behind so the morph reads as\n          \"card lifting off\". Very low contrast. */}\n      <BackgroundGrid />\n\n      {/* The morphing card */}\n      <div\n        style={{\n          position: \"absolute\",\n          left,\n          top,\n          width,\n          height,\n          background: cardColor,\n          borderRadius: radius,\n          boxShadow:\n            \"0 60px 140px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06)\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* Source layer (fades out first) */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            padding: 28,\n            display: \"flex\",\n            flexDirection: \"column\",\n            justifyContent: \"flex-end\",\n            gap: 6,\n            opacity: sourceOpacity,\n          }}\n        >\n          {source ?? (\n            <>\n              <div\n                style={{\n                  fontSize: 20,\n                  fontWeight: 700,\n                  color: textColor,\n                  letterSpacing: \"-0.01em\",\n                }}\n              >\n                {sourceTitle}\n              </div>\n              <div style={{ fontSize: 14, color: mutedColor }}>\n                {sourceBody}\n              </div>\n            </>\n          )}\n        </div>\n\n        {/* Modal layer (arrives last with translateY) */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            padding: 64,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 24,\n            opacity: modalOpacity,\n            transform: `translateY(${modalTy}px)`,\n          }}\n        >\n          {modal ?? (\n            <>\n              <div\n                style={{\n                  fontSize: 56,\n                  fontWeight: 700,\n                  color: textColor,\n                  letterSpacing: \"-0.03em\",\n                  lineHeight: 1.05,\n                }}\n              >\n                {modalTitle}\n              </div>\n              <div\n                style={{\n                  fontSize: 20,\n                  lineHeight: 1.55,\n                  color: mutedColor,\n                  maxWidth: 720,\n                }}\n              >\n                {modalBody}\n              </div>\n              <div\n                style={{\n                  marginTop: 12,\n                  display: \"inline-flex\",\n                  alignSelf: \"flex-start\",\n                  background: textColor,\n                  color: cardColor,\n                  padding: \"12px 22px\",\n                  borderRadius: 12,\n                  fontSize: 16,\n                  fontWeight: 600,\n                }}\n              >\n                Get started\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction BackgroundGrid() {\n  // Decorative bento background — 3x2 cards, very low contrast.\n  const cells = [\n    { x: 80, y: 60, w: 360, h: 200 },\n    { x: 460, y: 60, w: 360, h: 200 },\n    { x: 840, y: 60, w: 360, h: 200 },\n    { x: 80, y: 460, w: 360, h: 200 },\n    { x: 840, y: 460, w: 360, h: 200 },\n  ];\n  return (\n    <>\n      {cells.map((c, i) => (\n        <div\n          key={i}\n          style={{\n            position: \"absolute\",\n            left: c.x,\n            top: c.y,\n            width: c.w,\n            height: c.h,\n            background: \"#0a0a0a\",\n            borderRadius: 24,\n            border: \"1px solid rgba(255,255,255,0.04)\",\n          }}\n        />\n      ))}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/morphing-modal.tsx"
    }
  ],
  "type": "registry:component"
}