{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "fluessigmetall-chrom",
 "name": "Flüssigmetall / Chrom",
 "name_en": "Liquid metal / chrome material",
 "kurz": "Der Schriftzug eines Rostocker Motion-Studios fließt als flüssiges Chrom, wird zum 3D-Tropfen oder glüht in der Signalfarbe.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "luxuriös",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "retro-futuristisch",
  "laut",
  "luxuriös"
 ],
 "technik": [
  "webgl-shader",
  "three"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Logo oder Schriftzug wirkt wie aus flüssigem Chrom gegossen. In 2D dient die Form als Maske. Aus ihrem Distanzfeld berechnet ein Shader eine Wölbung und daraus eine Pseudo-Normale. Mit dieser Normalen tastet er eine Umgebung aus Studio-Lichtstreifen ab, das ergibt die Chromreflexe. Eine zeit- oder cursorabhängige Verzerrung lässt die Reflexe fließen. In 3D trägt eine weiche, sich verformende Geometrie ein Material mit metalness 1 und roughness 0 bis 0.15 vor einer Environment-Map.",
  "warum_es_wirkt": "Chrom ist das Material von Retrofuturismus und Y2K. In hoher Renderqualität wirkt es wertig und laut zugleich. Ein Schriftzug aus Metall prägt sich sofort ein, weil er bei jeder Bewegung anders spiegelt.",
  "wann_einsetzen": "Logo-Animation, Musik, Mode, Tech-Launch, Event, Studio-Hero. Ein Akzent pro Seite.",
  "wann_nicht": "Seriöse B2B-Umfelder, in denen es verspielt wirkt. Große Flächen oder Hintergründe. Feine Schriftschnitte: Dünne Striche bieten keinen Platz für eine Wölbung.",
  "varianten": [
   "2D-Shader auf Logo oder Schriftzug (Paper Shaders: Liquid metal)",
   "3D-Tropfen mit Chrom-Material vor einer Environment-Map",
   "Verwandte Logo-Effekte auf derselben Wölbung: Wärmebild (Heatmap) oder Gem Smoke"
  ],
  "umsetzung": "2D: Distanzfeld aus der Logo-Maske, per Jump-Flood auf der GPU, als vorab gebackene Textur oder per Distanztransformation auf der CPU. Die Normale ist der Gradient der Höhe. Weichgezeichnete Höhe nimmt die Grate an der Mittelachse, dann wirkt die Form flüssig statt facettiert. Die Kante aus dem Distanzfeld glätten. 3D: MeshPhysicalMaterial mit metalness 1, roughness 0.08, clearcoat 1 und ior 2.4 (Trionn). Eine Environment-Map ist Pflicht, sonst bleibt Metall schwarz. Ein eigenes Lichtstudio per PMREMGenerator.fromScene erspart den HDR-Download. Die Verformung läuft im Vertex-Shader mit Simplex-Rauschen, die Normale wird aus Nachbarpunkten neu berechnet.",
  "mobil": "pixelRatio höchstens 1.5, gröbere Geometrie. Hover durch Tippen und Ziehen ersetzen. Auf schwachen GPUs Video oder Standbild zeigen.",
  "reduzierte_bewegung": "Standbild der verchromten Form. Kein Fließen, keine Welle, Wechsel ohne Animation.",
  "barrierefreiheit": "Der Schriftzug bleibt echter Text im HTML, transparent über dem Canvas, oder bekommt ein aria-label. Canvas mit aria-hidden. Bedienelemente als Buttons mit aria-pressed."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Produktion Trionn: metalness 1, roughness 0.08, clearcoat 1, reflectivity 1, ior 2.4 (+ transmission 0.35)",
  "herkunft": "beobachtet",
  "quelle": "https://trionn.com/_next/static/chunks/04srvx.z7_jun.js"
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Figma – Web design trends 2026",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Retrofuturism mit Neon, Chrom und Pixel-Art als Trend 2026 genannt.",
   "art": "artikel"
  },
  {
   "seite": "Trionn",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Three.js-Material im Chunk 04srvx…js: metalness 1, roughness .08, clearcoat 1, reflectivity 1, transmission .35, ior 2.4, emissiveIntensity .15, opacity .88 – polierter Chrom-/Glas-Look.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Paper Shaders",
   "url": "https://github.com/paper-design/shaders"
  },
  {
   "titel": "Paper Shaders – Liquid metal (Logo Animations)",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "grain-noise-overlay",
  "nachbearbeitung-filmlook"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg, Messwerte jetzt beobachtet."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Schriftzug eines Rostocker Motion-Studios fließt als flüssiges Chrom, wird zum 3D-Tropfen oder glüht in der Signalfarbe.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "easing": "expo.out, 1 − 2^(−10t) (CSS-Entsprechung cubic-bezier(0.16, 1, 0.3, 1)); UI 200 ms mit derselben Kurve",
   "guss": "Variante erscheint 1200 ms expo.out, alte Variante geht 400 ms expo.out, 150 ms versetzt; beim Guss wächst die Form von der Strichmitte (Schwelle = größter Innenabstand) bis zur Kante",
   "wortmarke": "TikTok Sans wdth 75, wght 800, Laufweite −0.03em, Zeilenhöhe 0.9, auf Breite gesetzt per Canvas-measureText; höchstens 50 % der Viewporthöhe, unter 641 px zweizeilig mit höchstens 25 %",
   "distanzfeld": "Maske höchstens 1200 px breit, 2 × Felzenszwalb-EDT (innen und außen), Randpixel nehmen die Kantenglättung der Canvas-Schrift als Subpixel-Lage; Bereich ±64 Maskenpixel im Alpha-Kanal",
   "woelbung": "Kreisprofil h = √(1 − (1 − d/R)²), R = größter Innenabstand; 3 × Box-Blur mit Radius 0.6 R; Normale aus zentralen Differenzen × 1.7 R; Textur RGBA8 (Normale xy, Höhe, Distanz)",
   "umgebung_2d": "1D-Studioprofil (t → Helligkeit): −1.2 → 0.10, −0.62 → 0.34, −0.44 → 0.95, −0.30 → 0.40, −0.10 → 0.16, −0.03 → 0.02 (Horizont), 0.05 → 0.96, 0.14 → 0.78, 0.34 → 0.46, 0.50 → 1.00, 0.62 → 0.58, 1.2 → 0.90; t = dot(r.xy, normalize(0.55 · zeiger.x, 1)) · 0.85 + |r.x| · 0.18 + (0.5 − y) · 0.55 + 0.18 · zeiger.y + 0.10 · sin(0.0045 · x + 0.6 · zeit) + 0.16 · Rauschen",
   "dispersion": "Farbkanäle versetzt um ±0.022 · (0.1 + 1.9 · (1 − n.z))",
   "fluss": "Normale wandert mit Rauschen (Maßstab 0.009/px, 0.30/s), Stärke 0.22, beim Guss bis 0.72; Streifen-Sinus 0.6 rad/s",
   "welle": "sin(0.05 · d − 6 · zeit) · exp(−d² / (2 · 150²)) · 0.45 · Druck; Druck = Zeigertempo / 900 px/s, klingt mit 0.35^dt ab",
   "glanz": "pow(dot(n, L), 90) · 0.6, L folgt dem Zeiger",
   "glut": "Verlauf #080300 → #6b1203 → #ff5a1f → #ffcc9e → #fffaf2 über Höhe 0.8 + Rauschen 0.55 (Maßstab 0.006/px, 0.25/s) + Studioprofil 0.18; Schein außen exp(−d / 24 px) · 0.34 in #ff5a1f",
   "tropfen_material": "MeshPhysicalMaterial color #f4f4f6, metalness 1, roughness 0.08, clearcoat 1, clearcoatRoughness 0.04, ior 2.4, envMapIntensity 1.25 (Werte nach Trionn: metalness 1, roughness .08, clearcoat 1, ior 2.4)",
   "tropfen_form": "IcosahedronGeometry(1, 30), Touch 20; Verformung 0.14 · (0.88 · snoise(0.85 p + 0.32 t) + 0.12 · snoise(1.7 p − 0.22 t)), beim Einlaufen +0.3, mit Druck +0.08; Normale aus zwei Nachbarpunkten (ε 0.012); Drehung 0.18 rad/s; Kippen x 0.25 + 0.35 · zeiger.y, z −0.2 · zeiger.x; zwei Perlen (Radius 0.13 und 0.08) kreisen",
   "tropfen_groesse": "Radius min(0.3 · Breite, 0.2 · Höhe, 0.66 · Wortmarkenhöhe), unter 641 px 0.5 · Wortmarkenhöhe",
   "umgebung_3d": "PMREMGenerator.fromScene, sigma 0.015: Verlaufskugel #3a3c44 → #0c0c0e → Horizont #000 → Boden #b9bbc2 → #3a3b40, Deckenlicht, zwei Lichtkanten, zwei Lichtstreifen vorn (senkrecht links, waagerecht rechts oben, statt rechteckiger Softboxen), zwei Bodenlinien, ein Streifen #ff5a1f",
   "renderer": "alpha, ACESFilmic exposure 1 (nur Tropfen), pixelRatio max 2 (Touch 1.5); 2D-Shader ohne Blending, Ausgabe vormultipliert",
   "zeiger": "Lerp 0.08 je Bild bei 60 fps, bildratenunabhängig: k = 1 − (1 − 0.08)^(dt · 60)",
   "vorfuehrung": "gedachter Zeiger x 0.5 ± 0.34 · sin(0.85 s), y Wortmarkenmitte ± 0.14 · sin(1.35 s + 0.6); Takt 5200 ms: Chrom → Tropfen 3D → Glut",
   "standbild": "reduzierte Bewegung: Zeit fest auf 2.4 s",
   "schrift": "Wortmarke TikTok Sans wdth 75 / wght 800; Felder-Titel wdth 100 / wght 600, −0.02em; Fließtext 18 px / 1.4; Labels DM Mono 12 px versal, +0.04em",
   "farben": "#0b0b0b Grund, #f2f2f2 hell, #8a8a8a Meta, #ff5a1f einzige Signalfarbe (CTA, Glut, ein Reflexstreifen)"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover: Tippen oder Ziehen auf der Bühne setzt den Zeiger und löst die Welle mit voller Stärke aus; Glanz und Kippen folgen dem Finger. pixelRatio max 1.5, Ikosaeder Detail 20.",
  "reduziert": "Standbild bei Zeit 2.4 s: kein Fließen, keine Welle, kein Kippen, keine Drehung. Varianten wechseln sofort, gerendert wird nur bei Änderungen. Die Vorführung zeigt die drei Varianten still im 4-s-Takt.",
  "korrekturen": {
   "beschreibung": "Ein Logo oder Schriftzug wirkt wie aus flüssigem Chrom gegossen. In 2D dient die Form als Maske. Aus ihrem Distanzfeld berechnet ein Shader eine Wölbung und daraus eine Pseudo-Normale. Mit dieser Normalen tastet er eine Umgebung aus Studio-Lichtstreifen ab, das ergibt die Chromreflexe. Eine zeit- oder cursorabhängige Verzerrung lässt die Reflexe fließen. In 3D trägt eine weiche, sich verformende Geometrie ein Material mit metalness 1 und roughness 0 bis 0.15 vor einer Environment-Map.",
   "warum_es_wirkt": "Chrom ist das Material von Retrofuturismus und Y2K. In hoher Renderqualität wirkt es wertig und laut zugleich. Ein Schriftzug aus Metall prägt sich sofort ein, weil er bei jeder Bewegung anders spiegelt.",
   "wann_einsetzen": "Logo-Animation, Musik, Mode, Tech-Launch, Event, Studio-Hero. Ein Akzent pro Seite.",
   "wann_nicht": "Seriöse B2B-Umfelder, in denen es verspielt wirkt. Große Flächen oder Hintergründe. Feine Schriftschnitte: Dünne Striche bieten keinen Platz für eine Wölbung.",
   "varianten": [
    "2D-Shader auf Logo oder Schriftzug (Paper Shaders: Liquid metal)",
    "3D-Tropfen mit Chrom-Material vor einer Environment-Map",
    "Verwandte Logo-Effekte auf derselben Wölbung: Wärmebild (Heatmap) oder Gem Smoke"
   ],
   "umsetzung": "2D: Distanzfeld aus der Logo-Maske, per Jump-Flood auf der GPU, als vorab gebackene Textur oder per Distanztransformation auf der CPU. Die Normale ist der Gradient der Höhe. Weichgezeichnete Höhe nimmt die Grate an der Mittelachse, dann wirkt die Form flüssig statt facettiert. Die Kante aus dem Distanzfeld glätten. 3D: MeshPhysicalMaterial mit metalness 1, roughness 0.08, clearcoat 1 und ior 2.4 (Trionn). Eine Environment-Map ist Pflicht, sonst bleibt Metall schwarz. Ein eigenes Lichtstudio per PMREMGenerator.fromScene erspart den HDR-Download. Die Verformung läuft im Vertex-Shader mit Simplex-Rauschen, die Normale wird aus Nachbarpunkten neu berechnet.",
   "mobil": "pixelRatio höchstens 1.5, gröbere Geometrie. Hover durch Tippen und Ziehen ersetzen. Auf schwachen GPUs Video oder Standbild zeigen.",
   "reduzierte_bewegung": "Standbild der verchromten Form. Kein Fließen, keine Welle, Wechsel ohne Animation.",
   "barrierefreiheit": "Der Schriftzug bleibt echter Text im HTML, transparent über dem Canvas, oder bekommt ein aria-label. Canvas mit aria-hidden. Bedienelemente als Buttons mit aria-pressed."
  },
  "geprueft": "01.11.2026",
  "notiz": "Kaltguss (erfunden), Studio für Marke und Bewegung im Rostocker Stadthafen, nach Rezept kreativstudio-buehne: Schwarz-Weiß, eine Signalfarbe #ff5a1f, TikTok Sans in zwei Breiten, DM Mono. Chrom: 2D-Shader auf der Wortmarke. Ein 2D-Canvas malt die Maske an die Stelle des transparenten HTML-Textes, die Distanztransformation läuft auf der CPU statt per Jump-Flood (einmal je Größenänderung). Die Form gießt sich von der Strichmitte nach außen. Tropfen 3D: Trionn-Material auf verformtem Ikosaeder vor eigener PMREM-Studioszene, der Schriftzug steht als Kontur dahinter. Glut: dieselbe Wölbung als Wärmebild in der Signalfarbe. Trionn-Werte transmission 0.35, opacity 0.88 und emissiveIntensity 0.15 weggelassen: Bei metalness 1 multipliert three.js das durchgelassene Licht mit der Diffusfarbe null, Transmission bliebe unsichtbar und kostete einen zusätzlichen Renderdurchgang. Schriftgröße per Canvas-measureText, weil die DOM-Breite direkt nach dem Schriftladen schwankte und Maske und Text auseinanderliefen. Ohne WebGL: CSS-Chrom per background-clip: text und CSS-Kugel. Rendern pausiert außerhalb des Viewports. Inspiration nur als Prinzip: flüssiges Chromlettering, Chromtropfen mit Lichtkante vor Schwarz. AD-Review 01.11.2026: Note 4 (Tropfen ruhiger verformt, Lichtstreifen statt Softbox-Rechtecken, die sich als „Gesicht“ spiegelten). Zugang 02.11.2026: Knopf „Bewegung anhalten“ (32 px, aria-pressed) neben den Varianten: pause() hält jetzt auch das dauerhafte Fließen, den Tropfen und die Welle an, Fortsetzen ohne Sprung (Vorschau, reduziert und ohne WebGL ausgeblendet); Kontrastmodus: Wortmarke als CanvasText, Canvas aus, Knopf-Rahmen."
 }
}