Laufband (Marquee)
Endlos laufendes Band für Logos oder Kurztexte: Richtung und Tempo wählbar, Randabblendung, Pause bei Mauskontakt — hält bei prefers-reduced-motion an
Beispiele
Text-Laufband (Maus darüber pausiert)
Vertrauen uns
Schnell, andere Richtung
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| tone | string: dark | gray | light | "light" | Ton (Theme liefert die Werte) |
| title | string | "" | Überschrift |
| items * | array | — | Einträge |
| direction | string: left | right | "left" | Laufrichtung |
| speed | string: slow | normal | fast | "normal" | Tempo |
| pauseOnHover | boolean | true | Pause bei Mauskontakt |
* Pflicht-Prop
Genutzte Design-Tokens
color.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.text.defaultcolor.text.mutedfont.family.defaultsize.12size.16size.6size.8text.lgtext.smtracking.wide
LLM-Notizen
section.marquee
Endlos laufendes Band für Logos oder Kurztexte (Vertrauens-Leiste, USP-Ticker).
Wichtige Props
items* =[{text}]ODER[{imageUrl, alt}](Logos),tone(dark|gray|light),direction(left|right),speed(slow|normal|fast),pauseOnHover.
Hinweise
- Der Renderer gibt die Einträge ZWEIMAL aus — so schließt sich die Lücke beim Umlauf nahtlos.
- Randabblendung per mask-image; bei
prefers-reduced-motionsteht das Band still und bricht um.