{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "testimonial-marquee-scroll",
  "title": "Testimonial — Marquee Scroll",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/testimonial-marquee-scroll/testimonial-marquee-scroll.component.ts",
      "content": "// Two counter-scrolling marquee rows of quote cards that pause on hover and stop\n// entirely under reduced-motion, with edge masks fading the cards into the page.\n// Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\ninterface MarqueeQuote {\n  quote: string\n  author: string\n  role: string\n  initials: string\n}\n\nconst quotes: MarqueeQuote[] = [\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\n// Keyframes and the edge mask cannot be expressed as utilities; everything else\n// stays in the template. Matches the approach in logo-ticker-infinite.\nconst MARQUEE_STYLES = `\n@keyframes marquee-scroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n[data-slot=\"testimonial-marquee-scroll\"] .marquee {\n  mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n}\n[data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow: hidden; }\n[data-slot=\"testimonial-marquee-scroll\"] .marquee__track {\n  display: flex;\n  width: max-content;\n  gap: 1rem;\n  animation: marquee-scroll 46s linear infinite;\n}\n[data-slot=\"testimonial-marquee-scroll\"] .marquee__track--reverse { animation-direction: reverse; }\n[data-slot=\"testimonial-marquee-scroll\"] .marquee__row:hover .marquee__track { animation-play-state: paused; }\n@media (prefers-reduced-motion: reduce) {\n  [data-slot=\"testimonial-marquee-scroll\"] .marquee__track { animation: none; }\n  [data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow-x: auto; }\n}\n`\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-testimonial-marquee-scroll, [ui-testimonial-marquee-scroll]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [UiAvatarComponent, UiAvatarFallbackComponent, UiBadgeComponent, UiCardComponent, UiCardContentComponent],\n  styles: [MARQUEE_STYLES],\n  template: `\n    <section data-slot=\"testimonial-marquee-scroll\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">What people say</span>\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      <!-- Edge masks fade the rows into the page so cards never end mid-cut. -->\n      <div class=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n        @for (row of rows; track $index; let index = $index) {\n          <div class=\"marquee__row\">\n            <div class=\"marquee__track\" [class.marquee__track--reverse]=\"index === 1\">\n              <!-- Duplicated once so the loop has an identical second half to scroll into. -->\n              @for (entry of doubled(row); track entry.author + '-' + $index) {\n                <div ui-card class=\"w-80 shrink-0\">\n                  <div ui-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                      <ui-avatar class=\"size-8\">\n                        <ui-avatar-fallback class=\"text-xs\">{{ entry.initials }}</ui-avatar-fallback>\n                      </ui-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                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n  `,\n})\nexport class UiTestimonialMarqueeScrollComponent {\n  protected readonly rows: MarqueeQuote[][] = [quotes.slice(0, 4), quotes.slice(4)]\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background overflow-hidden', this.className)\n  }\n\n  doubled(row: MarqueeQuote[]): MarqueeQuote[] {\n    return [...row, ...row]\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/testimonial-marquee-scroll/testimonial-marquee-scroll.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/testimonial-marquee-scroll/index.ts",
      "content": "export { UiTestimonialMarqueeScrollComponent } from './testimonial-marquee-scroll.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/testimonial-marquee-scroll/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "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"
}