{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "blur-reveal",
 "name": "Unschärfe-Enthüllung (Blur-to-sharp) pro Wort",
 "name_en": "Blur reveal / blur-in text / Blur-in text reveal",
 "kurz": "Wörter tauchen gestaffelt aus der Unschärfe auf und werden scharf wie beim Fokusziehen einer Kamera.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "ruhig",
  "weich",
  "technisch-clean",
  "luxuriös",
  "atmosphärisch",
  "verträumt"
 ],
 "technik": [
  "gsap",
  "splittext",
  "scrolltrigger",
  "css",
  "scroll-driven-css",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Der Text wird in Wörter oder Zeichen zerlegt. Jedes Teil startet unsichtbar und unscharf (filter: blur 4–12px), auf Wunsch mit kleinem Versatz nach unten. Beim Eintritt oder an den Scroll gekoppelt werden die Teile gestaffelt scharf gestellt: blur auf 0, opacity auf 1, y auf 0. Weil der Stagger kürzer ist als die Dauer, überlappen die Teile. So läuft ein weicher Fokuszug über die Zeile.",
  "warum_es_wirkt": "Es wirkt wie das Scharfstellen einer Kamera: weich, hochwertig und weniger mechanisch als ein harter Masken-Reveal. Das passt zur ruhigen Produkt-Ästhetik und zu Glas- und Blur-Oberflächen. Die zufällige Reihenfolge lässt die Zeile atmen, statt sie abzuarbeiten.",
  "wann_einsetzen": "Hero-Headlines von Produkt- und Studio-Seiten, Intros, Untertitel unter einer maskierten Headline, Zitate und ruhige Statement-Abschnitte.",
  "wann_nicht": "Bei langen Texten, denn filter: blur auf vielen Elementen ist teuer. Nicht auf schwachen Geräten mit vielen gleichzeitig animierten Teilen. Nicht, wenn die Marke hart oder brutal wirken soll.",
  "varianten": [
   "Wortweise beim Laden oder Eintritt, Reihenfolge zufällig (TRIONN: 800 ms, Stagger 50 ms, blur 12px)",
   "Zeichenweise und schnell (Fantasy: 250 ms, Stagger gesamt 250 ms, blur 10px)",
   "Dezent mit kleinem Versatz (Attio: 350 ms, blur 4px, y 8px)",
   "Scroll-gescrubbt: Wörter werden mit dem Scrollfortschritt scharf",
   "Rückwärts beim Verlassen: der Text verschwimmt wieder (Fantasy: blur 10px, power2.in)",
   "Blur plus leichte Buchstaben-Spreizung über letter-spacing",
   "SVG-Filter (feTurbulence, feDisplacementMap) für organische Verzerrung"
  ],
  "umsetzung": "GSAP: gsap.fromTo(split.words, { filter: 'blur(12px)', autoAlpha: 0 }, { filter: 'blur(0px)', autoAlpha: 1, duration: 0.8, stagger: { each: 0.05, from: 'random' }, ease: 'power2.out', clearProps: 'filter,willChange' }). Scroll-Variante: dasselbe mit scrollTrigger { start: 'top 90%', scrub: true }. CSS ohne Bibliothek: @keyframes von blur und opacity mit animation-delay: calc(var(--i) * 50ms), oder scroll-gekoppelt mit animation-timeline: view() und animation-range-Versatz über --i. Wort- statt Zeichenebene bevorzugen, das spart Füllrate bei großen Schriftgraden. will-change: filter nur während der Animation setzen und danach entfernen. Safari rendert blur auf Inline-Elementen nur mit display: inline-block korrekt.",
  "mobil": "Wortweise funktioniert gut. Bei Zeichen-Splits auf dem Telefon den Blur verringern oder ganz weglassen und nur opacity und y animieren.",
  "reduzierte_bewegung": "Nur ein kurzes Einblenden über opacity, ohne Blur und Versatz. Oder den Text sofort sichtbar zeigen.",
  "barrierefreiheit": "SplitText mit aria: 'auto' setzt aria-label am Elternelement und versteckt die Teile vor Screenreadern. Der Endzustand muss immer erreicht werden: Text am Ende vollständig scharf, filter per clearProps entfernt, damit Zoom und Lesbarkeit nicht leiden."
 },
 "messwerte": {
  "easing": "power2.out (TRIONN); custom 'unmask' cubic-bezier(.16,1,.3,1) (Fantasy); [.25,1,.5,1] (Attio)",
  "dauer_ms": "800 (TRIONN, Wörter) / 250 (Fantasy, Zeichen) / 350 (Attio, Block)",
  "stagger_ms": "50 pro Wort, Reihenfolge zufällig (TRIONN); Gesamtstagger 250 (Fantasy)",
  "distanz": "blur 12px → 0 (TRIONN), 10px (Fantasy), 4px + y 8px (Attio)",
  "sonstiges": "ScrollTrigger start 'top 90%'; Fallback-Flicker blur 8px/fade 0,4",
  "herkunft": "beobachtet",
  "quelle": "https://trionn.com/_next/static/chunks/0_-x7hddx_1l6.js"
 },
 "kurve": {
  "bezier": [
   0.33,
   1,
   0.68,
   1
  ],
  "css": "cubic-bezier(0.33, 1, 0.68, 1)",
  "name": "power2.out",
  "dauer_ms": 800
 },
 "gesehen_bei": [
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Bundle enthält SplitText 3.15.0 und eine Text-Komponente: Wörter/Zeichen starten mit autoAlpha 0 und filter blur(12px), werden per ScrollTrigger (start 'top 90%') auf blur(0) gebracht – Dauer 0,8 s, stagger 0,05 from 'random', power2.out; optionaler Flicker-Modus (blur 8px).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Fantasy",
   "url": "https://www.fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "GSAP-Effekt 'charsInOut' im Bundle: SplitText chars, alpha 0 + blur(10px) → blur(0), 0,25 s, stagger amount 0,25, eigene Kurve 'unmask' (M0,0 C0.16,1 0.3,1 1,1); Ausblenden wieder mit blur(10px), power2.in.",
   "art": "website"
  },
  {
   "seite": "Attio",
   "url": "https://attio.com/",
   "auszeichnung": "",
   "beobachtung": "Framer-Motion-Variante im Bundle: initial filter blur(4px), opacity 0, y 8 → enter blur(0), opacity 1, y 0 in 0,35 s, ease [.25,1,.5,1] – dezente Produkt-Variante.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag ‚scroll‘ (Blur reveal, Text-Highlight-Ideen)",
   "url": "https://tympanus.net/codrops/tag/scroll/"
  },
  {
   "titel": "GSAP 3.13 – SplitText",
   "url": "https://gsap.com/blog/3-13"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "shimmer-gradient-text",
  "rotating-words",
  "scroll-word-highlight"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "scroll.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 3 Produktionsbelege mit Code-Werten; Zeichen-Variante bei Fantasy deutlich schneller als Wort-Variante."
  ],
  "zusammengelegt_aus": [
   "blur-reveal",
   "blur-text-reveal"
  ],
  "querverweis_kategorien": [
   "Scroll & Section-Animationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Wörter tauchen gestaffelt aus der Unschärfe auf und werden scharf wie beim Fokusziehen einer Kamera.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "SplitText@3.15.0",
   "ScrollTrigger@3.15.0",
   "CustomEase@3.15.0"
  ],
  "werte": {
   "woerter": {
    "teilen": "words",
    "easing": "power2.out",
    "css": "cubic-bezier(0.33, 1, 0.68, 1)",
    "dauer_ms": 800,
    "stagger_ms": 50,
    "reihenfolge": "random",
    "blur_px": 12,
    "y_px": 0,
    "start": "autoAlpha 0, blur(12px)",
    "quelle": "TRIONN"
   },
   "zeichen": {
    "teilen": "words,chars (animiert chars)",
    "easing": "unmask = CustomEase M0,0 C0.16,1 0.3,1 1,1",
    "css": "cubic-bezier(0.16, 1, 0.3, 1)",
    "dauer_ms": 250,
    "stagger_gesamt_ms": 250,
    "blur_px": 10,
    "y_px": 0,
    "quelle": "Fantasy"
   },
   "dezent": {
    "teilen": "words",
    "easing": "CustomEase M0,0 C0.25,1 0.5,1 1,1",
    "css": "cubic-bezier(0.25, 1, 0.5, 1)",
    "dauer_ms": 350,
    "stagger_ms": 30,
    "blur_px": 4,
    "y_px": 8,
    "quelle": "Attio (Werte), Stagger 30 ms eigene Wahl, Attio animiert den Block"
   },
   "fliesstext": {
    "teilen": "words",
    "easing": "power2.out",
    "dauer_ms": 800,
    "stagger_ms": 20,
    "reihenfolge": "random",
    "blur_px": 12,
    "verzoegerung_ms": 350
   },
   "bild": {
    "blur_px": "wie Variante",
    "scale": "1.04 → 1",
    "opacity": "0.6 → 1",
    "dauer_ms": "max(1,5 × Dauer, 900)",
    "verzoegerung_ms": 100,
    "easing": "wie Variante"
   },
   "abgang": {
    "blur_px": 10,
    "dauer_ms": 400,
    "easing": "power2.in",
    "stagger_gesamt_ms": 200,
    "reihenfolge": "random",
    "quelle": "Fantasy (blur, Kurve), Dauer eigene Wahl"
   },
   "scroll_zitat": {
    "teilen": "words",
    "von": "blur(12px), opacity 0.12",
    "nach": "blur(0), opacity 1",
    "easing": "power2.out",
    "stagger": 0.05,
    "scrollTrigger": {
     "start": "top 90%",
     "end": "bottom 55%",
     "scrub": true
    }
   },
   "aufraeumen": "will-change: filter, opacity nur während der Animation; clearProps 'filter,willChange,transform' am Ende",
   "safari": "Wörter und Zeichen display: inline-block",
   "reduziert": {
    "opacity": "0 → 1",
    "dauer_ms": 300,
    "easing": "none",
    "blur": false
   },
   "vorfuehrung": {
    "halten_ms": 3000,
    "pause_zwischen_ms": 250,
    "reihe": [
     "woerter",
     "zeichen",
     "dezent"
    ]
   }
  },
  "ausloeser": "laden",
  "touch": "Gleiches Scharfstellen beim Laden; Antippen der Headline stellt neu scharf. Das Zitat wird beim Wischen scroll-gekoppelt scharf. Bild rückt unter den Text (3:2).",
  "reduziert": "Kein Blur, kein Versatz: Headline, Text und Bild blenden in 300 ms linear ein. Das Zitat ist sofort sichtbar und scharf.",
  "korrekturen": {
   "beschreibung": "Der Text wird in Wörter oder Zeichen zerlegt. Jedes Teil startet unsichtbar und unscharf (filter: blur 4–12px), auf Wunsch mit kleinem Versatz nach unten. Beim Eintritt oder an den Scroll gekoppelt werden die Teile gestaffelt scharf gestellt: blur auf 0, opacity auf 1, y auf 0. Weil der Stagger kürzer ist als die Dauer, überlappen die Teile. So läuft ein weicher Fokuszug über die Zeile.",
   "warum_es_wirkt": "Es wirkt wie das Scharfstellen einer Kamera: weich, hochwertig und weniger mechanisch als ein harter Masken-Reveal. Das passt zur ruhigen Produkt-Ästhetik und zu Glas- und Blur-Oberflächen. Die zufällige Reihenfolge lässt die Zeile atmen, statt sie abzuarbeiten.",
   "wann_einsetzen": "Hero-Headlines von Produkt- und Studio-Seiten, Intros, Untertitel unter einer maskierten Headline, Zitate und ruhige Statement-Abschnitte.",
   "wann_nicht": "Bei langen Texten, denn filter: blur auf vielen Elementen ist teuer. Nicht auf schwachen Geräten mit vielen gleichzeitig animierten Teilen. Nicht, wenn die Marke hart oder brutal wirken soll.",
   "varianten": [
    "Wortweise beim Laden oder Eintritt, Reihenfolge zufällig (TRIONN: 800 ms, Stagger 50 ms, blur 12px)",
    "Zeichenweise und schnell (Fantasy: 250 ms, Stagger gesamt 250 ms, blur 10px)",
    "Dezent mit kleinem Versatz (Attio: 350 ms, blur 4px, y 8px)",
    "Scroll-gescrubbt: Wörter werden mit dem Scrollfortschritt scharf",
    "Rückwärts beim Verlassen: der Text verschwimmt wieder (Fantasy: blur 10px, power2.in)",
    "Blur plus leichte Buchstaben-Spreizung über letter-spacing",
    "SVG-Filter (feTurbulence, feDisplacementMap) für organische Verzerrung"
   ],
   "umsetzung": "GSAP: gsap.fromTo(split.words, { filter: 'blur(12px)', autoAlpha: 0 }, { filter: 'blur(0px)', autoAlpha: 1, duration: 0.8, stagger: { each: 0.05, from: 'random' }, ease: 'power2.out', clearProps: 'filter,willChange' }). Scroll-Variante: dasselbe mit scrollTrigger { start: 'top 90%', scrub: true }. CSS ohne Bibliothek: @keyframes von blur und opacity mit animation-delay: calc(var(--i) * 50ms), oder scroll-gekoppelt mit animation-timeline: view() und animation-range-Versatz über --i. Wort- statt Zeichenebene bevorzugen, das spart Füllrate bei großen Schriftgraden. will-change: filter nur während der Animation setzen und danach entfernen. Safari rendert blur auf Inline-Elementen nur mit display: inline-block korrekt.",
   "mobil": "Wortweise funktioniert gut. Bei Zeichen-Splits auf dem Telefon den Blur verringern oder ganz weglassen und nur opacity und y animieren.",
   "reduzierte_bewegung": "Nur ein kurzes Einblenden über opacity, ohne Blur und Versatz. Oder den Text sofort sichtbar zeigen.",
   "barrierefreiheit": "SplitText mit aria: 'auto' setzt aria-label am Elternelement und versteckt die Teile vor Screenreadern. Der Endzustand muss immer erreicht werden: Text am Ende vollständig scharf, filter per clearProps entfernt, damit Zoom und Lesbarkeit nicht leiden."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Kölner Markenstudios. Umschalter zeigt die drei gemessenen Varianten (TRIONN wortweise zufällig, Fantasy zeichenweise, Attio dezent mit y 8px). Eine Fokusskala zählt den Blur live mit, das Bild zieht den Fokus mit. Darunter ein Zitat, dessen Wörter scroll-gescrubbt scharf werden. Die Vorführung wechselt die Varianten und lässt den Text dazwischen wieder verschwimmen. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .56 → .66 (5,5:1); Knopf „Neu scharfstellen“ für die Tastatur in der Textspalte, unsichtbar bis zum Fokus (Klick wandert zur klickbaren Spalte hoch); Knopf-Rahmen im Kontrastmodus."
 }
}