{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-brutal-hart",
 "name": "Animationsstil „Brutal hart“",
 "name_en": "Brutalist / hard-cut stepped motion",
 "kurz": "Keine Kurve, nur Takt: Zeichen tippen im 40-ms-Raster, ein Verschluss fährt in 32 Stufen, das Bild rendert in sechs Pixelstufen.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "brutal",
  "roh",
  "laut",
  "technisch",
  "retro"
 ],
 "technik": [
  "css",
  "gsap",
  "steps-easing"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bewegung ohne weiche Kurven. Harte Schnitte, steps()-Animationen, lineare Bewegung, sofortiges Ein- und Ausblenden. Buchstaben erscheinen wie auf einem Terminal: sehr kurze Einzeldauer, fester Versatz. Bilder wechseln ohne Übergang oder bauen sich in Pixel- und Rasterstufen auf. Der Kontrast entsteht über den Rhythmus, nicht über die Kurve.",
  "warum_es_wirkt": "Fast alle Seiten bewegen sich weich und gefedert. Harte Stufen fallen dagegen sofort auf. Sie wirken roh, ehrlich, technisch oder subkulturell. Tempo und Takt werden selbst zum Gestaltungsmittel.",
  "wann_einsetzen": "Musik, Mode-Avantgarde, Kunst, Entwickler-Portfolios, Tech-Kultur, Retro-Futurismus, Boot- und Ladesequenzen, Drops mit Countdown.",
  "wann_nicht": "Bei konservativen Zielgruppen, bei Marken, die von weicher Premium-Anmutung leben, und bei Inhalten, die Vertrauen aufbauen müssen (Gesundheit, Finanzen, Beratung).",
  "varianten": [
   "Terminal-Aufbau: ein Zeichen nach dem anderen, Einzeldauer 20 ms, Versatz 40 ms, blinkender Cursor",
   "Stufen: Positions- und Größenwechsel mit steps(4) bis steps(32), z. B. ein Verschluss in 32 Stufen",
   "Harte Bildwechsel im festen Takt (0 ms Übergang)",
   "Pixel-Render: Bild baut sich in groben bis feinen Rasterstufen auf"
  ],
  "umsetzung": "CSS-Token: --ease-hard: steps(1, end); --ease-steps: steps(6, jump-none); --ease-linear: linear; --dur-cut: 0ms; --dur-tick: 20ms; --stagger-char: 40ms. In GSAP: ease \"none\" oder \"steps(6)\", duration 0.02, stagger 0.04. Rhythmus über eine feste Taktung, z. B. alle 80 ms. Gemessen: basement.studio Verschluss 1.4s steps(32, end) und Flackern .18s steps(3, end), Jean Dawson Schreibmaschine 2s steps(30, end) mit Cursor .9s steps(2, start), Fiddle.Digital Doppelpunkt 1s steps(1). Achtung: steps(n, end) landet am Ende durch Rundung manchmal auf der vorletzten Stufe. Den Zielzustand nach Ablauf fest setzen.",
  "mobil": "Unverändert. Hover-Effekte durch Tippen ersetzen.",
  "reduzierte_bewegung": "Harte Schnitte sind meist unkritisch. Schnelles Flackern vermeiden (WCAG 2.3.1: höchstens 3 Blitze pro Sekunde). Zeichenaufbau sofort vollständig zeigen, Blinken und Laufbänder anhalten.",
  "barrierefreiheit": "Zeichenweise aufgebauter Text bekommt ein aria-label am Container, die Einzelzeichen aria-hidden. Keine Blitze. Blinkende Elemente langsamer als 3 Hz halten."
 },
 "messwerte": {
  "easing": "Produktion: steps(32, end), steps(3, end) (basement); steps(30, end), steps(2, start) (Jean Dawson); step-end / steps(1) (Fiddle.Digital, Linear 2800 ms)",
  "dauer_ms": "Produktion: 180 (Flackern) / 750 / 900 / 1400 / 2000 (Typing); Demo-Skala 0 / 20 / 80 / 160",
  "stagger_ms": "40 pro Zeichen; 80 pro Zeile",
  "distanz": "Sprünge in ganzen Rasterschritten (z. B. 8 px oder 1 Zeile)",
  "sonstiges": "Zeichenwerte beobachtet (Codrops 3DCarousel); Rest typisch",
  "herkunft": "beobachtet",
  "quelle": "https://basement.studio/_next/static/immutable/chunks/0lxg9e5puul0i.css"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": 180
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – On-Scroll 3D Carousel (Titelzeichen)",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Zeichen-Animation: Dauer 0,02 s, ease none, Stagger 0,04 s, autoAlpha 0 → 1, also harter Terminal-Aufbau.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Goodgrowth: Boot Sequences, Spinning Discs and the Art of the Portfolio (08/2026)",
   "url": "https://tympanus.net/codrops/2026/08/27/goodgrowth-boot-sequences-spinning-discs-and-the-art-of-the-portfolio/",
   "auszeichnung": "",
   "beobachtung": "Laut Telegram-Teaser: Boot-Sequenzen und rotierende Discs als Motion-Motiv (Artikel nicht gelesen).",
   "art": "artikel"
  },
  {
   "seite": "Osmo – Pixelate Image Render Effect",
   "url": "https://www.osmo.supply/resource/pixelate-image-render-effect",
   "auszeichnung": "",
   "beobachtung": "In der Ressourcenliste geführt (Details nicht geprüft).",
   "art": "demo"
  },
  {
   "seite": "basement.studio",
   "url": "https://basement.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Maschinen-Reveal animation 1.4s steps(32, end) (translateY 0 → 100 %), Flackern .18s steps(3, end); jeweils mit prefers-reduced-motion-Abschaltung.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Jean Dawson",
   "url": "https://jeandawson.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Schreibmaschinen-Text animation type 2s steps(30, end) mit 3s Verzögerung (bzw. 1.5s steps(10)), Cursor blinker .9s steps(2, start).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Fiddle.Digital",
   "url": "https://fiddle.digital/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Sonderzeichen-Animation .75s step-end infinite, Uhr-Doppelpunkt blink 1s steps(1).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP Eases (steps)",
   "url": "https://gsap.com/docs/v3/Eases/"
  }
 ],
 "kombinierbar_mit": [
  "token-tech-praezise",
  "shader-uebergang-dissolve"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 4 Produktionsseiten (inkl. Linear) → Hochstufung auf B vorgeschlagen."
  ],
  "prioritaet_hinweis": "31.10.2026: C → B laut patch-belege-2.json (4 Produktionsseiten (inkl. Linear) → Hochstufung auf B vorgeschlagen.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Keine Kurve, nur Takt: Zeichen tippen im 40-ms-Raster, ein Verschluss fährt in 32 Stufen, das Bild rendert in sechs Pixelstufen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "terminal": {
    "zeichen_dauer_ms": 20,
    "zeichen_easing": "linear (ease none), opacity 0 → 1",
    "stagger_zeichen_ms": 40,
    "bildwechsel_ms": 0,
    "cursor": "900ms steps(2, start) infinite, visibility"
   },
   "stufen": {
    "verschluss_dauer_ms": 1400,
    "verschluss_easing": "steps(32, end)",
    "verschluss_weg": "translateY 0 → 100 %",
    "zeilen_dauer_ms": 480,
    "zeilen_easing": "steps(6, jump-none)",
    "zeilen_weg": "translateY 105 % → 0",
    "stagger_zeile_ms": 80
   },
   "pixel": {
    "rasterstufen_px": [
     48,
     32,
     20,
     12,
     6,
     1
    ],
    "takt_ms": 80,
    "gesamt_ms": 480
   },
   "stufen_einblendung": {
    "dauer_ms": 180,
    "easing": "steps(3, end)",
    "einsatz": "Produktzeile in Terminal und Pixel, Überschrift in Pixel"
   },
   "laufband": {
    "schritt_px": 8,
    "takt_ms": 80
   },
   "uhr_doppelpunkt": "1s steps(1) infinite, opacity 1 → 0 bei 50 %",
   "fortschritt": "clip-path inset, steps(n, end), ein Feld je Stufe",
   "ui_hover_ms": 0,
   "vorfuehrung_takt_ms": 3200,
   "css_token": {
    "--ease-hard": "steps(1, end)",
    "--ease-steps": "steps(6, jump-none)",
    "--ease-shutter": "steps(32, end)",
    "--ease-flicker": "steps(3, end)",
    "--dur-cut": "0ms",
    "--dur-tick": "20ms",
    "--dur-step": "80ms",
    "--stagger-char": "40ms",
    "--stagger-line": "80ms",
    "--raster": "8px"
   }
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten. Bild antippen zeigt den nächsten Look, Hinweis in der Bildecke. Hover-Umkehrungen sind abgeschaltet, nur der aktive Look bleibt schwarz hinterlegt. Einspaltig: Überschrift, Bild, Produktzeile, Liste.",
  "reduziert": "Alle Zustände springen sofort (0 ms): Text vollständig, Bild ohne Verschluss und Pixelstufen, Fortschritt voll. Cursor und Uhr-Doppelpunkt blinken nicht, das Laufband steht. Lookwechsel bleiben harte Schnitte.",
  "korrekturen": {
   "beschreibung": "Bewegung ohne weiche Kurven. Harte Schnitte, steps()-Animationen, lineare Bewegung, sofortiges Ein- und Ausblenden. Buchstaben erscheinen wie auf einem Terminal: sehr kurze Einzeldauer, fester Versatz. Bilder wechseln ohne Übergang oder bauen sich in Pixel- und Rasterstufen auf. Der Kontrast entsteht über den Rhythmus, nicht über die Kurve.",
   "warum_es_wirkt": "Fast alle Seiten bewegen sich weich und gefedert. Harte Stufen fallen dagegen sofort auf. Sie wirken roh, ehrlich, technisch oder subkulturell. Tempo und Takt werden selbst zum Gestaltungsmittel.",
   "wann_einsetzen": "Musik, Mode-Avantgarde, Kunst, Entwickler-Portfolios, Tech-Kultur, Retro-Futurismus, Boot- und Ladesequenzen, Drops mit Countdown.",
   "wann_nicht": "Bei konservativen Zielgruppen, bei Marken, die von weicher Premium-Anmutung leben, und bei Inhalten, die Vertrauen aufbauen müssen (Gesundheit, Finanzen, Beratung).",
   "varianten": [
    "Terminal-Aufbau: ein Zeichen nach dem anderen, Einzeldauer 20 ms, Versatz 40 ms, blinkender Cursor",
    "Stufen: Positions- und Größenwechsel mit steps(4) bis steps(32), z. B. ein Verschluss in 32 Stufen",
    "Harte Bildwechsel im festen Takt (0 ms Übergang)",
    "Pixel-Render: Bild baut sich in groben bis feinen Rasterstufen auf"
   ],
   "umsetzung": "CSS-Token: --ease-hard: steps(1, end); --ease-steps: steps(6, jump-none); --ease-linear: linear; --dur-cut: 0ms; --dur-tick: 20ms; --stagger-char: 40ms. In GSAP: ease \"none\" oder \"steps(6)\", duration 0.02, stagger 0.04. Rhythmus über eine feste Taktung, z. B. alle 80 ms. Gemessen: basement.studio Verschluss 1.4s steps(32, end) und Flackern .18s steps(3, end), Jean Dawson Schreibmaschine 2s steps(30, end) mit Cursor .9s steps(2, start), Fiddle.Digital Doppelpunkt 1s steps(1). Achtung: steps(n, end) landet am Ende durch Rundung manchmal auf der vorletzten Stufe. Den Zielzustand nach Ablauf fest setzen.",
   "mobil": "Unverändert. Hover-Effekte durch Tippen ersetzen.",
   "reduzierte_bewegung": "Harte Schnitte sind meist unkritisch. Schnelles Flackern vermeiden (WCAG 2.3.1: höchstens 3 Blitze pro Sekunde). Zeichenaufbau sofort vollständig zeigen, Blinken und Laufbänder anhalten.",
   "barrierefreiheit": "Zeichenweise aufgebauter Text bekommt ein aria-label am Container, die Einzelzeichen aria-hidden. Keine Blitze. Blinkende Elemente langsamer als 3 Hz halten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Demo im Rezept „Kollektion und Ritual“ (Zalando Sans wdth 125 wght 400, Fragment Mono, warmes Off-White, Rost als einzige Signalfarbe) für das erfundene Basler Label Klybeck Uniform. Das Rezept animiert sonst weich; harte Bewegung passt hier, weil das Muster Mode-Avantgarde ausdrücklich nennt. Drop-Seite mit vier Looks als im Canvas gezeichnete Freisteller. Umschalter Terminal / Stufen / Pixel zeigt drei Varianten am selben Lookwechsel. Dazu Laufband in 8-px-Sprüngen, Drop-Uhr mit Doppelpunkt steps(1) und ein Fortschrittsbalken mit einem Feld je Stufe. Vorführung: jede Variante einen Look lang, Takt 3,2 s. Ohne Bibliotheken (WAAPI + Canvas). AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Knopf „Stopp/Lauf“ (button, aria-pressed, aria-label „Laufband anhalten“) als harter Block am rechten Ende des Laufbands; ruft dieselbe pause()/weiter() wie FUNDUS_DEMO, die jetzt auch Cursor- und Doppelpunkt-Blinken anhält (.angehalten); in Vorschau und bei reduzierter Bewegung ausgeblendet. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Bewusst offen: Klick auf die Bildkarte (div, role=img) ist Maus-Abkürzung zu „Nächster Look“; der aria-hidden Laufbandtext wird bei 320 px abgeschnitten (Laufband)."
 }
}