{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "echo-stacked-type",
 "name": "Echo-/Stapel-Typografie",
 "name_en": "Repeated / echo stacked type",
 "kurz": "Ein Festivalname liegt vierfach in Spartenfarben unter sich selbst und fächert beim Hover und beim Scrollen zu Schichten auf: als text-shadow, als Kontur-Kopien oder als Tunnel.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "grafisch",
  "retro",
  "laut"
 ],
 "technik": [
  "css",
  "gsap",
  "scroll-driven-css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Ein Wort liegt mehrfach übereinander, als text-shadow-Duplikate oder als geklonte Ebenen. Jede Kopie ist leicht versetzt, skaliert oder hat eine andere Farbe oder Kontur. 2) Bei Hover oder Scroll fahren die Kopien auseinander (Fächer, Treppe, Tunnel) und wieder zusammen. 3) Kontur-Varianten mit -webkit-text-stroke und transparenter Füllung verstärken den grafischen Charakter.",
  "warum_es_wirkt": "Grafisch und plakativ, mit Retro- oder Y2K-Anmutung. Die Kopien erzeugen Tiefe ohne 3D.",
  "wann_einsetzen": "Event-, Festival-, Musik- und Mode-Seiten, Kampagnen-Heros, Footer. Gut, wenn ein kurzes Wort groß stehen darf.",
  "wann_nicht": "Bei ruhigen, sachlichen Marken und bei kleinen Schriftgraden. Nicht für Fließtext oder lange Überschriften.",
  "varianten": [
   "Text-Shadow-Duplikate (Osmo „Duplicate Text with Text Shadow“)",
   "Kontur-Kopien mit Versatz bei Hover oder Scroll",
   "Tunnel: Kopien skalieren in die Tiefe",
   "Ghost Trails: 3 bis 4 Kopien bleiben beim Scrollen verzögert zurück und blassen aus, je Kopie ein eigener animation-range auf einer view()-Timeline, nur transform und opacity"
  ],
  "umsetzung": "text-shadow-Liste mit einer registrierten Variable: @property --f { syntax: '<number>'; inherits: true; initial-value: 0 } und text-shadow: 0 calc(var(--f) * .22em) 0 Farbe1, 0 calc(var(--f) * .44em) 0 Farbe2, … Die Registrierung macht --f animierbar (transition: --f 450ms). Auslöser per Hover, per Klasse oder per Scroll (animation-timeline: view() oder ein Scroll-Listener). Für Kontur und Tunnel geklonte Ebenen in derselben Grid-Zelle (grid-area: 1 / 1) mit translate oder scale je Index. Platz für die volle Spreizung unter dem Wort reservieren, sonst springt das Layout.",
  "mobil": "Unverändert, aber weniger Kopien. Ohne Hover per Tippen oder Scroll auslösen.",
  "reduzierte_bewegung": "Statischer Stapel mit fester Spreizung.",
  "barrierefreiheit": "text-shadow wird nicht vorgelesen. Geklonte Ebenen sind aria-hidden, die Überschrift trägt das Wort im aria-label. Farbe nie als einzige Information."
 },
 "messwerte": {
  "easing": "power3.out",
  "dauer_ms": "400–800",
  "stagger_ms": "",
  "distanz": "Versatz 0,05–0,3em je Kopie",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 450
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Duplicate Text with Text Shadow",
   "url": "https://www.osmo.supply/resource/duplicate-text-with-text-shadow",
   "auszeichnung": "",
   "beobachtung": "Als Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo – Duplicate Text with Text Shadow",
   "url": "https://www.osmo.supply/resource/duplicate-text-with-text-shadow"
  }
 ],
 "kombinierbar_mit": [
  "text-roll-hover",
  "schrift-hero-viewportbreit"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Festivalname liegt vierfach in Spartenfarben unter sich selbst und fächert beim Hover und beim Scrollen zu Schichten auf: als text-shadow, als Kontur-Kopien oder als Tunnel.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)",
   "dauer_ms": 450,
   "spreizung": "@property --f <number>: Ruhe 0.27, Hover 1; --fe = min(1, --f + Scroll × 0.8)",
   "versatz_je_kopie": "calc(var(--fe) × 0.22em), also 0.06em in Ruhe bis 0.22em offen",
   "kopien": "4 (Telefon 3), Farben #c4421a, #3d5f9a, #2f7d4a, #b0186b",
   "text_shadow": "0 calc(--fe × 0.22em × i) 0 Farbe i, i = 1…4",
   "kontur": "-webkit-text-stroke max(1.5px, 0.012em), translate 0 (--fe × 0.22em × i)",
   "tunnel": "alle Ebenen als Kontur, Hauptwort max(2px, 0.016em); scale 1 − --fe × 0.085 × i, translate 0 (−0.035em × --fe × i), transform-origin 50% 62%",
   "scroll": "--s = scrollY / (0.7 × Viewporthöhe), 0…1, per requestAnimationFrame",
   "schrift": "Schibsted Grotesk 900, min(22vw, 40vh), Zeilenhöhe 0.8, Laufweite −0.045em; Telefon 31vw",
   "programmtitel": "@property --g 0 → 1 in 250 ms, Echo 0.07em und 0.14em in der Spartenfarbe (zweites mit 50 % gemischt); Touch statisch 0.55",
   "ui_ms": 150,
   "vorfuehrung": "Runde 3700 ms: offen ab 300 ms, zu ab 2700 ms; Vorschau wechselt je Runde Text-Shadow → Kontur → Tunnel"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover: Tippen auf das Wort schaltet die Spreizung um, Scrollen fächert ebenfalls auf. Drei statt vier Kopien. Programmtitel zeigen ein ruhiges, festes Echo.",
  "reduziert": "Statischer Stapel mit fester Spreizung 0.6, kein Übergang, Scroll ohne Wirkung. Programmtitel ohne Übergang.",
  "korrekturen": {
   "beschreibung": "1) Ein Wort liegt mehrfach übereinander, als text-shadow-Duplikate oder als geklonte Ebenen. Jede Kopie ist leicht versetzt, skaliert oder hat eine andere Farbe oder Kontur. 2) Bei Hover oder Scroll fahren die Kopien auseinander (Fächer, Treppe, Tunnel) und wieder zusammen. 3) Kontur-Varianten mit -webkit-text-stroke und transparenter Füllung verstärken den grafischen Charakter.",
   "warum_es_wirkt": "Grafisch und plakativ, mit Retro- oder Y2K-Anmutung. Die Kopien erzeugen Tiefe ohne 3D.",
   "wann_einsetzen": "Event-, Festival-, Musik- und Mode-Seiten, Kampagnen-Heros, Footer. Gut, wenn ein kurzes Wort groß stehen darf.",
   "wann_nicht": "Bei ruhigen, sachlichen Marken und bei kleinen Schriftgraden. Nicht für Fließtext oder lange Überschriften.",
   "varianten": [
    "Text-Shadow-Duplikate (Osmo „Duplicate Text with Text Shadow“)",
    "Kontur-Kopien mit Versatz bei Hover oder Scroll",
    "Tunnel: Kopien skalieren in die Tiefe",
    "Ghost Trails: 3 bis 4 Kopien bleiben beim Scrollen verzögert zurück und blassen aus, je Kopie ein eigener animation-range auf einer view()-Timeline, nur transform und opacity"
   ],
   "umsetzung": "text-shadow-Liste mit einer registrierten Variable: @property --f { syntax: '<number>'; inherits: true; initial-value: 0 } und text-shadow: 0 calc(var(--f) * .22em) 0 Farbe1, 0 calc(var(--f) * .44em) 0 Farbe2, … Die Registrierung macht --f animierbar (transition: --f 450ms). Auslöser per Hover, per Klasse oder per Scroll (animation-timeline: view() oder ein Scroll-Listener). Für Kontur und Tunnel geklonte Ebenen in derselben Grid-Zelle (grid-area: 1 / 1) mit translate oder scale je Index. Platz für die volle Spreizung unter dem Wort reservieren, sonst springt das Layout.",
   "mobil": "Unverändert, aber weniger Kopien. Ohne Hover per Tippen oder Scroll auslösen.",
   "reduzierte_bewegung": "Statischer Stapel mit fester Spreizung.",
   "barrierefreiheit": "text-shadow wird nicht vorgelesen. Geklonte Ebenen sind aria-hidden, die Überschrift trägt das Wort im aria-label. Farbe nie als einzige Information."
  },
  "geprueft": "03.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Festival FLÖZ 27 im Dortmunder Hafen (Kulturwerk Hafen Dortmund e. V.). Schibsted Grotesk 900, Atkinson Hyperlegible Next, IBM Plex Mono für Termine, Off-White mit Spartenfarben des Rezepts; jede Kopie ist eine Sparte, darunter das Programm mit Spartenlabel, Termin und Ticket je Zeile. Sticky-Navigation 78 px mit Vorlesen und Leichter Sprache. Kurve aus dem Rezept (gemessen), da die Musterwerte nur typisch sind; 450 ms liegen in beiden Spannen. Kein Pult nötig, der Umschalter steht im Hero. Referenzen als Prinzip: steirischerherbst.at, hkw.de, k72.ca, arqui9.com. AD-Review 01.11.2026: Note 4 Varianten 03.11.2026: Umschalter um „Ghost Trails“ ergänzt (?v=basis|ghost-trails); Text-Shadow, Kontur und Tunnel bleiben die Grundvariante basis. Eigene Umsetzung, die Codrops-Vorlage vom 13.10.2026 war nicht abrufbar. Selbsturteil 4.",
  "varianten": [
   {
    "id": "basis",
    "name": "Stapel mit Hover und Scroll",
    "wann": "Festival, Musik, Mode: ein kurzes Wort groß, die Kopien fächern bei Hover und Scroll auf, umschaltbar zwischen Text-Shadow, Kontur-Kopien und Tunnel.",
    "werte": {
     "aufbau": "4 Kopien in Spartenfarben, @property --f",
     "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1) 450 ms",
     "rezept": "kultur-programm-haltung (FLÖZ 27, Dortmund)",
     "details": "siehe bau.werte"
    }
   },
   {
    "id": "ghost-trails",
    "name": "Ghost Trails beim Scrollen",
    "wann": "Festival- oder Studioname bei Kultur, Musik oder Kreativstudio, einmal pro Seite: beim Scrollen bleiben die Kopien verzögert zurück und blassen aus, ohne Bibliothek.",
    "werte": {
     "timeline": "view-timeline: --spur block am Wort (h1), view-timeline-inset 78px 0px (Sticky-Navigation)",
     "ranges": "Kopie 1 exit −40 % → exit 30 %, Kopie 2 −34 % → 50 %, Kopie 3 −28 % → 70 %, Kopie 4 −22 % → 90 % (Telefon 3 Kopien)",
     "keyframes": "0 %: translate 0, opacity 1; 55 %: opacity 1; 100 %: translate 0 calc(0.2em × i), opacity 0; animation linear both",
     "eigenschaften": "nur translate und opacity, kein Blur, kein text-shadow",
     "kante": ".hero overflow: clip, die Spur verschwindet an der Unterkante",
     "a11y": "Kopien aria-hidden, h1 mit aria-label",
     "reduziert": "statischer Stapel: Kopien fest um 0.6 × 0.22em × i versetzt, keine Timeline",
     "rueckfall": "@supports (animation-timeline: view()) als Schutz für ältere Browser; ohne: statischer Stapel",
     "baseline": "Scroll-getriebene Animationen in allen Engines seit Firefox 159 (27.10.2026)",
     "vorfuehrung": "Seite scrollt selbst bis 0,5 × Viewporthöhe hinunter und zurück, Kosinus, 5 s je Runde"
    }
   }
  ]
 }
}