{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "typo-maske-medien",
 "name": "Bild/Video in Schrift (Typo-Maske)",
 "name_en": "Text mask / image or video inside type / Text mask with image/video",
 "kurz": "Ein fettes Wort ist das Fenster auf ein bewegtes Bild; beim Scrollen fährt die Kamera durch den Stamm des T, bis das Bild die Bühne füllt.",
 "kategorie": "Schrift-Animationen",
 "kategorie_slug": "schrift-animationen",
 "kategorie_nr": 6,
 "bau_chat": "C1",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "luxuriös",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "filmisch",
  "luxuriös",
  "laut",
  "dramatisch",
  "kampagnenhaft"
 ],
 "technik": [
  "css",
  "svg",
  "vanilla-js",
  "scrolltrigger",
  "scroll-driven-css",
  "mask-image",
  "background-clip-text"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Bild oder Video erscheint nur innerhalb eines Wortes. Technisch geht das mit CSS mask-image (SVG des Wortes), mit background-clip: text oder mit einer SVG-<mask> bzw. <clipPath>. Als Scroll-Variante klebt die Sektion fest (sticky), und die Maske wächst von etwa 80 % auf ein Vielfaches, bis ein Buchstabe den ganzen Viewport füllt. Am Ende ist das Medium vollflächig sichtbar und leitet in die nächste Sektion über.",
  "warum_es_wirkt": "Typo und Bild werden zu einem Moment. Das Wort ist zugleich Titel und Fenster. Der Zoom durch den Buchstaben wirkt wie ein Filmschnitt: Aus dem Logo oder Claim wird ohne harten Wechsel das Bild selbst.",
  "wann_einsetzen": "Hero-Übergang vom Claim zum Showreel oder Kampagnenbild, Kapiteleinstiege, Produkt-Launches, Ausstellungs- und Festivalseiten. Am besten mit einem kurzen, sehr fetten Wort.",
  "wann_nicht": "Bei dünnen Schriften, weil zu wenig Fläche fürs Bild bleibt. Bei langen Wörtern und unruhigen Videos, weil das Wort unlesbar wird. Auf kleinen Viewports ohne genug Scrollraum. Nicht als Dauereffekt auf jeder Sektion.",
  "varianten": [
   "Statisch: Wort als Fenster auf Bild oder Video (background-clip: text oder mask-image)",
   "Scroll-Zoom durch einen Buchstaben ins Vollbild (sticky + mask-size bzw. transform auf dem SVG)",
   "Füllung bei Hover oder Fokus: Überschriften bekommen ein Bild in die Schrift",
   "Bild expandiert innerhalb der Typo und schiebt den Text weg",
   "SVG-clip-path-Typo, die sich beim Scrollen verändert"
  ],
  "umsetzung": "Scroll-Zoom: Wrapper height: 300vh, Kind position: sticky; top: 0; height: 100vh. Das Medium bekommt mask-image: url(wort.svg); mask-repeat: no-repeat; -webkit-mask für ältere Safari. Fortschritt p = (scrollY − start) / (Wrapperhöhe − 100vh). Ziel-mask-size von 80 % bis etwa 3000 %, pro Frame per Lerp 0,15 angenähert. Alternativ in CSS: animation-timeline: view() auf mask-size. Der Ankerpunkt (mask-position bzw. transform-origin) muss in der Fläche eines Buchstabens liegen, sonst wächst die leere Fläche. Bei einer ausgesparten Platte (Wort transparent auf Vollfläche) liegt er stattdessen im Stamm eines Buchstabens; skaliert wird das Text-SVG von 1 auf 30 oder mehr. Statisch mit Bild: background: url(bild.jpg) center / cover; background-clip: text; color: transparent. Mit Video: SVG-<mask> oder <clipPath> mit <text> über dem <video>, oder weiße Schrift mit mix-blend-mode: screen auf schwarzem Grund.",
  "mobil": "Funktioniert. Im Hochformat das Wort größer setzen oder drehen, damit genug Bild im Wort liegt. Video als komprimiertes, stummes playsinline-MP4, bei schwacher Verbindung ein Standbild. Scrollstrecke kürzer halten.",
  "reduzierte_bewegung": "Statisches Wort mit Bildfüllung, kein Zoom. Video pausiert und zeigt das Poster.",
  "barrierefreiheit": "Das maskierte Wort bleibt als echter Text erhalten (visuell versteckt oder als aria-label am SVG); die Grafik bekommt aria-hidden. Video ohne Ton oder mit Steuerung. Kontrast der Buchstabenkanten zum Hintergrund prüfen, auch an hellen Bildstellen."
 },
 "messwerte": {
  "easing": "Lerp 0,15 pro Frame",
  "dauer_ms": "scrollgebunden",
  "stagger_ms": "",
  "distanz": "mask-size 80 % → ca. 3000 %",
  "sonstiges": "Wert targetMaskSize an das eigene SVG anpassen; background-clip:text mit Bild (HDR-JPG), cover, zentriert",
  "herkunft": "beobachtet",
  "quelle": "https://blog.olivierlarose.com/tutorials/text-clip-mask-on-scroll; https://nerdy.dev/",
  "aus_eintrag": [
   "text-mask-media"
  ]
 },
 "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": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Text Clip Mask On Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/text-clip-mask-on-scroll",
   "auszeichnung": "",
   "beobachtung": "Sticky-Container, SVG als mask-image auf Video, mask-size von 80 % mit Faktor 30 (3000 %), Lerp 0,15, mask-position-Korrektur.",
   "art": "artikel"
  },
  {
   "seite": "Malta Personal Trainer – Text mask video",
   "url": "https://www.awwwards.com/inspiration/text-mask-video-malta-personal-trainer",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Video in Text-Maske.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Vana – Image & Text Mask",
   "url": "https://www.awwwards.com/inspiration/image-text-mask-vana-1",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel Bild- und Text-Maske.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Interactive Text Mask",
   "url": "https://www.awwwards.com/inspiration/interactive-text-mask",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel interaktive Text-Maske.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Codrops – Expanding Image within Typography",
   "url": "https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/",
   "auszeichnung": "",
   "beobachtung": "Bild expandiert innerhalb eines Typo-Elements und schiebt Text weg; inspiriert von einem Billboard-Video.",
   "art": "artikel"
  },
  {
   "seite": "nerdy.dev (Adam Argyle)",
   "url": "https://nerdy.dev/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (style.css): Blog-Überschriften (.BlogMeta>h1, article h2/h3) sowie Timeline-/Topic-Labels bei :hover/:focus-visible/:target/:checked bekommen background:url(/hdr/white-3.75x.jpg) 50%/cover, -webkit-background-clip:text, color:transparent – HDR-Bild in der Schrift.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Text Clip Mask On Scroll (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/text-clip-mask-on-scroll"
  },
  {
   "titel": "Text Mask Animation (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/text-mask-animation"
  },
  {
   "titel": "SVG Mask Scroll (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/svg-mask-scroll"
  },
  {
   "titel": "On-Scroll Expanding Image Animation within Typography (Codrops)",
   "url": "https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/"
  }
 ],
 "kombinierbar_mit": [
  "split-mask-reveal",
  "schrift-hero-viewportbreit",
  "medien-expansion-scroll",
  "cinematic-video-hero"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/",
  "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "layouts.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Nur Bild-in-Schrift (statisch/hover) belegt; Video-in-Schrift mit Scroll-Maskenvergrößerung auf keiner geprüften Seite gefunden."
  ],
  "zusammengelegt_aus": [
   "text-mask-media",
   "typo-maske-medien"
  ],
  "querverweis_kategorien": [
   "Hero & Section-Layouts"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein fettes Wort ist das Fenster auf ein bewegtes Bild; beim Scrollen fährt die Kamera durch den Stamm des T, bis das Bild die Bühne füllt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "technik": "Inline-SVG über dem Bewegtbild: Fläche in Grundfarbe #efede9 mit <mask>, darin das Wort als <text> schwarz (= ausgespart). Skaliert wird die Textgruppe per transform; das entspricht mask-size auf einem mask-image und bleibt bei jeder Größe vektorscharf.",
   "schrift": "Schibsted Grotesk 900, letter-spacing -0.035em, Wort „STROM“",
   "wortbreite": "Zoom 80 % der Bühnenbreite, Fenster 92 %; Hochformat (Bühne < 600 px breit und Höhe > 1,4 × Breite): Wort um -90° gedreht, Länge 74 % der Bühnenhöhe",
   "mask_size": "80 % → 3000 % (Faktor 1 → 37,5), exponentiell interpoliert (Mischung 65 % linear + 35 % smoothstep im Exponenten), Ziel erreicht bei p 0,86",
   "anker": "unterer Teil des T-Stamms (Grundlinie − 0,24 em, Mitte des Buchstabens); wandert per smoothstep bis p ≈ 0,61 in die Bühnenmitte",
   "lerp": "0,15 pro Frame (ist += (soll − ist) × 0,15)",
   "scrollraum": "Strecke 300vh (≤ 760 px: 220vh); Bühne position: sticky, top 64 px (≤ 760 px: 56 px), Höhe 100svh − Kopf",
   "begleittexte": "Label und Lead blenden bei p 0 → 0,12 linear aus",
   "endzustand": "Titel „Bewegtbild am Fluss“ ab p > 0,9 per opacity 300 ms; Maskenfläche ab p > 0,95 ausgeblendet",
   "hover_fuellung": "Programm-Titel: background: Standbild (Canvas als JPEG, Qualität 0,82) x je Eintrag 20/55/80/38 %, y 40 % / cover; background-clip: text; color #0b0b0b → transparent in 250 ms",
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) für alle UI-Übergänge (Rezept, ohne Überschwingen)",
   "ui_ms": "Umschalter 150, Ticket-Button 200, Titel-Füllung 250, Endtitel 300",
   "bewegtbild": "Canvas 2D in halber Auflösung: Abendhimmel #17223f → #3d5f9a → #c4664f → #f3ab72, Horizont 50 %, Sonne bei 66 % Breite, 520 Lichtstriche (lighter), 7 Strömungsbahnen",
   "vorfuehrung": "Runde 10000 ms: 0–10 % Ruhe, 10–60 % p 0 → 1 (smoothstep), 60–97 % Endbild, dann Sprung an den Anfang",
   "farben": "#0b0b0b Text, #efede9 Grund, Sparten #2f7d4a Kunst, #c4421a Musik, #b0186b Film, #3d5f9a Führung"
  },
  "ausloeser": "scroll",
  "touch": "Gleicher Scroll-Zoom mit kürzerer Strecke (220vh). Im Hochformat steht das Wort um 90° gedreht, damit Himmel und Wasser im Wort liegen. Kurze Umschalter-Labels. Programm: der Eintrag in der Bildschirmmitte füllt sich (IntersectionObserver), Antippen setzt den Fokus.",
  "reduziert": "Kein Zoom: Variante „Wort als Fenster“ ist gesetzt, der Zoom-Schalter gesperrt, die Strecke hat nur Bühnenhöhe. Das Bewegtbild steht als Standbild (Poster). Programm-Titel füllen sich ohne Übergang.",
  "korrekturen": {
   "beschreibung": "Ein Bild oder Video erscheint nur innerhalb eines Wortes. Technisch geht das mit CSS mask-image (SVG des Wortes), mit background-clip: text oder mit einer SVG-<mask> bzw. <clipPath>. Als Scroll-Variante klebt die Sektion fest (sticky), und die Maske wächst von etwa 80 % auf ein Vielfaches, bis ein Buchstabe den ganzen Viewport füllt. Am Ende ist das Medium vollflächig sichtbar und leitet in die nächste Sektion über.",
   "warum_es_wirkt": "Typo und Bild werden zu einem Moment. Das Wort ist zugleich Titel und Fenster. Der Zoom durch den Buchstaben wirkt wie ein Filmschnitt: Aus dem Logo oder Claim wird ohne harten Wechsel das Bild selbst.",
   "wann_einsetzen": "Hero-Übergang vom Claim zum Showreel oder Kampagnenbild, Kapiteleinstiege, Produkt-Launches, Ausstellungs- und Festivalseiten. Am besten mit einem kurzen, sehr fetten Wort.",
   "wann_nicht": "Bei dünnen Schriften, weil zu wenig Fläche fürs Bild bleibt. Bei langen Wörtern und unruhigen Videos, weil das Wort unlesbar wird. Auf kleinen Viewports ohne genug Scrollraum. Nicht als Dauereffekt auf jeder Sektion.",
   "varianten": [
    "Statisch: Wort als Fenster auf Bild oder Video (background-clip: text oder mask-image)",
    "Scroll-Zoom durch einen Buchstaben ins Vollbild (sticky + mask-size bzw. transform auf dem SVG)",
    "Füllung bei Hover oder Fokus: Überschriften bekommen ein Bild in die Schrift",
    "Bild expandiert innerhalb der Typo und schiebt den Text weg",
    "SVG-clip-path-Typo, die sich beim Scrollen verändert"
   ],
   "umsetzung": "Scroll-Zoom: Wrapper height: 300vh, Kind position: sticky; top: 0; height: 100vh. Das Medium bekommt mask-image: url(wort.svg); mask-repeat: no-repeat; -webkit-mask für ältere Safari. Fortschritt p = (scrollY − start) / (Wrapperhöhe − 100vh). Ziel-mask-size von 80 % bis etwa 3000 %, pro Frame per Lerp 0,15 angenähert. Alternativ in CSS: animation-timeline: view() auf mask-size. Der Ankerpunkt (mask-position bzw. transform-origin) muss in der Fläche eines Buchstabens liegen, sonst wächst die leere Fläche. Bei einer ausgesparten Platte (Wort transparent auf Vollfläche) liegt er stattdessen im Stamm eines Buchstabens; skaliert wird das Text-SVG von 1 auf 30 oder mehr. Statisch mit Bild: background: url(bild.jpg) center / cover; background-clip: text; color: transparent. Mit Video: SVG-<mask> oder <clipPath> mit <text> über dem <video>, oder weiße Schrift mit mix-blend-mode: screen auf schwarzem Grund.",
   "mobil": "Funktioniert. Im Hochformat das Wort größer setzen oder drehen, damit genug Bild im Wort liegt. Video als komprimiertes, stummes playsinline-MP4, bei schwacher Verbindung ein Standbild. Scrollstrecke kürzer halten.",
   "reduzierte_bewegung": "Statisches Wort mit Bildfüllung, kein Zoom. Video pausiert und zeigt das Poster.",
   "barrierefreiheit": "Das maskierte Wort bleibt als echter Text erhalten (visuell versteckt oder als aria-label am SVG); die Grafik bekommt aria-hidden. Video ohne Ton oder mit Steuerung. Kontrast der Buchstabenkanten zum Hintergrund prüfen, auch an hellen Bildstellen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundene Kunsthalle Zurlauben in Trier mit der Ausstellung „STROM. Bewegtbild am Fluss“. Das Bewegtbild ist eine eigene Canvas-Malerei (Mosel am Abend, flimmernde Lichtstriche) statt eines Videos. Statt CSS mask-image wird eine Inline-SVG-Maske skaliert: die Seitenschrift greift (ein SVG als mask-image kann keine Webfonts laden) und die Kanten bleiben bei Faktor 37,5 scharf. Varianten per Umschalter: Zoom durch den Buchstaben, Wort als Fenster; die Programmliste darunter zeigt die Hover-Füllung mit background-clip: text. Die Vorführung simuliert den Scroll-Fortschritt, ohne die Seite zu bewegen. AD-Review 01.11.2026: Note 4 (Werkbank mit Luft für den ×-Knopf, der den zweiten Umschalter verdeckte). Zugang 02.11.2026: html mit scroll-padding-top: var(--kopf) (fokussierter Ticket-Link nicht mehr unter dem klebenden Kopf); unsichtbare Screenreader-Überschrift #titel mit heller Schriftfarbe zur Bühne; Kontrastmodus-Rahmen für Knöpfe."
 }
}