{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "rotating-words",
 "name": "Wechselnde Wörter / Begrüßungs-Loader",
 "name_en": "Rotating words / looping words / welcome words loader",
 "kurz": "Ein Wort im Claim rollt aus seiner Maske, der Satz passt sich weich an; dazu Liste mit Auswahlrahmen und Begrüßungs-Loader.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "verspielt",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "freundlich",
  "persönlich",
  "dynamisch"
 ],
 "technik": [
  "gsap",
  "splittext",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Wort im Satz ist ein Slot: ‚Gebaut, um [Generationen] zu überdauern.‘ Der Slot hat eine Maske in Zeilenhöhe. Alle paar Sekunden gleitet das aktuelle Wort nach oben hinaus und das nächste von unten herein. Die Breite des Slots wandert weich auf die Breite des neuen Wortes, damit der Satz nicht springt. Als Loader erscheinen vor dem Seitenaufbau Grüße in mehreren Sprachen in schneller Folge. Danach fährt die Fläche nach oben weg.",
  "warum_es_wirkt": "Ein Satz trägt mehrere Botschaften, ohne länger zu werden. Die Bewegung lenkt den Blick genau auf das Wort, das sich ändert. Der Begrüßungs-Loader gibt der Wartezeit Persönlichkeit.",
  "wann_einsetzen": "Hero-Claims mit mehreren Leistungen, Zielgruppen oder Werten. Portfolio-Intros. Mehrsprachige oder international auftretende Marken (Loader).",
  "wann_nicht": "Wenn die Kernbotschaft nur in einem der Wörter steckt: Viele sehen nur das erste. Bei sehr langen Wörtern auf schmalen Bildschirmen. Einen Loader ohne echte Ladezeit nur kurz zeigen (unter 2 s).",
  "varianten": [
   "Wort-Slot: vertikales Rollen mit mitlaufender Breite",
   "Liste mit Auswahlrahmen: die Wortliste läuft durch, Nachbarn bleiben blass sichtbar, ein Rahmen passt sich der Wortbreite an (Osmo ‚Looping Words with Selector‘)",
   "Begrüßungs-Loader: Grüße in mehreren Sprachen, danach fährt die Fläche nach oben (Osmo ‚Welcoming Words Loader‘, Dennis Snellenberg)",
   "3D-Rotation: die Wörter kippen per rotateX um die Zeilenachse"
  ],
  "umsetzung": "Slot: Block mit overflow: hidden und der Höhe einer Zeile, Wörter absolut gestapelt. Wortbreiten nach document.fonts.ready messen und in em speichern, dann skalieren sie mit. Pro Takt gleichzeitig: altes Wort translateY 0 → −100 %, neues 100 % → 0, Slot-Breite auf die neue Wortbreite. Mit GSAP als Timeline mit repeat: -1 und gsap.to(slot, { width }), ohne Bibliothek per Web Animations API. Liste mit Rahmen: drei Kopien der Liste in einer Spur, nach dem letzten Schritt unsichtbar auf die mittlere Kopie springen. Loader: erstes Wort 800 ms einblenden, dann je 120–200 ms ein Gruß, danach die Fläche in 800 ms power4.inOut von 0 auf −100 % nach oben ziehen.",
  "mobil": "Die Breite des Slots kann den Zeilenumbruch verschieben. Deshalb feste Zeilen setzen: den Slot auf eine eigene Zeile oder nur ein kurzes Wort dahinter. Den Loader als fixe Fläche über das ganze Fenster legen.",
  "reduzierte_bewegung": "Keine Rotation: das erste Wort bleibt stehen, oder die Liste wird ausgeschrieben (‚Marken, Websites und Erlebnisse‘). Den Loader überspringen.",
  "barrierefreiheit": "Für Screenreader den vollständigen Satz mit allen Begriffen als Text ausgeben, die animierten Wörter mit aria-hidden. Die Rotation muss pausierbar sein (WCAG 2.2.2). Der Loader ist aria-hidden und darf den Fokus nicht blockieren."
 },
 "messwerte": {
  "easing": "Power4.easeOut (Einblenden), Power4.easeInOut (Ausfahrt)",
  "dauer_ms": "800 Ein/Aus; 150 je Wort",
  "stagger_ms": "150",
  "distanz": "Loader top 0 → −100 %",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js"
 },
 "kurve": {
  "bezier": [
   0.22,
   1,
   0.36,
   1
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 800
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Welcoming Words Loader / Rotating Text / Looping Words with Selector",
   "url": "https://www.osmo.supply/resource/welcoming-words-loader",
   "auszeichnung": "",
   "beobachtung": "Drei Ressourcen zu diesem Muster gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Begrüßungs-Loader: .loading-words mit ca. 10 Grüßen (Hello, Bonjour, स्वागत हे, Ciao, Olá, おい, Hallå …); Einblenden 0,8 s Power4.easeOut, Wortwechsel per opacity im 150-ms-Stagger, Loader fährt in 0,8 s Power4.easeInOut nach oben.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo – Welcoming Words Loader",
   "url": "https://www.osmo.supply/resource/welcoming-words-loader"
  },
  {
   "titel": "Osmo – Looping Words with Selector",
   "url": "https://www.osmo.supply/resource/looping-words-with-selector"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "typewriter-natural",
  "blur-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: Loader-Variante live verifiziert."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Wort im Claim rollt aus seiner Maske, der Satz passt sich weich an; dazu Liste mit Auswahlrahmen und Begrüßungs-Loader.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "power4.out = cubic-bezier(0.22, 1, 0.36, 1) für alle Wortwechsel und das Einblenden",
   "easing_loader_aus": "power4.inOut = cubic-bezier(0.83, 0, 0.17, 1)",
   "dauer_ms": 800,
   "slot_takt_ms": 2400,
   "slot_weg": "neues Wort translateY 100 % → 0, altes 0 → −100 % mit opacity 1 → 0, gleichzeitig",
   "slot_breite": "width auf gemessene Wortbreite (em, nach fonts.ready), 800 ms, gleiche Kurve",
   "slot_hoehe": "line-height 1.18em, height 1lh (= 1.18em), overflow hidden, Maske 10 % oben und unten ausgeblendet",
   "slot_linie": "1 px Messing #a88a5a, 0.16em über der Slot-Unterkante",
   "rahmen_takt_ms": 2000,
   "rahmen_schritt": "Spur translateY um 1.18em, 800 ms power4.out; drei Kopien der Liste, Rücksprung ohne Animation",
   "rahmen_nachbarn": "opacity 0.2, Wechsel 800 ms power4.out; Fenster 3 Zeilen, Maske transparent → 30 % → 70 % → transparent",
   "rahmen_ecken": "1 px Messing, 0.2em lang; Rahmen −0.18em links, −0.08em rechts, Breite folgt dem Slot",
   "loader_erstes_wort": "opacity 0 → 1, translateY 0.25em → 0, 800 ms power4.out",
   "loader_je_gruss_ms": 150,
   "loader_gruesse": 9,
   "loader_halten_ms": 450,
   "loader_ausfahrt": "translateY 0 → −100 % (entspricht top 0 → −100 %), 800 ms power4.inOut",
   "loader_inhalt": "translateY 40px → 0, 800 ms power4.out, Verzögerung 350 ms, Versatz 150 ms",
   "ui": "150 ms cubic-bezier(0.1, 0.6, 0.4, 1) (Rezept)",
   "typo": "Bodoni Moda 400, clamp(2.5rem, 5.5vw, 5.5rem)/1.05, −0.01em, Slot-Wort kursiv; Labels Instrument Sans 0.75rem versal +0.08em"
  },
  "ausloeser": "dauer",
  "touch": "Gleiches Verhalten wie am Desktop. Tippen auf das Wort schaltet sofort weiter. Der Loader liegt fix über dem ganzen Fenster und scrollt vorher nach oben wie ein frischer Seitenaufruf.",
  "reduziert": "Keine Rotation: Slot zeigt das erste Wort statisch, die Liste steht mit Rahmen um das erste Wort, der Loader entfällt, die kleine Sekunde steht. Screenreader lesen immer den vollständigen Satz.",
  "korrekturen": {
   "beschreibung": "Ein Wort im Satz ist ein Slot: ‚Gebaut, um [Generationen] zu überdauern.‘ Der Slot hat eine Maske in Zeilenhöhe. Alle paar Sekunden gleitet das aktuelle Wort nach oben hinaus und das nächste von unten herein. Die Breite des Slots wandert weich auf die Breite des neuen Wortes, damit der Satz nicht springt. Als Loader erscheinen vor dem Seitenaufbau Grüße in mehreren Sprachen in schneller Folge. Danach fährt die Fläche nach oben weg.",
   "warum_es_wirkt": "Ein Satz trägt mehrere Botschaften, ohne länger zu werden. Die Bewegung lenkt den Blick genau auf das Wort, das sich ändert. Der Begrüßungs-Loader gibt der Wartezeit Persönlichkeit.",
   "wann_einsetzen": "Hero-Claims mit mehreren Leistungen, Zielgruppen oder Werten. Portfolio-Intros. Mehrsprachige oder international auftretende Marken (Loader).",
   "wann_nicht": "Wenn die Kernbotschaft nur in einem der Wörter steckt: Viele sehen nur das erste. Bei sehr langen Wörtern auf schmalen Bildschirmen. Einen Loader ohne echte Ladezeit nur kurz zeigen (unter 2 s).",
   "varianten": [
    "Wort-Slot: vertikales Rollen mit mitlaufender Breite",
    "Liste mit Auswahlrahmen: die Wortliste läuft durch, Nachbarn bleiben blass sichtbar, ein Rahmen passt sich der Wortbreite an (Osmo ‚Looping Words with Selector‘)",
    "Begrüßungs-Loader: Grüße in mehreren Sprachen, danach fährt die Fläche nach oben (Osmo ‚Welcoming Words Loader‘, Dennis Snellenberg)",
    "3D-Rotation: die Wörter kippen per rotateX um die Zeilenachse"
   ],
   "umsetzung": "Slot: Block mit overflow: hidden und der Höhe einer Zeile, Wörter absolut gestapelt. Wortbreiten nach document.fonts.ready messen und in em speichern, dann skalieren sie mit. Pro Takt gleichzeitig: altes Wort translateY 0 → −100 %, neues 100 % → 0, Slot-Breite auf die neue Wortbreite. Mit GSAP als Timeline mit repeat: -1 und gsap.to(slot, { width }), ohne Bibliothek per Web Animations API. Liste mit Rahmen: drei Kopien der Liste in einer Spur, nach dem letzten Schritt unsichtbar auf die mittlere Kopie springen. Loader: erstes Wort 800 ms einblenden, dann je 120–200 ms ein Gruß, danach die Fläche in 800 ms power4.inOut von 0 auf −100 % nach oben ziehen.",
   "mobil": "Die Breite des Slots kann den Zeilenumbruch verschieben. Deshalb feste Zeilen setzen: den Slot auf eine eigene Zeile oder nur ein kurzes Wort dahinter. Den Loader als fixe Fläche über das ganze Fenster legen.",
   "reduzierte_bewegung": "Keine Rotation: das erste Wort bleibt stehen, oder die Liste wird ausgeschrieben (‚Marken, Websites und Erlebnisse‘). Den Loader überspringen.",
   "barrierefreiheit": "Für Screenreader den vollständigen Satz mit allen Begriffen als Text ausgeben, die animierten Wörter mit aria-hidden. Die Rotation muss pausierbar sein (WCAG 2.2.2). Der Loader ist aria-hidden und darf den Fokus nicht blockieren."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept luxus-manufaktur-stille, erfundene Uhrenmanufaktur Behlert aus Potsdam, Uhr als eigene SVG (kleine Sekunde läuft echt). Drei Varianten per Umschalter: Slot mit mitlaufender Breite und Messinglinie, Liste mit Auswahlrahmen, Begrüßungs-Loader mit neun Grüßen. Reines WAAPI ohne Bibliothek. Werte aus Snellenbergs Loader (800 ms power4, 150 ms je Gruß). Das Rezept will sonst kurze Bewegung (0,15–0,5 s); für das Muster gelten bewusst die gemessenen 800 ms, die UI bleibt bei 150 ms. Knopf „Anhalten“ für WCAG 2.2.2. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --meta #8b9097 → #6a6f76 (4,6:1 auch auf #f4f4f2); Slot-Höhe 1lh bei line-height var(--zh) (wächst mit erhöhter Zeilenhöhe), unsichtbare Messprobe mit ResizeObserver misst die Wortbreiten neu, wenn sich Laufweite oder Schrift ändern (1.4.12, Wort nicht mehr abgeschnitten); Kontrastmodus-Rahmen für Knöpfe."
 }
}