{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "cinematic-video-hero",
 "name": "Kinoreifer Vollbild-Video-Hero",
 "name_en": "Full-bleed cinematic video hero",
 "kurz": "Ein Showreel füllt den ersten Viewport, harte Schnitte geben den Takt, darüber stehen nur ein Filmtitel und ein Play-Reel-Kreis.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "luxuriös",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "kinoreif",
  "luxuriös",
  "atmosphärisch",
  "laut"
 ],
 "technik": [
  "video",
  "css",
  "gsap",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Ein Video füllt den ganzen ersten Viewport (100svh, object-fit: cover), ohne Rahmen. 2) Darüber steht nur wenig Typo: ein großer Claim oder die Wortmarke, dazu ein bis zwei kleine Labels wie Showreel-Hinweis, Ort oder Ton an/aus. 3) Oft wechseln mehrere kurze Einstellungen von 3 bis 6 s, hart geschnitten wie in einem Trailer. 4) Ein Klick auf „Play Reel“ öffnet das Video mit Ton in einem Overlay. 5) Beim Scrollen wird das Video kleiner, dunkler oder von der nächsten Sektion überdeckt.",
  "warum_es_wirkt": "Bewegtbild vermittelt Atmosphäre und Qualität schneller als jede Behauptung. Die knappe Typo darüber liest sich wie ein Filmtitel. Harte Schnitte geben Takt, eine langsame Kamerafahrt gibt Ruhe.",
  "wann_einsetzen": "Film- und Produktionsfirmen, Hotels und Gastronomie, Mode, Architektur mit gutem Material, Marken mit eigenem Showreel.",
  "wann_nicht": "Ohne hochwertiges eigenes Footage, denn Stockvideo wirkt sofort beliebig. Wenn Ladezeit oder mobiles Datenvolumen knapp sind. Wenn die Kernbotschaft Text ist.",
  "varianten": [
   "Mehrere Einstellungen im Trailer-Schnitt (Demo: Trailer)",
   "Ein einzelner ruhiger Loop von 8 bis 15 s (Demo: Ein Loop)",
   "Reel-Auswahl: eine Liste wechselt das Video, hier per Clip-Wechsel (Demo: Reel-Auswahl)",
   "Übergroße Typo über dem Video (siehe schrift-hero-viewportbreit)",
   "Video im kleinen Rahmen, das beim Scrollen zum Vollbild wächst (siehe medien-expansion-scroll)",
   "Laufband-Text über dem Video (siehe marquee-laufband)"
  ],
  "umsetzung": "<video autoplay muted loop playsinline preload=\"metadata\" poster=\"…\" aria-hidden=\"true\"> mit object-fit: cover und height: 100svh. Formate AV1 oder H.265, H.264 als Fallback; die Auflösung per <source media> oder JS wählen. Kurze Loops von 8 bis 15 s, mobil unter 3 bis 5 MB. Darüber ein Overlay mit 20 bis 40 % Schwarz, unten zusätzlich ein Verlauf für die Typo. Eine sichtbare Pause-Taste ist Pflicht (WCAG 2.2.2, Bewegung länger als 5 s). Das Showreel mit Ton läuft getrennt in einem <dialog>.\n\nScroll-Abgang: Hero mit position: sticky, die nächste Sektion fährt darüber. Dabei skaliert das Video von 1 auf 0,9 und dunkelt von 30 auf 75 % ab.\n\nDie Demo nutzt Standbilder als Einstellungen, weil der Fundus keine Videodateien führt. Kamerafahrt, harter Schnitt und Filmkorn stehen für das Footage. Schnitt, Fahrt, Fortschrittsbalken und Untertitel hängen an einer gemeinsamen Uhr; beim echten Video übernimmt das video.currentTime (timeupdate oder requestVideoFrameCallback).",
  "mobil": "Eigenes, kleineres Hochformat-Video (9:16) über <source media>, bei Data-Saver nur das Poster. playsinline ist zwingend, sonst öffnet iOS den Vollbild-Player. Der Play-Kreis ruht fest unten rechts.",
  "reduzierte_bewegung": "Kein Autoplay. Das Poster steht, daneben ein Abspielen-Knopf. Scroll-Skalierung und Filmkorn entfallen, der Titel blendet nur kurz ein.",
  "barrierefreiheit": "Die Pause-Taste ist sichtbar und per Tastatur erreichbar. Das Video ist dekorativ (aria-hidden), wenn es keine Information trägt. Das Showreel bekommt Untertitel, auch für Geräusche. Textkontrast am hellsten und am dunkelsten Frame prüfen; Overlay und Verlauf sichern ihn. Der Dialog schließt mit Esc und gibt den Fokus an den Play-Knopf zurück."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "Shot-Wechsel alle 3000–6000",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Loop 8–15 s; mobil < 3–5 MB; Overlay 20–40 % Schwarz",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 3000
 },
 "gesehen_bei": [
  {
   "seite": "Mat Voyce",
   "url": "https://matvoyce.tv",
   "auszeichnung": "Awwwards SOTD 30.01.2025",
   "beobachtung": "Laut hontran.dev tauscht eine Commercial-Auswahl die Showreels.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "K72",
   "url": "https://k72.ca/",
   "auszeichnung": "Awwwards Site of the Day, Developer Award, Mobile Excellence; Idéa Gold (laut Locomotive-Case-Study https://locomotive.ca/en/work/k72)",
   "beobachtung": "Live geprüft (HTML): figure.c-home_background mit Vollflächen-Video (1080p-MP4, muted, playsinline, loop, Poster) hinter der Startseite.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Stewart & Partners",
   "url": "https://www.stewartpartners.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (sp-scripts.txt): Video-Hero, über dem beim Scrollen ein Spacer auf Höhe 0 schrumpft (scrub, top top → bottom bottom); Play-Button wird erst klickbar, wenn das Overlay verschwunden ist.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "How to Create a Fullscreen Video Opening Animation (Codrops)",
   "url": "https://tympanus.net/codrops/2015/09/17/how-to-create-a-fullscreen-video-opening-animation/"
  }
 ],
 "kombinierbar_mit": [
  "schrift-hero-viewportbreit",
  "medien-expansion-scroll",
  "marquee-laufband"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege; Awwwards-Seiten entfernt."
  ],
  "kategorie_alt": "Hero"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Showreel füllt den ersten Viewport, harte Schnitte geben den Takt, darüber stehen nur ein Filmtitel und ein Play-Reel-Kreis.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Kamerafahrt linear · UI und Übergänge cubic-bezier(0.16, 1, 0.3, 1) (expo.out) · Hover 150 ms",
   "schnitt_ms": "3500 je Einstellung, harter Cut · 4 Einstellungen = Loop 14 000",
   "loop_ms": "12 000, Kamerafahrt hin und zurück (Sinus)",
   "kamerafahrt": "scale 1,12 → 1,2 je Einstellung, Versatz 2–8 % nach oben/rechts, auf den Überstand (scale − 1) / 2 geklemmt",
   "clip_wechsel": "Reel-Auswahl: clip-path inset(0 0 0 100%) → inset(0) in 900 ms expo.out, alte Einstellung fährt darunter weiter",
   "overlay": "30 % Schwarz flach + Verlauf unten 60 % (bis 50 % Höhe) + Verlauf links 45 % (bis 58 % Breite) + Vignette 50 %",
   "bild": "filter contrast(1.08) saturate(.86) brightness(.94)",
   "korn": "SVG-feTurbulence, Deckkraft 0,16, mix-blend-mode overlay, 8 Sprünge in 800 ms",
   "scroll": "Hero sticky; Video scale 1 → 0,9, Radius 0 → 18 px, Overlay 30 → 75 % über 100svh; Typo blendet bis 62 % Scroll aus und steigt 40 px",
   "titel": "Masken-Reveal translateY(105 %) → 0, 1200 ms expo.out, zweite Zeile 120 ms später",
   "play_kreis": "112 px (Touch 84 px), folgt dem Zeiger mit Lerp 0,14 je 60-Hz-Frame, sonst Ruheplatz unten rechts",
   "dialog": "clip-path inset(12% 18% round 14px) → inset(0 round 4px) und scale 0,94 → 1 in 900 ms expo.out, Hintergrund 97 % in 500 ms",
   "ton": "Web-Audio-Klangteppich (110 / 164,8 / 220,5 Hz, Tiefpass 900 Hz ± 380 Hz LFO 0,12 Hz), Lautstärke 0,05"
  },
  "ausloeser": "laden",
  "touch": "Der Play-Kreis folgt keinem Zeiger, er ruht fest unten rechts (84 px). Reel-Auswahl als Nummern-Pillen zum Tippen, Pause und Ton als Tippziele. Hochformat-Bilder über <source media>.",
  "reduziert": "Kein Autoplay: Poster der ersten Einstellung und ein Knopf „Abspielen“. Nach dem Klick harte Schnitte ohne Kamerafahrt und ohne Clip-Wechsel. Kein Filmkorn, keine Scroll-Skalierung, der Titel blendet in 250 ms ein.",
  "korrekturen": {
   "beschreibung": "1) Ein Video füllt den ganzen ersten Viewport (100svh, object-fit: cover), ohne Rahmen. 2) Darüber steht nur wenig Typo: ein großer Claim oder die Wortmarke, dazu ein bis zwei kleine Labels wie Showreel-Hinweis, Ort oder Ton an/aus. 3) Oft wechseln mehrere kurze Einstellungen von 3 bis 6 s, hart geschnitten wie in einem Trailer. 4) Ein Klick auf „Play Reel“ öffnet das Video mit Ton in einem Overlay. 5) Beim Scrollen wird das Video kleiner, dunkler oder von der nächsten Sektion überdeckt.",
   "warum_es_wirkt": "Bewegtbild vermittelt Atmosphäre und Qualität schneller als jede Behauptung. Die knappe Typo darüber liest sich wie ein Filmtitel. Harte Schnitte geben Takt, eine langsame Kamerafahrt gibt Ruhe.",
   "wann_einsetzen": "Film- und Produktionsfirmen, Hotels und Gastronomie, Mode, Architektur mit gutem Material, Marken mit eigenem Showreel.",
   "wann_nicht": "Ohne hochwertiges eigenes Footage, denn Stockvideo wirkt sofort beliebig. Wenn Ladezeit oder mobiles Datenvolumen knapp sind. Wenn die Kernbotschaft Text ist.",
   "varianten": [
    "Mehrere Einstellungen im Trailer-Schnitt (Demo: Trailer)",
    "Ein einzelner ruhiger Loop von 8 bis 15 s (Demo: Ein Loop)",
    "Reel-Auswahl: eine Liste wechselt das Video, hier per Clip-Wechsel (Demo: Reel-Auswahl)",
    "Übergroße Typo über dem Video (siehe schrift-hero-viewportbreit)",
    "Video im kleinen Rahmen, das beim Scrollen zum Vollbild wächst (siehe medien-expansion-scroll)",
    "Laufband-Text über dem Video (siehe marquee-laufband)"
   ],
   "umsetzung": "<video autoplay muted loop playsinline preload=\"metadata\" poster=\"…\" aria-hidden=\"true\"> mit object-fit: cover und height: 100svh. Formate AV1 oder H.265, H.264 als Fallback; die Auflösung per <source media> oder JS wählen. Kurze Loops von 8 bis 15 s, mobil unter 3 bis 5 MB. Darüber ein Overlay mit 20 bis 40 % Schwarz, unten zusätzlich ein Verlauf für die Typo. Eine sichtbare Pause-Taste ist Pflicht (WCAG 2.2.2, Bewegung länger als 5 s). Das Showreel mit Ton läuft getrennt in einem <dialog>.\n\nScroll-Abgang: Hero mit position: sticky, die nächste Sektion fährt darüber. Dabei skaliert das Video von 1 auf 0,9 und dunkelt von 30 auf 75 % ab.\n\nDie Demo nutzt Standbilder als Einstellungen, weil der Fundus keine Videodateien führt. Kamerafahrt, harter Schnitt und Filmkorn stehen für das Footage. Schnitt, Fahrt, Fortschrittsbalken und Untertitel hängen an einer gemeinsamen Uhr; beim echten Video übernimmt das video.currentTime (timeupdate oder requestVideoFrameCallback).",
   "mobil": "Eigenes, kleineres Hochformat-Video (9:16) über <source media>, bei Data-Saver nur das Poster. playsinline ist zwingend, sonst öffnet iOS den Vollbild-Player. Der Play-Kreis ruht fest unten rechts.",
   "reduzierte_bewegung": "Kein Autoplay. Das Poster steht, daneben ein Abspielen-Knopf. Scroll-Skalierung und Filmkorn entfallen, der Titel blendet nur kurz ein.",
   "barrierefreiheit": "Die Pause-Taste ist sichtbar und per Tastatur erreichbar. Das Video ist dekorativ (aria-hidden), wenn es keine Information trägt. Das Showreel bekommt Untertitel, auch für Geräusche. Textkontrast am hellsten und am dunkelsten Frame prüfen; Overlay und Verlauf sichern ihn. Der Dialog schließt mit Esc und gibt den Fokus an den Play-Knopf zurück."
  },
  "geprueft": "31.10.2026",
  "notiz": "Showreel des erfundenen Studios Halbton (Köln) mit vier eigenen Arbeiten aus medien/. Standbilder mit Kamerafahrt, Filmkorn und harten Schnitten stehen für das Video. Drei Varianten per Umschalter: Trailer, Ein Loop, Reel-Auswahl mit Clip-Wechsel. Play Reel öffnet einen <dialog> mit Untertiteln, Ton an spielt einen leisen Web-Audio-Klang. Die Studio-Sektion schiebt sich beim Scrollen über das Video. Vorführung: der Trailer läuft, in der letzten Einstellung scrollt die Seite kurz an und zurück. Bilder 01.11.2026: eigene Bilder statt Portfolio."
 }
}