{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kinetische-typo-intro",
 "name": "Kinetisches Typo-Intro (Wortwiederholung, Kreistext)",
 "name_en": "Kinetic typography intro",
 "kurz": "Der Festivalname wechselt, stapelt oder dreht sich bildfüllend, bis er als einzelnes Wort zur Headline der Seite wird.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "plakativ",
  "rhythmisch",
  "verspielt"
 ],
 "technik": [
  "gsap",
  "svg",
  "splittext",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Wort oder Markenname füllt die Fläche. Es wechselt im schnellen Takt, verdoppelt sich in Reihen oder dreht sich als Kreistext. Die Bewegung beschleunigt bis zu einem Höhepunkt. Dann fallen die Wiederholungen auf ein einzelnes Wort zusammen, das zur Headline wird, oder die Fläche öffnet sich zur Seite.",
  "warum_es_wirkt": "Laut, rhythmisch und plakativ: Typo wird zum Bild. Am stärksten bei Marken mit kurzem, prägnantem Namen.",
  "wann_einsetzen": "Bei Event-, Festival-, Musik-, Mode- und Kampagnenseiten, und nur auf der Startseite.",
  "wann_nicht": "Bei ruhigen, seriösen Auftritten, bei langen Namen und auf Seiten, deren Besucher sofort Termine oder Öffnungszeiten brauchen.",
  "varianten": [
   "Wortwechsel: neun Wörter im Takt von 150 ms, danach fährt das Panel weg (Dennis Snellenberg)",
   "Stapel aus Outline-Typo, der zu einem vollen Wort zusammenfällt",
   "Kreisförmiger SVG-Text, der beschleunigt und sich öffnet"
  ],
  "umsetzung": "Wortwechsel: eine Timeline tauscht den Text alle 150 ms, danach fährt das Panel in 800 ms mit power4.inOut nach oben und der Inhalt kommt mit expo.out und 50 ms Versatz aus 50vh nach. Stapel: das Wort N-mal klonen (aria-hidden), absolut stapeln, per Timeline mit y-Versätzen und Stagger auseinanderziehen, laufen lassen und wieder zusammenführen; die Headline per FLIP von der Mitte an ihren Platz fliegen lassen. Kreistext: <svg><path id=… d=\"Kreisbogen\"/><text><textPath href=…>…</textPath></text></svg> mit Rotations-Tween, Öffnung über eine radiale mask-image. Viele große Textknoten kosten Paint-Zeit: will-change: transform, keine text-shadow. Nur auf der Startseite zeigen, Unterseiten bekommen höchstens ein kurzes Intro.",
  "mobil": "Weniger Klone. Schriftgröße per clamp() oder Container-Einheiten, kürzerer Weg für den Inhalt (10vh).",
  "reduzierte_bewegung": "Nur die finale Headline.",
  "barrierefreiheit": "Klone und Intro aria-hidden, lesbar ist nur das finale Wort als h1. Große Farbflächen nicht im Takt wechseln (Blitzgefahr), nur das Wort. Überspringen per Knopf und Esc, Fokus danach auf die Headline."
 },
 "messwerte": {
  "easing": "Power4.easeInOut (Panel), Expo.easeOut (Inhalt)",
  "dauer_ms": "Wortwechsel ca. 9 × 150; Panel 800",
  "stagger_ms": "150 je Wort; 50 Inhalt",
  "distanz": "Inhalt y 50vh → 0 (Mobil 10vh)",
  "sonstiges": "nur auf der Startseite, Unterseiten bekommen das kurze Intro",
  "herkunft": "beobachtet",
  "quelle": "https://dennissnellenberg.com/assets/js/index-new.js"
 },
 "kurve": {
  "bezier": [
   0.83,
   0,
   0.17,
   1
  ],
  "css": "cubic-bezier(0.83, 0, 0.17, 1)",
  "name": "power4.inOut",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Animating with Agents – Kinetic Type Site (10/2026)",
   "url": "https://tympanus.net/codrops/2026/10/26/animating-agents-gsap-animaxxing/",
   "auszeichnung": "",
   "beobachtung": "Nur Titel gesehen: Bau einer Kinetic-Type-Seite mit GSAP und Animaxxing Skills. Nicht geöffnet.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (index-new.js initLoaderHome): Begrüßung in neun Sprachen (Hello, Bonjour, स्वागत हे, Ciao, Olá, おい, Hallå, Guten tag, Hallo) wechselt im Stagger .15s, danach fährt das Panel nach oben (.8s Power4.easeInOut) und der Inhalt kommt mit Expo.easeOut (Stagger .05) nach.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag: intro",
   "url": "https://tympanus.net/codrops/tag/intro"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "seitenname-typo-uebergang"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Wortwechsel-Variante als Produktionsbeleg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Festivalname wechselt, stapelt oder dreht sich bildfüllend, bis er als einzelnes Wort zur Headline der Seite wird.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "wortwechsel": "9 Wörter (Telefon 7): erstes 400 ms expo.out (opacity 0 → 1, y 24 px → 0), dann je 150 ms Wechsel, letztes Wort 350 ms stehen; Wortgröße clamp(64px, 17vw, 280px)",
   "panel": "800 ms power4.inOut (cubic-bezier(0.83, 0, 0.17, 1)), yPercent 0 → -100",
   "inhalt": "y 50vh → 0 (Telefon 10vh), 1000 ms expo.out, Versatz 50 ms, Start 200 ms nach dem Panel",
   "stapel": "7 Reihen (Telefon 5) Outline-Typo, Schriftgröße 1,18 × Reihenhöhe, -webkit-text-stroke 2 px (Telefon 1,5 px); auffächern 700 ms expo.out, Versatz 30 ms ab Mitte; Laufband ±14 % Zeilenbreite 1200 ms power4.in; Zusammenfallen 800 ms power4.inOut; Wort fliegt mit scale Reihe → 1 in 800 ms power4.inOut auf die Headline, Grund blendet in 480 ms aus",
   "kreis": "SVG textPath r 390 (viewBox 1000), Schibsted 800 54 px, letter-spacing .12em; Ring scale 0.7 → 1 in 600 ms expo.out, Drehung 0 → 420° in 1500 ms power4.in; Öffnung als radiale Maske 0 → halbe Diagonale in 800 ms power4.inOut, Ring dabei scale → 3.2 und ausblenden",
   "ui_hover": "200 ms cubic-bezier(0.215, 0.61, 0.355, 1)",
   "schrift": "Schibsted Grotesk 900, letter-spacing -0.04em, Headline min(44cqi, 56vh), line-height 0.8"
  },
  "ausloeser": "laden",
  "touch": "Weniger Klone: 5 statt 7 Reihen im Stapel, 7 statt 9 Wörter. Inhalt kommt nur 10vh statt 50vh von unten. Headline per Container-Einheit (44cqi) auf die Breite gesetzt. Überspringen-Knopf 40 px hoch.",
  "reduziert": "Kein Intro, keine Klone: Die Seite steht sofort mit der finalen Headline da. Die Werte-Anzeige nennt das.",
  "korrekturen": {
   "beschreibung": "Ein Wort oder Markenname füllt die Fläche. Es wechselt im schnellen Takt, verdoppelt sich in Reihen oder dreht sich als Kreistext. Die Bewegung beschleunigt bis zu einem Höhepunkt. Dann fallen die Wiederholungen auf ein einzelnes Wort zusammen, das zur Headline wird, oder die Fläche öffnet sich zur Seite.",
   "warum_es_wirkt": "Laut, rhythmisch und plakativ: Typo wird zum Bild. Am stärksten bei Marken mit kurzem, prägnantem Namen.",
   "wann_einsetzen": "Bei Event-, Festival-, Musik-, Mode- und Kampagnenseiten, und nur auf der Startseite.",
   "wann_nicht": "Bei ruhigen, seriösen Auftritten, bei langen Namen und auf Seiten, deren Besucher sofort Termine oder Öffnungszeiten brauchen.",
   "varianten": [
    "Wortwechsel: neun Wörter im Takt von 150 ms, danach fährt das Panel weg (Dennis Snellenberg)",
    "Stapel aus Outline-Typo, der zu einem vollen Wort zusammenfällt",
    "Kreisförmiger SVG-Text, der beschleunigt und sich öffnet"
   ],
   "umsetzung": "Wortwechsel: eine Timeline tauscht den Text alle 150 ms, danach fährt das Panel in 800 ms mit power4.inOut nach oben und der Inhalt kommt mit expo.out und 50 ms Versatz aus 50vh nach. Stapel: das Wort N-mal klonen (aria-hidden), absolut stapeln, per Timeline mit y-Versätzen und Stagger auseinanderziehen, laufen lassen und wieder zusammenführen; die Headline per FLIP von der Mitte an ihren Platz fliegen lassen. Kreistext: <svg><path id=… d=\"Kreisbogen\"/><text><textPath href=…>…</textPath></text></svg> mit Rotations-Tween, Öffnung über eine radiale mask-image. Viele große Textknoten kosten Paint-Zeit: will-change: transform, keine text-shadow. Nur auf der Startseite zeigen, Unterseiten bekommen höchstens ein kurzes Intro.",
   "mobil": "Weniger Klone. Schriftgröße per clamp() oder Container-Einheiten, kürzerer Weg für den Inhalt (10vh).",
   "reduzierte_bewegung": "Nur die finale Headline.",
   "barrierefreiheit": "Klone und Intro aria-hidden, lesbar ist nur das finale Wort als h1. Große Farbflächen nicht im Takt wechseln (Blitzgefahr), nur das Wort. Überspringen per Knopf und Esc, Fokus danach auf die Headline."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt nach Rezept kultur-programm-haltung in der Festival-Ausprägung, die das Rezept ausdrücklich erlaubt: erfundenes Festival „quer“ für Musik, Tanz, Kunst und Film in Weimar (13. bis 22.11.2026). Schibsted Grotesk 900, Atkinson Hyperlegible Next, IBM Plex Mono, Schwarz auf #efede9, vier Spartenfarben immer mit Textlabel. Das Rezept lehnt Ladeshows für Kulturhäuser ab; deshalb ist das Intro kurz, überspringbar, nur auf der Startseite und bei reduzierter Bewegung ganz weg. Wortwechsel mit den gemessenen Snellenberg-Werten (150 ms, Panel 800 ms power4.inOut, Inhalt expo.out Stagger 50 ms, 50vh/10vh); der Takt wechselt nur das Wort und einen kleinen Spartenpunkt, nie die ganze Fläche. Stapel endet per FLIP auf der echten h1. Referenzen (nur Prinzipien): dennissnellenberg.com, steirischerherbst.at, schauspielhaus.ch, hkw.de, berlinerfestspiele.de. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: Spartenfarben --musik #c4421a → #bc3f19 und --kunst #2f7d4a → #2d7847 (je 4,6:1 auf Grund), Kopf und main sind inert, solange das Intro liegt, „Überspringen“ liegt jetzt über dem Intro (z-index 31, hell auf Dunkel; lag vorher unsichtbar darunter) und verschwindet, sobald das Intro abgeht, Links „Leichte Sprache“ usw. mit padding-block 3px (Zielhöhe ≥ 24 px)."
 }
}