{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "testimonial-marquee-scroll",
  "title": "Testimonial — Marquee Scroll",
  "type": "registry:block",
  "description": "Two counter-scrolling marquee rows of quote cards that pause on hover and stop entirely under reduced-motion, with edge masks fading the cards into the page.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "testimonial",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/testimonial-marquee-scroll/testimonial-marquee-scroll.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/badge/badge'\nimport '../../components/card/card'\n\nconst quotes = [\n  { quote: 'Close starts from a reconciled position now.', author: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n  {\n    quote: 'The request queue went away and stayed away.',\n    author: 'Daniel Brooks',\n    role: 'Head of Analytics',\n    initials: 'DB',\n  },\n  {\n    quote: 'One pipeline definition, two teams, no argument.',\n    author: 'Priya Raman',\n    role: 'RevOps Director',\n    initials: 'PR',\n  },\n  {\n    quote: 'We deleted eleven spreadsheets in one quarter.',\n    author: 'Marcus Ellery',\n    role: 'Staff Engineer',\n    initials: 'ME',\n  },\n  {\n    quote: 'Auditors get a change log instead of a folder.',\n    author: 'Sophie Lindqvist',\n    role: 'Controller',\n    initials: 'SL',\n  },\n  { quote: 'Permissions finally match the org chart.', author: 'Tom Fairbanks', role: 'IT Director', initials: 'TF' },\n  {\n    quote: 'Nobody has written a bespoke extract since March.',\n    author: 'Anna Reyes',\n    role: 'Data Lead',\n    initials: 'AR',\n  },\n  { quote: 'Forecast review is about the forecast again.', author: 'Grace Whitlock', role: 'CFO', initials: 'GW' },\n]\n\nconst rows = [quotes.slice(0, 4), quotes.slice(4)]\n\n/**\n * <uip-testimonial-marquee-scroll> — the registry TestimonialMarqueeScroll\n * block as a web component.\n *\n * Class strings and copy are React's TestimonialMarqueeScroll verbatim; the\n * track duplicates its children to loop seamlessly, exactly like React.\n * React's injected <style> keyframes and edge mask are copied into static\n * styles — the one allowed CSS exception besides the :host one-liner.\n */\nexport class UipTestimonialMarqueeScroll extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  static styles = [\n    tailwind,\n    // React-injected keyframes, copied verbatim (scoped to this shadow root).\n    css`\n      :host {\n        display: block;\n      }\n      @keyframes marquee-scroll {\n        0% {\n          transform: translateX(0);\n        }\n        100% {\n          transform: translateX(-50%);\n        }\n      }\n      .marquee {\n        mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n      }\n      .marquee__row {\n        overflow: hidden;\n      }\n      .marquee__track {\n        display: flex;\n        width: max-content;\n        gap: 1rem;\n        animation: marquee-scroll 46s linear infinite;\n      }\n      .marquee__track--reverse {\n        animation-direction: reverse;\n      }\n      .marquee__row:hover .marquee__track {\n        animation-play-state: paused;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .marquee__track {\n          animation: none;\n        }\n        .marquee__row {\n          overflow-x: auto;\n        }\n      }\n    `,\n  ]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'testimonial-marquee-scroll')\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"testimonial-marquee-scroll\" class=\"bg-background overflow-hidden\">\n        <div class=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n          <div class=\"max-w-2xl\">\n            <uip-badge variant=\"secondary\">What people say</uip-badge>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Eight hundred teams, unprompted</h2>\n          </div>\n        </div>\n\n        <div class=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n          ${rows.map(\n            (row, index) => html`\n              <div class=\"marquee__row\">\n                <div class=${`marquee__track ${index === 1 ? 'marquee__track--reverse' : ''}`}>\n                  ${[...row, ...row].map(\n                    (entry) => html`\n                      <uip-card class=\"w-80 shrink-0\">\n                        <uip-card-content class=\"p-5\">\n                          <blockquote class=\"text-sm leading-relaxed\">“${entry.quote}”</blockquote>\n                          <div class=\"mt-4 flex items-center gap-3\">\n                            <uip-avatar class=\"[&::part(base)]:size-8\">\n                              <uip-avatar-fallback class=\"[&::part(base)]:text-xs\">\n                                ${entry.initials}\n                              </uip-avatar-fallback>\n                            </uip-avatar>\n                            <div class=\"min-w-0\">\n                              <p class=\"truncate text-xs font-medium\">${entry.author}</p>\n                              <p class=\"text-muted-foreground truncate text-xs\">${entry.role}</p>\n                            </div>\n                          </div>\n                        </uip-card-content>\n                      </uip-card>\n                    `,\n                  )}\n                </div>\n              </div>\n            `,\n          )}\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-testimonial-marquee-scroll') ||\n  customElements.define('uip-testimonial-marquee-scroll', UipTestimonialMarqueeScroll)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-testimonial-marquee-scroll': UipTestimonialMarqueeScroll\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/testimonial-marquee-scroll/testimonial-marquee-scroll.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}