{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "scramble-decode",
 "name": "Scramble/Decode-Text (Zeichen entschlüsseln sich)",
 "name_en": "Text scramble / decode effect / Text scramble / decode / terminal hover / Text scramble / decode intro",
 "kurz": "Zeichen rauschen in Akzentfarbe durch und rasten nacheinander ein: als Decode beim Laden, als Welle oder mit wachsendem Balken beim Hover.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "technisch",
  "laut",
  "digital",
  "geheimnisvoll",
  "nerdig",
  "präzise"
 ],
 "technik": [
  "gsap",
  "scrambletext",
  "vanilla-js",
  "splittext",
  "motion"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Text erscheint zuerst als zufällige Zeichen, etwa Versalien, Ziffern oder Symbole. Die Zeichen wechseln in schnellem Takt. Dann rastet von links nach rechts nach und nach das echte Zeichen ein, zeichenweise oder wortweise. Optional steht das Rauschen kurz still (revealDelay), bevor das Auflösen beginnt.",
  "warum_es_wirkt": "Der Effekt sieht aus wie Daten, die geladen oder entschlüsselt werden. Er erzeugt Spannung und lenkt den Blick auf Labels, ohne das Layout zu bewegen. Auf kleiner Fläche entsteht viel Charakter. Er passt zur KI- und Tech-Ästhetik und signalisiert Code-Handwerk.",
  "wann_einsetzen": "Navigation, Buttons und Labels in technischen, monospace-lastigen Designs. Metaangaben wie Datum, Koordinaten oder Projektnummern. Kurze Headlines beim Laden, Statuszeilen in Preloadern. Passt zu Tech-, KI-, Krypto- und Gaming-Marken sowie zu Developer- und Studio-Portfolios.",
  "wann_nicht": "Bei Fließtext und langen Textblöcken: unlesbar und anstrengend. Bei warmen, handwerklichen, emotionalen oder luxuriösen Marken. Bei proportionalen Schriften ohne feste Zeichenbreite, weil der Text springt. Als Dauerschleife nervt der Effekt.",
  "varianten": [
   "Decode: Zeile ist mit Rauschen vorbefüllt, Zeichen rasten links nach rechts ein (GSAP ScrambleTextPlugin oder Eigenbau)",
   "Welle (Terminal-Hover nach Codrops/jeandawson.com): Zeichen erscheinen nacheinander mit 60–80 ms Versatz, 2–3 Wiederholungen mit Zufallszeichen, dann das echte Zeichen",
   "Balken: zusätzlich wächst ein Hintergrundbalken von 0 auf 100 % Breite (1 s expo.out)",
   "Zufallsfarben während des Scrambles",
   "Mit Clip-Wipe parallel (Thibault Guignand: Wipe 0,6 s power2.out)",
   "Mehrere Zeilen mit eigener Dauer und Verzögerung je Zeile (Gabriel Contassot)",
   "Wortweise statt zeichenweise",
   "Scramble am Cursor: nur Zeichen im Umkreis des Zeigers (siehe cursor-text-proximity)",
   "Preloader mit monospace Statuszeilen in snake_case (launching_…, verifying_…)",
   "Shuffle in den Initialen von Menüpunkten oder über ganze Absätze im LCD-Look (Codrops LetterShuffleMenu, TypeShuffleAnimation)",
   "Auslöser: Hover auf Links und Buttons (400–600 ms), Eintritt in den Viewport oder Laden"
  ],
  "umsetzung": "GSAP: gsap.to(el, { duration: 1, scrambleText: { text: '{original}', chars: 'upperCase', revealDelay: .3, speed: .4, tweenLength: false } }). Das Plugin ist seit 2025 kostenlos.\n\nEigenbau: ein requestAnimationFrame-Takt. Pro Zeichen eine Startzeit (i × Versatz). Davor ein Zufallszeichen aus dem Zeichensatz, im festen Takt von 30 ms neu gewürfelt, danach das Zielzeichen. Leerzeichen überspringen. Das DOM nur ändern, wenn sich der Zustand eines Zeichens ändert.\n\nWelle nach Codrops: chars.forEach((c, i) => gsap.fromTo(c, { opacity: 0 }, { duration: .03, repeat: 3, repeatRefresh: true, repeatDelay: .04, delay: (i + 1) * .07, innerHTML: () => pool[random], opacity: 1, onComplete: () => gsap.set(c, { innerHTML: orig[i], delay: .03 }) })).\n\nMehrere Zeilen: Arrays aus Dauer und Verzögerung je Zeile statt eines einheitlichen Staggers wirken organischer.\n\nFallstricke: Proportionale Schrift springt in der Breite. Monospace oder font-variant-numeric: tabular-nums nutzen, sonst Breite sperren (inline-block, min-width). Wörter in white-space: nowrap fassen, damit kein Umbruch mitten im Wort entsteht. Bei Hover laufende Tweens vor dem Start abbrechen (overwrite bzw. killTweensOf) und das Original wiederherstellen, sonst stottert der Text oder es bleiben Zufallszeichen stehen.",
  "mobil": "Die Hover-Variante entfällt. Stattdessen beim Tippen oder einmal beim Eintritt in den Viewport auslösen. Lade-Scramble für Headlines bleibt unverändert.",
  "reduzierte_bewegung": "Kein Scramble, Text sofort im Endzustand. Hover-Feedback über Farbwechsel oder Unterstreichung.",
  "barrierefreiheit": "Screenreader dürfen die Zufallszeichen nicht vorlesen. Den echten Text als aria-label (Links, Buttons) oder visuell versteckten Text bereitstellen, die animierte Ebene mit aria-hidden versehen. Keine Live-Region auf dem animierten Text. Große Flächen nicht stroboskopartig wechseln, Flackern über größere Flächen unter 3 Hz halten (WCAG 2.3.1)."
 },
 "messwerte": {
  "easing": "none (Zeichenwechsel); expo / power4 für Balken",
  "dauer_ms": "30 pro Zeichenwechsel; Balken 1000 (expo) / 600 (power4)",
  "stagger_ms": "60–80 pro Zeichen",
  "distanz": "",
  "sonstiges": "repeat 2–3, repeatDelay 40–100 ms",
  "herkunft": "beobachtet",
  "quelle": "https://github.com/codrops/LineTextHoverAnimations (js/effect-1..3/text-animator.js)",
  "aus_eintrag": [
   "scramble-text-hover"
  ]
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Quai Network",
   "url": "https://www.qu.ai/",
   "auszeichnung": "",
   "beobachtung": "Lade-Sequenz mit monospace Statuszeilen (launching_quai_network, verifying_consensus) und ‚Skip Animation‘-Button; Navigationslabels doppelt im Markup (Hover-Zustand). Codrops hat einen Hover nach Quai-Vorbild nachgebaut.",
   "art": "website"
  },
  {
   "seite": "Osmo – Text Scramble on Load, Scroll and Hover / Scramble Text Cursor",
   "url": "https://www.osmo.supply/resource/text-scramble-load-scroll-hover",
   "auszeichnung": "",
   "beobachtung": "Als Ressourcen gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "GSAP – Text-Seite mit Community-Demos (u. a. ‚Scramble cursor effect‘ von Tom Miller)",
   "url": "https://gsap.com/text/",
   "auszeichnung": "",
   "beobachtung": "ScrambleText wird explizit für Rollover-Effekte empfohlen.",
   "art": "artikel"
  },
  {
   "seite": "Codrops LineTextHoverAnimations (Repo/Demo)",
   "url": "https://github.com/codrops/LineTextHoverAnimations",
   "auszeichnung": "",
   "beobachtung": "Terminal-artige Hover-Animationen, laut README basierend auf jeandawson.com. Code gelesen: pro Zeichen 0.03 s, repeat 2–3, repeatDelay 0.04–0.1 s, delay (i+1) × 0.06–0.08 s, repeatRefresh für neue Zufallszeichen.",
   "art": "demo"
  },
  {
   "seite": "Jean Dawson",
   "url": "https://www.jeandawson.com/",
   "auszeichnung": "",
   "beobachtung": "Original-Referenz laut Codrops-README (nicht selbst geöffnet).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Motion Examples: Scramble text – Hover",
   "url": "https://motion.dev/examples/js-scramble-text-hover",
   "auszeichnung": "",
   "beobachtung": "Offizielles Beispiel in JS/React/Vue.",
   "art": "demo"
  },
  {
   "seite": "Evervault – Customers",
   "url": "https://evervault.com/customers",
   "auszeichnung": "",
   "beobachtung": "Zufallszeichenketten in den Kundenkarten (Verschlüsselungs-Metapher).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Gabriel Contassot Portfolio 2024",
   "url": "https://tympanus.net/codrops/2024/04/24/case-study-gabriel-contassots-portfolio-2024/",
   "auszeichnung": "",
   "beobachtung": "Navigationstext scrambelt beim Laden statt beim Hover. Container autoAlpha 1 über 1 s. Dauern je Zeile [1.2, 1.5, 0.4, 0.2, 1, 0.6, 0.6] s, Verzögerungen [0, 0.4, 1.3, 1.4, 1.5, 1.6, 2.1] s, Ease expo.out, Reveal-Delay halbe Zeilendauer, Speed 1. Kein GSAP-Stagger.",
   "art": "artikel"
  },
  {
   "seite": "Thibault Guignand Portfolio",
   "url": "https://www.thibaultguignand.com/",
   "auszeichnung": "",
   "beobachtung": "Scramble mit ease 'none' plus Wipe 0,6 s power2.out. Zeichensatz A!B@C#D$E%F&G*H?J[K]L{M}N=O+P-QRSTUVWXYZ. Die Zeile ist mit Zufallszeichen vorbefüllt.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Stas Bondar Portfolio ’25",
   "url": "https://tympanus.net/codrops/2025/03/25/stas-bondar-25-the-code-techniques-behind-a-next-level-portfolio/",
   "auszeichnung": "",
   "beobachtung": "Titelzeichen scrambeln und faden ein, mit 0,1 Stagger je Zeile.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP ScrambleTextPlugin",
   "url": "https://gsap.com/docs/v3/Plugins/ScrambleTextPlugin/"
  },
  {
   "titel": "GSAP ScrambleText Demos (CodePen-Sammlung)",
   "url": "https://codepen.io/collection/pjjdpm"
  },
  {
   "titel": "Codrops Tag ‚typography‘ (Terminal-Hover, Shuffle-Typo)",
   "url": "https://tympanus.net/codrops/tag/typography/"
  },
  {
   "titel": "Codrops: Hover Animations for Terminal-like Typography",
   "url": "https://tympanus.net/codrops/?p=78645"
  },
  {
   "titel": "Codrops TypeShuffleAnimation (Repo)",
   "url": "https://github.com/codrops/TypeShuffleAnimation"
  },
  {
   "titel": "From Shader Uniforms to Clip-Path Wipes (Codrops)",
   "url": "https://tympanus.net/codrops/2026/05/06/from-shader-uniforms-to-clip-path-wipes-how-gsap-drives-my-portfolio/"
  },
  {
   "titel": "Case Study: Gabriel Contassot's Portfolio — 2024 (Codrops)",
   "url": "https://tympanus.net/codrops/2024/04/24/case-study-gabriel-contassots-portfolio-2024/"
  }
 ],
 "kombinierbar_mit": [
  "text-roll-hover",
  "zahlen-odometer",
  "cursor-text-proximity",
  "crosshair-coordinates-cursor",
  "ascii-dither-pixel-stil",
  "karten-spotlight-glow",
  "split-mask-reveal",
  "boot-sequenz-intro",
  "seitenname-typo-uebergang"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "hover.json",
   "uebergaenge.json"
  ],
  "pruefnotizen": [
   "02.11.2026: Priorität A → B (Lückenrecherche K2), weil von 3 Rezepten ausgeschlossen, „Kern“ passt nicht zur Nutzung."
  ],
  "zusammengelegt_aus": [
   "scramble-decode",
   "scramble-text-hover",
   "scramble-decoder-text"
  ],
  "trendstatus_begruendung": "Konflikt aufsteigend (hover) vs. etabliert (schriftanimation, uebergaenge). Aufgelöst zu 'etabliert': GSAP ScrambleText und Nachbauten sind seit Jahren Standard; die 2026 steigende Nutzung im KI-/Tech-Look ist ein Einsatzkontext, kein neuer Trend.",
  "querverweis_kategorien": [
   "Hover",
   "Preloader & Intro"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Zeichen rauschen in Akzentfarbe durch und rasten nacheinander ein: als Decode beim Laden, als Welle oder mit wachsendem Balken beim Hover.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "none für Zeichenwechsel (fester Takt); Balken auf expo.out cubic-bezier(0.16, 1, 0.3, 1), Balken zu power4.out cubic-bezier(0.22, 1, 0.36, 1)",
   "zeichenwechsel_ms": 30,
   "decode": {
    "versatz_ms": 60,
    "verzoegerung_ms": 300,
    "hover_gesamt_max_ms": 600,
    "hover_verzoegerung_ms": 0,
    "zeichensatz": "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
    "start": "Zeile mit Rauschen vorbefüllt, Zeichen i rastet bei 300 + i × 60 ms ein"
   },
   "welle": {
    "versatz_ms": 70,
    "start": "(i + 1) × 70 ms, vorher unsichtbar",
    "wiederholungen": 3,
    "zufallszeichen": 4,
    "pause_ms": 40,
    "einrasten_nach_ms": 270,
    "zeichensatz": "A!B@C#D$E%F&G*H?J[K]L{M}N=O+P-QRSTUVWXYZ",
    "zeilenversatz_ms": 400
   },
   "balken": {
    "versatz_ms": 60,
    "wiederholungen": 2,
    "zufallszeichen": 3,
    "pause_ms": 100,
    "zeichensatz": "0123456789ABCDEF",
    "balken_auf_ms": 1000,
    "balken_zu_ms": 600,
    "balken_zeilenversatz_ms": 120,
    "balken_zu_nach_ms": 250,
    "textfarbe_auf_balken": "Grundfarbe #0d0f0f"
   },
   "farben": {
    "grund": "#0d0f0f",
    "text": "#eef0ec",
    "zufallszeichen": "#5fd3c4"
   },
   "schrift": "Geist Mono 500, versal, Laufweite -0.05em (Titel), Instrument Sans für Fließtext",
   "ui_ms": 150
  },
  "ausloeser": "laden",
  "touch": "Kein Hover. Projektzeile antippen löst Scramble an Titel und Bildlabel aus, im Balken-Modus schließt der Balken nach 900 ms. Satz und Knopf unten entschlüsseln sich einmal beim Eintritt in den Viewport.",
  "reduziert": "Kein Scramble, Text steht sofort im Endzustand. Hover und aktive Projektzeile färben den Text in Akzentfarbe statt Balken oder Rauschen.",
  "korrekturen": {
   "beschreibung": "Ein Text erscheint zuerst als zufällige Zeichen, etwa Versalien, Ziffern oder Symbole. Die Zeichen wechseln in schnellem Takt. Dann rastet von links nach rechts nach und nach das echte Zeichen ein, zeichenweise oder wortweise. Optional steht das Rauschen kurz still (revealDelay), bevor das Auflösen beginnt.",
   "warum_es_wirkt": "Der Effekt sieht aus wie Daten, die geladen oder entschlüsselt werden. Er erzeugt Spannung und lenkt den Blick auf Labels, ohne das Layout zu bewegen. Auf kleiner Fläche entsteht viel Charakter. Er passt zur KI- und Tech-Ästhetik und signalisiert Code-Handwerk.",
   "wann_einsetzen": "Navigation, Buttons und Labels in technischen, monospace-lastigen Designs. Metaangaben wie Datum, Koordinaten oder Projektnummern. Kurze Headlines beim Laden, Statuszeilen in Preloadern. Passt zu Tech-, KI-, Krypto- und Gaming-Marken sowie zu Developer- und Studio-Portfolios.",
   "wann_nicht": "Bei Fließtext und langen Textblöcken: unlesbar und anstrengend. Bei warmen, handwerklichen, emotionalen oder luxuriösen Marken. Bei proportionalen Schriften ohne feste Zeichenbreite, weil der Text springt. Als Dauerschleife nervt der Effekt.",
   "varianten": [
    "Decode: Zeile ist mit Rauschen vorbefüllt, Zeichen rasten links nach rechts ein (GSAP ScrambleTextPlugin oder Eigenbau)",
    "Welle (Terminal-Hover nach Codrops/jeandawson.com): Zeichen erscheinen nacheinander mit 60–80 ms Versatz, 2–3 Wiederholungen mit Zufallszeichen, dann das echte Zeichen",
    "Balken: zusätzlich wächst ein Hintergrundbalken von 0 auf 100 % Breite (1 s expo.out)",
    "Zufallsfarben während des Scrambles",
    "Mit Clip-Wipe parallel (Thibault Guignand: Wipe 0,6 s power2.out)",
    "Mehrere Zeilen mit eigener Dauer und Verzögerung je Zeile (Gabriel Contassot)",
    "Wortweise statt zeichenweise",
    "Scramble am Cursor: nur Zeichen im Umkreis des Zeigers (siehe cursor-text-proximity)",
    "Preloader mit monospace Statuszeilen in snake_case (launching_…, verifying_…)",
    "Shuffle in den Initialen von Menüpunkten oder über ganze Absätze im LCD-Look (Codrops LetterShuffleMenu, TypeShuffleAnimation)",
    "Auslöser: Hover auf Links und Buttons (400–600 ms), Eintritt in den Viewport oder Laden"
   ],
   "umsetzung": "GSAP: gsap.to(el, { duration: 1, scrambleText: { text: '{original}', chars: 'upperCase', revealDelay: .3, speed: .4, tweenLength: false } }). Das Plugin ist seit 2025 kostenlos.\n\nEigenbau: ein requestAnimationFrame-Takt. Pro Zeichen eine Startzeit (i × Versatz). Davor ein Zufallszeichen aus dem Zeichensatz, im festen Takt von 30 ms neu gewürfelt, danach das Zielzeichen. Leerzeichen überspringen. Das DOM nur ändern, wenn sich der Zustand eines Zeichens ändert.\n\nWelle nach Codrops: chars.forEach((c, i) => gsap.fromTo(c, { opacity: 0 }, { duration: .03, repeat: 3, repeatRefresh: true, repeatDelay: .04, delay: (i + 1) * .07, innerHTML: () => pool[random], opacity: 1, onComplete: () => gsap.set(c, { innerHTML: orig[i], delay: .03 }) })).\n\nMehrere Zeilen: Arrays aus Dauer und Verzögerung je Zeile statt eines einheitlichen Staggers wirken organischer.\n\nFallstricke: Proportionale Schrift springt in der Breite. Monospace oder font-variant-numeric: tabular-nums nutzen, sonst Breite sperren (inline-block, min-width). Wörter in white-space: nowrap fassen, damit kein Umbruch mitten im Wort entsteht. Bei Hover laufende Tweens vor dem Start abbrechen (overwrite bzw. killTweensOf) und das Original wiederherstellen, sonst stottert der Text oder es bleiben Zufallszeichen stehen.",
   "mobil": "Die Hover-Variante entfällt. Stattdessen beim Tippen oder einmal beim Eintritt in den Viewport auslösen. Lade-Scramble für Headlines bleibt unverändert.",
   "reduzierte_bewegung": "Kein Scramble, Text sofort im Endzustand. Hover-Feedback über Farbwechsel oder Unterstreichung.",
   "barrierefreiheit": "Screenreader dürfen die Zufallszeichen nicht vorlesen. Den echten Text als aria-label (Links, Buttons) oder visuell versteckten Text bereitstellen, die animierte Ebene mit aria-hidden versehen. Keine Live-Region auf dem animierten Text. Große Flächen nicht stroboskopartig wechseln, Flackern über größere Flächen unter 3 Hz halten (WCAG 2.3.1)."
  },
  "geprueft": "31.10.2026",
  "notiz": "Vanilla JS ohne Bibliothek. Portfolio-Bühne eines erfundenen Leipziger Studios: Headline und Koordinaten entschlüsseln sich beim Laden, Navigation und Projektliste beim Hover, Satz unten beim Scrollen. Umschalter Decode, Welle, Balken; Werte unten eingeblendet. Klartext liegt als visuell versteckter Text bzw. aria-label vor, die Zeichenebene ist aria-hidden. Vorführung: alle drei Varianten im Wechsel, gedachter Zeiger fährt über zwei Projektzeilen. Bilder 01.11.2026: eigene Bilder statt Portfolio."
 }
}