{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-launch-trailer",
  "title": "Product Launch Trailer",
  "description": "Cinematic Product Hunt teaser: pulsing logo, zoom-through transition, 3D bento fly-over, and a confetti version drop.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/product-launch-trailer/index.tsx",
      "content": "\"use client\";\n\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  random,\n  Sequence,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nexport interface ProductLaunchTrailerProps {\n  logoLabel?: string;\n  productName?: string;\n  versionLabel?: string;\n  accentPeach?: string;\n  accentLavender?: string;\n  accentMint?: string;\n  background?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO_FAMILY =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace\";\n\n// Soft \"Tactile\" easing — used for every camera move and reveal.\nconst SOFT = Easing.bezier(0.16, 1, 0.3, 1);\n\n// Sequence anchors (frames). All later math is derived from these so the\n// trailer is easy to retime in one place.\nconst T = {\n  pulseStart: 0,\n  pulseEnd: 50,\n  zoomStart: 38,\n  zoomEnd: 78,\n  shellStart: 70,\n  flyStart: 110,\n  flyEnd: 200,\n  outroStart: 190,\n  outroEnd: 240,\n};\n\nexport function ProductLaunchTrailer({\n  logoLabel = \"R\",\n  productName = \"Remocn\",\n  versionLabel = \"v1.0 is live\",\n  accentPeach = \"#FFB38E\",\n  accentLavender = \"#D4B3FF\",\n  accentMint = \"#A1EEBD\",\n  background = \"#141318\",\n  speed = 1,\n  className,\n}: ProductLaunchTrailerProps) {\n  return (\n    <AbsoluteFill className={className} style={{ background }}>\n      {/* TODO(audio): TransitionWhoosh @ frame ~38, SuccessChime @ frame ~200 */}\n\n      <Sequence from={T.pulseStart} durationInFrames={T.zoomEnd - T.pulseStart}>\n        <PulseLogo\n          label={logoLabel}\n          name={productName}\n          accentLavender={accentLavender}\n          background={background}\n          speed={speed}\n        />\n      </Sequence>\n\n      <Sequence from={T.shellStart} durationInFrames={T.outroEnd - T.shellStart}>\n        <AppShellFlyover\n          accentPeach={accentPeach}\n          accentLavender={accentLavender}\n          accentMint={accentMint}\n          background={background}\n          speed={speed}\n          flyStartLocal={T.flyStart - T.shellStart}\n          flyEndLocal={T.flyEnd - T.shellStart}\n          outroStartLocal={T.outroStart - T.shellStart}\n        />\n      </Sequence>\n\n      <Sequence\n        from={T.outroStart}\n        durationInFrames={T.outroEnd - T.outroStart + 1}\n      >\n        <Outro\n          versionLabel={versionLabel}\n          accentMint={accentMint}\n          accentPeach={accentPeach}\n          accentLavender={accentLavender}\n          speed={speed}\n        />\n      </Sequence>\n    </AbsoluteFill>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                  Phase 1                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction PulseLogo({\n  label,\n  name,\n  accentLavender,\n  background,\n  speed,\n}: {\n  label: string;\n  name: string;\n  accentLavender: string;\n  background: string;\n  speed: number;\n}) {\n  const frame = useCurrentFrame() * speed;\n  const localDuration = T.zoomEnd - T.pulseStart;\n\n  // Soft pulse — sin wave on a slow period, modulating both glow and scale.\n  const pulse = (Math.sin(frame / 6) + 1) / 2; // 0..1\n\n  // After pulseEnd we hand off to the zoom transition: scale up + fade out.\n  const zoomLocal = Math.max(0, frame - (T.zoomStart - T.pulseStart));\n  const zoomDuration = T.zoomEnd - T.zoomStart;\n  const zoom = interpolate(zoomLocal, [0, zoomDuration], [1, 14], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: Easing.bezier(0.7, 0, 0.84, 0),\n  });\n  const fade = interpolate(zoomLocal, [zoomDuration * 0.5, zoomDuration], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const baseScale = 0.96 + pulse * 0.04;\n  const glowAlpha = 0.35 + pulse * 0.4;\n\n  const labelOpacity = interpolate(frame, [4, 18], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  return (\n    <AbsoluteFill\n      style={{\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <div\n        style={{\n          transform: `scale(${zoom * baseScale})`,\n          opacity: fade,\n          willChange: \"transform, opacity\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: 28,\n        }}\n      >\n        {/* Logo squircle */}\n        <div\n          style={{\n            width: 200,\n            height: 200,\n            borderRadius: 56,\n            background:\n              \"linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%)\",\n            border: `1px solid ${accentLavender}55`,\n            boxShadow: `0 0 ${60 + pulse * 80}px ${accentLavender}${toHex(\n              glowAlpha,\n            )}, inset 0 1px 0 rgba(255,255,255,0.12)`,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"white\",\n            fontFamily: FONT_FAMILY,\n            fontSize: 112,\n            fontWeight: 700,\n            letterSpacing: \"-0.06em\",\n          }}\n        >\n          {label}\n        </div>\n\n        {/* Product name */}\n        <div\n          style={{\n            opacity: labelOpacity,\n            color: \"rgba(255,255,255,0.92)\",\n            fontFamily: FONT_FAMILY,\n            fontSize: 28,\n            fontWeight: 500,\n            letterSpacing: \"0.02em\",\n          }}\n        >\n          {name}\n        </div>\n      </div>\n      {/* swallow lint: localDuration kept for reference */}\n      <span style={{ display: \"none\" }}>{localDuration}</span>\n    </AbsoluteFill>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                  Phase 2                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellFlyover({\n  accentPeach,\n  accentLavender,\n  accentMint,\n  background,\n  speed,\n  flyStartLocal,\n  flyEndLocal,\n  outroStartLocal,\n}: {\n  accentPeach: string;\n  accentLavender: string;\n  accentMint: string;\n  background: string;\n  speed: number;\n  flyStartLocal: number;\n  flyEndLocal: number;\n  outroStartLocal: number;\n}) {\n  const frame = useCurrentFrame() * speed;\n\n  // Shell fade-in — comes in right after the zoom punches through.\n  const enter = interpolate(frame, [0, 14], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: SOFT,\n  });\n\n  // 3D camera fly-over: rx, ry, tz, scale all interpolated with the soft bezier.\n  const flyT = interpolate(frame, [flyStartLocal, flyEndLocal], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing: SOFT,\n  });\n  // Outro pull-back blends the camera away.\n  const outroT = interpolate(\n    frame,\n    [outroStartLocal, outroStartLocal + 30],\n    [0, 1],\n    {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n      easing: SOFT,\n    },\n  );\n\n  const rx = interpolate(flyT, [0, 1], [0, -8]) * (1 - outroT);\n  const ry = interpolate(flyT, [0, 1], [-6, 6]) * (1 - outroT);\n  const tz =\n    interpolate(flyT, [0, 1], [-220, 80]) * (1 - outroT) +\n    outroT * -360;\n  const scaleBoost =\n    interpolate(flyT, [0, 1], [0.92, 1.04]) * (1 - outroT) + outroT * 0.84;\n\n  // Drop-shadow blur grows when the camera hovers above the cards (tz > 0).\n  const shadowBlur = Math.max(20, 28 + tz * 0.4);\n  const shadowOpacity = 0.35 + Math.max(0, tz / 180) * 0.35;\n\n  return (\n    <AbsoluteFill\n      style={{\n        background,\n        opacity: enter,\n        perspective: 2000,\n        perspectiveOrigin: \"50% 45%\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          transformStyle: \"preserve-3d\",\n          transform: `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(${tz}px) scale(${scaleBoost})`,\n          willChange: \"transform\",\n        }}\n      >\n        {/* Faint border to suggest the app frame */}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 40,\n            borderRadius: 24,\n            border: `1px solid ${accentLavender}1f`,\n            background:\n              \"linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%)\",\n          }}\n        />\n\n        {/* Glass code block on the left */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: 80,\n            top: 110,\n            width: 520,\n            height: 500,\n            transform: \"translateZ(20px)\",\n            filter: `drop-shadow(0 22px ${shadowBlur}px ${accentLavender}${toHex(\n              shadowOpacity,\n            )})`,\n          }}\n        >\n          <FauxCodeBlock accentLavender={accentLavender} accentMint={accentMint} />\n        </div>\n\n        {/* Bento grid on the right */}\n        <div\n          style={{\n            position: \"absolute\",\n            right: 80,\n            top: 110,\n            width: 540,\n            height: 500,\n            transform: \"translateZ(40px)\",\n            filter: `drop-shadow(0 22px ${shadowBlur}px ${accentPeach}${toHex(\n              shadowOpacity,\n            )})`,\n          }}\n        >\n          <FauxBentoGrid\n            accentPeach={accentPeach}\n            accentLavender={accentLavender}\n            accentMint={accentMint}\n            speed={speed}\n          />\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n\nfunction FauxCodeBlock({\n  accentLavender,\n  accentMint,\n}: {\n  accentLavender: string;\n  accentMint: string;\n}) {\n  const frame = useCurrentFrame();\n  const lines = [\n    { t: \"import { Trailer } from 'remocn'\", c: \"#c4b5fd\" },\n    { t: \"\", c: \"\" },\n    { t: \"export const Scene = () => (\", c: \"#e4e4e7\" },\n    { t: \"  <Trailer\", c: \"#e4e4e7\" },\n    { t: `    label=\"v1.0\"`, c: \"#86efac\" },\n    { t: `    accent=\"lavender\"`, c: \"#fcd34d\" },\n    { t: \"  />\", c: \"#e4e4e7\" },\n    { t: \")\", c: \"#e4e4e7\" },\n  ];\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        borderRadius: 20,\n        background: \"rgba(20,19,24,0.78)\",\n        backdropFilter: \"blur(18px)\",\n        WebkitBackdropFilter: \"blur(18px)\",\n        border: `1px solid ${accentLavender}33`,\n        overflow: \"hidden\",\n        fontFamily: MONO_FAMILY,\n      }}\n    >\n      {/* Title bar */}\n      <div\n        style={{\n          height: 38,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 8,\n          padding: \"0 16px\",\n          borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n        }}\n      >\n        {[\"#FFB38E\", \"#FCD34D\", accentMint].map((c) => (\n          <div\n            key={c}\n            style={{\n              width: 10,\n              height: 10,\n              borderRadius: \"50%\",\n              background: c,\n              opacity: 0.85,\n            }}\n          />\n        ))}\n        <span\n          style={{\n            marginLeft: 12,\n            color: \"rgba(255,255,255,0.45)\",\n            fontSize: 12,\n          }}\n        >\n          scene.tsx\n        </span>\n      </div>\n\n      {/* Code lines, staggered in */}\n      <div style={{ padding: \"20px 22px\", display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n        {lines.map((line, i) => {\n          const local = frame - 14 - i * 5;\n          const o = interpolate(local, [0, 10], [0, 1], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n          });\n          const x = interpolate(local, [0, 10], [12, 0], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n          });\n          return (\n            <div\n              key={i}\n              style={{\n                display: \"flex\",\n                gap: 14,\n                opacity: o,\n                transform: `translateX(${x}px)`,\n                fontSize: 15,\n                lineHeight: \"22px\",\n              }}\n            >\n              <span style={{ color: \"#3f3f46\", width: 18, textAlign: \"right\" }}>\n                {i + 1}\n              </span>\n              <span style={{ color: line.c || \"#e4e4e7\", whiteSpace: \"pre\" }}>\n                {line.t || \" \"}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction FauxBentoGrid({\n  accentPeach,\n  accentLavender,\n  accentMint,\n  speed,\n}: {\n  accentPeach: string;\n  accentLavender: string;\n  accentMint: string;\n  speed: number;\n}) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const cards: Array<{ title: string; body: string; tint: string; span: 1 | 2 }> = [\n    { title: \"Animations\", body: \"Spring-tuned\", tint: accentLavender, span: 2 },\n    { title: \"Transitions\", body: \"Cinematic\", tint: accentPeach, span: 1 },\n    { title: \"Backgrounds\", body: \"Volumetric\", tint: accentMint, span: 1 },\n    { title: \"Compositions\", body: \"Production-ready\", tint: accentLavender, span: 2 },\n  ];\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"grid\",\n        gridTemplateColumns: \"1fr 1fr\",\n        gap: 16,\n      }}\n    >\n      {cards.map((c, i) => {\n        const progress = spring({\n          frame: frame - 30 - i * 8,\n          fps,\n          config: { damping: 14, stiffness: 110, mass: 0.7 },\n          durationInFrames: 28,\n        });\n        return (\n          <div\n            key={c.title}\n            style={{\n              gridColumn: c.span === 2 ? \"span 2\" : \"span 1\",\n              minHeight: 110,\n              padding: 22,\n              borderRadius: 18,\n              background:\n                \"linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)\",\n              border: `1px solid ${c.tint}33`,\n              boxShadow: `inset 0 1px 0 rgba(255,255,255,0.06)`,\n              opacity: progress,\n              transform: `translateY(${(1 - progress) * 18}px) scale(${\n                0.92 + progress * 0.08\n              })`,\n              transformOrigin: \"center\",\n              willChange: \"transform, opacity\",\n              display: \"flex\",\n              flexDirection: \"column\",\n              justifyContent: \"flex-end\",\n            }}\n          >\n            <div\n              style={{\n                color: \"white\",\n                fontFamily: FONT_FAMILY,\n                fontSize: 22,\n                fontWeight: 600,\n                letterSpacing: \"-0.02em\",\n              }}\n            >\n              {c.title}\n            </div>\n            <div\n              style={{\n                color: `${c.tint}cc`,\n                fontFamily: FONT_FAMILY,\n                fontSize: 13,\n                marginTop: 2,\n              }}\n            >\n              {c.body}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                  Phase 3                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction Outro({\n  versionLabel,\n  accentMint,\n  accentPeach,\n  accentLavender,\n  speed,\n}: {\n  versionLabel: string;\n  accentMint: string;\n  accentPeach: string;\n  accentLavender: string;\n  speed: number;\n}) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // Heading drops in with a soft spring.\n  const drop = spring({\n    frame: frame - 6,\n    fps,\n    config: { damping: 14, stiffness: 110, mass: 0.7 },\n    durationInFrames: 28,\n  });\n  const headingY = interpolate(drop, [0, 1], [-40, 0]);\n  const headingOpacity = interpolate(drop, [0, 1], [0, 1]);\n\n  // Confetti — lightweight inline burst (no SuccessConfetti import to avoid\n  // its full-frame background).\n  const particles = Array.from({ length: 70 }, (_, i) => {\n    const angle = random(`pl:${i}:a`) * Math.PI * 2;\n    const v = 9 + random(`pl:${i}:v`) * 9;\n    const sz = 5 + random(`pl:${i}:s`) * 7;\n    const f = Math.max(0, frame - 14 - Math.floor(random(`pl:${i}:d`) * 6));\n    const cx = 640 + Math.cos(angle) * v * f;\n    const cy = 280 + Math.sin(angle) * v * f + 0.4 * f * f;\n    const colors = [accentMint, accentPeach, accentLavender, \"#FCD34D\"];\n    const color = colors[Math.floor(random(`pl:${i}:c`) * colors.length)];\n    const opacity = interpolate(f, [0, 4, 38, 50], [0, 1, 1, 0], {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    });\n    return { cx, cy, sz, color, opacity, key: i };\n  });\n\n  return (\n    <AbsoluteFill style={{ pointerEvents: \"none\" }}>\n      {/* Confetti layer */}\n      <svg\n        width={1280}\n        height={720}\n        viewBox=\"0 0 1280 720\"\n        style={{ position: \"absolute\", inset: 0 }}\n      >\n        {particles.map((p) => (\n          <rect\n            key={p.key}\n            x={p.cx - p.sz / 2}\n            y={p.cy - p.sz / 2}\n            width={p.sz}\n            height={p.sz * 0.55}\n            rx={1}\n            fill={p.color}\n            opacity={p.opacity}\n          />\n        ))}\n      </svg>\n\n      {/* Heading */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          right: 0,\n          top: 240,\n          textAlign: \"center\",\n          transform: `translateY(${headingY}px)`,\n          opacity: headingOpacity,\n          willChange: \"transform, opacity\",\n        }}\n      >\n        <div\n          style={{\n            fontFamily: FONT_FAMILY,\n            fontSize: 96,\n            fontWeight: 700,\n            letterSpacing: \"-0.04em\",\n            color: \"white\",\n            textShadow: `0 0 60px ${accentMint}55`,\n          }}\n        >\n          {versionLabel}\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                  Helpers                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction toHex(alpha: number) {\n  const clamped = Math.max(0, Math.min(1, alpha));\n  return Math.round(clamped * 255)\n    .toString(16)\n    .padStart(2, \"0\");\n}\n",
      "type": "registry:component",
      "target": "components/remocn/product-launch-trailer.tsx"
    }
  ],
  "type": "registry:component"
}