{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "prozess-timeline-wachsende-linie",
 "name": "Prozess-/Timeline-Sektion mit wachsender Linie",
 "name_en": "Process timeline with scroll-filled progress line",
 "kurz": "Eine dünne Linie füllt sich mit dem Scroll und zeigt, in welcher Etappe des Ablaufs man gerade steht: als wachsende Pille, als Unterstrich oder als durchgehende Linie.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "strukturiert",
  "ruhig",
  "sachlich",
  "präzise"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "position-sticky",
  "gsap",
  "scrolltrigger",
  "motion"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Sektion erklärt einen Ablauf oder eine Geschichte in 3 bis 6 Schritten, etwa Erstgespräch, Konzept, Design, Launch oder Jahreszahlen. Eine dünne Linie füllt sich mit dem Scroll, vertikal am Rand oder als Unterstrich je Schritt. Der aktive Schritt hebt sich ab: Der Punkt wird zur Pille, ein Label blendet ein, die Farbe wechselt. Oft steht links eine sticky Schrittliste und rechts scrollen die Inhalte. Ein Klick auf einen Schritt scrollt weich zum Inhalt. Abgeschlossene Schritte bleiben markiert, oder ihre Füllung wischt heraus.",
  "warum_es_wirkt": "Die Linie macht Fortschritt körperlich. Man sieht, wo man im Ablauf steht und wie viel noch kommt. Ein abstrakter Prozess bekommt Richtung und Rhythmus, und die Füllung belohnt das Weiterscrollen.",
  "wann_einsetzen": "„So arbeiten wir“-Seiten, Leistungsabläufe, Onboarding, Firmengeschichte, Kursaufbau mit Modulen, Bewerbungs- oder Bestellschritte.",
  "wann_nicht": "Bei nur zwei Schritten. Wenn die Schritte nicht wirklich aufeinander folgen. In sehr kurzen Sektionen, weil sich die Linie dann zu schnell füllt. Und nie so, dass Inhalte nur im aktiven Zustand lesbar sind.",
  "varianten": [
   "Unterstrich je Schritt füllt sich per scaleX, nativ mit CSS view-timeline; abgeschlossene Schritte wischen in 0,5 s heraus (Granola)",
   "Vertikale Schiene: Punkte von 4px, der aktive wächst zur 80px-Pille und füllt sich nach dem Scroll-Fortschritt (Twenty)",
   "Durchgehende Linie wächst in der Höhe neben den Inhalten, Jahreszahlen sticky daneben (Aceternity Timeline)",
   "Gepinnte Timeline mit scrub, Punkte und Karten werden nacheinander aktiv (GSAP)",
   "SVG-Pfad statt gerader Linie (siehe svg-pfad-zeichnen-scroll)"
  ],
  "umsetzung": "Markup: <ol> mit einem <li> je Schritt (Nummer, Titel, Text), damit die Reihenfolge semantisch stimmt. Die Linie ist ein dekoratives Element mit transform: scaleY(0) und transform-origin: top. Nativ: .fuellung { animation: fuellen linear both; animation-timeline: --prozess; animation-range: cover 30% cover 70%; } mit @keyframes fuellen { to { transform: scaleY(1); } } und view-timeline-name: --prozess an der Liste. Für eine Füllung je Schritt bekommt jeder Inhaltsblock eine eigene view-timeline (--s0, --s1 …); timeline-scope am gemeinsamen Elternelement macht sie für die Schrittliste nutzbar (Granola, Range cover 50vh bis cover calc(100% − 50vh)). Abgeschlossene Schritte bekommen per Klasse transform-origin: right und eine 0,5-s-Animation auf scaleX(0). Fallback mit @supports not (animation-timeline: view()): Linie voll zeigen oder ausblenden, alle Schritte gleich stark. Mit JS: Fortschritt je Schritt als (50vh − top) / Höhe berechnen und als Custom Property setzen; mit GSAP ScrollTrigger und scrub auf scaleY, toggleClass für die Punkte. Die Demo rechnet in Vanilla JS, damit alle drei Varianten dieselbe Messung nutzen. Fallstricke: scaleY statt height animieren (kein Reflow), Linie per z-index hinter die Punkte legen, Punkte mittig auf der Linie ausrichten.",
  "mobil": "Vertikale Linie links am Rand, Inhalte einspaltig, die sticky Schrittliste entfällt. Granola zeigt die Variante erst ab md, Twenty nutzt mobil ein Swipe-Deck.",
  "reduzierte_bewegung": "Linie statisch voll zeigen oder den Fortschritt ohne weiche Übergänge anzeigen. Aktive Schritte über Farbe und Text markieren statt über Bewegung.",
  "barrierefreiheit": "<ol> für die Reihenfolge. Linie und Punkte sind dekorativ (aria-hidden). Den aktiven Schritt nicht nur über Farbe zeigen, sondern auch per Text und aria-current=\"step\". Sprungziele der Schrittliste als echte Buttons oder Anker mit sichtbarem Fokus. Alle Inhalte bleiben ohne aktiven Zustand voll lesbar."
 },
 "messwerte": {
  "easing": "linear (scroll-gekoppelt); Abschluss-Wisch .5s",
  "dauer_ms": "Pillen-Wachstum 400; Füll-Nachlauf 150; Label-Einblendung 300; Swipe-out 500",
  "stagger_ms": "",
  "distanz": "scaleX/scaleY 0 auf 1; Twenty: Punkt 4px auf Pille 80px; Granola: Füllung 3px hoch auf 174px-Strich",
  "sonstiges": "Granola animation-range: cover 50vh cover calc(100% − 50vh); Aceternity offset ['start 10%','end 50%']; Tutorial: scrub 0.5, 1800px Scrollstrecke je Schritt.",
  "herkunft": "beobachtet",
  "quelle": "https://www.granola.ai/_next/static/css/ce31c79c66f973e7.css; https://twenty.com/_next/static/chunks/1jxf6ys3_s16q.css?dpl=dpl-5c0fc915-41091067825-1"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Granola – How it works",
   "url": "https://www.granola.ai/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: section.how-it-works-progress-scope (ab md, zweispaltig). Links sticky Schrittliste (top-24) mit Buttons, Klick scrollt per scrollIntoView({behavior:'smooth',block:'center'}). Unter jedem Schrittnamen ein 1px-Strich (174px breit) mit 3px-Füllung .hiw-step-fill. Natives Scroll-Driven-CSS: timeline-scope: --hiw-step-0…2 am Container, view-timeline-name an den Inhaltsblöcken rechts, animation-timeline je Füllung, Keyframe scaleX(0) auf scaleX(1), transform-origin links, animation-range: cover 50vh cover calc(100% − 50vh). Abgeschlossene Schritte: transform-origin rechts, ‚swipe-out‘ in .5s. Fallback: @supports not (animation-timeline: view()) blendet die Striche aus.",
   "art": "website"
  },
  {
   "seite": "Twenty (CRM)",
   "url": "https://twenty.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: Komponente StepperProgressRail auf der Startseite. Inaktive Schritte sind 4px-Punkte (border-radius 50%); der aktive Schritt wächst auf 80px Höhe zur Pille (transition height .4s), darin füllt sich ein blauer Balken nach lokalem Scroll-Fortschritt (height: var(--rail-fill), transition height .15s linear). Rechts daneben blendet ein Mono-Label in Großbuchstaben ein (Schrittnummer, opacity .3s). Inhalte daneben wechseln mit opacity/translateY; mobil als Swipe-Deck.",
   "art": "website"
  },
  {
   "seite": "Aceternity UI – Timeline",
   "url": "https://ui.aceternity.com/components/timeline",
   "auszeichnung": "",
   "beobachtung": "Quellcode (Registry) gelesen: useScroll mit offset ['start 10%','end 50%']; Linienhöhe useTransform [0,1] auf [0, gemessene Höhe]; Opacity der Füllung [0,0.1] auf [0,1]; Jahreszahl-Spalte sticky top-40.",
   "art": "demo"
  },
  {
   "seite": "Build with Matija – GSAP ScrollTrigger React Timeline",
   "url": "https://www.buildwithmatija.com/blog/gsap-scrolltrigger-react-timeline",
   "auszeichnung": "",
   "beobachtung": "Tutorial: gepinnte Timeline (pin true, scrub 0.5, Scrollstrecke 1800px pro Schritt), Linie startet mit scaleY 0 (transform-origin top) und wächst pro Schritt auf (Index/(Schritte−1))×Maximalhöhe; Punkte scale 0 auf 1 in 0.4 s, aktiv scale 1.8; mobil statische Liste.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Aceternity UI – Timeline (Komponente mit Code)",
   "url": "https://ui.aceternity.com/components/timeline"
  },
  {
   "titel": "Scroll-driven Animations – Demos und Erklärungen (Bramus)",
   "url": "https://scroll-driven-animations.style/"
  },
  {
   "titel": "GSAP ScrollTrigger React Timeline (Build with Matija)",
   "url": "https://www.buildwithmatija.com/blog/gsap-scrolltrigger-react-timeline"
  }
 ],
 "kombinierbar_mit": [
  "svg-pfad-zeichnen-scroll",
  "scroll-fortschritt",
  "split-screen-sticky-seiten",
  "scrollspy-kapitelnavigation",
  "pinned-scrub-scrollytelling"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-a.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine dünne Linie füllt sich mit dem Scroll und zeigt, in welcher Etappe des Ablaufs man gerade steht: als wachsende Pille, als Unterstrich oder als durchgehende Linie.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing_scroll": "linear (Füllung direkt an den Scroll gekoppelt)",
   "easing_zustand": "cubic-bezier(0.16, 1, 0.3, 1) für Pillen-Wachstum, Label, Wisch und Farbwechsel",
   "fortschritt_je_etappe": "p = clamp((50vh − top) / Höhe), entspricht animation-range: cover 50vh cover calc(100% − 50vh)",
   "fortschritt_linie": "offset ['start 10%', 'end 50%']: g = clamp((10vh − top) / (Höhe − 40vh)); Opazität der Füllung g 0–0,1 → 0–1",
   "schiene_punkt_px": 4,
   "schiene_pille_px": 80,
   "schiene_pille_ms": 400,
   "schiene_fuellung": "scaleY(p), transform-origin top, Nachlauf transition 150ms linear",
   "label_ms": 300,
   "unterstrich": "Strich 174 × 1px, Füllung 3px scaleX(p), transform-origin left",
   "unterstrich_wisch_ms": 500,
   "unterstrich_wisch": "abgeschlossen: transform-origin right, scaleX 1 → 0",
   "linie": "1px Spur, Füllung 2px scaleY(g) mit Verlauf transparent → Signal auf 120px, Spitze 8px mit 5px Hof",
   "knoten_px": 9,
   "klick": "scrollIntoView({ behavior: 'smooth', block: 'center' })",
   "farben": "#0b0b0b Grund, #ffffff Text, #8a8a8a Meta, #636363 inaktiv, #ff5a1f Signal nur für Füllung und CTA",
   "schrift": "TikTok Sans wdth 75 wght 800 (h1 clamp(3.5rem, 10vw, 11rem), -0.03em, lh 0.9), Index wdth 100 wght 600; DM Mono 12px versal +0.04em",
   "layout": "Index sticky links minmax(280px, 36%), Etappen rechts je min-height 96svh, Umbruch einspaltig bei 760px"
  },
  "ausloeser": "scroll",
  "touch": "Unter 760px entfällt die sticky Schrittliste. Eine Linie läuft links am Rand; je nach Variante wächst dort die Pille an der Etappe, der Unterstrich sitzt unter der Überschrift oder die Linie füllt sich mit Knoten. Scrollen per Finger, kein Hover nötig.",
  "reduziert": "Die Füllung folgt weiter dem Scroll, aber ohne Übergänge: kein Nachlauf, kein Pillen-Wachstum mit Kurve, kein Wisch (abgeschlossene Unterstriche bleiben voll). Klick auf eine Etappe springt ohne weiches Scrollen.",
  "korrekturen": {
   "beschreibung": "Eine Sektion erklärt einen Ablauf oder eine Geschichte in 3 bis 6 Schritten, etwa Erstgespräch, Konzept, Design, Launch oder Jahreszahlen. Eine dünne Linie füllt sich mit dem Scroll, vertikal am Rand oder als Unterstrich je Schritt. Der aktive Schritt hebt sich ab: Der Punkt wird zur Pille, ein Label blendet ein, die Farbe wechselt. Oft steht links eine sticky Schrittliste und rechts scrollen die Inhalte. Ein Klick auf einen Schritt scrollt weich zum Inhalt. Abgeschlossene Schritte bleiben markiert, oder ihre Füllung wischt heraus.",
   "warum_es_wirkt": "Die Linie macht Fortschritt körperlich. Man sieht, wo man im Ablauf steht und wie viel noch kommt. Ein abstrakter Prozess bekommt Richtung und Rhythmus, und die Füllung belohnt das Weiterscrollen.",
   "wann_einsetzen": "„So arbeiten wir“-Seiten, Leistungsabläufe, Onboarding, Firmengeschichte, Kursaufbau mit Modulen, Bewerbungs- oder Bestellschritte.",
   "wann_nicht": "Bei nur zwei Schritten. Wenn die Schritte nicht wirklich aufeinander folgen. In sehr kurzen Sektionen, weil sich die Linie dann zu schnell füllt. Und nie so, dass Inhalte nur im aktiven Zustand lesbar sind.",
   "varianten": [
    "Unterstrich je Schritt füllt sich per scaleX, nativ mit CSS view-timeline; abgeschlossene Schritte wischen in 0,5 s heraus (Granola)",
    "Vertikale Schiene: Punkte von 4px, der aktive wächst zur 80px-Pille und füllt sich nach dem Scroll-Fortschritt (Twenty)",
    "Durchgehende Linie wächst in der Höhe neben den Inhalten, Jahreszahlen sticky daneben (Aceternity Timeline)",
    "Gepinnte Timeline mit scrub, Punkte und Karten werden nacheinander aktiv (GSAP)",
    "SVG-Pfad statt gerader Linie (siehe svg-pfad-zeichnen-scroll)"
   ],
   "umsetzung": "Markup: <ol> mit einem <li> je Schritt (Nummer, Titel, Text), damit die Reihenfolge semantisch stimmt. Die Linie ist ein dekoratives Element mit transform: scaleY(0) und transform-origin: top. Nativ: .fuellung { animation: fuellen linear both; animation-timeline: --prozess; animation-range: cover 30% cover 70%; } mit @keyframes fuellen { to { transform: scaleY(1); } } und view-timeline-name: --prozess an der Liste. Für eine Füllung je Schritt bekommt jeder Inhaltsblock eine eigene view-timeline (--s0, --s1 …); timeline-scope am gemeinsamen Elternelement macht sie für die Schrittliste nutzbar (Granola, Range cover 50vh bis cover calc(100% − 50vh)). Abgeschlossene Schritte bekommen per Klasse transform-origin: right und eine 0,5-s-Animation auf scaleX(0). Fallback mit @supports not (animation-timeline: view()): Linie voll zeigen oder ausblenden, alle Schritte gleich stark. Mit JS: Fortschritt je Schritt als (50vh − top) / Höhe berechnen und als Custom Property setzen; mit GSAP ScrollTrigger und scrub auf scaleY, toggleClass für die Punkte. Die Demo rechnet in Vanilla JS, damit alle drei Varianten dieselbe Messung nutzen. Fallstricke: scaleY statt height animieren (kein Reflow), Linie per z-index hinter die Punkte legen, Punkte mittig auf der Linie ausrichten.",
   "mobil": "Vertikale Linie links am Rand, Inhalte einspaltig, die sticky Schrittliste entfällt. Granola zeigt die Variante erst ab md, Twenty nutzt mobil ein Swipe-Deck.",
   "reduzierte_bewegung": "Linie statisch voll zeigen oder den Fortschritt ohne weiche Übergänge anzeigen. Aktive Schritte über Farbe und Text markieren statt über Bewegung.",
   "barrierefreiheit": "<ol> für die Reihenfolge. Linie und Punkte sind dekorativ (aria-hidden). Den aktiven Schritt nicht nur über Farbe zeigen, sondern auch per Text und aria-current=\"step\". Sprungziele der Schrittliste als echte Buttons oder Anker mit sichtbarem Fokus. Alle Inhalte bleiben ohne aktiven Zustand voll lesbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Digitalstudio BRACHE aus Zürich (Schwarz-Weiß, eine Signalfarbe #ff5a1f, TikTok Sans in zwei Breiten, DM Mono). Ablauf in vier Etappen (Grabung, Rohbau, Ausbau, Eröffnung) mit eigenen SVG-Abbildungen. Links sticky Schrittliste mit Buttons (Klick scrollt zur Etappe), rechts die Etappen. Umschalter für drei Varianten: Schiene (Twenty, Punkt 4px → Pille 80px), Unterstrich (Granola, 174px-Strich, Wisch 500ms) und Linie (Aceternity, Offset start 10% → end 50%). Gemessene Werte stehen dezent unter der Liste, dazu der Live-Fortschritt. Die Galerie-Vorschau scrollt selbst durch den Ablauf und wechselt pro Runde die Variante. Vanilla JS statt nativer view-timeline, damit alle Varianten dieselbe Messung teilen; der native CSS-Weg steht in der Umsetzung. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --stumm #4d4d4d → #636363 (inaktive Phasennamen 3,2:1 als große Schrift; Punkte und Bahn folgen), Kontrastmodus-Rahmen für Knöpfe."
 }
}