{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-expand-to-fullscreen",
  "title": "Image Expand To Fullscreen",
  "description": "An image lifts out of a feed post and morphs into a fullscreen editor with toolbars sliding in.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/image-expand-to-fullscreen/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface ImageExpandRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface ImageExpandToFullscreenProps {\n  from?: ImageExpandRect;\n  to?: ImageExpandRect;\n  borderRadiusFrom?: number;\n  borderRadiusTo?: number;\n  morphAt?: number;\n  imageColorA?: string;\n  imageColorB?: string;\n  imageColorC?: string;\n  feedBackground?: string;\n  editorBackground?: string;\n  accent?: string;\n  postAuthor?: string;\n  postBody?: string;\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: ImageExpandRect = {\n  left: 460,\n  top: 280,\n  width: 360,\n  height: 200,\n};\n\nconst DEFAULT_TO: ImageExpandRect = {\n  left: 200,\n  top: 120,\n  width: 880,\n  height: 480,\n};\n\nexport function ImageExpandToFullscreen({\n  from = DEFAULT_FROM,\n  to = DEFAULT_TO,\n  borderRadiusFrom = 12,\n  borderRadiusTo = 16,\n  morphAt = 30,\n  imageColorA = \"#ff6b6b\",\n  imageColorB = \"#845ec2\",\n  imageColorC = \"#4d8dff\",\n  feedBackground = \"#f4f4f5\",\n  editorBackground = \"#0a0a0a\",\n  accent = \"#fafafa\",\n  postAuthor = \"Maya Larsson\",\n  postBody = \"Sunset over the old harbor — color graded straight out of camera.\",\n  speed = 1,\n  className,\n}: ImageExpandToFullscreenProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // ONE spring drives the entire shared-element transition. Slightly more\n  // critically damped than the morphing modal — the image lands with a\n  // tight settle rather than a heavy bloom.\n  const morph = spring({\n    frame: frame - morphAt,\n    fps,\n    config: { mass: 1.4, damping: 24, stiffness: 130 },\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  // Feed UI fades fully out in the FIRST half of the morph; the dark\n  // editor background fades in across the same window.\n  const feedOpacity = interpolate(morph, [0, 0.5], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const editorOpacity = interpolate(morph, [0, 0.5], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // Toolbars slide in during the LAST third of the morph — they should\n  // feel called in by the image landing at fullscreen.\n  const toolbarOpacity = interpolate(morph, [0.5, 1], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const topToolbarTy = interpolate(morph, [0.5, 1], [-100, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const bottomToolbarTy = interpolate(morph, [0.5, 1], [100, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const imageGradient = `linear-gradient(135deg, ${imageColorA}, ${imageColorB}, ${imageColorC})`;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      {/* Feed background (light page) */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: feedBackground,\n          opacity: feedOpacity,\n        }}\n      />\n\n      {/* Editor background (dark canvas) */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: editorBackground,\n          opacity: editorOpacity,\n        }}\n      />\n\n      {/* Fake post card living on the feed */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 380,\n          top: 140,\n          width: 520,\n          padding: 24,\n          background: \"#ffffff\",\n          borderRadius: 20,\n          boxShadow: \"0 30px 80px rgba(15, 15, 25, 0.08)\",\n          opacity: feedOpacity,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 16,\n        }}\n      >\n        {/* Author row */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n          <div\n            style={{\n              width: 44,\n              height: 44,\n              borderRadius: 999,\n              background: imageGradient,\n            }}\n          />\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n            <div\n              style={{\n                fontSize: 15,\n                fontWeight: 600,\n                color: \"#0a0a0a\",\n                letterSpacing: \"-0.005em\",\n              }}\n            >\n              {postAuthor}\n            </div>\n            <div style={{ fontSize: 12, color: \"#71717a\" }}>2h ago</div>\n          </div>\n        </div>\n\n        {/* Body text */}\n        <div\n          style={{\n            fontSize: 14,\n            lineHeight: 1.5,\n            color: \"#27272a\",\n          }}\n        >\n          {postBody}\n        </div>\n\n        {/* Spacer where the thumbnail visually lives — the actual\n            morphing image is rendered absolutely below so it can lift\n            cleanly off the card. */}\n        <div\n          style={{\n            width: \"100%\",\n            height: 200,\n            borderRadius: 12,\n            background: \"transparent\",\n          }}\n        />\n\n        {/* Action row */}\n        <div style={{ display: \"flex\", gap: 16 }}>\n          {[0, 1, 2].map((i) => (\n            <div\n              key={i}\n              style={{\n                width: 28,\n                height: 28,\n                borderRadius: 8,\n                background: \"#f4f4f5\",\n              }}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* The morphing image — driven entirely by the single spring */}\n      <div\n        style={{\n          position: \"absolute\",\n          left,\n          top,\n          width,\n          height,\n          borderRadius: radius,\n          background: imageGradient,\n          boxShadow:\n            \"0 40px 100px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06)\",\n          overflow: \"hidden\",\n        }}\n      />\n\n      {/* Top toolbar */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          height: 64,\n          padding: \"0 24px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          background: \"rgba(15, 15, 18, 0.6)\",\n          backdropFilter: \"blur(20px)\",\n          WebkitBackdropFilter: \"blur(20px)\",\n          borderBottom: \"1px solid rgba(255, 255, 255, 0.06)\",\n          opacity: toolbarOpacity,\n          transform: `translateY(${topToolbarTy}%)`,\n        }}\n      >\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n          <div\n            style={{\n              width: 32,\n              height: 32,\n              borderRadius: 8,\n              background: \"rgba(255, 255, 255, 0.08)\",\n            }}\n          />\n          <div\n            style={{\n              fontSize: 14,\n              fontWeight: 500,\n              color: accent,\n              letterSpacing: \"-0.005em\",\n            }}\n          >\n            Editor\n          </div>\n        </div>\n        <div style={{ display: \"flex\", gap: 10 }}>\n          {[0, 1, 2, 3].map((i) => (\n            <div\n              key={i}\n              style={{\n                width: 32,\n                height: 32,\n                borderRadius: 8,\n                background: \"rgba(255, 255, 255, 0.06)\",\n              }}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* Bottom toolbar */}\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: 0,\n          left: 0,\n          right: 0,\n          height: 80,\n          padding: \"0 24px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 14,\n          background: \"rgba(15, 15, 18, 0.6)\",\n          backdropFilter: \"blur(20px)\",\n          WebkitBackdropFilter: \"blur(20px)\",\n          borderTop: \"1px solid rgba(255, 255, 255, 0.06)\",\n          opacity: toolbarOpacity,\n          transform: `translateY(${bottomToolbarTy}%)`,\n        }}\n      >\n        {[0, 1, 2, 3, 4, 5].map((i) => (\n          <div\n            key={i}\n            style={{\n              width: 44,\n              height: 44,\n              borderRadius: 12,\n              background:\n                i === 2\n                  ? accent\n                  : \"rgba(255, 255, 255, 0.06)\",\n              border: \"1px solid rgba(255, 255, 255, 0.08)\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/image-expand-to-fullscreen.tsx"
    }
  ],
  "type": "registry:component"
}