{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-hover-expand",
  "type": "registry:block",
  "title": "Blog Hover Expand",
  "description": "A three-post blog row where the hovered card grows wider, its photo scales and tilts, and the title draws an underline. Pure CSS.",
  "dependencies": [],
  "registryDependencies": [],
  "cssVars": {
    "theme": {}
  },
  "files": [
    {
      "path": "components/tweenui/blog-hover-expand.tsx",
      "type": "registry:component",
      "target": "components/tweenui/blog-hover-expand.tsx",
      "content": "'use client';\n\nimport { useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface BlogHoverExpandPost {\n  /** Post title. */\n  title: string;\n  /** Display date. */\n  date: string;\n  /** Tags shown as pills. */\n  tags: string[];\n  /** Cover image URL. */\n  image: string;\n  /** Alt text for the cover. */\n  imageAlt: string;\n  /** Link target for the card. */\n  href: string;\n}\n\nexport interface BlogHoverExpandProps extends Omit<ComponentPropsWithoutRef<'section'>, 'title'> {\n  /** Section heading. */\n  title?: ReactNode;\n  /** Supporting line under the heading. */\n  description?: string;\n  /** Posts shown in the row. Defaults to a 3-post sample. */\n  posts?: BlogHoverExpandPost[];\n}\n\nconst DEFAULT_TITLE = \"Learn what's working now in motion\";\n\nconst DEFAULT_POSTS: BlogHoverExpandPost[] = [\n  {\n    title: 'How to brief an AI creative team in one page',\n    date: 'March 12, 2026',\n    tags: ['Ads', 'Creative'],\n    image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',\n    imageAlt: 'Team reviewing a campaign brief',\n    href: '#',\n  },\n  {\n    title: 'SEO playbooks that still work with AI search',\n    date: 'March 4, 2026',\n    tags: ['SEO', 'Content'],\n    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop',\n    imageAlt: 'Analytics dashboard for SEO',\n    href: '#',\n  },\n  {\n    title: 'Funnel automation without losing the human tone',\n    date: 'February 21, 2026',\n    tags: ['Funnels', 'Automation'],\n    image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop',\n    imageAlt: 'Team collaborating on a funnel',\n    href: '#',\n  },\n];\n\nexport default function BlogHoverExpand({\n  title = DEFAULT_TITLE,\n  description = 'Playbooks, trends, and real tactics for ads, SEO, funnels, and automation—built for growth-focused teams.',\n  posts = DEFAULT_POSTS,\n  className,\n  ...props\n}: BlogHoverExpandProps) {\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  return (\n    <section\n      data-blog-hover-expand\n      data-active-post={activeIndex}\n      className={cn('w-full py-14 md:py-20', className)}\n      {...props}\n    >\n      <div className=\"mx-auto w-full max-w-[1100px] space-y-10 px-4 md:space-y-12\">\n        <div className=\"space-y-3 text-center\">\n          <h2 className=\"text-2xl leading-[1.15] font-normal tracking-tight text-[#12161F] md:text-3xl lg:text-4xl dark:text-white\">\n            {title}\n          </h2>\n          <p className=\"mx-auto max-w-[520px] text-sm leading-relaxed text-[#045f64]/70 dark:text-[#9fd4d6]/80\">\n            {description}\n          </p>\n        </div>\n\n        <div className=\"flex flex-col items-stretch justify-center gap-8 lg:flex-row lg:gap-[30px]\">\n          {posts.map((post, index) => {\n            const active = activeIndex === index;\n\n            return (\n              <article\n                key={post.href + post.title}\n                data-blog-card\n                data-active={active ? 'true' : undefined}\n                onMouseEnter={() => setActiveIndex(index)}\n                onFocusCapture={() => setActiveIndex(index)}\n                className={cn(\n                  'underline-hover-effect-black group w-full space-y-4 transition-[width] duration-700 ease-in-out motion-reduce:transition-none lg:w-[260px]',\n                  active && 'lg:w-[420px]'\n                )}\n              >\n                <a href={post.href} className=\"block outline-none\">\n                  <figure className=\"h-56 w-full overflow-hidden rounded-lg md:h-64\">\n                    <img\n                      src={post.image}\n                      alt={post.imageAlt}\n                      className=\"size-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-hover:rotate-2 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-hover:rotate-0\"\n                    />\n                  </figure>\n                </a>\n                <div className=\"space-y-3 px-1\">\n                  <p className=\"text-xs text-[#12161F]/70 dark:text-white/60\">{post.date}</p>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {post.tags.map((tag) => (\n                      <span\n                        key={tag}\n                        className=\"rounded-full bg-[#045f64]/10 px-3 py-1 text-[11px] text-[#045f64]/70 dark:bg-[#045f64]/20 dark:text-[#9fd4d6]/80\"\n                      >\n                        {tag}\n                      </span>\n                    ))}\n                  </div>\n                  <a href={post.href} className=\"blog-title-black no-underline\">\n                    <h3 className=\"inline w-full cursor-pointer bg-[linear-gradient(transparent_calc(100%-1px),currentColor_1px)] bg-size-[0%_100%] bg-no-repeat pb-px text-lg font-normal text-[#12161F] transition-all duration-500 ease-[cubic-bezier(0.645,0.045,0.355,1)] group-hover:bg-size-[100%_100%] motion-reduce:transition-none dark:text-white\">\n                      {post.title}\n                    </h3>\n                  </a>\n                </div>\n              </article>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    }
  ],
  "docs": "Docs, props and examples: https://tween-ui.vercel.app/block/blog-hover-expand\nThe sample content loads images from images.unsplash.com. Replace them with your own before shipping."
}