{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "holo-irisierende-folie",
 "name": "Holo-/Irisierungsfolie auf Neigung und Cursor",
 "name_en": "Holographic / iridescent foil on tilt and pointer",
 "kurz": "Geschenkkarte eines Münchner Concept Stores: schwarze Karte mit holografischer Heißfolie, die beim Zeigen kippt und schimmert; Folie wahlweise in den Guillochen, vollflächig oder nur im Rahmen.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "laut",
  "experimentell",
  "retro"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Karte (Ticket, Mitgliedsausweis, Gutschein, Sammelkarte) bekommt über dem Motiv eine Glanzschicht aus wiederholten Regenbogen-Verläufen mit fünf bis sieben Spektralfarben und diagonalen Streifen. Die Schicht wird per mix-blend-mode color-dodge mit dem Motiv verrechnet und über brightness, contrast und saturate abgestimmt. Zeigerposition oder Geräteneigung landen in Custom Properties. Die Verläufe verschieben sich gegenläufig, ein radialer Glare folgt dem Zeiger. Meist kippt die Karte dazu in 3D, und eine Maske begrenzt den Glanz auf Teile der Karte.",
  "warum_es_wirkt": "Der Effekt erinnert an Holo-Sammelkarten, Ausweise und Tickets. Der Farbwechsel belohnt jede Bewegung und lässt ein digitales Objekt wie etwas wirken, das man besitzen kann.",
  "wann_einsetzen": "Event- und Konferenz-Tickets, Mitgliedskarten, Gutscheine, Sammel- und Gamification-Elemente, Kampagnen-Microsites, einzelne Produkt-Highlights.",
  "wann_nicht": "Als Dauerdekor auf ganzen Seiten oder auf Fließtext. Bei seriösen Marken aus Recht, Finanzen oder Gesundheit. Auf Kacheln mit viel Text, weil color-dodge die Lesbarkeit verschlechtert. Nicht auf jeder Produktkarte eines Shops, dort wirkt es wie ein Gadget.",
  "varianten": [
   "Regular Holo: Spektral-Verlauf und diagonale Streifen über der ganzen Karte",
   "Reverse Holo: nur der Rahmen schimmert, das Motiv bleibt matt",
   "Masken-Holo: Glanz nur in einer Textur oder einem Muster, etwa Glitzer oder Guilloche",
   "Geräteneigung per DeviceOrientation auf Mobilgeräten",
   "WebGL-Variante mit Dünnschicht-Interferenz (iridescence in MeshPhysicalMaterial von three.js)",
   "Statischer Irisierungs-Verlauf ohne Interaktion, Glanz nur beim Hover"
  ],
  "umsetzung": "Karte mit transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)). Darüber zwei Ebenen. Die Glanzebene trägt repeating-linear-gradient(133deg, hsl(0 100% 70%) 0%, hsl(60 100% 70%) 5%, hsl(120 100% 70%) 10%, hsl(200 100% 70%) 15%, hsl(280 100% 70%) 20%) mit background-size 400 % und background-position aus den Custom Properties, dazu mix-blend-mode: color-dodge und filter: brightness(.85) contrast(2.75) saturate(.65). Ihre Deckkraft hängt am Abstand des Zeigers zur Mitte. Die Glare-Ebene ist ein radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0 0% 100% / .6), transparent 60%) mit mix-blend-mode: overlay. JS setzt bei pointermove Prozentwerte, gedrosselt per requestAnimationFrame, und führt die Karte beim Verlassen weich in die Mitte zurück. Für Masken-Holo bekommt die Glanzebene ein mask-image, etwa ein SVG-Muster als Data-URL. color-dodge braucht einen dunklen Grund; auf hellem Papier wird der Glanz weiß.",
  "mobil": "Ohne Hover: Ziehen auf der Karte, Geräteneigung per DeviceOrientation (auf iOS nur nach Erlaubnis des Nutzers) oder eine langsame Auto-Animation des Glanzes. Sonst ein statischer Zustand.",
  "reduzierte_bewegung": "Neigung und Auto-Animation aus. Der Holo-Glanz bleibt statisch in Mittelstellung.",
  "barrierefreiheit": "Text nicht unter die Glanzschicht legen oder den Glanz dort maskieren. Schnell flackernde Farbwechsel vermeiden (WCAG 2.3.1). Die Ebenen sind Dekoration: aria-hidden oder Pseudo-Elemente. Die Karte selbst bekommt eine Beschreibung, etwa role=img mit aria-label."
 },
 "messwerte": {
  "easing": "Rückkehr per Spring bzw. 400–600 ms ease-out (Richtwert, nicht gemessen)",
  "dauer_ms": "Rückkehr 400–600",
  "stagger_ms": "",
  "distanz": "Neigung max. 10–15°; Verlaufsverschiebung bis ±50 % der background-size",
  "sonstiges": "Glanzschicht: mix-blend-mode color-dodge; filter brightness(.85) contrast(2.75) saturate(.65); Streifenwinkel 133deg, Streifenabstand 5 %",
  "herkunft": "beobachtet",
  "quelle": "https://poke-holo.simey.me/css/cards/base.css (Demo, keine Produktions-Website)"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Pokémon Cards CSS Holographic Effect (simeydotme)",
   "url": "https://poke-holo.simey.me/",
   "auszeichnung": "",
   "beobachtung": "Referenz-Demo mit Dutzenden Holo-Varianten; .card__shine nutzt mix-blend-mode: color-dodge mit filter: brightness(.85) contrast(2.75) saturate(.65), Streifen mit --space: 5% und --angle: 133deg, radialer Glare an var(--pointer-x) var(--pointer-y) (css/cards/base.css, regular-holo.css, v-full-art.css).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Pokémon Cards CSS Holographic Effect (Live-Demo mit Quellcode)",
   "url": "https://poke-holo.simey.me/"
  }
 ],
 "kombinierbar_mit": [
  "kippen-3d-karten",
  "karten-spotlight-glow",
  "fluessigmetall-chrom",
  "verlaufs-rahmen",
  "flick-karten-stapel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Geschenkkarte eines Münchner Concept Stores: schwarze Karte mit holografischer Heißfolie, die beim Zeigen kippt und schimmert; Folie wahlweise in den Guillochen, vollflächig oder nur im Rahmen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "aufbau": "Karte als DOM: Körper (rotateX/rotateY) mit Guilloche-SVG, Inhalt, Glanzschicht und Glare. JS schreibt nur Custom Properties (--rx, --ry, --mx, --my, --bx, --by, --o), eine rAF-Schleife läuft nur bei Bewegung.",
   "karte": "Seitenverhältnis 85.6 : 54 (Scheckkarte), breit bis 560 px, Ecken 4.6 % / 7.3 %, Grund #121010 mit warmem Verlauf",
   "perspektive": "600px",
   "neigung": "max. ±12° (rotateY aus x, rotateX aus y)",
   "glanz": "repeating-linear-gradient(133deg, hsl(0 100% 70%) 0%, hsl(60 100% 70%) 5%, hsl(120 100% 70%) 10%, hsl(200 100% 70%) 15%, hsl(280 100% 70%) 20%, hsl(360 100% 70%) 25%) mit 400 % Größe, darunter diagonale Streifen (-45deg, #0E152E / hsl(180 29% 66%), 300 %), background-blend-mode overlay; mix-blend-mode color-dodge; filter brightness(.85) contrast(2.75) saturate(.65)",
   "verlauf": "background-position 50 % ± 50 % gegenläufig zum Zeiger (Streifen spiegelverkehrt)",
   "glare": "radial-gradient(farthest-corner circle at Zeiger, hsl(0 0% 100% / .6) 0 %, / .12 30 %, transparent 60 %), mix-blend-mode overlay, Deckkraft .4 + Glanz · .6",
   "deckkraft": "Ruhe .35; unter dem Zeiger .5 in der Mitte bis .9 an den Ecken (Abstand zur Mitte)",
   "folgen": "Nachlauf 0.16 pro Frame bei 60 fps, bildratenunabhängig 1 − 0.84^dt",
   "rueckkehr_ms": "500, cubic-bezier(0.25, 1, 0.5, 1) zur Mitte (Messwert 400–600 ms; Kurve aus dem Rezept)",
   "varianten": "Guilloche (Standard): Glanz per mask-image auf 18 Rosettenringe r = R + a · sin(12θ + φ) und 12 Randwellen, Filter contrast(2.2) saturate(.8); Vollfläche: Glanz auf der ganzen Karte; Rahmen: Glanz nur im Rand von 4.2 % (mask content-box exclude)",
   "wortmarke": "Folie per background-clip: text mit pastelligem Spektrum (133deg, 400 %), im Rahmen-Modus matt #E9E3D9",
   "touch": "Ziehen auf der Karte (touch-action: none); ohne Eingabe nach 2.5 s ein Kreis des Glanzes, 6 s pro Runde, Radius 32 % / 26 %; Geräteneigung gamma ±30° und beta 45 ± 30° nach Erlaubnis",
   "ui": "250 ms cubic-bezier(0.25, 1, 0.5, 1), Unterstreichung 100 ms",
   "vorfuehrung": "Takt 5200 ms: gedachter Zeiger zieht eine Achterschleife über die Karte und klickt die nächste Veredelung (Guilloche → Vollfläche → Rahmen)",
   "rezept": "mode-beauty-kollektion: Zalando Sans (Headline wdth 125, wght 400; Text 0.9375–1rem), Fragment Mono 0.75rem versal +0.06em; Grund #F6F3EE, Fläche #EBE7E0, Linien #CECDC6, Meta #8C857B, Text #121010; Preise mit Tabellenziffern"
  },
  "ausloeser": "hover, ziehen, klick",
  "touch": "Ziehen auf der Karte neigt sie und verschiebt den Glanz. Ohne Eingabe kreist der Glanz nach 2.5 s langsam (6 s pro Runde). Ein Knopf schaltet die Geräteneigung frei (iOS fragt nach Erlaubnis). Optionen sind 44 px hoch.",
  "reduziert": "Keine Neigung, kein Nachlauf, keine Auto-Animation. Der Glanz steht in Mittelstellung mit Deckkraft .35. Varianten, Betrag und Name wechseln ohne Übergang.",
  "korrekturen": {
   "beschreibung": "Eine Karte (Ticket, Mitgliedsausweis, Gutschein, Sammelkarte) bekommt über dem Motiv eine Glanzschicht aus wiederholten Regenbogen-Verläufen mit fünf bis sieben Spektralfarben und diagonalen Streifen. Die Schicht wird per mix-blend-mode color-dodge mit dem Motiv verrechnet und über brightness, contrast und saturate abgestimmt. Zeigerposition oder Geräteneigung landen in Custom Properties. Die Verläufe verschieben sich gegenläufig, ein radialer Glare folgt dem Zeiger. Meist kippt die Karte dazu in 3D, und eine Maske begrenzt den Glanz auf Teile der Karte.",
   "warum_es_wirkt": "Der Effekt erinnert an Holo-Sammelkarten, Ausweise und Tickets. Der Farbwechsel belohnt jede Bewegung und lässt ein digitales Objekt wie etwas wirken, das man besitzen kann.",
   "wann_einsetzen": "Event- und Konferenz-Tickets, Mitgliedskarten, Gutscheine, Sammel- und Gamification-Elemente, Kampagnen-Microsites, einzelne Produkt-Highlights.",
   "wann_nicht": "Als Dauerdekor auf ganzen Seiten oder auf Fließtext. Bei seriösen Marken aus Recht, Finanzen oder Gesundheit. Auf Kacheln mit viel Text, weil color-dodge die Lesbarkeit verschlechtert. Nicht auf jeder Produktkarte eines Shops, dort wirkt es wie ein Gadget.",
   "varianten": [
    "Regular Holo: Spektral-Verlauf und diagonale Streifen über der ganzen Karte",
    "Reverse Holo: nur der Rahmen schimmert, das Motiv bleibt matt",
    "Masken-Holo: Glanz nur in einer Textur oder einem Muster, etwa Glitzer oder Guilloche",
    "Geräteneigung per DeviceOrientation auf Mobilgeräten",
    "WebGL-Variante mit Dünnschicht-Interferenz (iridescence in MeshPhysicalMaterial von three.js)",
    "Statischer Irisierungs-Verlauf ohne Interaktion, Glanz nur beim Hover"
   ],
   "umsetzung": "Karte mit transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)). Darüber zwei Ebenen. Die Glanzebene trägt repeating-linear-gradient(133deg, hsl(0 100% 70%) 0%, hsl(60 100% 70%) 5%, hsl(120 100% 70%) 10%, hsl(200 100% 70%) 15%, hsl(280 100% 70%) 20%) mit background-size 400 % und background-position aus den Custom Properties, dazu mix-blend-mode: color-dodge und filter: brightness(.85) contrast(2.75) saturate(.65). Ihre Deckkraft hängt am Abstand des Zeigers zur Mitte. Die Glare-Ebene ist ein radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0 0% 100% / .6), transparent 60%) mit mix-blend-mode: overlay. JS setzt bei pointermove Prozentwerte, gedrosselt per requestAnimationFrame, und führt die Karte beim Verlassen weich in die Mitte zurück. Für Masken-Holo bekommt die Glanzebene ein mask-image, etwa ein SVG-Muster als Data-URL. color-dodge braucht einen dunklen Grund; auf hellem Papier wird der Glanz weiß.",
   "mobil": "Ohne Hover: Ziehen auf der Karte, Geräteneigung per DeviceOrientation (auf iOS nur nach Erlaubnis des Nutzers) oder eine langsame Auto-Animation des Glanzes. Sonst ein statischer Zustand.",
   "reduzierte_bewegung": "Neigung und Auto-Animation aus. Der Holo-Glanz bleibt statisch in Mittelstellung.",
   "barrierefreiheit": "Text nicht unter die Glanzschicht legen oder den Glanz dort maskieren. Schnell flackernde Farbwechsel vermeiden (WCAG 2.3.1). Die Ebenen sind Dekoration: aria-hidden oder Pseudo-Elemente. Die Karte selbst bekommt eine Beschreibung, etwa role=img mit aria-label."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept mode-beauty-kollektion, erfundener Concept Store MILDE (Kleidung und Hautpflege) in der Klenzestraße, München-Glockenbach. Produktseite einer Geschenkkarte: Kaufbox mit Betrag, Name auf der Karte und der Veredelung als echte Produktoption; die drei Veredelungen sind die Varianten des Musters. Das Rezept schließt 3D-Kippen auf Produktkarten aus, deshalb sitzt der Effekt auf einem einzelnen Objekt (Gutschein), und die ruhige Guilloche-Folie ist Standard. Rückkehr mit der Rezept-Kurve statt ease-out, weil die Musterkurve nur ein Richtwert ist. Werte der Glanzschicht aus poke-holo.simey.me. Referenzen (nur Prinzipien): toteme.com, typology.com, koto.com. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: --meta #8c857b → #736d64 (4,6:1); Kontrastmodus: Folien-Text (background-clip: text) mit CanvasText statt transparent, Knöpfe mit Rahmen."
 }
}