{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "typewriter-natural",
 "name": "Schreibmaschine mit natürlichem Takt",
 "name_en": "Natural typewriter / streaming text",
 "kurz": "Ein Suchfeld tippt Beispielsuchen im menschlichen Takt, löscht nur bis zur ersten Abweichung und schreibt weiter.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "technisch",
  "dialogisch",
  "digital"
 ],
 "technik": [
  "vanilla-js",
  "gsap",
  "textplugin",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Text erscheint Zeichen für Zeichen, am Ende steht ein Cursor als Balken oder Block. Der Takt ist nicht gleichmäßig: Jedes Zeichen bekommt etwas Zufall, an Wortgrenzen und nach Satzzeichen entstehen kurze Pausen. Wechselt der Inhalt, wird nur bis zur ersten Abweichung zurückgelöscht und dann neu getippt. Eine moderne Variante ist der Streaming-Look aus KI-Chats: Wörter erscheinen in kleinen Brocken mit kurzem Fade.",
  "warum_es_wirkt": "Der unregelmäßige Takt wirkt menschlich, ein gleichmäßiger wirkt maschinell. Durch KI-Oberflächen ist tippender oder streamender Text 2026 ein vertrautes Zeichen für: Hier denkt oder antwortet etwas. Im Suchfeld zeigt er nebenbei, wie man formulieren darf.",
  "wann_einsetzen": "Hero mit wechselnden Begriffen, Suchfelder mit Beispielanfragen, Chat- und KI-Produktdemos, Terminal-Inszenierungen.",
  "wann_nicht": "Für Kernaussagen, die sofort lesbar sein müssen. Für lange Texte, weil das Warten nervt.",
  "varianten": [
   "Gleichmäßiger Takt (GSAP TextPlugin mit delimiter '' und ease 'none')",
   "Natürlicher Takt mit Zufall, Wort- und Satzzeichenpausen (Motion+ Typewriter: speed, variance, backspace 'character' | 'word' | 'all')",
   "Wortweises Streaming mit Fade (KI-Chat-Look)",
   "Diff-Modus: nur geänderte Zeichen löschen und tippen (TextPlugin type: 'diff')",
   "An Sichtbarkeit oder Scroll gekoppelt: play und pause, sobald das Element im Viewport ist"
  ],
  "umsetzung": "Eigenbau mit rekursivem setTimeout oder async/await: delay = takt × (1 + (Math.random() × 2 − 1) × varianz), plus Wortpause nach Leerzeichen, plus Satzzeichenpause nach . , ! ? : ; ' \" - ( ). Vor dem Wechsel gemeinsamen Anfang ermitteln und nur den Rest mit 0,2 × Takt löschen. Cursor als eigenes Element mit @keyframes und steps(1); beim Tippen nicht blinken lassen. Gegen springendes Layout alle möglichen Endtexte unsichtbar (visibility: hidden) ins selbe Grid-Feld legen. Als Platzhalter im Suchfeld: echtes Feld darunter, Tipptext als aria-hidden-Overlay, das bei Fokus oder Eingabe ausblendet. Mit GSAP: gsap.to(el, { text: { value: '…', delimiter: '' }, ease: 'none', duration }).",
  "mobil": "Unverändert. Lange Beispieltexte umbrechen lassen und die Höhe über Geister-Text sichern.",
  "reduzierte_bewegung": "Endtext sofort anzeigen, Cursor nicht blinken lassen.",
  "barrierefreiheit": "Den vollständigen Text als aria-label oder visuell versteckt anbieten, den sichtbaren Tipptext auf aria-hidden setzen. Keine aria-live-Region, die jedes Zeichen ansagt. Im Suchfeld beschreibt das aria-label ein Beispiel, der tippende Platzhalter bleibt stumm. Tippen pausieren, wenn das Feld Fokus hat oder nicht sichtbar ist."
 },
 "messwerte": {
  "easing": "none",
  "dauer_ms": "75 je Zeichen (normal), 130 (slow), 30 (fast); Cursor-Blinken 500",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "variance 'natural'; Backspace mit Faktor 0,2 der Tippdauer",
  "herkunft": "beobachtet",
  "quelle": "https://clerk.com/"
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "easeoutquart",
  "dauer_ms": 75
 },
 "gesehen_bei": [
  {
   "seite": "Motion+ Typewriter",
   "url": "https://motion.dev/docs/react-typewriter",
   "auszeichnung": "",
   "beobachtung": "Komponente mit forschungsbasiertem Standardtempo, variance 0–1, Verlangsamung bei langen Wörtern/Satzzeichen, Backspace-Modi, ARIA-Labels, play/pause für Scroll-Trigger.",
   "art": "artikel"
  },
  {
   "seite": "Osmo – Typewriter Effect",
   "url": "https://www.osmo.supply/resource/typewriter-effect",
   "auszeichnung": "",
   "beobachtung": "Als hervorgehobene Text-Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Clerk",
   "url": "https://clerk.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 43c75wm46u-0x.js): Motion+-Typewriter-Komponente im Produktionsbundle – speed {slow:130, normal:75, fast:30} ms, variance 'natural', Satzzeichen-Set (. , ! ? : ; ' \" - ( )) für Pausen, cursorClassName 'motion-typewriter-cursor', cursorBlinkDuration .5, backspace 'character', backspaceFactor .2, replace 'type', aria-label.",
   "art": "website"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle): Console-Query-Box mit 'Typewriter placeholder'-Texten (i18n-IDs mkt-ssr.console.queryBox.placeholder.* – z. B. 'Sell software subscriptions to our clients...'), wechselnde Beispiel-Eingaben werden getippt.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Motion+ Typewriter",
   "url": "https://motion.dev/docs/react-typewriter"
  },
  {
   "titel": "GSAP TextPlugin",
   "url": "https://gsap.com/docs/v3/Plugins/TextPlugin/"
  }
 ],
 "kombinierbar_mit": [
  "rotating-words",
  "scramble-decode",
  "shimmer-gradient-text"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Clerk nutzt die Motion+-Komponente unverändert – die Werte sind die tatsächlich ausgelieferten Defaults."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Suchfeld tippt Beispielsuchen im menschlichen Takt, löscht nur bis zur ersten Abweichung und schreibt weiter.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "none (linear) für den Takt; easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1) für Fade, Treffer und Bildwechsel",
   "takt_ms": 75,
   "takt_brief_ms": 30,
   "varianz": "±50 % Zufall je Zeichen (Faktor 1 ± 0,5)",
   "wortpause_ms": 60,
   "satzzeichenpause_ms": 225,
   "satzzeichen": ". , ! ? : ; ' \" - ( )",
   "langes_wort": "Faktor 1,2 bei Wörtern über 8 Zeichen",
   "loeschen_ms": 15,
   "loeschen_faktor": 0.2,
   "loeschen_modus": "natürlich: bis zur ersten Abweichung, zeichenweise; gleichmäßig: alles",
   "haltezeit_ms": 2200,
   "cursor": "Balken 2px × 1,05em, blinkt steps(1) mit 500 ms je Phase (1000 ms Zyklus), steht beim Tippen",
   "streaming": "Brocken aus 1–3 Wörtern, Abstand 90–160 ms, Fade 400 ms easeOutQuart von opacity 0 und blur(3px)",
   "streaming_ausblenden_ms": 200,
   "bildwechsel": "clip-path inset(100% 0 0 0) → inset(0) und scale 1.06 → 1, 1000 ms easeOutQuart",
   "ui_ms": "200 (Farbe, Ausblenden), 400 (Reiter, Treffer, Bildtext)",
   "stabile_hoehe": "alle Beispieltexte als unsichtbare Geister im selben Grid-Feld"
  },
  "ausloeser": "dauer",
  "touch": "Unverändert. Tippen ins Feld blendet den Vorschlag aus und hält ihn an; Reiter und Suchknopf mit 48 px Höhe.",
  "reduziert": "Erste Beispielsuche steht sofort vollständig da, Cursor ruht halbtransparent, kein Löschen, kein Streaming, Bildwechsel ohne Aufdecken. Die Antwortkarte zeigt den ganzen Text.",
  "korrekturen": {
   "beschreibung": "Text erscheint Zeichen für Zeichen, am Ende steht ein Cursor als Balken oder Block. Der Takt ist nicht gleichmäßig: Jedes Zeichen bekommt etwas Zufall, an Wortgrenzen und nach Satzzeichen entstehen kurze Pausen. Wechselt der Inhalt, wird nur bis zur ersten Abweichung zurückgelöscht und dann neu getippt. Eine moderne Variante ist der Streaming-Look aus KI-Chats: Wörter erscheinen in kleinen Brocken mit kurzem Fade.",
   "warum_es_wirkt": "Der unregelmäßige Takt wirkt menschlich, ein gleichmäßiger wirkt maschinell. Durch KI-Oberflächen ist tippender oder streamender Text 2026 ein vertrautes Zeichen für: Hier denkt oder antwortet etwas. Im Suchfeld zeigt er nebenbei, wie man formulieren darf.",
   "wann_einsetzen": "Hero mit wechselnden Begriffen, Suchfelder mit Beispielanfragen, Chat- und KI-Produktdemos, Terminal-Inszenierungen.",
   "wann_nicht": "Für Kernaussagen, die sofort lesbar sein müssen. Für lange Texte, weil das Warten nervt.",
   "varianten": [
    "Gleichmäßiger Takt (GSAP TextPlugin mit delimiter '' und ease 'none')",
    "Natürlicher Takt mit Zufall, Wort- und Satzzeichenpausen (Motion+ Typewriter: speed, variance, backspace 'character' | 'word' | 'all')",
    "Wortweises Streaming mit Fade (KI-Chat-Look)",
    "Diff-Modus: nur geänderte Zeichen löschen und tippen (TextPlugin type: 'diff')",
    "An Sichtbarkeit oder Scroll gekoppelt: play und pause, sobald das Element im Viewport ist"
   ],
   "umsetzung": "Eigenbau mit rekursivem setTimeout oder async/await: delay = takt × (1 + (Math.random() × 2 − 1) × varianz), plus Wortpause nach Leerzeichen, plus Satzzeichenpause nach . , ! ? : ; ' \" - ( ). Vor dem Wechsel gemeinsamen Anfang ermitteln und nur den Rest mit 0,2 × Takt löschen. Cursor als eigenes Element mit @keyframes und steps(1); beim Tippen nicht blinken lassen. Gegen springendes Layout alle möglichen Endtexte unsichtbar (visibility: hidden) ins selbe Grid-Feld legen. Als Platzhalter im Suchfeld: echtes Feld darunter, Tipptext als aria-hidden-Overlay, das bei Fokus oder Eingabe ausblendet. Mit GSAP: gsap.to(el, { text: { value: '…', delimiter: '' }, ease: 'none', duration }).",
   "mobil": "Unverändert. Lange Beispieltexte umbrechen lassen und die Höhe über Geister-Text sichern.",
   "reduzierte_bewegung": "Endtext sofort anzeigen, Cursor nicht blinken lassen.",
   "barrierefreiheit": "Den vollständigen Text als aria-label oder visuell versteckt anbieten, den sichtbaren Tipptext auf aria-hidden setzen. Keine aria-live-Region, die jedes Zeichen ansagt. Im Suchfeld beschreibt das aria-label ein Beispiel, der tippende Platzhalter bleibt stumm. Tippen pausieren, wenn das Feld Fokus hat oder nicht sichtbar ist."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept immobilien-diskret-hochwertig (passt: prompt-hero-eingabefeld ist dort Hero-Muster). Erfundene Marke Saalkontor Immobilien, Halle (Saale), Libre Caslon Display und Hanken Grotesk, eigene SVG-Szenen (Gründerzeithaus, Villa) statt Fotos. Das Suchfeld tippt Beispielsuchen für Kaufen bzw. Mieten mit den Motion+-Defaults, die clerk.com ausliefert (75 ms, natural, Backspace 0,2). Umschalter Natürlich, Gleichmäßig, Streaming; eine Taktspur zeigt die Pause vor jedem Zeichen als Balken. Nach jeder fertigen Suche wechseln Trefferzeile, Exposé-Daten und Bild (clip-path-Aufdeckung nach Rezept). Weiter unten tippt eine Maklerantwort im Tempo fast (30 ms), nur wenn sie sichtbar ist. Wortpause, Satzzeichenpause und Langwort-Faktor sind eigene Werte, die Motion-Interna sind nicht gemessen. vorfuehren() wechselt alle zwei Suchen den Modus. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --leise #85807a → #69645e (5,6:1 auf #fbf9f4, 4,8:1 auf Sand). Bewertungs-CTA --akzent #c4681e → #b05a17 (Weiß 4,9:1), Hover #9a4e13. Wartender Treffer-Hinweis opacity .45 → .86. 320 px: .buehne mit minmax(0, 1fr), Modus-Knöpfe umbrechend, Kopf bis 360 px enger. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}