{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kinetic-3d-shader-type",
 "name": "3D- und Shader-Typografie",
 "name_en": "Kinetic 3D / shader typography (twist, bulge, distortion in WebGL)",
 "kurz": "Ein Wort wird zum Material: In WebGL gerendert, wölbt, verdrillt oder schmilzt es unter dem Zeiger, der echte Text bleibt darunter im DOM.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "laut",
  "warm",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "materiell",
  "laut",
  "technisch"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "react-three-fiber",
  "troika-text"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "1) Der Text wird in WebGL gezeichnet: als SDF- oder MSDF-Schrift (troika-three-text, MSDF-Atlas) oder als Textur aus einem Canvas. 2) Ein Vertex- oder Fragment-Shader verformt ihn: verdrillen um die eigene Achse, wölben unter dem Cursor, Wellen, verflüssigen, Rauschen. 3) Die Parameter hängen an Cursor, Scroll oder Zeit. 4) Der echte HTML-Text bleibt als Ebene darunter, für Screenreader, Auswahl und Suchmaschinen.",
  "warum_es_wirkt": "Die Schrift hört auf, Fläche zu sein, und wird zum Material: Gummi, Flüssigkeit, Glas, Creme. Das unterscheidet sich deutlich von allem, was DOM und CSS können, und bleibt im Gedächtnis. Es passt zum Trend Tactile Maximalism mit skulpturaler Typografie.",
  "wann_einsetzen": "Ein einzelnes Hero-Wort als Signatur. Portfolios von Kreativ-Entwicklern, Kampagnen, Musik und Kultur. Auch bei Marken mit sinnlichem Produkt (Eis, Schokolade, Getränke), wenn das Wort die Eigenschaft des Produkts zeigt.",
  "wann_nicht": "Lesetext und alles, was Information trägt. Projekte ohne WebGL-Erfahrung oder Budget. Seiten, bei denen Ladezeit kritisch ist. Nie mehrere solcher Wörter auf einem Bildschirm.",
  "varianten": [
   "Verdrillen in 3D: Text dreht sich um die Längsachse (Codrops: Twisting and rotating text in 3D with Three.js and shaders)",
   "Wölbung unter dem Cursor (Codrops, React Three Fiber)",
   "Verflüssigen: eine Fluid-Simulation verzerrt die Schrift unter dem Cursor (Unseen Studio)",
   "Tippbarer 3D-Text (Codrops, Ksenia Kondrashova)",
   "Flüssig- oder Glas-Typo mit WebGPU und TSL",
   "Leichtere Alternative ohne WebGL: Motion-Type mit SVG und GSAP (Codrops, Yuri Artiukh)"
  ],
  "umsetzung": "Three.js mit troika-three-text (SDF), MSDF-Atlas oder Canvas-Textur auf einer fein unterteilten Ebene. Verdrillen im Vertex-Shader: pos.yz = rotate(pos.yz, uTwist * pos.x). Wölbung: d = Abstand zur Cursor-UV, pos.z += smoothstep(r, 0., d) * strength. Normalen nach der Verformung neu berechnen, sonst fehlt das Licht.\n\nFallstricke: Für Atlas oder Canvas-Textur erst nach document.fonts.load zeichnen, sonst landet die Ersatzschrift in der Textur. Schriftlizenz für die Umwandlung in einen Atlas prüfen. Pixel-Verhältnis auf höchstens 2 begrenzen. Das WebGL-Wort genau über das Rechteck des HTML-Worts legen, damit Layout und Fallback identisch sind.",
  "mobil": "Einfachere Shader, weniger Geometrie und kleinere Canvas-Auflösung. Ohne Hover braucht es eigenes Verhalten: Wischen, Tippen oder ein leiser Selbstlauf. Alternativ ein Standbild oder kurzes Video.",
  "reduzierte_bewegung": "Standbild der Typo oder der HTML-Text ohne Verformung.",
  "barrierefreiheit": "Canvas mit aria-hidden, der echte Text bleibt im DOM. Keine Information nur im WebGL. Das HTML-Wort ist der Fallback ohne WebGL und nach Kontextverlust."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "MSDF-Atlanten (Brier/Mona Sans Bold; PS Times, Times Now, Helvetica Neue); Unseen: Text-Fluid resolution 128, force 20, iterations 1, mouseRadius .2",
  "herkunft": "beobachtet",
  "quelle": "https://landonorris.com/ ; https://immersive-g.com/ ; https://unseen.co/"
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "Wix – Web Design Trends 2026",
   "url": "https://www.wix.com/blog/web-design-trends",
   "auszeichnung": "",
   "beobachtung": "Trend ‚Tactile maximalism‘ mit ‚sculptural typography‘ und reaktiven Texturen.",
   "art": "artikel"
  },
  {
   "seite": "Lando Norris (OFF+BRAND)",
   "url": "https://landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle lando-by-OFF+BRAND.05.js von lando.itsoffbrand.io): WebGL-Text mit MSDF-Schriftatlanten – fonts.brier {atlas Brier-Bold-02.webp, json Brier-Bold-msdf.json} und fonts.mona {MonaSans-Bold-02.webp, MonaSans-Bold-msdf.json}; dazu troika-Worker im Bundle.",
   "art": "website"
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle entry.DyxL_KXi.js): WebGL-Assetliste lädt MSDF-Schriften /webgl/msdf/PSTimesBody/PSTimes-Regular.png+json, TimesNowNumbers und Helvetica-neue – Typografie wird im Shader gerendert.",
   "art": "website"
  },
  {
   "seite": "Unseen Studio",
   "url": "https://unseen.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (theme.js): Startseiten-Text wird in eine eigene textScene/Render-Target gezeichnet (homeTextMesh mit ShaderMaterial); uniforms.uFluidTexture bekommt die Geschwindigkeits-Textur einer Fluid-Simulation (resolution 128, force 20, mouseRadius .2) – die Schrift verzerrt sich unter dem Cursor.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag ‚typography‘",
   "url": "https://tympanus.net/codrops/tag/typography/"
  }
 ],
 "kombinierbar_mit": [
  "webgl-fluid-cursor",
  "scroll-char-choreo"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Drei Produktionsseiten mit Shader-Typografie (MSDF bzw. Text-Render-Target + Fluid-Verzerrung)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Wort wird zum Material: In WebGL gerendert, wölbt, verdrillt oder schmilzt es unter dem Zeiger, der echte Text bleibt darunter im DOM.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "easing": "expo.out = cubic-bezier(0.16, 1, 0.3, 1) für Ein-/Ausblenden der Verformung und das Einrollen; Zeiger folgt mit Lerp 0.1 pro Frame (bildratenunabhängig: 1 − 0.9^(dt/16.7 ms))",
   "dauer_ms": "Verformung ein 900 · aus 1600 · Einrollen beim Sortenwechsel 1400 (Spalten klappen von links nach rechts um 90° hoch) · Tipp-Impuls 700 · Vorführung 7000 je Variante",
   "woelbung": "pos.z += smoothstep(0.2, 0, d) × 0.55 × Höhe der Textebene; Radius 0.2 × Wortbreite (Unseen mouseRadius .2); seitliches Nachgeben 0.06",
   "verdrillen": "Drehung um die Längsachse, Winkel = uTwist × (x − 0.5); uTwist bis ±72° (0.4π) je nach Zeiger-x, also ±36° an den Wortenden; Grundwelle 0.3 rad mit 1.2 rad/s. Mehr als ~60° an den Enden zeigt die gestapelten Ebenen hochkant",
   "schmelzen": "Hitze-Textur 128 Spalten (Unseen Fluid resolution 128); Spurbreite 0.12 × Wortbreite; Aufbau 2.2 pro Sekunde; Halbwert 1400 ms (echte Zeit, max. 250 ms je Bild); Fließweg bis 1.0 × Höhe, Profil (1 − v)^1.8, Tropfenrauschen 0.35–1.0 je Spalte",
   "extrusion": "10 gestapelte Ebenen auf 0.1 em Tiefe (Touch und Vorschau 7), Schatten-Ebene 0.18 em dahinter mit 32 % Deckkraft",
   "parallaxe": "Gruppe neigt sich zum Zeiger: x 0.1 rad, y 0.16 rad bei Zeiger am Wortrand, Lerp 0.06 pro Frame; ohne Zeiger langsames Pendeln (Perioden 2,6 s und 3,1 s)",
   "geometrie": "PlaneGeometry 160 × 32 Segmente, Normalen per finite Differenzen im Vertex-Shader; Kamera FOV 30°, Pixel-genau auf die Bühne abgestimmt",
   "textur": "Canvas 2D, Fraunces 600 mit SOFT 100, Auflösung DPR × 1.25 (max. 4096 px Breite), Mipmaps, Kantenglättung per fwidth",
   "dpr": "≤ 2 (Vorschau 1.5)",
   "farben": "Wölbung #f4e7c5 / Seite #c79a52 · Verdrillen #f3c2b1 / #b5645a · Schmelzen #efc56f / #a8702a · Grund #293e3a",
   "ui": "Varianten-Umschalter 150 ms linear; in der Vorführung ohne Übergang"
  },
  "ausloeser": "hover",
  "touch": "Ohne Eingabe spielt das Wort leise von selbst (gedachter Finger ohne Ring, nach 3,5 s Ruhe). Wischen über das Wort verformt es direkt, Tippen löst einen 700-ms-Impuls an der Tippstelle aus. 7 statt 10 Ebenen; Seite scrollt senkrecht weiter (touch-action: pan-y).",
  "reduziert": "Kein WebGL: Das HTML-Wort steht still mit einer CSS-Extrusion aus text-shadow (6 px in der Sortenfarbe). Werte-Anzeige nennt den Standbild-Modus. Gleiches gilt ohne WebGL oder nach Kontextverlust.",
  "korrekturen": {
   "beschreibung": "1) Der Text wird in WebGL gezeichnet: als SDF- oder MSDF-Schrift (troika-three-text, MSDF-Atlas) oder als Textur aus einem Canvas. 2) Ein Vertex- oder Fragment-Shader verformt ihn: verdrillen um die eigene Achse, wölben unter dem Cursor, Wellen, verflüssigen, Rauschen. 3) Die Parameter hängen an Cursor, Scroll oder Zeit. 4) Der echte HTML-Text bleibt als Ebene darunter, für Screenreader, Auswahl und Suchmaschinen.",
   "warum_es_wirkt": "Die Schrift hört auf, Fläche zu sein, und wird zum Material: Gummi, Flüssigkeit, Glas, Creme. Das unterscheidet sich deutlich von allem, was DOM und CSS können, und bleibt im Gedächtnis. Es passt zum Trend Tactile Maximalism mit skulpturaler Typografie.",
   "wann_einsetzen": "Ein einzelnes Hero-Wort als Signatur. Portfolios von Kreativ-Entwicklern, Kampagnen, Musik und Kultur. Auch bei Marken mit sinnlichem Produkt (Eis, Schokolade, Getränke), wenn das Wort die Eigenschaft des Produkts zeigt.",
   "wann_nicht": "Lesetext und alles, was Information trägt. Projekte ohne WebGL-Erfahrung oder Budget. Seiten, bei denen Ladezeit kritisch ist. Nie mehrere solcher Wörter auf einem Bildschirm.",
   "varianten": [
    "Verdrillen in 3D: Text dreht sich um die Längsachse (Codrops: Twisting and rotating text in 3D with Three.js and shaders)",
    "Wölbung unter dem Cursor (Codrops, React Three Fiber)",
    "Verflüssigen: eine Fluid-Simulation verzerrt die Schrift unter dem Cursor (Unseen Studio)",
    "Tippbarer 3D-Text (Codrops, Ksenia Kondrashova)",
    "Flüssig- oder Glas-Typo mit WebGPU und TSL",
    "Leichtere Alternative ohne WebGL: Motion-Type mit SVG und GSAP (Codrops, Yuri Artiukh)"
   ],
   "umsetzung": "Three.js mit troika-three-text (SDF), MSDF-Atlas oder Canvas-Textur auf einer fein unterteilten Ebene. Verdrillen im Vertex-Shader: pos.yz = rotate(pos.yz, uTwist * pos.x). Wölbung: d = Abstand zur Cursor-UV, pos.z += smoothstep(r, 0., d) * strength. Normalen nach der Verformung neu berechnen, sonst fehlt das Licht.\n\nFallstricke: Für Atlas oder Canvas-Textur erst nach document.fonts.load zeichnen, sonst landet die Ersatzschrift in der Textur. Schriftlizenz für die Umwandlung in einen Atlas prüfen. Pixel-Verhältnis auf höchstens 2 begrenzen. Das WebGL-Wort genau über das Rechteck des HTML-Worts legen, damit Layout und Fallback identisch sind.",
   "mobil": "Einfachere Shader, weniger Geometrie und kleinere Canvas-Auflösung. Ohne Hover braucht es eigenes Verhalten: Wischen, Tippen oder ein leiser Selbstlauf. Alternativ ein Standbild oder kurzes Video.",
   "reduzierte_bewegung": "Standbild der Typo oder der HTML-Text ohne Verformung.",
   "barrierefreiheit": "Canvas mit aria-hidden, der echte Text bleibt im DOM. Keine Information nur im WebGL. Das HTML-Wort ist der Fallback ohne WebGL und nach Kontextverlust."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept gastro-warm-appetitlich, erfundene Eismanufaktur Kugelwerk im Ulmer Fischerviertel (Fraunces SOFT 100 + Commissioner, Waldgrün/Senf/Rosé). Ein Wort pro Sorte in Three.js aus einer Canvas-Textur auf einer 160×32-Ebene mit 10 Extrusionsebenen; drei Varianten per Umschalter: Wölbung (cremig.), Verdrillen (gedreht.), Schmelzen (schmilzt.). Das HTML-Wort bleibt als transparenter echter Text darüber und ist der Fallback. Öffnungsstatus und KW werden aus den Zeiten berechnet. Vorführung: gedachter Zeiger, je Variante 7 s, klickt den nächsten Knopf. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: --tinte-leise .62 → .76 (4,8:1 auch auf der dunkleren Besuch-Fläche); Fokus: outline 2px var(--creme) statt outline: none an Modi-Knöpfen und Knöpfen (Besuch: --tinte); Knopf „Bewegung anhalten“ (aria-pressed) hinter den Modi, friert Neigungsdrift, Shader-Zeit und Selbstlauf über dieselbe pause() ein, Fortsetzen ohne Sprung (Vorschau/reduziert ausgeblendet); Kontrastmodus: Wort als CanvasText statt WebGL, Knopf-Rahmen."
 }
}