{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-bento-motion",
  "type": "registry:component",
  "title": "Feature bento motion",
  "description": "A four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/feature-bento-motion.tsx",
      "type": "registry:ui",
      "target": "components/ui/feature-bento-motion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nconst cells = [\n  { title: \"Realtime\", body: \"Every change syncs across devices in under 100ms.\", span: \"sm:col-span-2\" },\n  { title: \"Secure\", body: \"SSO, audit logs and encryption by default.\", span: \"\" },\n  { title: \"Motion\", body: \"Reduced-motion first.\", span: \"\" },\n  { title: \"Open\", body: \"A typed API and webhooks for everything you see.\", span: \"sm:col-span-2\" },\n]\n\nfunction FeatureBentoMotion({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"feature-bento-motion\" data-tier=\"premium\" className={cn(\"grid gap-3 sm:grid-cols-3\", className)}>\n      {cells.map((c, i) => (\n        <motion.div\n          key={c.title}\n          initial={reduce ? false : { y: 16 }}\n          whileInView={{ y: 0 }}\n          viewport={{ once: true }}\n          transition={{ delay: i * 0.05 }}\n          whileHover={reduce ? undefined : { y: -3 }}\n          className={cn(\n            \"rounded-xl border border-border bg-surface p-5 shadow-highlight\",\n            c.span\n          )}\n        >\n          <div className=\"mb-3 h-px w-8 bg-accent\" aria-hidden />\n          <h3 className=\"text-sm font-medium text-fg\">{c.title}</h3>\n          <p className=\"mt-1.5 text-xs leading-[1.55] text-fg-muted\">{c.body}</p>\n        </motion.div>\n      ))}\n    </div>\n  )\n}\nexport { FeatureBentoMotion }\n"
    }
  ]
}