TestimonialMarquee

Inhalt

Kundenstimmen in einer nahtlosen Endlosschleife. Die Ränder blenden weich aus (mask-image), bei Hover pausiert die Animation, bei prefers-reduced-motion wird stattdessen gescrollt.

Live Demo

„Beste Pizza in der Region! Der Steinofen macht den Unterschied.“

Sandra K.

Google-Bewertung

„Toller Service, faire Preise und super freundliches Team.“

Michael B.

Google-Bewertung

„Wir feiern jedes Familienfest hier. Immer wieder ein Erlebnis!“

Familie Wagner

Stammgäste

„Die vegane Auswahl ist klasse — endlich mal mehr als nur Salat.“

Lisa M.

Google-Bewertung

„Schnelle Lieferung, Pizza kam noch heiß an. Gerne wieder!“

Tobias R.

Lieferando-Bewertung

„Schnelle Lieferung, Pizza kam noch heiß an. Gerne wieder!“

Tobias R.

Lieferando-Bewertung

„Die vegane Auswahl ist klasse — endlich mal mehr als nur Salat.“

Lisa M.

Google-Bewertung

„Wir feiern jedes Familienfest hier. Immer wieder ein Erlebnis!“

Familie Wagner

Stammgäste

„Toller Service, faire Preise und super freundliches Team.“

Michael B.

Google-Bewertung

„Beste Pizza in der Region! Der Steinofen macht den Unterschied.“

Sandra K.

Google-Bewertung

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`testimonials`	`MarqueeTestimonial[]`	Ja	—	Kundenstimmen {quote, name, role?, avatar?, rating?}
`speed`	`number`	Nein	`40`	Sekunden für einen kompletten Durchlauf
`direction`	`'left' \| 'right'`	Nein	`'left'`	Laufrichtung
`pauseOnHover`	`boolean`	Nein	`true`	Bei Hover pausieren
`theme`	`'light' \| 'dark'`	Nein	`'light'`	Farbschema
`starColor`	`string`	Nein	`'#f59e0b'`	Farbe der Bewertungssterne
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<TestimonialMarquee
  speed={35}
  testimonials={[
    { quote: 'Beste Pizza in der Region!', name: 'Sandra K.', role: 'Google-Bewertung', rating: 5 },
    { quote: 'Toller Service, sehr zu empfehlen.', name: 'Michael B.', role: 'Google-Bewertung', rating: 5 },
  ]}
/>