{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-feature-row",
  "type": "registry:component",
  "title": "Animated feature row",
  "description": "A row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/animated-feature-row.tsx",
      "type": "registry:ui",
      "target": "components/ui/animated-feature-row.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Feature = { title: string; description: string }\n\ntype AnimatedFeatureRowProps = {\n  features?: Feature[]\n  className?: string\n}\n\nconst SAMPLE_FEATURES: Feature[] = [\n  {\n    title: \"Invoices that chase themselves\",\n    description: \"Lumen sends reminders on a schedule you set, pauses them the moment a payment lands, and logs every touch.\",\n  },\n  {\n    title: \"One ledger, every currency\",\n    description: \"Bill Northwind in euros and report in dollars. Rates lock at issue time, so month end always reconciles.\",\n  },\n  {\n    title: \"Approvals in the flow\",\n    description: \"Refunds and credits route to the right person automatically, with a full audit trail on each decision.\",\n  },\n]\n\n/** Three feature cards that rise into view one after another as the row scrolls on screen. */\nfunction AnimatedFeatureRow({ features = SAMPLE_FEATURES, className }: AnimatedFeatureRowProps) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"animated-feature-row\" data-tier=\"premium\" className={cn(\"grid w-full gap-4 md:grid-cols-3\", className)}>\n      {features.map((f, i) => (\n        <motion.div\n          key={f.title}\n          initial={reduce ? false : { y: 16 }}\n          whileInView={{ y: 0 }}\n          viewport={{ once: true }}\n          transition={{ delay: i * 0.06, duration: 0.45 }}\n          className=\"rounded-xl border border-border bg-surface p-5 shadow-highlight\"\n        >\n          <div className=\"mb-3 h-px w-8 bg-accent\" aria-hidden />\n          <h3 className=\"text-sm font-medium text-fg\">{f.title}</h3>\n          <p className=\"mt-2 text-sm leading-[1.55] text-fg-muted\">{f.description}</p>\n        </motion.div>\n      ))}\n    </div>\n  )\n}\nexport { AnimatedFeatureRow }\nexport type { AnimatedFeatureRowProps, Feature as AnimatedFeature }\n"
    }
  ]
}