{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-feature-showcase",
  "type": "registry:ui",
  "title": "Split Feature Showcase",
  "description": "Scroll-triggered bento grid with spring-animated message preview and integration cards with ambient gradient glow.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/split-feature-showcase.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════════════════\n   Split Feature Showcase — Rauno-minimal.\n\n   Two cells in a sharp-cornered container, no border chrome:\n     Left:  Conversation thread (sender + reply bubbles, online pulse)\n     Right: Bare text list — even hierarchy, subtle stagger animation\n\n   Dependencies: motion.\n   ═══════════════════════════════════════════════════════════ */\n\nconst S = { type: \"spring\" as const, stiffness: 300, damping: 28 };\nconst S_SNAP = { type: \"spring\" as const, stiffness: 440, damping: 26 };\nconst S_SOFT = { type: \"spring\" as const, stiffness: 260, damping: 24 };\nconst S_MICRO = { type: \"spring\" as const, stiffness: 500, damping: 30 };\n\nexport interface SplitFeatureShowcaseProps {\n  leftTitle?: string;\n  leftDescription?: string;\n  rightTitle?: string;\n  rightDescription?: string;\n  className?: string;\n}\n\nconst WORKFLOW_ITEMS = [\n  \"Alerts\",\n  \"Lead routing\",\n  \"Re-engage cold leads\",\n  \"New Deal email campaign flow\",\n  \"Lead form submissions\",\n  \"Health scoring\",\n  \"Upsell\",\n];\n\nexport function SplitFeatureShowcase({\n  leftTitle = \"Conversations that convert.\",\n  leftDescription = \"Collaborate in real time with threaded messages, presence indicators, and instant reactions every exchange captured in context.\",\n  rightTitle = \"Automate your entire pipeline.\",\n  rightDescription = \"From lead capture to customer success, every workflow runs on autopilot, so your team can focus on closing deals.\",\n  className,\n}: SplitFeatureShowcaseProps) {\n  return (\n    <section className={cn(\"\", className)}>\n      <div className=\"mx-auto w-full max-w-5xl px-6\">\n        <div className=\"relative grid overflow-hidden bg-card/50 divide-y divide-border/40 md:grid-cols-2 md:divide-x md:divide-y-0\">\n          {/* ── Left cell ──────────────────────────────────── */}\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...S, delay: 0 }}\n            className=\"row-span-2 grid grid-rows-subgrid gap-8 p-8\"\n          >\n            <div className=\"mx-auto max-w-xs self-center\">\n              <div aria-hidden=\"true\" className=\"space-y-3\">\n                <motion.div\n                  initial={{ opacity: 0, scale: 0.6 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  transition={{ ...S_SNAP, delay: 0.2 }}\n                  className=\"flex items-center gap-2\"\n                >\n                  <div className=\"relative\">\n                    <img\n                      src=\"/avatar-images/avatar-01.jpg\"\n                      alt=\"\"\n                      className=\"size-7 shrink-0 rounded-full object-cover ring-2 ring-background\"\n                    />\n                    <span className=\"absolute -bottom-0.5 -right-0.5 block size-2 rounded-full bg-foreground/40 ring-2 ring-background\" />\n                  </div>\n                  <span className=\"text-[13px] font-medium tracking-tight\">\n                    Irung\n                  </span>\n                  <span className=\"text-muted-foreground/60 text-[10px]\">\n                    2m ago\n                  </span>\n                </motion.div>\n\n                <motion.div\n                  initial={{ opacity: 0, x: -16 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ ...S_SOFT, delay: 0.35 }}\n                  whileHover={{ scale: 1.02, y: -1, transition: S_MICRO }}\n                  className=\"relative ml-9 w-fit\"\n                >\n                  <div className=\"cursor-default rounded-2xl rounded-tl-[4px] bg-muted px-3.5 py-2 text-[13px] leading-relaxed shadow-sm shadow-black/5 ring-1 ring-border/60\">\n                    Hey{\" \"}\n                    <span className=\"font-medium text-foreground\">\n                      @bernard\n                    </span>\n                    , I&apos;ve updated the dashboard metrics.\n                  </div>\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    transition={{ ...S_SNAP, delay: 0.75 }}\n                    className=\"absolute -bottom-2 right-3 flex h-[22px] items-center rounded-full bg-card px-1.5 text-[10px] shadow-sm shadow-black/5 ring-1 ring-border/40\"\n                  >\n                    🔥\n                  </motion.div>\n                </motion.div>\n\n                <div className=\"flex items-end justify-end gap-2 pt-1\">\n                  <motion.div\n                    initial={{ opacity: 0, x: 16 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ ...S_SOFT, delay: 0.55 }}\n                    whileHover={{ scale: 1.02, y: -1, transition: S_MICRO }}\n                    className=\"w-fit cursor-default rounded-2xl rounded-tr-[4px] bg-foreground px-3.5 py-2 text-[13px] leading-relaxed text-background shadow-sm shadow-black/10\"\n                  >\n                    The conversion rate looks great\n                  </motion.div>\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.6 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    transition={{ ...S_SNAP, delay: 0.5 }}\n                    className=\"shrink-0\"\n                  >\n                    <img\n                      src=\"/avatar-images/avatar-02.jpg\"\n                      alt=\"\"\n                      className=\"size-7 rounded-full object-cover ring-2 ring-background\"\n                    />\n                  </motion.div>\n                </div>\n\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: 0.3, delay: 0.7 }}\n                  className=\"flex items-center justify-end gap-1 pr-9\"\n                >\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    className=\"size-3 text-foreground/40\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={2.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  >\n                    <path d=\"M20 6 9 17l-5-5\" />\n                  </svg>\n                  <span className=\"text-[10px] text-muted-foreground/50\">\n                    Read\n                  </span>\n                </motion.div>\n\n                <motion.div\n                  initial={{ opacity: 0, y: 6 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ ...S_SOFT, delay: 0.9 }}\n                  className=\"ml-9 w-fit\"\n                >\n                  <div className=\"flex items-center gap-[3px] rounded-2xl rounded-tl-[4px] bg-muted px-3 py-2.5 shadow-sm shadow-black/5 ring-1 ring-border/60\">\n                    <span\n                      className=\"block size-[5px] rounded-full bg-foreground/25\"\n                      style={{\n                        animation: \"bentoTypingDot 1.4s ease-in-out infinite\",\n                      }}\n                    />\n                    <span\n                      className=\"block size-[5px] rounded-full bg-foreground/25\"\n                      style={{\n                        animation:\n                          \"bentoTypingDot 1.4s ease-in-out 0.15s infinite\",\n                      }}\n                    />\n                    <span\n                      className=\"block size-[5px] rounded-full bg-foreground/25\"\n                      style={{\n                        animation:\n                          \"bentoTypingDot 1.4s ease-in-out 0.3s infinite\",\n                      }}\n                    />\n                  </div>\n                </motion.div>\n              </div>\n            </div>\n\n            <motion.div\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...S, delay: 0.5 }}\n              className=\"mx-auto max-w-sm text-center\"\n            >\n              <p className=\"text-base leading-relaxed text-balance\">\n                <strong className=\"font-semibold text-foreground\">\n                  {leftTitle}\n                </strong>{\" \"}\n                <span className=\"text-muted-foreground\">{leftDescription}</span>\n              </p>\n            </motion.div>\n          </motion.div>\n\n          {/* ── Right cell: Bare text, even hierarchy ──────── */}\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...S, delay: 0.12 }}\n            className=\"row-span-2 grid grid-rows-subgrid gap-8 p-8\"\n          >\n            <div className=\"flex items-center justify-center self-center\">\n              <div\n                aria-hidden=\"true\"\n                className=\"flex flex-col items-center gap-3\"\n              >\n                {WORKFLOW_ITEMS.map((label, i) => {\n                  const center = Math.floor(WORKFLOW_ITEMS.length / 2);\n                  const dist = Math.abs(i - center);\n\n                  return (\n                    <motion.span\n                      key={label}\n                      initial={{ opacity: 0, y: 6, filter: \"blur(4px)\" }}\n                      animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n                      transition={{\n                        ...S_SOFT,\n                        delay: 0.2 + i * 0.07,\n                      }}\n                      className={cn(\n                        \"block text-[15px] tracking-tight transition-opacity duration-300\",\n                        dist === 0\n                          ? \"font-medium text-foreground\"\n                          : dist === 1\n                            ? \"text-foreground/70\"\n                            : dist === 2\n                              ? \"text-foreground/45\"\n                              : \"text-foreground/25\",\n                      )}\n                    >\n                      {label}\n                    </motion.span>\n                  );\n                })}\n              </div>\n            </div>\n\n            <motion.div\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...S, delay: 0.5 }}\n              className=\"relative z-10 mx-auto max-w-sm text-center\"\n            >\n              <p className=\"text-base leading-relaxed text-balance\">\n                <strong className=\"font-semibold text-foreground\">\n                  {rightTitle}\n                </strong>{\" \"}\n                <span className=\"text-muted-foreground\">\n                  {rightDescription}\n                </span>\n              </p>\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `@keyframes bentoTypingDot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}`,\n        }}\n      />\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/split-feature-showcase.tsx"
    }
  ]
}