{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-device-assemble",
  "title": "Hero Device Assemble",
  "description": "Floating device layers spring together into a laptop or phone mockup, then the screen wakes with a shimmer.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/hero-device-assemble/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface HeroDeviceAssembleProps {\n  assembleStart?: number;\n  device?: \"laptop\" | \"phone\";\n  accentColor?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction MockUI({ accentColor }: { accentColor: string }) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        background: \"#0b0b0f\",\n        fontFamily: FONT_FAMILY,\n        color: \"white\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Title bar */}\n      <div\n        style={{\n          height: \"10%\",\n          background: \"#111118\",\n          borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          padding: \"0 16px\",\n          gap: 8,\n        }}\n      >\n        <div\n          style={{\n            width: 10,\n            height: 10,\n            borderRadius: \"50%\",\n            background: \"rgba(255,255,255,0.18)\",\n          }}\n        />\n        <div\n          style={{\n            width: 10,\n            height: 10,\n            borderRadius: \"50%\",\n            background: \"rgba(255,255,255,0.18)\",\n          }}\n        />\n        <div\n          style={{\n            width: 10,\n            height: 10,\n            borderRadius: \"50%\",\n            background: \"rgba(255,255,255,0.18)\",\n          }}\n        />\n      </div>\n      <div style={{ flex: 1, display: \"flex\" }}>\n        {/* Sidebar */}\n        <div\n          style={{\n            width: \"22%\",\n            background: \"#0e0e14\",\n            borderRight: \"1px solid rgba(255,255,255,0.05)\",\n            padding: 16,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 10,\n          }}\n        >\n          <div\n            style={{\n              height: 12,\n              borderRadius: 4,\n              background: accentColor,\n              opacity: 0.85,\n              width: \"70%\",\n            }}\n          />\n          <div\n            style={{\n              height: 10,\n              borderRadius: 4,\n              background: \"rgba(255,255,255,0.1)\",\n              width: \"85%\",\n            }}\n          />\n          <div\n            style={{\n              height: 10,\n              borderRadius: 4,\n              background: \"rgba(255,255,255,0.08)\",\n              width: \"60%\",\n            }}\n          />\n          <div\n            style={{\n              height: 10,\n              borderRadius: 4,\n              background: \"rgba(255,255,255,0.08)\",\n              width: \"75%\",\n            }}\n          />\n        </div>\n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: 24,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 16,\n          }}\n        >\n          <div\n            style={{\n              height: 18,\n              width: \"40%\",\n              background: \"rgba(255,255,255,0.85)\",\n              borderRadius: 4,\n            }}\n          />\n          <div\n            style={{\n              height: 10,\n              width: \"65%\",\n              background: \"rgba(255,255,255,0.18)\",\n              borderRadius: 4,\n            }}\n          />\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"1fr 1fr 1fr\",\n              gap: 12,\n              marginTop: 12,\n            }}\n          >\n            <div\n              style={{\n                height: 90,\n                borderRadius: 8,\n                background:\n                  \"linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))\",\n                border: \"1px solid rgba(255,255,255,0.06)\",\n              }}\n            />\n            <div\n              style={{\n                height: 90,\n                borderRadius: 8,\n                background: `linear-gradient(180deg, ${accentColor}33, ${accentColor}11)`,\n                border: `1px solid ${accentColor}55`,\n              }}\n            />\n            <div\n              style={{\n                height: 90,\n                borderRadius: 8,\n                background:\n                  \"linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))\",\n                border: \"1px solid rgba(255,255,255,0.06)\",\n              }}\n            />\n          </div>\n          <div\n            style={{\n              flex: 1,\n              borderRadius: 8,\n              background:\n                \"linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))\",\n              border: \"1px solid rgba(255,255,255,0.06)\",\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function HeroDeviceAssemble({\n  assembleStart = 0,\n  device = \"laptop\",\n  accentColor = \"#22c55e\",\n  speed = 1,\n  className,\n}: HeroDeviceAssembleProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const assemble = spring({\n    frame: frame - assembleStart,\n    fps,\n    config: { mass: 1.4, damping: 12, stiffness: 90 },\n    durationInFrames: 60,\n  });\n\n  // Layer translateZ values from far -> 0\n  const lidZ = interpolate(assemble, [0, 1], [1000, 0]);\n  const baseZ = interpolate(assemble, [0, 1], [-800, 0]);\n  const bezelZ = interpolate(assemble, [0, 1], [600, 0]);\n  const screenZ = interpolate(assemble, [0, 1], [300, 0]);\n\n  // Parent rotation easing to 0\n  const rotX = interpolate(assemble, [0, 1], [-22, 0]);\n  const rotY = interpolate(assemble, [0, 1], [28, 0]);\n\n  // Layer opacity fade in slightly during assembly\n  const layerOpacity = interpolate(assemble, [0, 0.4], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // Settle frame: after assemble ~ 0.95\n  const settleFrame = assembleStart + 45;\n  const screenWake = interpolate(\n    frame,\n    [settleFrame, settleFrame + 18],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  // Shimmer sweep across screen (after wake)\n  const shimmerProgress = interpolate(\n    frame,\n    [settleFrame + 6, settleFrame + 30],\n    [-1, 2],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  const isPhone = device === \"phone\";\n\n  // Device dimensions\n  const deviceW = isPhone ? 320 : 760;\n  const deviceH = isPhone ? 640 : 470;\n  const screenInset = isPhone ? 12 : 18;\n  const bezelRadius = isPhone ? 36 : 14;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        overflow: \"hidden\",\n        background:\n          \"radial-gradient(ellipse at center, #1a1a22 0%, #050507 70%)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        perspective: 2000,\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          width: deviceW,\n          height: deviceH,\n          transformStyle: \"preserve-3d\",\n          transform: `rotateX(${rotX}deg) rotateY(${rotY}deg)`,\n          willChange: \"transform\",\n        }}\n      >\n        {/* Back lid (laptop only — for phone, acts as the back shell) */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            transform: `translateZ(${lidZ - 8}px)`,\n            background: \"linear-gradient(180deg, #1f2128 0%, #0e1014 100%)\",\n            borderRadius: bezelRadius + 4,\n            border: \"1px solid rgba(255,255,255,0.08)\",\n            boxShadow:\n              \"0 60px 120px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06)\",\n            opacity: layerOpacity,\n          }}\n        />\n\n        {/* Keyboard / chassis base — laptop only */}\n        {!isPhone && (\n          <div\n            style={{\n              position: \"absolute\",\n              left: -40,\n              right: -40,\n              bottom: -28,\n              height: 28,\n              transform: `translateZ(${baseZ}px) rotateX(78deg)`,\n              transformOrigin: \"top center\",\n              background: \"linear-gradient(180deg, #2a2d36 0%, #14161c 100%)\",\n              borderRadius: \"0 0 12px 12px\",\n              border: \"1px solid rgba(255,255,255,0.06)\",\n              boxShadow: \"0 30px 60px rgba(0,0,0,0.6)\",\n              opacity: layerOpacity,\n            }}\n          />\n        )}\n\n        {/* Bezel frame */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            transform: `translateZ(${bezelZ}px)`,\n            background: \"#0a0a0d\",\n            borderRadius: bezelRadius,\n            border: \"1px solid rgba(255,255,255,0.12)\",\n            boxShadow:\n              \"inset 0 0 0 2px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.5)\",\n            opacity: layerOpacity,\n          }}\n        />\n\n        {/* UI screen */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: screenInset,\n            transform: `translateZ(${screenZ}px)`,\n            borderRadius: bezelRadius - 6,\n            overflow: \"hidden\",\n            background: \"black\",\n            opacity: layerOpacity,\n          }}\n        >\n          {/* Black panel during flight */}\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              background: \"#000\",\n              opacity: 1 - screenWake,\n            }}\n          />\n          {/* UI fades in */}\n          <div style={{ position: \"absolute\", inset: 0, opacity: screenWake }}>\n            <MockUI accentColor={accentColor} />\n          </div>\n          {/* Shimmer sweep */}\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              background: `linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%)`,\n              transform: `translateX(${shimmerProgress * 100}%)`,\n              mixBlendMode: \"screen\",\n              pointerEvents: \"none\",\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/hero-device-assemble.tsx"
    }
  ],
  "type": "registry:component"
}