{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid-block-shadcnui",
  "type": "registry:block",
  "title": "Bento Grid Block",
  "description": "Layered bento grid with imagery, metrics, and smooth motion reveals",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/bento-grid-block.tsx",
      "content": "\"use client\";\n\nimport { motion, type Variants } from \"framer-motion\";\nimport { ArrowUpRight, PlayCircle, Sparkles } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface AvatarProfile {\n  src: string;\n  alt: string;\n}\n\ninterface Metric {\n  label: string;\n  value: string;\n  caption: string;\n}\n\ninterface ProcessStep {\n  label: string;\n  progress: number;\n}\n\ninterface GalleryImage {\n  src: string;\n  alt: string;\n}\n\ninterface ReelStat {\n  label: string;\n}\n\nconst avatarProfiles: AvatarProfile[] = [\n  {\n    src: \"https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=200&h=200&fit=crop&q=80\",\n    alt: \"Portrait of a motion designer smiling at the camera\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=200&h=200&fit=crop&q=80\",\n    alt: \"Portrait of a product strategist in a studio\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1517841905240-472988babdf9?w=200&h=200&fit=crop&q=80\",\n    alt: \"Portrait of a UX researcher wearing headphones\",\n  },\n];\n\nconst keyMetrics: Metric[] = [\n  {\n    label: \"Project satisfaction\",\n    value: \"98%\",\n    caption: \"Last quarter\",\n  },\n  {\n    label: \"Delivery cadence\",\n    value: \"2.4x\",\n    caption: \"Faster\",\n  },\n  {\n    label: \"Retention rate\",\n    value: \"92%\",\n    caption: \"After 6 months\",\n  },\n];\n\nconst motionProcess: ProcessStep[] = [\n  {\n    label: \"Ideate & storyboard\",\n    progress: 82,\n  },\n  {\n    label: \"Motion exploration\",\n    progress: 64,\n  },\n  {\n    label: \"Polish & delivery\",\n    progress: 91,\n  },\n];\n\nconst inspirationGallery: GalleryImage[] = [\n  {\n    src: \"https://images.unsplash.com/photo-1545239351-1141bd82e8a6?w=400&h=320&fit=crop&q=80\",\n    alt: \"Collage of lighting references for motion design\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400&h=320&fit=crop&q=80\",\n    alt: \"Creative workspace with monitors and sketchbook\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1515169067865-5387ec356754?w=400&h=320&fit=crop&q=80\",\n    alt: \"Colorful motion design storyboard pinned to a wall\",\n  },\n  {\n    src: \"https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=400&h=320&fit=crop&q=80\",\n    alt: \"Designer adjusting camera lighting in a studio\",\n  },\n];\n\nconst reelStats: ReelStat[] = [\n  { label: \"3:42 min\" },\n  { label: \"4.2K views\" },\n  { label: \"Dynamic timing curves\" },\n];\n\nconst sectionVariants: Variants = {\n  hidden: { opacity: 0, y: 32 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.6, ease: \"easeOut\" },\n  },\n};\n\nconst cardVariants: Variants = {\n  hidden: { opacity: 0, y: 32 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.6, ease: \"easeOut\" },\n  },\n};\n\nexport function BentoGridBlock() {\n  return (\n    <section className=\"relative w-full overflow-hidden bg-background\">\n      <div className=\"pointer-events-none absolute inset-0 -z-10\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-primary/[0.035] blur-[120px]\" />\n        <div className=\"absolute left-1/4 top-1/2 h-[400px] w-[400px] rounded-full bg-foreground/[0.02] blur-[150px]\" />\n      </div>\n\n      <div className=\"relative mx-auto max-w-7xl px-4 py-16 md:px-6 md:py-24\">\n        <motion.header\n          variants={sectionVariants}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.2 }}\n          className=\"flex flex-col items-center gap-4 text-center\"\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"inline-flex items-center gap-2 rounded-full border-border/50 bg-background/60 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n          >\n            UI TripleD\n            <span\n              className=\"h-2 w-2 rounded-full bg-primary\"\n              aria-hidden=\"true\"\n            />\n          </Badge>\n          <h2 className=\"text-3xl font-semibold tracking-tight text-foreground md:text-4xl lg:text-5xl\">\n            Bento storytelling built for modern motion systems\n          </h2>\n          <p className=\"max-w-2xl text-base text-foreground/70 md:text-lg\">\n            Pair narrative, metrics, and cinematic visuals inside a responsive\n            layout designed around Framer Motion micro-interactions and\n            accessible navigation.\n          </p>\n        </motion.header>\n\n        <motion.div\n          className=\"mt-12 grid auto-rows-[minmax(200px,auto)] gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-4\"\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true, amount: 0.2 }}\n          variants={{\n            hidden: { opacity: 0, y: 24 },\n            visible: {\n              opacity: 1,\n              y: 0,\n              transition: {\n                duration: 0.6,\n                ease: \"easeOut\",\n                staggerChildren: 0.08,\n                delayChildren: 0.12,\n              },\n            },\n          }}\n        >\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group relative col-span-1 flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-border/40 bg-background/70 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:col-span-2 lg:row-span-2\"\n            role=\"article\"\n            aria-label=\"Featured case study\"\n          >\n            <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n            <div className=\"relative flex h-full flex-col justify-between\">\n              <div className=\"space-y-4\">\n                <Badge\n                  variant=\"secondary\"\n                  className=\"w-fit rounded-full border-border/40 bg-background/80 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/70\"\n                >\n                  Featured case study\n                </Badge>\n                <h3 className=\"text-2xl font-semibold leading-tight text-foreground md:text-3xl\">\n                  Designing delightful product experiences\n                </h3>\n                <p className=\"text-sm text-foreground/70 md:text-base\">\n                  We choreograph micro-interactions and depth cues that elevate\n                  usability across every product surface-without sacrificing\n                  performance or accessibility.\n                </p>\n              </div>\n              <div className=\"mt-8 flex items-center justify-between gap-4\">\n                <div\n                  className=\"flex -space-x-3\"\n                  role=\"list\"\n                  aria-label=\"Project team avatars\"\n                >\n                  {avatarProfiles.map((profile) => (\n                    <div\n                      key={profile.src}\n                      role=\"listitem\"\n                      className=\"relative h-11 w-11 overflow-hidden rounded-full border border-border/50 bg-background/80 transition-transform duration-300 group-hover:scale-[1.04]\"\n                    >\n                      <img\n                        src={profile.src}\n                        alt={profile.alt}\n                        className=\"h-full w-full object-cover\"\n                      />\n                    </div>\n                  ))}\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  className=\"group/cta gap-2 rounded-lg bg-background/70 px-4 py-2 text-sm text-foreground hover:bg-background/80\"\n                  aria-label=\"View the featured case study\"\n                >\n                  View story\n                  <ArrowUpRight className=\"h-4 w-4 transition-transform group-hover/cta:translate-x-1\" />\n                </Button>\n              </div>\n            </div>\n          </motion.article>\n\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group col-span-1 flex h-full flex-col rounded-2xl border border-border/40 bg-background/70 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:col-span-2\"\n            role=\"article\"\n            aria-label=\"Key performance metrics\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Badge\n                variant=\"secondary\"\n                className=\"w-fit rounded-full px-3 py-1 text-xs uppercase tracking-[0.2em] text-primary\"\n              >\n                Performance\n              </Badge>\n              <motion.div\n                animate={{ rotate: [0, -6, 0, 6, 0] }}\n                transition={{\n                  repeat: Infinity,\n                  duration: 10,\n                  ease: \"easeInOut\",\n                }}\n              >\n                <Sparkles className=\"h-5 w-5 text-primary\" aria-hidden=\"true\" />\n              </motion.div>\n            </div>\n            <div className=\"mt-6 grid gap-4 sm:grid-cols-3\">\n              {keyMetrics.map((metric) => (\n                <div key={metric.label} className=\"\">\n                  <p className=\"text-xs uppercase tracking-[0.18em] text-foreground/60\">\n                    {metric.label}\n                  </p>\n                  <p className=\"mt-2 text-2xl font-semibold tracking-tight text-foreground md:text-3xl\">\n                    {metric.value}\n                  </p>\n                  <p className=\"mt-1 inline-flex items-center gap-2 px-2 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400\">\n                    {metric.caption}\n                  </p>\n                </div>\n              ))}\n            </div>\n          </motion.article>\n\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group relative col-span-1 overflow-hidden rounded-2xl border border-border/40 bg-background/70 backdrop-blur hover:border-border/60 hover:shadow-lg sm:col-span-2 lg:row-span-3\"\n            role=\"article\"\n            aria-label=\"Behind the scenes studio imagery\"\n          >\n            <div className=\"absolute inset-0\">\n              <img\n                src=\"https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80\"\n                alt=\"Designer workstation lit with cinematic lighting\"\n                className=\"h-full w-full object-cover opacity-80\"\n              />\n              <div className=\"absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent\" />\n            </div>\n            <div className=\"relative flex h-full flex-col justify-end space-y-4 p-6 md:p-8\">\n              <Badge\n                variant=\"outline\"\n                className=\"w-fit rounded-full border-border/60 bg-background/80 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/70\"\n              >\n                Behind the scenes\n              </Badge>\n              <h3 className=\"text-xl font-semibold tracking-tight text-foreground md:text-2xl\">\n                Immersive motion prototypes with cinematic lighting\n              </h3>\n              <p className=\"max-w-sm text-sm text-foreground/70 md:text-base\">\n                Layered light, shadow, and depth cues help teams experience the\n                product as it will ship-well before the first line of production\n                code.\n              </p>\n              <div className=\"flex flex-wrap gap-2 pt-2\">\n                {[\"Micro-interactions\", \"Depth cues\", \"Narrative flow\"].map(\n                  (tag) => (\n                    <span\n                      key={tag}\n                      className=\"rounded-full border border-border/40 bg-background/70 px-3 py-1 text-xs uppercase tracking-[0.18em] text-foreground/60\"\n                    >\n                      {tag}\n                    </span>\n                  )\n                )}\n              </div>\n            </div>\n          </motion.article>\n\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group col-span-1 flex h-full flex-col rounded-2xl border border-border/40 bg-background/70 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:col-span-2 lg:row-span-2\"\n            role=\"article\"\n            aria-label=\"Motion sprint process overview\"\n          >\n            <div className=\"space-y-4\">\n              <Badge\n                variant=\"outline\"\n                className=\"w-fit rounded-full border-primary/50 bg-background/70 px-3 py-1 text-xs uppercase tracking-[0.2em] text-primary\"\n              >\n                Motion sprint\n              </Badge>\n              <h3 className=\"text-xl font-semibold tracking-tight text-foreground md:text-2xl\">\n                From first sketch to polished prototype in seven days\n              </h3>\n              <p className=\"text-sm text-foreground/70 md:text-base\">\n                We compress discovery, exploration, and refinement into a\n                focused week-long sprint so your team can feel the flow of the\n                final experience sooner.\n              </p>\n            </div>\n            <div className=\"mt-6 space-y-4\">\n              {motionProcess.map((step, index) => (\n                <div key={step.label} className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between text-xs uppercase tracking-[0.18em] text-foreground/60\">\n                    <span>{step.label}</span>\n                    <span aria-label={`${step.progress}% complete`}>\n                      {step.progress}%\n                    </span>\n                  </div>\n                  <div className=\"h-2 w-full overflow-hidden rounded-full bg-foreground/10\">\n                    <motion.div\n                      initial={{ width: 0 }}\n                      whileInView={{ width: `${step.progress}%` }}\n                      viewport={{ once: true }}\n                      transition={{\n                        duration: 0.8,\n                        ease: \"easeOut\",\n                        delay: index * 0.1,\n                      }}\n                      className=\"h-full rounded-full bg-primary\"\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n            <Button\n              variant=\"ghost\"\n              className=\"mt-8 w-fit gap-2 px-0 text-sm text-primary hover:text-primary/90\"\n              aria-label=\"Play sprint walkthrough video\"\n            >\n              <PlayCircle className=\"h-4 w-4\" aria-hidden=\"true\" />\n              Play walkthrough\n            </Button>\n          </motion.article>\n\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group col-span-1 flex h-full flex-col overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-br from-primary/15 via-background/70 to-background/90 p-0 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:col-span-2\"\n            role=\"article\"\n            aria-label=\"Motion showcase video\"\n          >\n            <div className=\"relative h-full\">\n              <img\n                src=\"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1200&h=600&fit=crop&q=80\"\n                alt=\"Motion design workspace with monitors\"\n                className=\"absolute inset-0 h-full w-full object-cover opacity-30 transition-opacity duration-500 group-hover:opacity-40\"\n              />\n              <div className=\"relative flex h-full flex-col justify-between bg-gradient-to-br from-background/90 via-background/70 to-transparent p-6 md:p-8\">\n                <div className=\"space-y-4\">\n                  <div className=\"flex items-center gap-3\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"w-fit rounded-full border-border/50 bg-background/70 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/70\"\n                    >\n                      Motion showcase\n                    </Badge>\n                    <motion.div\n                      animate={{ scale: [1, 1.1, 1] }}\n                      transition={{\n                        repeat: Infinity,\n                        duration: 2.4,\n                        ease: \"easeInOut\",\n                      }}\n                      className=\"flex h-9 w-9 items-center justify-center rounded-full bg-primary/20\"\n                    >\n                      <PlayCircle\n                        className=\"h-4 w-4 text-primary\"\n                        aria-hidden=\"true\"\n                      />\n                    </motion.div>\n                  </div>\n                  <h3 className=\"text-xl font-semibold tracking-tight text-foreground md:text-2xl\">\n                    Watch our latest animation breakdown\n                  </h3>\n                  <p className=\"max-w-md text-sm text-foreground/70 md:text-base\">\n                    A three-minute deep dive into timing curves, coordinated\n                    transitions, and how we translate component choreography\n                    into production-ready systems.\n                  </p>\n                </div>\n                <div className=\"flex flex-wrap items-center justify-between gap-3 pt-4 text-xs text-foreground/60\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    {reelStats.map((stat) => (\n                      <span\n                        key={stat.label}\n                        className=\"rounded-full bg-background/80 px-3 py-1 uppercase tracking-[0.18em]\"\n                      >\n                        {stat.label}\n                      </span>\n                    ))}\n                  </div>\n                  <Button size=\"sm\" className=\"gap-2\">\n                    Watch now\n                    <PlayCircle className=\"h-4 w-4\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </motion.article>\n\n          <motion.article\n            variants={cardVariants}\n            whileHover={{ y: -4 }}\n            transition={{ duration: 0.2 }}\n            className=\"group col-span-1 flex h-full flex-col rounded-2xl border border-border/40 bg-background/70 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:col-span-2\"\n            role=\"article\"\n            aria-label=\"Visual research gallery\"\n          >\n            <div className=\"space-y-3\">\n              <Badge\n                variant=\"outline\"\n                className=\"w-fit rounded-full border-border/50 bg-background/70 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/60\"\n              >\n                Visual research\n              </Badge>\n              <h3 className=\"text-lg font-semibold tracking-tight text-foreground md:text-xl\">\n                Capturing texture, light, and pace for new explorations\n              </h3>\n              <p className=\"text-sm text-foreground/70 md:text-base\">\n                A snapshot of the references that steer our motion language and\n                narrative rhythm, curated for both product and marketing\n                surfaces.\n              </p>\n            </div>\n            <div className=\"mt-6 grid grid-cols-2 gap-3\">\n              {inspirationGallery.map((image) => (\n                <div\n                  key={image.src}\n                  className=\"relative aspect-[4/3] overflow-hidden rounded-xl border border-border/30 bg-background/60\"\n                >\n                  <img\n                    src={image.src}\n                    alt={image.alt}\n                    className=\"absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n                  />\n                </div>\n              ))}\n            </div>\n            <Button\n              variant=\"ghost\"\n              className=\"mt-6 w-fit gap-2 px-0 text-sm text-primary hover:text-primary/90\"\n              aria-label=\"Open the visual inspiration archive\"\n            >\n              Open inspiration archive\n              <ArrowUpRight className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </Button>\n          </motion.article>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/bento-grid-block-shadcnui.tsx"
    }
  ]
}