{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "marquee-laufband",
 "name": "Marquee-Laufband (optional scroll-gekoppelt)",
 "name_en": "Scroll-velocity marquee / infinite text ticker / Marquee / ticker band / Scroll-velocity marquee / infinite text on scroll",
 "kurz": "Riesiger Studioname läuft endlos als Band, ein gekippter Leistungsstreifen gegenläufig darunter; Scrollrichtung kehrt beide um, Scrolltempo beschleunigt und neigt sie.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "abklingend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "plakativ",
  "rhythmisch",
  "selbstbewusst",
  "energiegeladen",
  "verspielt",
  "streetwear",
  "energetisch"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "css",
  "vanilla-js",
  "lenis",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "lenis",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Großer Text läuft endlos waagerecht, meist ein Name, Claim oder Leistungen mit Trennzeichen. Zwei identische Kopien stehen nebeneinander. Ist eine Kopie ganz hinausgelaufen (xPercent −100), springt die Spur unsichtbar auf 0 zurück. In der scroll-gekoppelten Form kehrt die Scrollrichtung die Laufrichtung um. Schnelles Scrollen beschleunigt das Band kurz, danach klingt es auf das Grundtempo ab. Optional neigt es sich mit skewX proportional zum Tempo. Häufig laufen zwei Bänder gegenläufig übereinander.",
  "warum_es_wirkt": "Das Band schafft Rhythmus und die Präsenz eines Plakats. Es trennt Sektionen wie ein Laufband. Mit Scroll-Kopplung reagiert die Seite spürbar auf den Nutzer, ohne Inhalte zu verzerren. Das Scrollen wird belohnt.",
  "wann_einsetzen": "Großer Name im Portfolio-Hero, Leistungs-Schlagworte, Kundenlogos, Footer-Statement („Lass uns reden“), Trenner zwischen Sektionen. Passt zu Event- und Kampagnenseiten und zu lauten Marken.",
  "wann_nicht": "Für wichtige Information, denn sie wird nicht vollständig gelesen. Bei ruhigen, luxuriösen Marken. Mehr als ein bis zwei Bänder pro Seite. Als reine Dekoration ohne Inhalt, das gilt 2026 als Template-Klischee.",
  "varianten": [
   "Konstantes CSS-Marquee (@keyframes translateX(0 → −50 %), linear)",
   "Richtungsumkehr nach Scrollrichtung (timeScale ±1)",
   "Tempo-Boost proportional zur Scroll-Velocity, mit Skew",
   "Rein scroll-gekoppelt (x = scrollY × Faktor) ohne Grundlauf",
   "Zwei oder mehr gegenläufige Bänder",
   "Gegenläufige Zeilen ohne Loop (Text-Parallax)",
   "Hover pausiert oder verlangsamt das Band",
   "Logo-Marquee mit Hover-Pause (siehe logo-wand-social-proof)",
   "Vertikaler Ticker",
   "Rundes Marquee, Text im Kreis",
   "Band entlang eines SVG-Pfads",
   "Glühendes SVG-Text-Marquee",
   "Marquee-Menü"
  ],
  "umsetzung": "Inhalt so oft wiederholen, dass eine Kopie breiter ist als der Viewport. Diese Kopie einmal klonen (aria-hidden, inert). Breite erst nach dem Schriftladen messen (document.fonts.ready).\n\nKonstant: Spur per CSS @keyframes translateX(0 → −50 %) linear infinite. Gegenband mit animation-direction: reverse.\n\nScroll-gekoppelt: pro Frame x = wrap(−50, 0, x + richtung × grund × (1 + boost) × dt) und als translate3d setzen. Velocity aus ScrollTrigger.getVelocity(), lenis.velocity oder nativen Scroll-Events. Boost = min(max, |v| × k), mit Lerp auf 0 abklingen lassen. Skew aus der geglätteten Velocity. Alternative mit GSAP: timeScale einer Endlos-Tween anpassen.\n\nFallstricke: Velocity-Spitzen kappen, sonst springt das Band bei Trackpad-Flicks. Ohne aria-hidden liest der Screenreader alles mehrfach. Gegen Subpixel-Ruckeln translate3d und eine eigene Ebene (will-change: transform). Außerhalb des Viewports pausieren (IntersectionObserver).",
  "mobil": "Funktioniert. Touch-Scroll liefert die Velocity über native Scroll-Events. Schriftgröße in vw oder fest groß wählen, damit das Band nicht zu klein wird. Velocity-Kopplung abschwächen.",
  "reduzierte_bewegung": "Band anhalten und als statische Zeile zeigen, Leistungen dürfen umbrechen. Alternativ sehr langsam laufen lassen, dann mit Pause-Möglichkeit.",
  "barrierefreiheit": "Nur eine Kopie ist für Screenreader sichtbar, Klone sind aria-hidden und inert. Fokussierbare Elemente im Band vermeiden oder das Band bei Fokus anhalten. Nach WCAG 2.2.2 braucht Bewegung, die länger als 5 s läuft, eine Pause-Möglichkeit. Inhalte dürfen nicht nur im Band stehen."
 },
 "messwerte": {
  "easing": "linear / ease none",
  "dauer_ms": "18000 (Dennis, Name) / 10000 (Dennis, 2. Band) / 30000 (Lando) pro Durchlauf",
  "stagger_ms": "",
  "distanz": "xPercent −100 % → 0 mit Klon; Kantenmaske 7,5 %",
  "sonstiges": "Richtungswechsel per timeScale an Scrollrichtung gekoppelt (Dennis); animation-play-state paused außerhalb des Viewports (Lando)",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js ; https://www.landonorris.com/",
  "aus_eintrag": [
   "marquee-scroll-velocity"
  ]
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Infinite Text Move On Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/infinite-text-move-on-scroll",
   "auszeichnung": "",
   "beobachtung": "Zwei Textkopien, xPercent-Wrap zwischen −100 und 0, 0,1 % pro Frame, Richtungsumkehr per ScrollTrigger, Slider-Versatz −500px mit scrub 0,5.",
   "art": "artikel",
   "weitere_beobachtung": "Tutorial für endloses Laufband, das auf Scroll reagiert (aus Tutorial-Liste, Inhalt nicht geöffnet)."
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "",
   "beobachtung": "Wiederholte Strings (‚Digital‘, ‚Based in Montreal‘, ‚Pros de l'internet‘) deuten auf Ticker-Bänder hin (abgeleitet, nicht verifiziert).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Motion+ Ticker",
   "url": "https://motion.dev/docs/react-ticker",
   "auszeichnung": "",
   "beobachtung": "Fertige Komponente: klont nur so viele Elemente wie nötig, velocity in px/s, axis x/y, per Motion Value scroll- oder drag-steuerbar, Reduced-Motion- und Fokus-Handling eingebaut.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "index-new.js: roll()-Helfer klont '.big-name .name-wrap' und animiert xPercent endlos (duration 18 s, zweites Band 10 s, ease none); Scrollrichtung kehrt die Laufrichtung per timeScale ±1 um; zusätzlich Locomotive data-scroll-direction='horizontal' data-scroll-speed='4'.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Lando Norris",
   "url": "https://www.landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Inline-CSS: [data-css-marquee-list='left'] animation translateXLeft 30s linear infinite, play-state paused bis sichtbar; Gegenrichtung translateX(100%); Kanten per mask-image linear-gradient (weiß 7,5 %–92,5 %) ausgeblendet.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: Logo-Laufband unter dem Hero (.logo-carousel__marquee-container, overflow hidden, cursor grab = per Drag greifbar), 36 Logo-Items à 172px, viele als Links zu Kundenstories; Item-Opacity .15s linear, Logo-Fill .3s cubic-bezier(.25,1,.5,1). Belegt die Variante ‚Logo-Marquee‘; Details im neuen Muster logo-wand-social-proof.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Infinite Text Move On Scroll (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/infinite-text-move-on-scroll"
  },
  {
   "titel": "Text Parallax (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/text-parallax"
  },
  {
   "titel": "Motion+ Ticker",
   "url": "https://motion.dev/docs/react-ticker"
  },
  {
   "titel": "Codrops Tag ‚marquee‘ (Glowing Text Marquee, K72-Menü)",
   "url": "https://tympanus.net/codrops/tag/marquee/"
  },
  {
   "titel": "Building an Infinite Marquee Along an SVG Path with React & Motion (Codrops)",
   "url": "https://tympanus.net/codrops/2025/06/17/building-an-infinite-marquee-along-an-svg-path-with-react-motion/"
  }
 ],
 "kombinierbar_mit": [
  "scroll-word-highlight",
  "kontextueller-cursor",
  "schrift-hero-viewportbreit",
  "cinematic-video-hero",
  "footer-cta-riesen-wortmarke",
  "testimonials-neu-gedacht",
  "smooth-scroll-lenis",
  "velocity-skew-verzerrung"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "layouts.json",
   "scroll.json",
   "patch-belege-1.json",
   "patch-luecken-a.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: Beide bisher ungeprüften Seiten live verifiziert; Awwwards-Inspiration-Seiten sind keine Produktionsbelege und können nicht geprüft werden.",
   "patch-luecken-a.json: Echter Website-Beleg für das Logo-Laufband ergänzt; Logo-spezifische Aspekte (Raster, Flip-Wechsel, Verlinkung) liegen jetzt im eigenen Muster logo-wand-social-proof – dort verweisen.",
   "02.11.2026: Priorität A → B, Trendstatus etabliert → abklingend (Lückenrecherche K2), weil das eigene wann_nicht nennt das Band 2026 ein Template-Klischee, 7 Rezepte schließen es aus."
  ],
  "zusammengelegt_aus": [
   "marquee-scroll-velocity",
   "marquee-band",
   "geschwindigkeits-marquee"
  ],
  "trendstatus_begruendung": "Konflikt abklingend (layouts) vs. etabliert (schriftanimation, scroll). Aufgelöst zu 'etabliert' für die scroll-gekoppelte Form; das rein dekorative Endlosband ohne Inhalt gilt dagegen als abklingendes Template-Klischee (siehe wann_nicht). 02.11.2026: Priorität A → B, Trendstatus etabliert → abklingend (Lückenrecherche K2), weil das eigene wann_nicht nennt das Band 2026 ein Template-Klischee, 7 Rezepte schließen es aus.",
  "querverweis_kategorien": [
   "Hero & Section-Layouts",
   "Scroll & Section-Animationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Riesiger Studioname läuft endlos als Band, ein gekippter Leistungsstreifen gegenläufig darunter; Scrollrichtung kehrt beide um, Scrolltempo beschleunigt und neigt sie.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (Lauf); Glättung exponentiell: f = 1 − e^(−dt/τ)",
   "spur": "2 identische Kopien, Kopie = Inhaltssatz × n (n so groß, dass Kopie ≥ 1,1 × Viewport); x in % der Spur, wrap(−50, 0)",
   "dauer_ms_konstant": "30000 pro Inhaltssatz (CSS @keyframes translate3d(0 → −50 %), linear infinite; Gegenband animation-direction: reverse)",
   "dauer_ms_js": "18000 pro Inhaltssatz (Namensband), 10000 pro Inhaltssatz (Leistungsband, gegenläufig)",
   "richtungswechsel": "timeScale = Scrollrichtung (±1), Glättung τ 180 ms",
   "velocity": "aus nativen Scroll-Events, px/s, gekappt auf ±3000; ohne neue Events Abfall τ 120 ms",
   "boost": "Tempo × (1 + min(6, |v| × 0,004)), Abklingen τ 300 ms; Touch k = 0,0024",
   "skew": "skewX = clamp(v_geglättet × 0,004, ±10°), Glättung τ 200 ms, Gegenband gespiegelt; Touch 0,0025",
   "hover": "Konstant: animation-play-state paused; JS-Varianten: Tempo auf 25 %, τ 350 ms",
   "kantenmaske": "mask-image linear-gradient(90deg, transparent, #000 7,5 %, #000 92,5 %, transparent)",
   "sichtbarkeit": "IntersectionObserver: außerhalb des Viewports nicht rechnen bzw. play-state paused",
   "schrift": "Name Instrument Sans 600, clamp(84px, 17,5vw, 300px), Telefon 112px, letter-spacing −0,055em, line-height 0,86; Akzent Instrument Serif Italic; Leistungen 500, clamp(19px, 2,7vw, 40px)",
   "streifen": "rotate(−2,2deg), Hintergrund #ff5a1f",
   "vorfuehrung": "simulierter Scroll: Sinus-Flick ↓ 2400 px/s über 1600 ms, Pause 600 ms, Flick ↑ 2400 px/s über 1600 ms, Zyklus 4400 ms"
  },
  "ausloeser": "scroll",
  "touch": "Läuft ohne Hover; Touch-Scroll liefert die Velocity über native Scroll-Events. Boost (k 0,0024) und Skew (0,0025 °/px/s) sind abgeschwächt, Name fest 112px.",
  "reduziert": "Band steht: nur eine Kopie und ein Inhaltssatz, keine Kantenmaske; Leistungen brechen zentriert um. Umschalter und Anhalten-Knopf ausgeblendet.",
  "korrekturen": {
   "beschreibung": "Großer Text läuft endlos waagerecht, meist ein Name, Claim oder Leistungen mit Trennzeichen. Zwei identische Kopien stehen nebeneinander. Ist eine Kopie ganz hinausgelaufen (xPercent −100), springt die Spur unsichtbar auf 0 zurück. In der scroll-gekoppelten Form kehrt die Scrollrichtung die Laufrichtung um. Schnelles Scrollen beschleunigt das Band kurz, danach klingt es auf das Grundtempo ab. Optional neigt es sich mit skewX proportional zum Tempo. Häufig laufen zwei Bänder gegenläufig übereinander.",
   "warum_es_wirkt": "Das Band schafft Rhythmus und die Präsenz eines Plakats. Es trennt Sektionen wie ein Laufband. Mit Scroll-Kopplung reagiert die Seite spürbar auf den Nutzer, ohne Inhalte zu verzerren. Das Scrollen wird belohnt.",
   "wann_einsetzen": "Großer Name im Portfolio-Hero, Leistungs-Schlagworte, Kundenlogos, Footer-Statement („Lass uns reden“), Trenner zwischen Sektionen. Passt zu Event- und Kampagnenseiten und zu lauten Marken.",
   "wann_nicht": "Für wichtige Information, denn sie wird nicht vollständig gelesen. Bei ruhigen, luxuriösen Marken. Mehr als ein bis zwei Bänder pro Seite. Als reine Dekoration ohne Inhalt, das gilt 2026 als Template-Klischee.",
   "varianten": [
    "Konstantes CSS-Marquee (@keyframes translateX(0 → −50 %), linear)",
    "Richtungsumkehr nach Scrollrichtung (timeScale ±1)",
    "Tempo-Boost proportional zur Scroll-Velocity, mit Skew",
    "Rein scroll-gekoppelt (x = scrollY × Faktor) ohne Grundlauf",
    "Zwei oder mehr gegenläufige Bänder",
    "Gegenläufige Zeilen ohne Loop (Text-Parallax)",
    "Hover pausiert oder verlangsamt das Band",
    "Logo-Marquee mit Hover-Pause (siehe logo-wand-social-proof)",
    "Vertikaler Ticker",
    "Rundes Marquee, Text im Kreis",
    "Band entlang eines SVG-Pfads",
    "Glühendes SVG-Text-Marquee",
    "Marquee-Menü"
   ],
   "umsetzung": "Inhalt so oft wiederholen, dass eine Kopie breiter ist als der Viewport. Diese Kopie einmal klonen (aria-hidden, inert). Breite erst nach dem Schriftladen messen (document.fonts.ready).\n\nKonstant: Spur per CSS @keyframes translateX(0 → −50 %) linear infinite. Gegenband mit animation-direction: reverse.\n\nScroll-gekoppelt: pro Frame x = wrap(−50, 0, x + richtung × grund × (1 + boost) × dt) und als translate3d setzen. Velocity aus ScrollTrigger.getVelocity(), lenis.velocity oder nativen Scroll-Events. Boost = min(max, |v| × k), mit Lerp auf 0 abklingen lassen. Skew aus der geglätteten Velocity. Alternative mit GSAP: timeScale einer Endlos-Tween anpassen.\n\nFallstricke: Velocity-Spitzen kappen, sonst springt das Band bei Trackpad-Flicks. Ohne aria-hidden liest der Screenreader alles mehrfach. Gegen Subpixel-Ruckeln translate3d und eine eigene Ebene (will-change: transform). Außerhalb des Viewports pausieren (IntersectionObserver).",
   "mobil": "Funktioniert. Touch-Scroll liefert die Velocity über native Scroll-Events. Schriftgröße in vw oder fest groß wählen, damit das Band nicht zu klein wird. Velocity-Kopplung abschwächen.",
   "reduzierte_bewegung": "Band anhalten und als statische Zeile zeigen, Leistungen dürfen umbrechen. Alternativ sehr langsam laufen lassen, dann mit Pause-Möglichkeit.",
   "barrierefreiheit": "Nur eine Kopie ist für Screenreader sichtbar, Klone sind aria-hidden und inert. Fokussierbare Elemente im Band vermeiden oder das Band bei Fokus anhalten. Nach WCAG 2.2.2 braucht Bewegung, die länger als 5 s läuft, eine Pause-Möglichkeit. Inhalte dürfen nicht nur im Band stehen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Grafikbüros (Studio Feldmark, Leipzig): Name als Riesenband mit Bild-Pillen aus medien/, gegenläufiger Leistungsstreifen. Drei Varianten umschaltbar (Konstant als reines CSS, Richtung, Tempo + Skew), Anhalten-Knopf (WCAG 2.2.2), Live-Anzeige der Scroll-Velocity. Die Bühne klebt über 210svh, damit man beim Scrollen die Reaktion sieht. Vorführung simuliert Scroll-Flicks ab und auf. Reines Vanilla-JS ohne Bibliothek. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .58 → .64 (5,0:1). Reduzierte Bewegung: Name unter 720 px min(112px, 21vw) (stand vorher abgeschnitten über den Rand), Leistungen brechen jetzt wirklich um (Kopie und Satz flex 1 1 auto statt none; vorher fehlte „Schrift“ rechts). Offen: im laufenden Band ist „Feldmark“ bei 320 px breiter als der Viewport, das ist das Laufband selbst."
 }
}