{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "shimmer-gradient-text",
 "name": "Schimmer-/Verlaufs-Text",
 "name_en": "Shimmer text / animated gradient text fill",
 "kurz": "Ein schmales Lichtband gleitet einmal über den Intro-Satz, ein Status-Text schimmert, bis das Ergebnis da ist, und Projekttitel füllen sich beim Hover von links.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "technisch",
  "KI",
  "edel",
  "glänzend"
 ],
 "technik": [
  "css",
  "scroll-driven-css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Der Text bekommt einen Verlauf als Füllung: background-clip: text, color: transparent. 2) Der Verlauf ist doppelt so breit wie der Text (background-size 200 %) und hat einen schmalen, helleren Streifen. 3) background-position wandert linear, der Streifen läuft dadurch über die Schrift. Als Status-Text in Schleife, als Glanz einmal beim Eintritt. 4) Eine verwandte Form füllt den Text bei Hover von links nach rechts.",
  "warum_es_wirkt": "KI-Produkte haben den Schimmer als Zeichen für „denkt gerade“ oder „wird erzeugt“ eingeübt. Ein Status-Text mit Schimmer sagt deshalb ohne Spinner: hier arbeitet etwas. Läuft der Glanz nur einmal, wirkt er wie Licht auf Metall oder Glas und gibt einem Wort Wert.",
  "wann_einsetzen": "Status- und Lade-Texte („Suche Termine …“, „Erzeuge Vorschau …“), KI-Funktionen, Premium-Abzeichen, ein einmaliger Glanz auf dem Hero-Wort oder Intro-Satz.",
  "wann_nicht": "Fließtext. Dauerschleife auf Überschriften, das wirkt billig. Verläufe, deren dunkelster oder hellster Teil zu wenig Kontrast zum Grund hat.",
  "varianten": [
   "Status-Schimmer in Schleife: Band 30/55/70 %, 2000–2500 ms linear (Cursor 2500 ms, Gemini 2000 ms mit Pause ab 70 % der Zeit)",
   "Einmaliger Glanz beim Eintritt: schmales Band 42,5/50/57,5 % wie bei Framer, ein Durchlauf",
   "Füllung bei Hover: der Verlauf läuft von links ein und färbt den Text voll",
   "An den Scroll gekoppelt: eine Farbwelle läuft beim Scrollen durch den Text (eigener Eintrag scroll-word-highlight)"
  ],
  "umsetzung": ".schimmer { background: linear-gradient(90deg, var(--muted) 0 30%, var(--fg) 55%, var(--muted) 70% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: schimmer 2.5s linear infinite; } @keyframes schimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } Mit 150 % → −50 % liegt das Band am Anfang und Ende außerhalb des Texts, die Schleife springt nicht. Für den einmaligen Glanz die Klasse per JS setzen und bei animationend wieder entfernen. Mehrere Blöcke (z. B. Überschrift und Unterzeile) laufen synchron, wenn sie gleich breit sind und der Winkel 90° ist. color: transparent statt -webkit-text-fill-color verwenden, dann bleibt markierter Text über ::selection { color: … } lesbar.",
  "mobil": "Unverändert. Hover-Füllung entfällt auf Touch, der Text steht dort voll gefüllt.",
  "reduzierte_bewegung": "Kein Band: Volltonfarbe bzw. ruhiger Status-Text. Den Status über Text kommunizieren, nicht über Bewegung. Gemini setzt bei prefers-reduced-motion: reduce animation: none.",
  "barrierefreiheit": "Kontrast an der dunkelsten bzw. hellsten Stelle des Verlaufs prüfen; die Grundfarbe muss allein reichen. @media (forced-colors: active) { background: none; color: CanvasText; }. Statuswechsel zusätzlich über role=\"status\" bzw. aria-live ansagen. Markierten Text per ::selection sichtbar halten."
 },
 "messwerte": {
  "easing": "linear",
  "dauer_ms": "2000–2500 pro Durchlauf (Gemini 2000, Cursor 2500)",
  "stagger_ms": "",
  "distanz": "background-size 200 %",
  "sonstiges": "Glanzstreifen zwischen 30 und 70 % des Verlaufs, Spitze bei 55 % (Cursor)",
  "herkunft": "beobachtet",
  "quelle": "https://www.cursor.com/ (CSS-Chunk 3g8c5788oj-t7.css)"
 },
 "kurve": {
  "bezier": [
   0.165,
   0.84,
   0.44,
   1.0
  ],
  "css": "cubic-bezier(0.165, 0.84, 0.44, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 2000
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Shimmer Text Effect / Gradient Text Fill / Gradient Wave Text on Scroll",
   "url": "https://www.osmo.supply/resource/shimmer-text-effect",
   "auszeichnung": "",
   "beobachtung": "Drei Ressourcen zu diesem Muster in der Text-Kategorie gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Framer",
   "url": "https://www.framer.com/",
   "auszeichnung": "",
   "beobachtung": ".text-shimmer: linear-gradient(90deg, transparent 0–42,5 %, #fff 50 %, transparent 57,5–100 %) 0 0/200% 200%, background-clip text, animation 5s linear infinite (background-position 200 % → −100 %).",
   "art": "website"
  },
  {
   "seite": "Sanity",
   "url": "https://www.sanity.io/",
   "auszeichnung": "",
   "beobachtung": ".text-shimmer: -webkit-text-fill-color transparent, background-size 200 % 100 %.",
   "art": "website"
  },
  {
   "seite": "Cursor",
   "url": "https://www.cursor.com/",
   "auszeichnung": "",
   "beobachtung": "Status-Shimmer: linear-gradient(90deg, base 0–30 %, highlight 55 %, base 70–100 %), background-size 200% 100%, background-clip: text, 2.5s linear infinite; Highlight per color-mix mit 70 % Intensität (CSS-Chunk 3g8c5788oj-t7.css).",
   "art": "website"
  },
  {
   "seite": "Google Gemini",
   "url": "https://gemini.google.com/",
   "auszeichnung": "",
   "beobachtung": "gem-shimmer-sweep 2s linear infinite mit Pause ab 70 % der Zeit; bei prefers-reduced-motion: reduce animation: none (Inline-CSS).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo – Shimmer Text Effect",
   "url": "https://www.osmo.supply/resource/shimmer-text-effect"
  }
 ],
 "kombinierbar_mit": [
  "typewriter-natural",
  "blur-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json",
   "patch-luecken-b.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege.",
   "patch-luecken-b.json: Produktionsbelege für die Variante ‚Shimmer-Loop für Status-Text‘; Abgrenzung: KI-Denk-Indikator jetzt eigener Eintrag ki-streaming-text-denkindikator.",
   "02.11.2026: Priorität B → C, Trendstatus aufsteigend → abklingend (Lückenrecherche K2), weil saas und luxus nennen ihn Klischee, ki-streaming-text-denkindikator grenzt sich ausdrücklich ab."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein schmales Lichtband gleitet einmal über den Intro-Satz, ein Status-Text schimmert, bis das Ergebnis da ist, und Projekttitel füllen sich beim Hover von links.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (Glanz und Status, gemessen); Füllung und UI cubic-bezier(0.165, 0.84, 0.44, 1) (easeOutQuart, Rezept)",
   "glanz": "einmal, 2000 ms linear, Verzögerung 300 ms; linear-gradient(90deg, Grund 0–42,5 %, Flanke 46 %, Spitze 50 %, Flanke 54 %, Grund 57,5–100 %); background-size 200 % 100 %; background-position 150 % → −50 %",
   "glanz_farben": "hell: Grund = Textfarbe #0b0b09 bzw. #646464 (zweite Zeile), Flanke = Grund, Spitze #b4bac3; dunkel: Grund #e5e5e5 bzw. #989898, Flanke #6f6f6c, Spitze #ffffff",
   "status": "2500 ms linear infinite; linear-gradient(90deg, Grund 0–30 %, Spitze 55 %, Grund 70–100 %); Spitze color-mix(in oklab, var(--text) 70 %, var(--zweit)); background-size 200 % 100 %; background-position 150 % → −50 %; Suche in der Demo 5000 ms (2 Durchläufe), Ergebnis blendet 320 ms ein (translateY 4 px)",
   "fuellung": "Hover hin 480 ms, zurück 240 ms, easeOutQuart; linear-gradient(90deg, Text 0–42 %, Zweitfarbe 58–100 %); background-size 250 % 100 %; background-position 100 % → 0 %; ohne Zeiger (Umschalter, Touch) gestaffelt 120 ms + 140 ms je Zeile",
   "ui": "Hover/Farbe 120 ms, Knopfdruck scale(.97) 160 ms, Thema-Wechsel per View Transition",
   "farben": "hell #fcfcfc Grund, #0b0b09 Text, #646464 Zweitfarbe, #e8e8e8 Linien, #f0f0f0 Hover-Fläche, #2f5bea Fokus; dunkel #0b0b09, #e5e5e5, #989898, #252525, #161614, #7d97ff",
   "schrift": "Host Grotesk 500, Intro clamp(1.375rem, 3vw, 2rem)/1.32, Laufweite −0,012em; Newsreader Italic 1.06em (opsz 36) für „jeden Tag“; Geist Mono 11 px versal, Laufweite 0,14em"
  },
  "ausloeser": "laden, hover, klick",
  "touch": "Kein Hover: Projekttitel stehen voll gefüllt da. Der Umschalter „Füllung“ füllt die Zeilen nacheinander und lässt sie gefüllt. Glanz und Status laufen unverändert.",
  "reduziert": "Kein Glanz (Volltonfarbe), kein Schimmer: der Status steht als ruhiger Text in der Zweitfarbe und wird nach 1,2 s durch das Ergebnis ersetzt (aria-live). Die Füllung wechselt sofort.",
  "korrekturen": {
   "beschreibung": "1) Der Text bekommt einen Verlauf als Füllung: background-clip: text, color: transparent. 2) Der Verlauf ist doppelt so breit wie der Text (background-size 200 %) und hat einen schmalen, helleren Streifen. 3) background-position wandert linear, der Streifen läuft dadurch über die Schrift. Als Status-Text in Schleife, als Glanz einmal beim Eintritt. 4) Eine verwandte Form füllt den Text bei Hover von links nach rechts.",
   "warum_es_wirkt": "KI-Produkte haben den Schimmer als Zeichen für „denkt gerade“ oder „wird erzeugt“ eingeübt. Ein Status-Text mit Schimmer sagt deshalb ohne Spinner: hier arbeitet etwas. Läuft der Glanz nur einmal, wirkt er wie Licht auf Metall oder Glas und gibt einem Wort Wert.",
   "wann_einsetzen": "Status- und Lade-Texte („Suche Termine …“, „Erzeuge Vorschau …“), KI-Funktionen, Premium-Abzeichen, ein einmaliger Glanz auf dem Hero-Wort oder Intro-Satz.",
   "wann_nicht": "Fließtext. Dauerschleife auf Überschriften, das wirkt billig. Verläufe, deren dunkelster oder hellster Teil zu wenig Kontrast zum Grund hat.",
   "varianten": [
    "Status-Schimmer in Schleife: Band 30/55/70 %, 2000–2500 ms linear (Cursor 2500 ms, Gemini 2000 ms mit Pause ab 70 % der Zeit)",
    "Einmaliger Glanz beim Eintritt: schmales Band 42,5/50/57,5 % wie bei Framer, ein Durchlauf",
    "Füllung bei Hover: der Verlauf läuft von links ein und färbt den Text voll",
    "An den Scroll gekoppelt: eine Farbwelle läuft beim Scrollen durch den Text (eigener Eintrag scroll-word-highlight)"
   ],
   "umsetzung": ".schimmer { background: linear-gradient(90deg, var(--muted) 0 30%, var(--fg) 55%, var(--muted) 70% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: schimmer 2.5s linear infinite; } @keyframes schimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } Mit 150 % → −50 % liegt das Band am Anfang und Ende außerhalb des Texts, die Schleife springt nicht. Für den einmaligen Glanz die Klasse per JS setzen und bei animationend wieder entfernen. Mehrere Blöcke (z. B. Überschrift und Unterzeile) laufen synchron, wenn sie gleich breit sind und der Winkel 90° ist. color: transparent statt -webkit-text-fill-color verwenden, dann bleibt markierter Text über ::selection { color: … } lesbar.",
   "mobil": "Unverändert. Hover-Füllung entfällt auf Touch, der Text steht dort voll gefüllt.",
   "reduzierte_bewegung": "Kein Band: Volltonfarbe bzw. ruhiger Status-Text. Den Status über Text kommunizieren, nicht über Bewegung. Gemini setzt bei prefers-reduced-motion: reduce animation: none.",
   "barrierefreiheit": "Kontrast an der dunkelsten bzw. hellsten Stelle des Verlaufs prüfen; die Grundfarbe muss allein reichen. @media (forced-colors: active) { background: none; color: CanvasText; }. Statuswechsel zusätzlich über role=\"status\" bzw. aria-live ansagen. Markierten Text per ::selection sichtbar halten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt aus dem Rezept „Stille Visitenkarte“: erfundene Interaction-Designerin Ida Wenninger, Würzburg. Graustufen, Host Grotesk 400/500, Newsreader Italic als Stimme, Geist Mono für Metadaten, Dark Mode gleichwertig (Umschalter mit View Transition). Drei Varianten im Umschalter, alle live: Glanz einmal über Intro-Satz und Unterzeile (synchron, zwei gleich breite Blöcke), Hover-Füllung der Projekttitel, Status-Schimmer an „Freie Termine suchen“ bis zum Ergebnis. Intro-Satz etwas größer als im Rezept (bis 2rem statt 1.5rem), damit der Glanz in der Vorschau lesbar ist. Rechte Randspalte zeigt die verwendeten Werte als Datenblatt. vorfuehren(): Glanz → gedachter Zeiger über drei Projekttitel → Klick auf Termine suchen mit 5 s Schimmer und Ergebnis, Schleife. AD-Review 01.11.2026: Note 4 (vorher 3; Vorschau ohne Randspalte mittig mit größerem Intro-Satz, Randspalte mit Luft für den ×-Knopf). Zugang 02.11.2026: Kontrastmodus: vorhandene Regel griff bei .intro.glanzt und .intro.leise nicht (höhere Spezifität von color: transparent); jetzt mit !important und -webkit-text-fill-color CanvasText, dazu Knöpfe mit Rahmen."
 }
}