{ "schema": "fundus-index/1", "titel": "Fundus – Web-Trend-Bibliothek von CecoDesign", "stand": "02.11.2026", "basis": "https://cecodesign.de/lab/fundus/", "anleitung": "Für Claude: Zuerst leitfaden.txt lesen (Vorgehen, Anti-Generik-Regeln, Checkliste) und in rezepte-uebersicht.json ein Rezept zur Branche wählen (dann rezepte//bauplan.txt, rezept.json, tokens.css); es legt Schrift, Farbe, Animationsstil und Muster je Sektion fest. Dann hier die Techniken des Rezepts nachschlagen. Filtern nach kategorie_slug, stimmung (festes Vokabular), technik_gruppen und leistungskosten; Prio A zuerst; D sind Bausteine für Kundenseiten (Speisekarte, Buchung, Filter, Kaufbox …), E Barrierefreiheit (gehört auf jede Seite), F Experimente. Für jedes gewählte Muster meta.json lesen (urls.meta): steckbrief, messwerte (mit Herkunft), kurve, bau.werte (in der Demo verwendete Werte). Ist demo=true, liegt unter urls.demo eine eigenständige Datei als Vorlage; varianten_demo listet umschaltbare Varianten (demo?v=) mit Einsatzzweck in meta.json → bau.varianten: die passende wählen, nicht immer die erste. Schriften nur aus schriften.json wählen und die claude_verbotsliste beachten; template_ok=false heißt: nicht für IONOS-Templates. Eine Kurve und eine Dauer konsequent durch die ganze Seite ziehen (siehe messungen.json).", "dateien": { "leitfaden": "https://cecodesign.de/lab/fundus/leitfaden.txt", "rezepte_uebersicht": "https://cecodesign.de/lab/fundus/rezepte-uebersicht.json", "rezepte": "https://cecodesign.de/lab/fundus/rezepte.json", "schriften": "https://cecodesign.de/lab/fundus/schriften.json", "messungen": "https://cecodesign.de/lab/fundus/messungen.json", "schema": "https://cecodesign.de/lab/fundus/schema.json" }, "bilder": "Zweiter Teil des Fundus, nur lokal (fremde Werke, nicht online): Portfolio-Website/fundus-bilder/ mit inspiration.json (~1.470 Referenzen: Websites mit gemessener Typo, Farben, Easing, Technik; Plakate, Marken, Editorial, 3D), LIESMICH-CLAUDE.md und suche.py. Vorgehen: erst hier Rezept, Schriften und Techniken wählen, dann dort 6–12 Referenzen suchen und ansehen. Websites sind über den Host mit den Techniken verknüpft (techniken.js, gesehen_bei).", "vokabular": { "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös", "filmisch", "verspielt", "laut", "warm", "experimentell" ], "technik_gruppen": { "css": "CSS", "js": "JavaScript", "gsap": "GSAP", "lenis": "Lenis", "webgl": "WebGL & Three.js", "canvas": "Canvas & SVG", "andere": "Andere" }, "leistungskosten": [ "niedrig", "mittel", "hoch" ], "prioritaet": [ "A", "B", "C", "D", "E", "F" ], "trendstatus": [ "aufsteigend", "etabliert", "abklingend" ], "belegstatus": [ "belegt", "teilbelegt", "quellenbelegt", "unbelegt" ], "bau_status": [ "offen", "in_arbeit", "fertig" ] }, "kategorien": [ { "nr": 1, "slug": "seitenuebergaenge", "name": "Seitenübergänge", "anzahl": 13, "demos": 13 }, { "nr": 2, "slug": "preloader-intro", "name": "Preloader & Intro", "anzahl": 9, "demos": 9 }, { "nr": 3, "slug": "navigation", "name": "Navigation", "anzahl": 23, "demos": 23 }, { "nr": 4, "slug": "hero-layouts", "name": "Hero & Section-Layouts", "anzahl": 30, "demos": 30 }, { "nr": 5, "slug": "scroll", "name": "Scroll & Section-Animationen", "anzahl": 19, "demos": 19 }, { "nr": 6, "slug": "schrift-animationen", "name": "Schrift-Animationen", "anzahl": 20, "demos": 20 }, { "nr": 7, "slug": "hover", "name": "Hover", "anzahl": 14, "demos": 14 }, { "nr": 8, "slug": "cursor", "name": "Cursor", "anzahl": 7, "demos": 7 }, { "nr": 9, "slug": "mikroanimationen", "name": "Mikroanimationen", "anzahl": 26, "demos": 26 }, { "nr": 10, "slug": "glas-material", "name": "Glas & Material", "anzahl": 14, "demos": 14 }, { "nr": 11, "slug": "3d-webgl", "name": "3D & WebGL", "anzahl": 20, "demos": 20 }, { "nr": 12, "slug": "galerien-slider", "name": "Galerien & Slider", "anzahl": 20, "demos": 20 }, { "nr": 13, "slug": "footer", "name": "Footer", "anzahl": 8, "demos": 8 }, { "nr": 14, "slug": "animationsstile", "name": "Animationsstile", "anzahl": 12, "demos": 12 }, { "nr": 15, "slug": "typo-techniken", "name": "Typo-Techniken", "anzahl": 13, "demos": 13 }, { "nr": 16, "slug": "sektionen", "name": "Sektionen & Funktionen", "anzahl": 42, "demos": 42 }, { "nr": 17, "slug": "zugang", "name": "Zugang & Robustheit", "anzahl": 12, "demos": 12 }, { "nr": 18, "slug": "buttons", "name": "Buttons", "anzahl": 6, "demos": 6 } ], "anzahl": 308, "demos": 308, "muster": [ { "id": "clip-path-reveal-seite", "name": "Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Die neue Seite schneidet sich mit harter Kante über die alte: als Polygon von unten, als Fenster aus der Mitte oder als Kreis vom Klickpunkt.", "kurve": "cubic-bezier(0.87, 0, 0.13, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "vt-cross-document-mpa", "parallel-crossfade-preload", "scroll-naechstes-projekt" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/demo" }, { "id": "seitenwechsel-kamerafahrt", "name": "Persistente 3D-Szene: Seitenwechsel als Kamerafahrt", "kategorie_slug": "seitenuebergaenge", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "filmisch", "verspielt", "warm" ], "technik_gruppen": [ "gsap", "webgl", "andere" ], "kurz": "Ein Canvas bleibt stehen, nur der Inhalt wechselt: Jeder Klick wird zur Kamerafahrt in den nächsten Raum.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "shader-uebergang-dissolve", "webgl-ladeszene-fortschritt", "parallel-crossfade-preload", "partikel-punktwolke", "glas-transmission-3d", "nachbearbeitung-filmlook", "webgpu-tsl-compute", "scroll-3d-kamerafahrt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/demo" }, { "id": "vorhang-farbpanel-wipe", "name": "Farbvorhang / Panel-Wipe in Markenfarbe", "kategorie_slug": "seitenuebergaenge", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein Panel in Markenfarbe fährt über die Seite, zeigt den Seitennamen und gibt nach oben die neue Seite frei: einfach, doppelt oder in der Farbe des geklickten Links.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 1100, "kombinierbar_mit": [ "seitenname-typo-uebergang", "gebogener-wipe-shape", "vt-cross-document-mpa", "split-mask-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vorhang-farbpanel-wipe/demo" }, { "id": "vt-cross-document-mpa", "name": "Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js" ], "kurz": "Echte Seitenaufrufe mit App-Gefühl: Der Kopf bleibt stehen, das Bild wächst aus der Karte zur Detailseite, und das Ganze steckt in einer einzigen CSS-Zeile.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "vt-shared-element-morph", "vorhang-farbpanel-wipe", "clip-path-reveal-seite", "richtungsbewusste-uebergaenge", "intro-ohne-wartezeit" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "benannt", "name": "Benannt: Kopf steht, Bild und Titel morphen", "url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo?v=benannt" }, { "id": "typen", "name": "Typgesteuert: vorwärts und zurück", "url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo?v=typen" }, { "id": "crossfade", "name": "Reiner Root-Crossfade", "url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo?v=crossfade" }, { "id": "quelle", "name": "Quelle: der angeklickte Link hebt sich ab (:navigation-source)", "url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo?v=quelle" } ], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo" }, { "id": "vt-shared-element-morph", "name": "Vorschaubild wird zur Hero (Shared-Element-Morph)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Das angeklickte Vorschaubild fliegt aus dem Raster genau an die Stelle des Hero-Bilds, erst danach steigt der Titel auf; nativ per View Transition oder mit GSAP Flip.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 1300, "kombinierbar_mit": [ "vt-cross-document-mpa", "split-mask-reveal", "richtungsbewusste-uebergaenge", "parallel-crossfade-preload" ], "in_rezepten": [ "architektur-ruhiges-raster", "immobilien-diskret-hochwertig", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo" }, { "id": "gebogener-wipe-shape", "name": "Wipe mit gebogener Kante (Curved Wipe)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "verspielt", "warm" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Ein dunkles Panel fährt mit gewölbter Vorderkante über die Seite und gibt die neue mit hängender Hinterkante frei.", "kurve": "cubic-bezier(0.64, 0, 0.78, 0)", "dauer_ms": 400, "kombinierbar_mit": [ "vorhang-farbpanel-wipe", "seitenname-typo-uebergang" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/gebogener-wipe-shape/demo" }, { "id": "parallel-crossfade-preload", "name": "Paralleler Übergang mit Vorladen (beide Seiten gleichzeitig im DOM)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Raus-Animation und Laden der neuen Seite starten beim Klick gleichzeitig, beide Container liegen kurz übereinander im DOM: Die Ladezeit verschwindet hinter dem Übergang.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "clip-path-reveal-seite", "vt-shared-element-morph", "seitenwechsel-kamerafahrt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/parallel-crossfade-preload/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/parallel-crossfade-preload/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/parallel-crossfade-preload/demo" }, { "id": "richtungsbewusste-uebergaenge", "name": "Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Die Bewegung zeigt, wohin es geht: hinein in ein Thema, zurück zur Übersicht oder seitlich zum nächsten.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 400, "kombinierbar_mit": [ "vt-cross-document-mpa", "spalten-shutter-wipe", "seite-schiebt-ueber-alte" ], "in_rezepten": [ "immobilien-diskret-hochwertig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/demo" }, { "id": "scroll-naechstes-projekt", "name": "Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "filmisch" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Weiterscrollen öffnet das Bild des nächsten Projekts bis zum Vollbild, dann wechselt die Seite unsichtbar.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "clip-path-reveal-seite", "vt-shared-element-morph" ], "in_rezepten": [ "mode-beauty-kollektion" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/demo" }, { "id": "seite-schiebt-ueber-alte", "name": "Neue Seite schiebt sich über die alte (Stack / Slide-over mit Parallax)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Die neue Seite gleitet wie ein Blatt über die alte, die alte weicht zurück und dunkelt ab: Tiefe statt Überblendung, gemessen bei COLLINS.", "kurve": "cubic-bezier(0.5, 0.3, 0, 1)", "dauer_ms": 450, "kombinierbar_mit": [ "richtungsbewusste-uebergaenge", "vt-cross-document-mpa" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/demo" }, { "id": "seitenname-typo-uebergang", "name": "Seitenname als Übergang (Typo-Overlay, kinetische Schrift)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Beim Klick fährt ein Vorhang in Markenfarbe hoch, der Name der Zielseite steigt groß aus der Maske und gibt die neue Seite wieder frei.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 1300, "kombinierbar_mit": [ "vorhang-farbpanel-wipe", "scramble-decode", "split-mask-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenname-typo-uebergang/demo" }, { "id": "spalten-shutter-wipe", "name": "Spalten-, Streifen- und Jalousie-Wipe", "kategorie_slug": "seitenuebergaenge", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "laut" ], "technik_gruppen": [ "css", "gsap", "andere" ], "kurz": "Fünf oder sechs Bahnen in Signalfarbe schließen gestaffelt über der Seite, setzen den Seitennamen zusammen und geben die neue Seite frei: als Spalten, Streifen oder Jalousie.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "vorhang-farbpanel-wipe", "richtungsbewusste-uebergaenge", "seitenname-typo-uebergang" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/demo" }, { "id": "3d-raum-uebergaenge", "name": "3D-Kipp-Übergänge (Würfel, Ecke, Riss)", "kategorie_slug": "seitenuebergaenge", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "gsap", "webgl" ], "kurz": "Die alte Seite kippt als Würfelfläche weg, schält sich von der Ecke ab oder reißt mittig auf, darunter liegt die neue.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "richtungsbewusste-uebergaenge" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/meta.json", "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/", "demo_url": "https://cecodesign.de/lab/fundus/seitenuebergaenge/3d-raum-uebergaenge/demo" }, { "id": "intro-ohne-wartezeit", "name": "Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)", "kategorie_slug": "preloader-intro", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css", "js" ], "kurz": "Der Hero steht ab dem ersten Frame, Zeilen steigen aus Masken und die Navigation taucht nach: ein inszenierter Auftritt in 1,2 Sekunden, ganz ohne Ladebildschirm.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "split-mask-reveal", "einmal-intro-session", "vt-cross-document-mpa" ], "in_rezepten": [ "kreativstudio-buehne", "fotograf-film-bild-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/demo" }, { "id": "loader-wird-layout", "name": "Nahtlose Übergabe: Loader-Element wird Teil des Layouts", "kategorie_slug": "preloader-intro", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Logo, Zähler, Ladebalken und Bild verschwinden nicht mit dem Loader, sondern reisen per Flip an ihren Platz im Layout: Die Seite baut sich um sie herum auf.", "kurve": "cubic-bezier(0.87, 0, 0.13, 1)", "dauer_ms": 1000, "kombinierbar_mit": [ "bildstapel-intro", "prozent-zaehler", "logo-aufbau-intro", "webgl-ladeszene-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/demo" }, { "id": "bildstapel-intro", "name": "Bildstapel-Intro (Stapel flippt durch und verteilt sich ins Layout)", "kategorie_slug": "preloader-intro", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "laut" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Sechs Studien-Deckel einer Würzburger Kanzlei flackern als Stapel durch und verteilen sich per Flip ins Insights-Raster, zur Hero oder an den runden Tisch.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 2000, "kombinierbar_mit": [ "loader-wird-layout", "split-mask-reveal", "einmal-intro-session" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/bildstapel-intro/demo" }, { "id": "einmal-intro-session", "name": "Intro nur beim ersten Besuch (Session-Gedächtnis)", "kategorie_slug": "preloader-intro", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "luxuriös" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Das volle Intro läuft nur beim ersten Besuch im Tab. Neuladen und Navigation zeigen bloß einen kurzen Reveal mit 25 ms Versatz.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "intro-ohne-wartezeit", "bildstapel-intro", "logo-aufbau-intro", "vt-cross-document-mpa" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/demo" }, { "id": "prozent-zaehler", "name": "Prozent-Zähler-Preloader (0 bis 100)", "kategorie_slug": "preloader-intro", "prioritaet": "B", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap", "webgl" ], "kurz": "Riesige Prozentziffern zählen bis 100, rollen, wandern oder messen echt, und gleiten dann aus der Maske, bevor der Loader wegwischt.", "kurve": "cubic-bezier(0.87, 0, 0.13, 1)", "dauer_ms": 3000, "kombinierbar_mit": [ "loader-wird-layout", "bildstapel-intro", "webgl-ladeszene-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/prozent-zaehler/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/prozent-zaehler/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/prozent-zaehler/demo" }, { "id": "webgl-ladeszene-fortschritt", "name": "WebGL-Ladeszene mit echtem Fortschritt", "kategorie_slug": "preloader-intro", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "filmisch" ], "technik_gruppen": [ "gsap", "webgl", "canvas" ], "kurz": "Ein Konfigurator, der ehrlich lädt: Prozent nach Bytes, Dateiliste mit Häkchen, dann taucht die Leuchte aus dem Dunkel auf.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 3000, "kombinierbar_mit": [ "loader-wird-layout", "seitenwechsel-kamerafahrt", "prozent-zaehler" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/webgl-ladeszene-fortschritt/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/webgl-ladeszene-fortschritt/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/webgl-ladeszene-fortschritt/demo" }, { "id": "logo-aufbau-intro", "name": "Logo-Aufbau-Intro (Linien zeichnen, Teile fügen sich, Logo fliegt in die Navigation)", "kategorie_slug": "preloader-intro", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "filmisch", "laut" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Ein Brillant zeichnet sich Facette für Facette, die Wortmarke steigt aus der Maske, dann fliegt die Marke per Flip in die Navigation und die dunkle Fläche rollt nach oben ab.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 2600, "kombinierbar_mit": [ "loader-wird-layout", "einmal-intro-session", "split-mask-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/logo-aufbau-intro/demo" }, { "id": "boot-sequenz-intro", "name": "Boot-Sequenz / System-Start-Intro (Retro-Interface)", "kategorie_slug": "preloader-intro", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "filmisch", "verspielt", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap", "webgl" ], "kurz": "Die Seite startet wie ein Rechner: Röhre an, Startprotokoll läuft durch, dann schaltet sich die echte Oberfläche ein.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1500, "kombinierbar_mit": [ "scramble-decode", "shader-uebergang-dissolve", "einmal-intro-session" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/boot-sequenz-intro/demo" }, { "id": "kinetische-typo-intro", "name": "Kinetisches Typo-Intro (Wortwiederholung, Kreistext)", "kategorie_slug": "preloader-intro", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Der Festivalname wechselt, stapelt oder dreht sich bildfüllend, bis er als einzelnes Wort zur Headline der Seite wird.", "kurve": "cubic-bezier(0.83, 0, 0.17, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "split-mask-reveal", "seitenname-typo-uebergang" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/meta.json", "detail": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/", "demo_url": "https://cecodesign.de/lab/fundus/preloader-intro/kinetische-typo-intro/demo" }, { "id": "gleitender-indikator", "name": "Gleitender Indikator / Segment-Schalter mit Pille", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Pille, Unterstrich und Segment-Schalter gleiten per CSS Anchor Positioning zum Ziel, 250 ms mit der bei COLLINS gemessenen Kurve.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "schwebende-pill-navigation", "mega-menue-morphing-viewport", "theme-umschalter-view-transition", "scrollspy-kapitelnavigation", "zahlen-odometer", "token-federnd-verspielt", "toggle-switch" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo" }, { "id": "hide-on-scroll-header", "name": "Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Beim Lesen gleitet der Header aus dem Bild, bei der ersten Bewegung nach oben ist er wieder da.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "sticky-shrink-header", "schwebende-pill-navigation", "mega-menue-morphing-viewport", "theme-farbwechsel-scroll", "scroll-fortschritt" ], "in_rezepten": [ "architektur-ruhiges-raster", "immobilien-diskret-hochwertig", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "luxus-manufaktur-stille" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo" }, { "id": "kompakte-expandierende-navigation", "name": "Kompakte, expandierende Insel-Navigation", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Die Pille mit Logo und „Menü“ wächst selbst zur Karte: erst die Form, dann der Inhalt, der Hintergrund verschwimmt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "schwebende-pill-navigation", "menue-choreografie-wipe-clip", "native-popover-dropdowns" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/kompakte-expandierende-navigation/demo" }, { "id": "mega-menue-morphing-viewport", "name": "Mega-Menü mit morphendem gemeinsamem Viewport", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Vier Menüs teilen sich eine Box: Sie morpht in 250 ms auf Breite und Höhe des neuen Inhalts, der Inhalt gleitet in Bewegungsrichtung.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "gleitender-indikator", "native-popover-dropdowns", "sticky-shrink-header", "command-palette-und-ki-suche" ], "in_rezepten": [ "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo" }, { "id": "menue-choreografie-wipe-clip", "name": "Menü-Choreografie: Panel-Wipe bzw. Clip-Reveal mit asymmetrischem Schließen", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "verspielt", "laut" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Drei Farbpanels wischen gestaffelt herein, dann steigen die Links gedreht aus ihren Masken; geschlossen wird rückwärts, 1,5-mal schneller und mit eigener Kurve.", "kurve": "cubic-bezier(0.65, 0.05, 0, 1)", "dauer_ms": 575, "kombinierbar_mit": [ "vollbild-overlay-menue-bildvorschau", "menue-icon-und-label-morph", "kompakte-expandierende-navigation" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/menue-choreografie-wipe-clip/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/menue-choreografie-wipe-clip/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/menue-choreografie-wipe-clip/demo" }, { "id": "schwebende-pill-navigation", "name": "Schwebende Pill-Navigation mit Glas bzw. Progressive Blur", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Die Navigation schwebt als Glaskapsel über dem Inhalt, wird beim Scrollen schmaler und nimmt die Farbe des Abschnitts darunter an.", "kurve": "cubic-bezier(0.2, 0.8, 0.2, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "gleitender-indikator", "hide-on-scroll-header", "kompakte-expandierende-navigation", "mobile-bottom-navigation" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/schwebende-pill-navigation/demo" }, { "id": "theme-umschalter-view-transition", "name": "Theme- und Sprachumschalter mit View-Transition-Kreis-Reveal", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Hell, Dunkel oder Sprache wechseln, und der neue Zustand breitet sich als Kreis vom Klickpunkt über die Seite aus.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 420, "kombinierbar_mit": [ "toggle-switch", "token-federnd-verspielt", "gleitender-indikator", "live-uhr-und-standort", "mega-footer-sitemap" ], "in_rezepten": [ "freelancer-stille-visitenkarte", "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "tokens", "name": "Zwei Token-Sätze (Hotel, Tag und Nacht)", "url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=tokens" }, { "id": "light-dark", "name": "light-dark() auch für Bilder", "url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=light-dark" } ], "meta": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo" }, { "id": "vollbild-overlay-menue-bildvorschau", "name": "Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "luxuriös", "filmisch", "laut" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein Wort öffnet eine dunkle Bühne: Riesige Links steigen aus ihren Masken, und jeder Hover zeigt sein Bild, als kippendes Cursor-Thumbnail, als vollflächiger Wipe oder als Daumen in der Zeile.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "menue-choreografie-wipe-clip", "menue-icon-und-label-morph", "live-uhr-und-standort", "listen-hover-bildvorschau" ], "in_rezepten": [ "boutique-hotel-gastgeber", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/demo" }, { "id": "consent-banner-gestaltet", "name": "Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)", "kategorie_slug": "navigation", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Das Consent-Banner spricht die Sprache der Marke: Ablehnen und Akzeptieren stehen gleichwertig nebeneinander, Dienste laden erst nach der Zustimmung.", "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "dauer_ms": 300, "kombinierbar_mit": [ "mega-footer-sitemap", "einblenden-starting-style", "mobile-bottom-navigation", "toggle-switch", "studio-visitenkarte-footer" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo" }, { "id": "command-palette-und-ki-suche", "name": "Command-Palette (⌘K) und KI-Suche im Header", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Strg/⌘ K öffnet über dem Hotel-Header einen Dialog: Fuzzy-Suche über Zimmer, Seiten und Aktionen, Freitext-Fragen beantwortet das Haus mit Quellen.", "kurve": "cubic-bezier(0.2, 0.8, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "mega-menue-morphing-viewport", "mensch-maschine-umschalter", "schwebende-pill-navigation" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/demo" }, { "id": "live-uhr-und-standort", "name": "Live-Uhr und Standort in Navigation oder Footer", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Live-Ortszeit mit Stadt und Zeitzone in Navigation oder Footer, getaktet auf die volle Sekunde, wahlweise mit mehreren Standorten und Dienststatus.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "vollbild-overlay-menue-bildvorschau", "studio-visitenkarte-footer", "theme-umschalter-view-transition" ], "in_rezepten": [ "gastro-warm-appetitlich" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/demo" }, { "id": "menue-icon-und-label-morph", "name": "Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "verspielt" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Der Menü-Button zeigt seinen Zustand selbst: Linien drehen zum X, das Label rollt von „Menü“ zu „Schließen“.", "kurve": "cubic-bezier(0.65, 0.05, 0, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "vollbild-overlay-menue-bildvorschau", "menue-choreografie-wipe-clip", "kompakte-expandierende-navigation" ], "in_rezepten": [ "architektur-ruhiges-raster", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/demo" }, { "id": "mobile-bottom-navigation", "name": "Mobile Bottom-Navigation und Bottom-Sheet-Menü", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Die Leiste in der Daumenzone wächst selbst zum Sheet, per Wisch am Griff geht sie wieder zu.", "kurve": "cubic-bezier(0.32, 0.72, 0, 1)", "dauer_ms": 450, "kombinierbar_mit": [ "schwebende-pill-navigation", "kompakte-expandierende-navigation", "gestapelte-drawer-navigation" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "praxis-gesundheit-ruhig", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Menü-Leiste wird Sheet (Fotografin)", "url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis" }, { "id": "fab", "name": "Daumen-Knopf mit Aktionsmenü (Salon)", "url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab" }, { "id": "kontakt", "name": "Kontaktleiste (Elektrobetrieb)", "url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt" } ], "meta": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo" }, { "id": "native-popover-dropdowns", "name": "Native Dropdowns mit Popover-API, Anchor Positioning und Invokern", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Kursmenü, Coaching-Menü und Sprachwahl als native Popover: Der Invoker öffnet, Anchor Positioning platziert und klappt am Rand um, @starting-style blendet ein.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "mega-menue-morphing-viewport", "kompakte-expandierende-navigation", "theme-umschalter-view-transition" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo" }, { "id": "richtungsabhaengiger-marquee-hover", "name": "Richtungsabhängiger Marquee-Hover im Menü", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Der Menüpunkt deckt beim Hover ein Laufband mit Gerichten auf, und zwar von genau der Kante, über die die Maus hereinkam.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "vollbild-overlay-menue-bildvorschau", "listen-hover-bildvorschau", "text-roll-hover", "marquee-laufband" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/demo" }, { "id": "scrollspy-kapitelnavigation", "name": "Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein Kapitelindex klebt neben dem Text, markiert das Kapitel in der Bildmitte und füllt je Kapitel eine Haarlinie, scrollgekoppelt und ohne JavaScript.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "gleitender-indikator", "seitenrand-und-ecken-navigation", "mobile-bottom-navigation", "case-study-geruest", "editorial-magazin-layout", "split-screen-sticky-seiten", "scroll-fortschritt" ], "in_rezepten": [ "kultur-programm-haltung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/demo" }, { "id": "seitenrand-und-ecken-navigation", "name": "Seitenrand- und Vier-Ecken-Navigation", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Logo, Menü, Legende und Zähler stehen in den vier Ecken eines Architekturbüros, invertieren sich per difference über hellen und dunklen Tafeln und wechseln per View Transition zu drei Ecken oder zur Seitenleiste.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "live-uhr-und-standort", "sound-umschalter", "scrollspy-kapitelnavigation" ], "in_rezepten": [ "fotograf-film-bild-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/seitenrand-und-ecken-navigation/demo" }, { "id": "sticky-shrink-header", "name": "Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Der Header schrumpft scrollgekoppelt von 168 auf 64 px, die Marke von 4.5625 auf 3.125 rem, und bekommt beim Andocken eine Glasfläche mit Haarlinie.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "hide-on-scroll-header", "schwebende-pill-navigation", "footer-cta-riesen-wortmarke" ], "in_rezepten": [ "kultur-programm-haltung", "kanzlei-beratung-souveraen", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo" }, { "id": "lokale-produktnavigation", "name": "Klebende Produkt-Unternavigation mit Handlung", "kategorie_slug": "navigation", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Produktleiste eines Spannsystems: Der globale Kopf scrollt weg, die Leiste mit Name, fünf Abschnitten und „Angebot anfordern“ klebt, der aktive Abschnitt trägt aria-current und eine gleitende Linie.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 350, "kombinierbar_mit": [ "gleitender-indikator", "hide-on-scroll-header", "button-zustaende", "technische-daten-produktseite", "leistungsseite-antwort-zuerst", "native-popover-dropdowns" ], "in_rezepten": [ "saas-produkt-praezise", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "abschnitte", "name": "Abschnitte mit Scroll-Kopplung", "url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=abschnitte" }, { "id": "unterseiten", "name": "Unterseiten", "url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=unterseiten" }, { "id": "kompakt-mobil", "name": "Kompakt mit Abschnitte-Popover", "url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=kompakt-mobil" } ], "meta": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo" }, { "id": "dock-vergroesserung", "name": "Dock-Navigation mit Vergrößerung", "kategorie_slug": "navigation", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Das Modul-Dock einer Planungs-App wächst unter dem Zeiger mit Kosinus-Falloff, die Nachbarn weichen aus, ein Tooltip mit Tastenkürzel sitzt über dem größten Icon.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "schwebende-pill-navigation", "scrollspy-kapitelnavigation" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/dock-vergroesserung/demo" }, { "id": "gestapelte-drawer-navigation", "name": "Gestapelte bzw. mehrstufige Drawer-Navigation", "kategorie_slug": "navigation", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Jede Menüebene eines Leinen-Shops schiebt sich als eigene Karte über die vorige; die zurückgetretenen Karten bleiben als 16-px-Kanten sichtbar und zeigen, wie tief man ist.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "mobile-bottom-navigation", "mega-menue-morphing-viewport" ], "in_rezepten": [ "mode-beauty-kollektion", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/demo" }, { "id": "mensch-maschine-umschalter", "name": "Mensch/Maschine-Umschalter (Agentenansicht)", "kategorie_slug": "navigation", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt", "experimentell" ], "technik_gruppen": [ "css", "js" ], "kurz": "Segment-Schalter Mensch/Maschine im Kopf einer SaaS-Seite: Die Maschinenansicht zeigt dieselben Inhalte als Markdown mit Kopier-Knopf, wahlweise unter gleicher URL, als Pfad /ai/ oder als llms.txt.", "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "dauer_ms": 200, "kombinierbar_mit": [ "gleitender-indikator", "command-palette-und-ki-suche" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/mensch-maschine-umschalter/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/mensch-maschine-umschalter/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/mensch-maschine-umschalter/demo" }, { "id": "sound-umschalter", "name": "Sound-Umschalter und Einstiegsgate in der Navigation", "kategorie_slug": "navigation", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "filmisch", "verspielt" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Reel einer Hamburger Filmproduktion mit Einstiegsgate „Mit Ton / Ohne Ton“, Equalizer-Schalter in der Ecken-Navigation und selbst erzeugtem Hafenklang per Web Audio.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "seitenrand-und-ecken-navigation", "vollbild-overlay-menue-bildvorschau" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/meta.json", "detail": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/", "demo_url": "https://cecodesign.de/lab/fundus/navigation/sound-umschalter/demo" }, { "id": "bento-grid-interaktiv", "name": "Bento-Grid mit lebenden Zellen", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Vier-Spalten-Raster mit sieben Kacheln für ein Kölner Studio: Bildwechsel, Live-Uhr, Zähler, Stimmen, Mini-Website und sich konstruierendes Logo, gestaffelt aufgebaut.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "layout-formation-scroll", "zahlen-fakten-section", "team-ueber-mich-layout" ], "in_rezepten": [ "saas-produkt-praezise", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo" }, { "id": "blueprint-raster-sichtbar", "name": "Sichtbares Raster (Swiss/Blueprint-Linien)", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Hero eines Leipziger Markenbüros auf einem sichtbaren 12-Spalten-Achsraster: Linien zeichnen sich, ein Fadenkreuz meldet Achse und Zeile, drei Varianten von Blueprint bis Punktmatrix.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": null, "kombinierbar_mit": [ "meta-labels-hud-typografie", "schrift-hero-viewportbreit", "projektindex-hover-vorschau", "broken-grid-asymmetrisch" ], "in_rezepten": [ "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/demo" }, { "id": "broken-grid-asymmetrisch", "name": "Gebrochenes / asymmetrisches Raster", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "luxuriös", "filmisch", "laut" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Ein Studio-Hero auf 24 Spalten, das zwischen versetzten Bildpaaren, Titel-über-Foto und Kreis als Drehpunkt umbaut, mit Parallaxe in drei Tempi und einem Bild, das in die nächste Sektion bricht.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "editorial-magazin-layout", "collage-scrapbook", "elastisches-raster-lag" ], "in_rezepten": [ "luxus-manufaktur-stille" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/demo" }, { "id": "case-study-geruest", "name": "Case-Study-Gerüst auf Award-Niveau", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "präzise", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Eine Projektseite als feste Folge aus Hero mit sechs Metadaten, Lead, Medien-Modulen, Ergebnis, Credits und „Nächstes Projekt“, dessen Bild und Titel per View Transition zum Hero der nächsten Case Study werden.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "projektindex-hover-vorschau", "editorial-magazin-layout", "split-screen-sticky-seiten", "zahlen-fakten-section", "scrollspy-kapitelnavigation" ], "in_rezepten": [ "architektur-ruhiges-raster", "kreativstudio-buehne", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/demo" }, { "id": "cinematic-video-hero", "name": "Kinoreifer Vollbild-Video-Hero", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Ein Showreel füllt den ersten Viewport, harte Schnitte geben den Takt, darüber stehen nur ein Filmtitel und ein Play-Reel-Kreis.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 3000, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "medien-expansion-scroll", "marquee-laufband" ], "in_rezepten": [ "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "luxus-manufaktur-stille", "fitness-studio-rhythmus", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo" }, { "id": "editorial-magazin-layout", "name": "Editorial-/Magazin-Layout", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Ein Journalbeitrag in drei Satzspiegeln (Magazin, Zeitung, Kunstbuch) auf einem 12er-Raster, mit Initiale, Pull-Quote, Marginalie, Zeilen-Reveal und leichter Bildparallaxe.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "case-study-geruest", "scrollspy-kapitelnavigation", "broken-grid-asymmetrisch", "collage-scrapbook" ], "in_rezepten": [ "architektur-ruhiges-raster", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "freelancer-stille-visitenkarte", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "magazin", "name": "Magazin", "url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin" }, { "id": "zeitung", "name": "Zeitung mit Spalten", "url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung" }, { "id": "kunstbuch", "name": "Kunstbuch", "url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch" }, { "id": "cover", "name": "Magazin-Cover als Hero", "url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo" }, { "id": "projektindex-hover-vorschau", "name": "Projektindex als Liste mit Hover-Bildvorschau", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein Werkverzeichnis als typografische Liste: das Bild erscheint erst beim Zeigen, folgt dem Zeiger oder wechselt in einer festen Fläche und wächst beim Klick zum Hero der Fallstudie.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "flip-zustandswechsel", "case-study-geruest", "meta-labels-hud-typografie", "listen-hover-bildvorschau" ], "in_rezepten": [ "architektur-ruhiges-raster", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/demo" }, { "id": "schrift-hero-viewportbreit", "name": "Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Eine Wortmarke füllt die Viewportbreite bis auf die Kante, Buchstaben steigen aus Masken, beim Scrollen wird sie überdeckt, schrumpft ins Header-Logo oder zerfällt in gestaffelte Tempi.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "cinematic-video-hero", "footer-cta-riesen-wortmarke", "blueprint-raster-sichtbar", "meta-labels-hud-typografie", "typo-maske-medien", "marquee-laufband", "variable-font-axes" ], "in_rezepten": [ "kreativstudio-buehne", "kultur-programm-haltung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Wortmarke", "url": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=basis" }, { "id": "textfit", "name": "text-fit, mehrzeilig", "url": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=textfit" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo" }, { "id": "split-screen-sticky-seiten", "name": "Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "filmisch" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Eine Spalte bleibt stehen, die andere scrollt vorbei; der Inhalt der stehenden Spalte wechselt synchron mit dem Block in der Bildschirmmitte.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": null, "kombinierbar_mit": [ "case-study-geruest", "scrollspy-kapitelnavigation", "projektindex-hover-vorschau" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "luxus-manufaktur-stille", "saas-produkt-praezise", "kurs-coaching-lernweg", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bild", "name": "Sticky-Medium mit Clip-Reveal", "url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild" }, { "id": "titel", "name": "Sticky-Titel und Karten", "url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel" }, { "id": "archiv", "name": "Archiv mit fester Vorschau (Crossfade)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=archiv" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo" }, { "id": "prompt-hero-eingabefeld", "name": "Prompt-Hero mit rotierenden Beispiel-Prompts", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein großes Eingabefeld als Haupt-CTA, in dem sich Beispiel-Prompts selbst tippen und löschen; Absenden macht aus dem Hero sofort die Anwendung.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": null, "kombinierbar_mit": [ "rotating-words", "logo-wand-social-proof", "produkt-ui-hero-perspektiv-tilt", "bento-grid-interaktiv" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "saas-produkt-praezise", "kurs-coaching-lernweg" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/demo" }, { "id": "logo-wand-social-proof", "name": "Logo-Wand / Social-Proof-Band", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Kundenlogos eines Hamburger Studios unter dem Hero: als ziehbares Laufband, als Raster mit gestaffelt umklappenden Kacheln oder als Haarlinien-Raster mit Kennzahl beim Hover.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "marquee-laufband", "graustufen-zu-farbe", "testimonials-neu-gedacht", "zahlen-fakten-section", "prompt-hero-eingabefeld" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "gastro-warm-appetitlich", "kreativstudio-buehne", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "verein-nonprofit-wirkung", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "laufband", "name": "Kundenlogos als Laufband", "url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=laufband" }, { "id": "raster", "name": "Ruhiges Raster", "url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster" }, { "id": "auszeichnungen", "name": "Auszeichnungen mit Jahr", "url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=auszeichnungen" }, { "id": "siegel-nachweis", "name": "Siegel mit Nachweis", "url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo" }, { "id": "foto-hero", "name": "Foto-Hero: echtes Foto, ein Satz, ein Weg", "kategorie_slug": "hero-layouts", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "warm" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Fünf Bildregien für den Foto-Hero der KMU-Seiten: Vollbild mit Satz unten links, Split mit Foto bis an den Rand, Foto im Rahmen auf der Markenfarbe, kleiner Abzug mit Chip und Bildunterschrift als Gestaltung, je mit kurzem Auftritt beim ersten Laden.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "intro-ohne-wartezeit", "einmal-intro-session", "buchungsleiste-datumsbereich", "oeffnungszeiten-status", "termin-verfuegbarkeit-anfrage", "schrift-hero-viewportbreit", "split-mask-reveal", "clip-path-bild-reveal", "sektionskante-shape" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "immobilien-diskret-hochwertig", "mode-beauty-kollektion", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "randlos-unten-links", "name": "Vollbild, Satz unten links", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links" }, { "id": "split-randabfallend", "name": "Split, Foto bis an den Rand", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend" }, { "id": "inset-rahmen", "name": "Foto im Rahmen auf der Markenfarbe", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=inset-rahmen" }, { "id": "passepartout", "name": "Kleiner Abzug auf Fläche", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=passepartout" }, { "id": "bildunterschrift", "name": "Bildunterschrift als Gestaltung", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=bildunterschrift" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo" }, { "id": "meta-labels-hud-typografie", "name": "Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Festivalseite eines Linzer Kulturhauses mit zweiter Textebene: fixierte Mono-Labels in den Ecken mit Live-Uhr, Scroll-Prozent und rollendem Abschnittszähler.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": null, "kombinierbar_mit": [ "blueprint-raster-sichtbar", "schrift-hero-viewportbreit", "projektindex-hover-vorschau", "horizontal-scroll-section" ], "in_rezepten": [ "architektur-ruhiges-raster" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/demo" }, { "id": "team-ueber-mich-layout", "name": "Team-/Über-mich-Layout mit Porträt-Interaktion", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Köpfe einer Salzburger Kanzlei als einheitliche Rasterporträts mit Filter nach Rechtsgebiet: Beim Hover deckt ein clip-path von unten das private Bild samt Satz auf, dazu Namensliste und Statement mit Inline-Porträts.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "projektindex-hover-vorschau", "split-screen-sticky-seiten", "bento-grid-interaktiv" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "freelancer-stille-visitenkarte", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "raster", "name": "Raster mit Filter", "url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster" }, { "id": "liste", "name": "Namensliste mit Hover-Porträt", "url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=liste" }, { "id": "statement", "name": "Statement-Satz mit Inline-Bildern", "url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo" }, { "id": "testimonials-neu-gedacht", "name": "Testimonials neu gedacht", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein Kundenzitat als große Schlagzeile, zeilenweise aus der Maske enthüllt, dazu Kundenliste mit Hover-Zitat und eine Masonry-Wand.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "editorial-magazin-layout", "case-study-geruest", "marquee-laufband" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "boutique-hotel-gastgeber", "freelancer-stille-visitenkarte", "saas-produkt-praezise", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "verein-nonprofit-wirkung", "musik-kuenstler-buehne", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zitat", "name": "Ein großes Zitat", "url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat" }, { "id": "liste", "name": "Kundenliste mit Hover-Zitat", "url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste" }, { "id": "wand", "name": "Masonry-Wand", "url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand" }, { "id": "stimmen-reihe", "name": "Stimmen-Reihe mit Höhe der aktiven Stimme", "url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo" }, { "id": "zahlen-fakten-section", "name": "Zahlen-/Fakten-Sektion als Typo-Ereignis", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Wenige echte Kennzahlen als Riesenziffern: Beim Scrollen rollen sie wie ein Zählwerk auf ihren Wert, zählen hoch oder kippen auf.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "bento-grid-interaktiv", "split-screen-sticky-seiten", "case-study-geruest", "blueprint-raster-sichtbar", "zahlen-odometer" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "immobilien-diskret-hochwertig", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "industrie-b2b-mittelstand", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "typo", "name": "Typo-Ereignis", "url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=typo" }, { "id": "tabelle", "name": "Ruhige Tabelle", "url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle" }, { "id": "diagramm", "name": "Mit Mini-Diagramm", "url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo" }, { "id": "produkt-ui-hero-perspektiv-tilt", "name": "Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "gsap", "andere" ], "kurz": "Das Dashboard eines Flussvereins liegt gekippt unter der Mission und richtet sich beim Scrollen auf, bis es frontal und lesbar steht.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "css-3d-transforms", "pinned-scrub-scrollytelling", "medien-expansion-scroll", "bento-grid-interaktiv", "logo-wand-social-proof" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/demo" }, { "id": "prozess-timeline-wachsende-linie", "name": "Prozess-/Timeline-Sektion mit wachsender Linie", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "gsap", "andere" ], "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.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "svg-pfad-zeichnen-scroll", "scroll-fortschritt", "split-screen-sticky-seiten", "scrollspy-kapitelnavigation", "pinned-scrub-scrollytelling" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo" }, { "id": "kontakt-anfrage-formular", "name": "Kontakt- und Anfrageformular als eigene Sektion", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "unbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Die Anfrage bekommt eine eigene Sektion: direkte Wege links, ein kurzes Formular rechts, Fehler erst nach dem Verlassen eines Feldes und eine Bestätigung mit nächsten Schritten.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "validierung-nach-interaktion", "button-zustaende", "checkbox-radio-animiert", "animiertes-select", "kopieren-feedback", "termin-buchung-zwei-klick" ], "in_rezepten": [ "architektur-ruhiges-raster", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Anfrage-Sektion mit drei Formularen", "url": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=basis" }, { "id": "satz", "name": "Satz-Formular (Lückentext)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=satz" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo" }, { "id": "termin-buchung-zwei-klick", "name": "Termin-Buchung per 2-Klick-Einbettung", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "unbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Buchungs-Platzhalter in Widget-Höhe: Leistungen, Anbieter und Datenfluss stehen sofort da, der Kalender des Drittanbieters lädt erst nach Klick.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "consent-banner-gestaltet", "button-zustaende", "mobile-bottom-navigation", "karte-zwei-klick", "kontakt-anfrage-formular" ], "in_rezepten": [ "gastro-warm-appetitlich", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "friseur-salon-handschrift", "fitness-studio-rhythmus", "kfz-werkstatt-autohaus", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "platzhalter", "name": "Platzhalter mit 2-Klick", "url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter" }, { "id": "vorauswahl", "name": "Vorauswahl vor dem Laden", "url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl" }, { "id": "linkout", "name": "Link-out in neuem Tab", "url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=linkout" }, { "id": "hoehe", "name": "Höhe passt sich an", "url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=hoehe" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo" }, { "id": "karte-zwei-klick", "name": "Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "unbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Kartenbild mit Einwilligungsleiste: Die Anfahrt steht sofort da, die interaktive Karte lädt erst nach Klick und nennt vorher den Anbieter.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "consent-banner-gestaltet", "studio-visitenkarte-footer", "live-uhr-und-standort", "termin-buchung-zwei-klick" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bild", "name": "Kartenbild mit 2-Klick", "url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild" }, { "id": "skizze", "name": "Lageskizze", "url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze" }, { "id": "standorte", "name": "Mehrere Standorte", "url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=standorte" }, { "id": "social", "name": "Social Feed", "url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=social" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo" }, { "id": "foto-hero-mit-leiste", "name": "Foto-Hero mit Leiste, Karte oder Weiche", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Am Foto hängt schon die erste Handlung: eine Buchungsleiste im Bild, eine Karte mit dem echten Öffnungsstatus oder zwei bis drei gleichwertige Wege zu den Filialen.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "foto-hero", "buchungsleiste-datumsbereich", "oeffnungszeiten-status", "termin-verfuegbarkeit-anfrage", "standortfinder-liste", "live-uhr-und-standort", "dialog-modal-nativ", "termin-buchung-zwei-klick", "intro-ohne-wartezeit", "clip-path-bild-reveal" ], "in_rezepten": [ "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "leiste", "name": "Buchungsleiste im Bild", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste" }, { "id": "karte", "name": "Karte mit Öffnungsstatus", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=karte" }, { "id": "weiche", "name": "Weiche zu den Filialen", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=weiche" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo" }, { "id": "foto-hero-wortmarke", "name": "Foto-Hero mit Wortmarke", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Der Name des Hauses läuft randlos über die volle Breite und bildet mit dem Foto einen Block: als Band darüber, riesig an der Bildkante angeschnitten oder über einem Daumenkino, das die Maus blättert.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "foto-hero", "schrift-hero-viewportbreit", "intro-ohne-wartezeit", "einmal-intro-session", "split-mask-reveal", "termin-buchung-zwei-klick", "buchungsleiste-datumsbereich", "live-uhr-und-standort", "mobile-bottom-navigation" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "gestapelt", "name": "Wortmarke über dem Foto", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=gestapelt" }, { "id": "im-bild", "name": "Wortmarke im Bild", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=im-bild" }, { "id": "daumenkino", "name": "Daumenkino", "url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo?v=daumenkino" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-wortmarke/demo" }, { "id": "sektionskante-shape", "name": "Responsive Sektionskanten mit shape()", "kategorie_slug": "hero-layouts", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "verspielt", "warm" ], "technik_gruppen": [ "css" ], "kurz": "Vier Sektionskanten mit fester Höhe in rem: Bogen, Welle, Schräge und Riss wachsen mit dem ziehbaren Container in die Breite, nie in die Höhe.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "section-overlap-uebergang", "theme-farbwechsel-scroll", "gebogener-wipe-shape", "papier-druck-textur", "fluide-typo-clamp-cqi" ], "in_rezepten": [ "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bogen", "name": "Bogen (Weingut)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo?v=bogen" }, { "id": "welle", "name": "Welle (Gastro am Wasser)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo?v=welle" }, { "id": "schraege", "name": "Schräge (Handwerk)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo?v=schraege" }, { "id": "riss", "name": "Riss (Kultur, Papier)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo?v=riss" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo" }, { "id": "collage-scrapbook", "name": "Collage-/Scrapbook-Layout", "kategorie_slug": "hero-layouts", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Hero eines Hallenser Flussvereins: Fotos, Polaroid, Sammelprotokoll, Notiz und Freisteller liegen gedreht auf einem verdeckten 12×12-Raster, lassen sich ziehen und wechseln per Flip zwischen Klebebuch, Ausschnitten und Pinnwand.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": null, "kombinierbar_mit": [ "broken-grid-asymmetrisch", "unendliche-leinwand-galerie", "team-ueber-mich-layout" ], "in_rezepten": [ "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/demo" }, { "id": "elastisches-raster-lag", "name": "Elastisches Raster (Spalten mit Scroll-Verzögerung)", "kategorie_slug": "hero-layouts", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "luxuriös" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Ein Bildarchiv in Spalten, die beim Scrollen verschieden lange nachziehen: außen träger, innen schneller. Beim Stoppen holen sie weich auf.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "broken-grid-asymmetrisch", "horizontal-scroll-section", "layout-formation-scroll" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/elastisches-raster-lag/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/elastisches-raster-lag/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/elastisches-raster-lag/demo" }, { "id": "preis-section-editorial", "name": "Preis-Sektion mit Haltung", "kategorie_slug": "hero-layouts", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Preise als typografische Tabelle auf Haarlinien statt drei Karten mit Badge: große Ziffern, die beim Wechsel der Zahlweise wie eine Walze rollen, Umfang zum Aufklappen.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "blueprint-raster-sichtbar", "footer-cta-riesen-wortmarke" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "saas-produkt-praezise", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/demo" }, { "id": "bild-scheiben-tiefe", "name": "Bild-Scheiben in der Tiefe", "kategorie_slug": "hero-layouts", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "filmisch" ], "technik_gruppen": [ "css", "js" ], "kurz": "Kampagnen-Hero eines Ladens für Duft, Leinen und Keramik: drei Scheiben aus dem Produktbild heben sich unscharf ab, werden scharf, zoomen stärker als das Bild und verschieben sich mit Zeiger und Scroll, während das Bild dahinter zurücktritt.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 1100, "kombinierbar_mit": [ "editorial-magazin-layout", "meta-labels-hud-typografie", "hide-on-scroll-header", "token-swiss-knackig" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "senkrecht", "name": "Senkrecht (Lamellen)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=senkrecht" }, { "id": "waagerecht", "name": "Waagerecht (Bänder)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=waagerecht" }, { "id": "rechtecke", "name": "Rechtecke (Slicey-Grundform)", "url": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=rechtecke" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo" }, { "id": "gap-decorations-raster", "name": "Trennlinien im Raster (Gap Decorations)", "kategorie_slug": "hero-layouts", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Haarlinien in Raster, Liste und umbrechender Leiste kommen aus row-rule und column-rule, mit Ersatz per Pseudo-Elementen, der gleich aussieht.", "kurve": "cubic-bezier(0.1, 0.6, 0.4, 1)", "dauer_ms": 125, "kombinierbar_mit": [ "case-study-geruest", "projektindex-hover-vorschau", "editorial-magazin-layout", "studio-visitenkarte-footer", "tabellenziffern", "meta-labels-hud-typografie", "eine-familie-wenig-gewichte" ], "in_rezepten": [ "industrie-b2b-mittelstand", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "kenndaten", "name": "Kenndaten-Raster", "url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten" }, { "id": "werkliste", "name": "Werkliste mit Filter", "url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=werkliste" }, { "id": "karte", "name": "Visitenkarte im Footer", "url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=karte" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo" }, { "id": "hero-seitenverhaeltnis-fliessend", "name": "Hero-Komposition nach Seitenverhältnis", "kategorie_slug": "hero-layouts", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "experimentell" ], "technik_gruppen": [ "css" ], "kurz": "Ein Hotel-Hero in einem frei ziehbaren Rahmen: Bildausschnitt und Textlage gleiten stufenlos mit dem Seitenverhältnis, unterhalb von 22rem Höhe steht der Text unter dem Bild.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "fluide-typo-clamp-cqi", "schrift-hero-viewportbreit", "headline-laufweite-zeilenabstand", "zoom-und-textabstand-robust" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "objektposition", "name": "Nur der Bildausschnitt", "url": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/demo?v=objektposition" }, { "id": "textlage", "name": "Textblock wandert mit", "url": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/demo?v=textlage" } ], "meta": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/meta.json", "detail": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/", "demo_url": "https://cecodesign.de/lab/fundus/hero-layouts/hero-seitenverhaeltnis-fliessend/demo" }, { "id": "bildsequenz-video-scrub", "name": "Bildsequenz-/Video-Scrub", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "luxuriös", "filmisch" ], "technik_gruppen": [ "js", "gsap", "canvas" ], "kurz": "Ein Architekturmodell dreht sich Frame für Frame mit dem Scroll, das Dach hebt ab: 120 vorgeladene WebP-Bilder im gepinnten Canvas.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "pinned-scrub-scrollytelling", "scroll-fortschritt" ], "in_rezepten": [ "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/bildsequenz-video-scrub/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/bildsequenz-video-scrub/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/bildsequenz-video-scrub/demo" }, { "id": "clip-path-bild-reveal", "name": "Bild-Reveal per Clip-Path/Maske", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Bilder öffnen sich wie eine Blende: die Maske wächst, das Bild darin zoomt gegenläufig zurück. Tiefe ohne 3D.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1600, "kombinierbar_mit": [ "split-mask-reveal", "mehrschicht-parallax", "stapelkarten" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo" }, { "id": "css-view-reveal-nativ", "name": "Native CSS-Scroll-Reveals mit view()", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Inhalte gleiten an die Scrollposition gekoppelt herein, rein in CSS über animation-timeline: view(), ohne Library und ohne JS-Init.", "kurve": "cubic-bezier(0.42, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "clip-path-bild-reveal", "mehrschicht-parallax", "scroll-fortschritt", "css-scroll-triggered" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo" }, { "id": "horizontal-scroll-section", "name": "Gepinnte Horizontal-Scroll-Section", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "filmisch", "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Eine Section bleibt stehen, und ein breiter Projektstreifen zieht beim senkrechten Scrollen seitlich vorbei, die Bilder darin wandern leicht mit.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "mehrschicht-parallax", "clip-path-bild-reveal", "marquee-laufband", "case-study-geruest", "meta-labels-hud-typografie", "elastisches-raster-lag" ], "in_rezepten": [ "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/horizontal-scroll-section/demo" }, { "id": "medien-expansion-scroll", "name": "Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein kleines Bild zwischen zwei Wörtern wächst beim Scrollen zum randlosen Vollbild, die Wörter weichen der Kante aus.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": null, "kombinierbar_mit": [ "pinned-scrub-scrollytelling", "zoom-parallax", "section-overlap-uebergang", "schrift-hero-viewportbreit", "cinematic-video-hero", "typo-maske-medien" ], "in_rezepten": [ "kreativstudio-buehne", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo" }, { "id": "mehrschicht-parallax", "name": "Subtiler mehrschichtiger Parallax", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Bilder wandern im Rahmen gegen den Scroll, Karten und Ziffern laufen mit eigenem Tempo: Tiefe, die man spürt, aber kaum sieht.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "clip-path-bild-reveal", "smooth-scroll-lenis", "horizontal-scroll-section" ], "in_rezepten": [ "luxus-manufaktur-stille" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/demo" }, { "id": "pinned-scrub-scrollytelling", "name": "Gepinnte Scrub-Sequenz (Scrollytelling)", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "präzise", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Eine Logo-Fallstudie in vier Kapiteln: Die Bühne bleibt stehen, der Scroll zeichnet, färbt und enthüllt das fertige Zeichen und spult beim Zurückscrollen exakt zurück.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "scroll-word-highlight", "medien-expansion-scroll", "theme-farbwechsel-scroll", "scroll-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/demo" }, { "id": "section-overlap-uebergang", "name": "Sections, die übereinander gleiten (Vorhang-Übergang)", "kategorie_slug": "scroll", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Die aktuelle Section bleibt sticky stehen, die nächste fährt darüber, die alte tritt zurück: Kapitelwechsel mit Tiefe statt harter Kante.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "theme-farbwechsel-scroll", "footer-reveal", "stapelkarten" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/demo" }, { "id": "stapelkarten", "name": "Stapelkarten beim Scrollen (Stacking Cards)", "kategorie_slug": "scroll", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Projektkarten docken beim Scrollen nacheinander an und legen sich übereinander; die verdeckten werden kleiner und dunkler, kippen weg oder bleiben als Register stehen.", "kurve": "cubic-bezier(0.11, 0, 0.5, 0)", "dauer_ms": 100, "kombinierbar_mit": [ "clip-path-bild-reveal", "theme-farbwechsel-scroll", "split-mask-reveal", "split-screen-sticky-seiten", "case-study-geruest" ], "in_rezepten": [ "immobilien-diskret-hochwertig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/stapelkarten/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/stapelkarten/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo" }, { "id": "flip-element-ueber-sections", "name": "Ein Element wandert über mehrere Sections", "kategorie_slug": "scroll", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "filmisch", "verspielt" ], "technik_gruppen": [ "gsap" ], "kurz": "Ein Zimmerschlüssel reist beim Scrollen von der Haustür ans Schlüsselbrett, auf den Nachttisch und in den Rückgabekasten. Ein Objekt erzählt die ganze Seite.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "pinned-scrub-scrollytelling", "medien-expansion-scroll" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/demo" }, { "id": "layout-formation-scroll", "name": "Raster/Layout formiert sich beim Scrollen", "kategorie_slug": "scroll", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "präzise", "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein Monitoring-Dashboard setzt sich beim Scrollen zusammen: Neun Kacheln steigen in ihre Fächer, fliegen aus dem Chaos ein oder fächern sich aus einem Stapel auf, erst dann löst sich der Pin.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": null, "kombinierbar_mit": [ "bento-grid-interaktiv", "flip-zustandswechsel", "unendliche-leinwand-galerie", "pinned-scrub-scrollytelling", "medien-expansion-scroll" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/demo" }, { "id": "smooth-scroll-lenis", "name": "Smooth Scroll mit Lenis", "kategorie_slug": "scroll", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "luxuriös" ], "technik_gruppen": [ "js", "gsap", "lenis" ], "kurz": "Mausrad-Scroll gleitet per lerp oder fester Dauer nach; scroll-gekoppelte Zeiger und Parallaxen laufen über denselben GSAP-Takt ohne Stufen.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "mehrschicht-parallax", "pinned-scrub-scrollytelling", "scroll-3d-kamerafahrt", "marquee-laufband" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/demo" }, { "id": "theme-farbwechsel-scroll", "name": "Farb-/Theme-Wechsel beim Scrollen", "kategorie_slug": "scroll", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "filmisch", "verspielt", "laut", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Der ganze Raum färbt sich mit jedem Kapitel um: hell für die Fotoserie, dunkel für den Film. Kapitel ohne Trennlinien.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "section-overlap-uebergang", "scroll-word-highlight", "hide-on-scroll-header" ], "in_rezepten": [ "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Fotografie und Film: Schwelle oder gekoppelt", "url": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=basis" }, { "id": "tageslauf", "name": "Tageslauf: Tag, Abend und Nacht in einem Kapitel", "url": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=tageslauf" } ], "meta": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo" }, { "id": "css-scroll-triggered", "name": "CSS Scroll-Triggered Animations (zeitbasiert, ausgelöst durch Scroll)", "kategorie_slug": "scroll", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Zeitbasierte CSS-Animationen, die der Scroll nur auslöst: Projektbilder und Texte eines Architekturbüros spielen ihre 350 oder 750 ms zu Ende, auch wenn der Scroll steht, und laufen beim Verlassen rückwärts.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 350, "kombinierbar_mit": [ "css-view-reveal-nativ", "split-mask-reveal", "clip-path-bild-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/css-scroll-triggered/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/css-scroll-triggered/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/css-scroll-triggered/demo" }, { "id": "zoom-parallax", "name": "Zoom-Parallax / Zoom-through", "kategorie_slug": "scroll", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "filmisch", "verspielt" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Eine Lage-Collage in einer gepinnten Bühne: Beim Scrollen wächst jede Kachel mit eigenem Endfaktor, die Ränder fliegen hinaus, das Kernbild füllt am Ende den Viewport.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "medien-expansion-scroll", "section-overlap-uebergang" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/demo" }, { "id": "fullpage-snap-slides", "name": "Abschnittsweises Einrasten (Fullpage-Snap)", "kategorie_slug": "scroll", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Fünf Bühnen eines Hotels in Meran: Jeder Scroll-Impuls führt zur nächsten Folie, erst im eingerasteten Zustand treten Text und Bild auf.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "theme-farbwechsel-scroll", "scroll-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/fullpage-snap-slides/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/fullpage-snap-slides/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/fullpage-snap-slides/demo" }, { "id": "svg-pfad-zeichnen-scroll", "name": "SVG-Pfad zeichnet sich beim Scrollen", "kategorie_slug": "scroll", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Eine Straße zeichnet sich beim Scrollen durch fünf Etappen zum Führerschein, Wegschilder federn, sobald sie erreicht sind.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "scroll-fortschritt", "pinned-scrub-scrollytelling" ], "in_rezepten": [ "fahrschule-freundlich-buchbar" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "strasse", "name": "Straße mit Etappen", "url": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=strasse" }, { "id": "anker", "name": "Handlinie verbindet Anker", "url": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo?v=anker" } ], "meta": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo" }, { "id": "velocity-skew-verzerrung", "name": "Verzerrung nach Scrollgeschwindigkeit (Skew/Stretch)", "kategorie_slug": "scroll", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "js", "gsap", "webgl" ], "kurz": "Zwölf Hausplakate eines Leipziger Studios kippen beim schnellen Scrollen bis zu 4 Grad und federn beim Stopp zurück, die Bildunterschriften bleiben scharf.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "marquee-laufband", "smooth-scroll-lenis" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/velocity-skew-verzerrung/demo" }, { "id": "daten-scrollytelling", "name": "Daten-Scrollytelling", "kategorie_slug": "scroll", "prioritaet": "F", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "filmisch" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Ein Wirkungsbericht, dessen Diagramm sich beim Scrollen Schritt für Schritt aufbaut: Text links, klebende SVG-Grafik rechts, auf dem Telefon Grafik oben.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "zahlen-fakten-section", "zahlen-odometer", "split-screen-sticky-seiten", "tabellenziffern", "css-scroll-triggered", "svg-pfad-zeichnen-scroll" ], "in_rezepten": [ "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "wirkung", "name": "Wirkung über die Jahre", "url": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo?v=wirkung" }, { "id": "mittel", "name": "Mittelverwendung", "url": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo?v=mittel" } ], "meta": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/meta.json", "detail": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/", "demo_url": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo" }, { "id": "blur-reveal", "name": "Unschärfe-Enthüllung (Blur-to-sharp) pro Wort", "kategorie_slug": "schrift-animationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Wörter tauchen gestaffelt aus der Unschärfe auf und werden scharf wie beim Fokusziehen einer Kamera.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "split-mask-reveal", "shimmer-gradient-text", "rotating-words", "scroll-word-highlight" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/demo" }, { "id": "scroll-word-highlight", "name": "Wort-für-Wort-Aufhellen beim Scrollen", "kategorie_slug": "schrift-animationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "warm" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Ein Manifest liest sich beim Scrollen selbst vor: Wort für Wort hellt der Absatz von blass auf satt auf.", "kurve": "cubic-bezier(0.11, 0, 0.5, 0)", "dauer_ms": null, "kombinierbar_mit": [ "split-mask-reveal", "marquee-laufband", "pinned-scrub-scrollytelling", "theme-farbwechsel-scroll" ], "in_rezepten": [ "gastro-warm-appetitlich", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo" }, { "id": "split-mask-reveal", "name": "Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)", "kategorie_slug": "schrift-animationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Zeilen gleiten aus ihrer eigenen Maske nach oben: Text wird enthüllt statt eingeblendet, präzise wie ein Filmabspann.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1000, "kombinierbar_mit": [ "blur-reveal", "zahlen-odometer", "rotating-words", "clip-path-bild-reveal", "pinned-scrub-scrollytelling", "intro-ohne-wartezeit", "bildstapel-intro", "loader-wird-layout", "seitenname-typo-uebergang" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/demo" }, { "id": "text-roll-hover", "name": "Text-Roll beim Hover (doppelte Zeile rollt durch)", "kategorie_slug": "schrift-animationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Jedes Label liegt doppelt in einer einzeiligen Maske; beim Hover rollt eine Zeichenwelle die Kopie herein, ohne dass sich das Layout bewegt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "magnetische-elemente", "kontextueller-cursor", "richtungsabhaengiger-marquee-hover", "fuellung-vom-eintrittspunkt", "unterstreichung-varianten" ], "in_rezepten": [ "kreativstudio-buehne", "mode-beauty-kollektion" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/demo" }, { "id": "zahlen-odometer", "name": "Rollende Ziffern (Zahlen-Ticker / Odometer)", "kategorie_slug": "schrift-animationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Kennzahlen eines Gestaltungsateliers rollen beim Jahreswechsel Stelle für Stelle in die neue Zahl, die Richtung folgt dem Trend.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 750, "kombinierbar_mit": [ "split-mask-reveal", "scramble-decode", "gleitender-indikator", "like-herz-burst", "fortschrittsring", "zahlen-fakten-section" ], "in_rezepten": [ "saas-produkt-praezise", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/demo" }, { "id": "marquee-laufband", "name": "Marquee-Laufband (optional scroll-gekoppelt)", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "js", "gsap", "lenis", "canvas" ], "kurz": "Riesiger Studioname läuft endlos als Band, ein gekippter Leistungsstreifen gegenläufig darunter; Scrollrichtung kehrt beide um, Scrolltempo beschleunigt und neigt sie.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "scroll-word-highlight", "kontextueller-cursor", "schrift-hero-viewportbreit", "cinematic-video-hero", "footer-cta-riesen-wortmarke", "testimonials-neu-gedacht", "smooth-scroll-lenis", "velocity-skew-verzerrung" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/demo" }, { "id": "scramble-decode", "name": "Scramble/Decode-Text (Zeichen entschlüsseln sich)", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "filmisch", "laut" ], "technik_gruppen": [ "js", "gsap", "andere" ], "kurz": "Zeichen rauschen in Akzentfarbe durch und rasten nacheinander ein: als Decode beim Laden, als Welle oder mit wachsendem Balken beim Hover.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": null, "kombinierbar_mit": [ "text-roll-hover", "zahlen-odometer", "cursor-text-proximity", "crosshair-coordinates-cursor", "ascii-dither-pixel-stil", "karten-spotlight-glow", "split-mask-reveal", "boot-sequenz-intro", "seitenname-typo-uebergang" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/scramble-decode/demo" }, { "id": "variable-font-axes", "name": "Animierte Variable-Font-Achsen", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "verspielt", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Die Buchstaben selbst reagieren: Unter dem Zeiger werden sie fett und breit, als Welle läuft das Gewicht durch die Headline, ein Wort schwillt beim Überfahren an.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "cursor-text-proximity", "schrift-hero-viewportbreit", "split-mask-reveal" ], "in_rezepten": [ "fitness-studio-rhythmus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/variable-font-axes/demo" }, { "id": "highlight-marker-underline", "name": "Gezeichnete Markierung und Unterstreichung", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "verspielt", "warm" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Ein Kernbegriff bekommt eine Markierung, die sich vor den Augen zeichnet: Textmarker, Kreis oder ein zufälliger Handstrich.", "kurve": "cubic-bezier(0.66, 0.06, 0.36, 0.96)", "dauer_ms": 360, "kombinierbar_mit": [ "split-mask-reveal", "scroll-word-highlight" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "kurs-coaching-lernweg", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/highlight-marker-underline/demo" }, { "id": "kinetic-3d-shader-type", "name": "3D- und Shader-Typografie", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "laut", "warm", "experimentell" ], "technik_gruppen": [ "webgl" ], "kurz": "Ein Wort wird zum Material: In WebGL gerendert, wölbt, verdrillt oder schmilzt es unter dem Zeiger, der echte Text bleibt darunter im DOM.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "webgl-fluid-cursor", "scroll-char-choreo" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/kinetic-3d-shader-type/demo" }, { "id": "rotating-words", "name": "Wechselnde Wörter / Begrüßungs-Loader", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein Wort im Claim rollt aus seiner Maske, der Satz passt sich weich an; dazu Liste mit Auswahlrahmen und Begrüßungs-Loader.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "split-mask-reveal", "typewriter-natural", "blur-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/rotating-words/demo" }, { "id": "scroll-char-choreo", "name": "Scroll-gescrubbte Zeichen-Choreografie", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "laut", "experimentell" ], "technik_gruppen": [ "gsap" ], "kurz": "Eine Kapitelüberschrift setzt sich Zeichen für Zeichen aus der Unschärfe zusammen, solange gescrollt wird, und löst sich am Ende des Kapitels wieder auf.", "kurve": "cubic-bezier(0.32, 0, 0.67, 0)", "dauer_ms": 250, "kombinierbar_mit": [ "split-mask-reveal", "schrift-hero-viewportbreit", "kinetic-3d-shader-type" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/scroll-char-choreo/demo" }, { "id": "text-on-path", "name": "Text auf Pfad", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "js", "gsap", "lenis", "canvas" ], "kurz": "Text fließt auf einer SVG-Kurve, gekoppelt an den Scroll: bricht das Raster und wirkt organisch, als Band, verformter Pfad oder Rund-Label.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 300, "kombinierbar_mit": [ "marquee-laufband", "magnetische-elemente" ], "in_rezepten": [ "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Scroll-Band: Welle, Pfad morpht, Kreis", "url": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo?v=basis" }, { "id": "reifen", "name": "Reifenflanke: Größe auf dem Bogen, Teil für Teil erklärt", "url": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo?v=reifen" } ], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo" }, { "id": "typewriter-natural", "name": "Schreibmaschine mit natürlichem Takt", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein Suchfeld tippt Beispielsuchen im menschlichen Takt, löscht nur bis zur ersten Abweichung und schreibt weiter.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 75, "kombinierbar_mit": [ "rotating-words", "scramble-decode", "shimmer-gradient-text" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/demo" }, { "id": "typo-maske-medien", "name": "Bild/Video in Schrift (Typo-Maske)", "kategorie_slug": "schrift-animationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik_gruppen": [ "css", "js", "gsap", "canvas" ], "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.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": null, "kombinierbar_mit": [ "split-mask-reveal", "schrift-hero-viewportbreit", "medien-expansion-scroll", "cinematic-video-hero" ], "in_rezepten": [ "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/typo-maske-medien/demo" }, { "id": "letter-physics", "name": "Buchstaben-Physik", "kategorie_slug": "schrift-animationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "js", "gsap", "canvas" ], "kurz": "Zwölf Lernziele fallen als Pillen in einen Kasten, stapeln sich und lassen sich greifen und werfen; dazu Buchstaben mit Schwerkraft und federnde Buchstaben, die dem Zeiger ausweichen.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "buchstaben-zerstreuen", "cursor-follower-lerp" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/letter-physics/demo" }, { "id": "shimmer-gradient-text", "name": "Schimmer-/Verlaufs-Text", "kategorie_slug": "schrift-animationen", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "luxuriös" ], "technik_gruppen": [ "css" ], "kurz": "Ein schmales Lichtband gleitet einmal über den Intro-Satz, ein Status-Text schimmert, bis das Ergebnis da ist, und Projekttitel füllen sich beim Hover von links.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 2000, "kombinierbar_mit": [ "typewriter-natural", "blur-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/shimmer-gradient-text/demo" }, { "id": "buchstaben-zerstreuen", "name": "Buchstaben zerstreuen sich beim Hover", "kategorie_slug": "schrift-animationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap", "andere" ], "kurz": "Die große Kontaktadresse zerfällt beim Hover in einzelne Buchstaben, die Fläche wird schwarz, beim Verlassen setzt sich das Wort wieder zusammen.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": 750, "kombinierbar_mit": [ "kontextueller-cursor", "text-roll-hover", "letter-physics", "magnetische-elemente" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/buchstaben-zerstreuen/demo" }, { "id": "echo-stacked-type", "name": "Echo-/Stapel-Typografie", "kategorie_slug": "schrift-animationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "laut", "experimentell" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein Festivalname liegt vierfach in Spartenfarben unter sich selbst und fächert beim Hover und beim Scrollen zu Schichten auf: als text-shadow, als Kontur-Kopien oder als Tunnel.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 450, "kombinierbar_mit": [ "text-roll-hover", "schrift-hero-viewportbreit" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Stapel mit Hover und Scroll", "url": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo?v=basis" }, { "id": "ghost-trails", "name": "Ghost Trails beim Scrollen", "url": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo?v=ghost-trails" } ], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo" }, { "id": "kreistext-siegel-rotierend", "name": "Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis)", "kategorie_slug": "schrift-animationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm", "experimentell" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Ein Stempel als Reservieren-Knopf: Der Text läuft einmal nahtlos um den Ring und dreht sich langsam, beim Hover hält er an, beim Scrollen folgt er Tempo und Richtung.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "text-on-path", "kinetische-typo-intro", "magnetische-elemente", "footer-cta-riesen-wortmarke", "scroll-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/meta.json", "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/", "demo_url": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/demo" }, { "id": "bild-trail-cursor", "name": "Bild-Spur hinter dem Cursor (Image Trail)", "kategorie_slug": "hover", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "verspielt", "laut" ], "technik_gruppen": [ "css", "js", "gsap", "canvas" ], "kurz": "Wer die Maus bewegt, legt eine Spur aus Projektbildern über den Hero: drei gemessene Varianten von Drehen bis Kreismaske.", "kurve": "cubic-bezier(0.5, 1, 0.89, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "listen-hover-bildvorschau", "kontextueller-cursor", "ascii-dither-pixel-stil", "schrift-hero-viewportbreit", "cursor-follower-lerp" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/", "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/demo" }, { "id": "bild-zoom-in-maske", "name": "Bild-Zoom in der Maske", "kategorie_slug": "hover", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Der Rahmen steht, das Bild darin zoomt langsam: drei Varianten in drei Rezept-Welten, vom ruhigen 1.05-Zoom im Projektraster über den schrumpfenden Rahmen bei Hotelzimmern bis zur farbigen Decke im Kulturprogramm.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "graustufen-zu-farbe", "webgl-bildverzerrung", "kontextueller-cursor" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Basis: nur das Bild zoomt", "url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis" }, { "id": "gegen", "name": "Rahmen schrumpft, Bild zoomt gegenläufig", "url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen" }, { "id": "richtung", "name": "Richtungsabhängiger Clip mit farbiger Decke", "url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung" } ], "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/", "demo_url": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo" }, { "id": "karten-spotlight-glow", "name": "Karten-Spotlight (Glow folgt der Maus)", "kategorie_slug": "hover", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "js", "gsap", "webgl" ], "kurz": "Ein kühles Licht folgt dem Zeiger über ein dunkles Kartenraster: als Lichtfleck, als leuchtender Rahmen oder als Zeichenrauschen.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 420, "kombinierbar_mit": [ "scramble-decode", "kippen-3d-karten", "nachbarn-reagieren-hover", "verlaufs-rahmen", "linien-punkt-raster", "css-3d-transforms" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/", "demo_url": "https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/demo" }, { "id": "listen-hover-bildvorschau", "name": "Bildvorschau beim Listen-Hover", "kategorie_slug": "hover", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Die Liste bleibt typografisch ruhig; das Bild kommt erst, wenn der Blick auf einer Zeile ruht, und folgt der Maus mit leichter Trägheit.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 700, "kombinierbar_mit": [ "kontextueller-cursor", "text-roll-hover", "nachbarn-reagieren-hover", "bild-zoom-in-maske", "richtungsabhaengiger-marquee-hover", "vollbild-overlay-menue-bildvorschau", "gleitender-indikator", "projektindex-hover-vorschau" ], "in_rezepten": [ "architektur-ruhiges-raster", "freelancer-stille-visitenkarte", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/", "demo_url": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo" }, { "id": "unterstreichung-varianten", "name": "Unterstreichungs-Varianten", "kategorie_slug": "hover", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Linien, die sich beim Hover einzeichnen: links rein, rechts raus, aus der Mitte oder als Wiederkehr, im Fließtext über Zeilenumbrüche.", "kurve": "cubic-bezier(0.85, 0, 0.15, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "text-roll-hover", "nachbarn-reagieren-hover" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "durchlauf", "name": "Durchlauf: links rein, rechts raus", "url": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo?v=durchlauf" }, { "id": "mitte", "name": "Aus der Mitte, 2 px", "url": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo?v=mitte" }, { "id": "wiederkehr", "name": "Wiederkehr: Linie läuft hinaus, neue kommt nach", "url": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo?v=wiederkehr" }, { "id": "inset", "name": "Nativ mit text-decoration-inset", "url": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo?v=inset" } ], "meta": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/", "demo_url": "https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo" }, { "id": "magnetische-elemente", "name": "Magnetische Buttons und Elemente", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "luxuriös", "verspielt", "laut" ], "technik_gruppen": [ "js", "gsap", "andere" ], "kurz": "Buttons und Icons ziehen sich zum Zeiger hin, der Text folgt versetzt und federt beim Verlassen zurück.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 1500, "kombinierbar_mit": [ "fuellung-vom-eintrittspunkt", "text-roll-hover", "kontextueller-cursor", "druck-feedback" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/", "demo_url": "https://cecodesign.de/lab/fundus/hover/magnetische-elemente/demo" }, { "id": "clip-path-form-hover", "name": "Form-Morph-Buttons (Clip-Path)", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut", "warm" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Der Button bricht aus dem Rechteck aus: Beim Hover morpht seine Fläche per clip-path in eine zweite Form, als Blob, Pfeilspitze oder Wölbung.", "kurve": "cubic-bezier(0.65, 0.05, 0, 1)", "dauer_ms": 750, "kombinierbar_mit": [ "magnetische-elemente", "token-federnd-verspielt" ], "in_rezepten": [ "friseur-salon-handschrift" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Clip-Path-Morph: Blob, Pfeil, Wölbung", "url": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis" }, { "id": "gooey", "name": "Gooey: Tropfen löst sich als Icon-Blase (SVG-Filter)", "url": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=gooey" } ], "meta": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/", "demo_url": "https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo" }, { "id": "hover-absicht-timing", "name": "Hover-Absicht und Zeitlogik", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Mega-Menü, Tooltip und Pfeil reagieren erst auf echtes Verweilen, schließen mit kurzem Nachlauf und wechseln bei offenem Menü ohne neue Wartezeit.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "hovercard-interest-invoker", "listen-hover-bildvorschau", "bild-zoom-in-maske" ], "in_rezepten": [ "architektur-ruhiges-raster", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/", "demo_url": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo" }, { "id": "kippen-3d-karten", "name": "3D-Kippen von Karten (Tilt)", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "luxuriös", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Eine Geschenkkarte kippt zum Zeiger, mit Parallaxe-Ebenen, wanderndem Kupferglanz und drei gemessenen Varianten (Zentry 3°, Attio 18°, vanilla-tilt 15°).", "kurve": "cubic-bezier(0.03, 0.98, 0.52, 0.99)", "dauer_ms": 3000, "kombinierbar_mit": [ "karten-spotlight-glow", "ascii-dither-pixel-stil" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/", "demo_url": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/demo" }, { "id": "nachbarn-reagieren-hover", "name": "Nachbarn reagieren auf Hover", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Fährt der Zeiger über eine Kachel, treten die Nachbarn zurück, machen Platz oder reagieren nach Nähe.", "kurve": "cubic-bezier(0, 0, 0.2, 1)", "dauer_ms": null, "kombinierbar_mit": [ "listen-hover-bildvorschau", "unterstreichung-varianten", "graustufen-zu-farbe" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/", "demo_url": "https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo" }, { "id": "graustufen-zu-farbe", "name": "Graustufen zu Farbe / Duoton-Bildbehandlung", "kategorie_slug": "hover", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "laut" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Das Team-Raster steht ruhig in Graustufen oder im Duoton der Marke; nur die Person unter dem Zeiger bekommt ihre Farbe zurück.", "kurve": "cubic-bezier(0.42, 0, 1, 1)", "dauer_ms": 100, "kombinierbar_mit": [ "bild-zoom-in-maske", "nachbarn-reagieren-hover", "halbton-raster", "grain-noise-overlay" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/", "demo_url": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo" }, { "id": "fuellung-vom-eintrittspunkt", "name": "Füllung vom Eintrittspunkt", "kategorie_slug": "hover", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Leistungszeilen und Knöpfe füllen sich dort, wo der Zeiger eintritt: als Kreis ab dem Eintrittspunkt, von der nächsten Kante oder gewölbt von unten; die Textfarbe wechselt genau an der Kante der Füllung.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "magnetische-elemente", "text-roll-hover", "listen-hover-bildvorschau" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "kultur-programm-haltung", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "arbeitgeber-karriere", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Clip-Path-Formen (Tischlerei)", "url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis" }, { "id": "pixel", "name": "Pixelraster vom Eintrittspunkt (Festivalprogramm)", "url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=pixel" } ], "meta": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/", "demo_url": "https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo" }, { "id": "hovercard-interest-invoker", "name": "Hovercard / Vorschau per Interest Invoker", "kategorie_slug": "hover", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Fachbegriffe und Namen öffnen nach kurzem Verweilen eine Erklär- oder Profilkarte, nativ per interestfor und popover=hint, ohne Seitenwechsel.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "einblenden-starting-style", "listen-hover-bildvorschau" ], "in_rezepten": [ "praxis-gesundheit-ruhig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/", "demo_url": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/demo" }, { "id": "svg-filter-verzerrung", "name": "SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text", "kategorie_slug": "hover", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "filmisch", "warm", "experimentell" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "kurz": "Kategorienwörter und Stoffbilder wabern beim Hover kurz per feTurbulence und feDisplacementMap, die Kampagnenzeile verschmilzt per Gooey-Filter von Herbst zu Winter; am Ende ist alles wieder scharf.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 450, "kombinierbar_mit": [ "webgl-bildverzerrung", "unterstreichung-varianten", "blur-reveal", "rotating-words" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/meta.json", "detail": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/", "demo_url": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/demo" }, { "id": "cursor-masken-reveal", "name": "Masken- und Spotlight-Reveal am Cursor", "kategorie_slug": "cursor", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "filmisch", "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap", "webgl", "canvas", "andere" ], "kurz": "Ein Kreis am Zeiger wächst über der Überschrift von 40 auf 400 px und legt eine zweite, ehrlichere Ebene frei.", "kurve": "cubic-bezier(0.34, 1.56, 0.64, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "kontextueller-cursor", "karten-spotlight-glow", "webgl-bildverzerrung", "cursor-follower-lerp", "blend-difference-cursor" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "text", "name": "Text: zwei Fassungen eines Satzes", "url": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/demo?v=text" }, { "id": "roentgen", "name": "Röntgen: Raster unter dem Layout", "url": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/demo?v=roentgen" }, { "id": "spot", "name": "Spotlight: Lichtkegel auf dunkler Bühne", "url": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/demo?v=spot" }, { "id": "pinsel", "name": "Pinsel: Striche legen das Foto unter der Skizze frei", "url": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/demo?v=pinsel" } ], "meta": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/cursor-masken-reveal/demo" }, { "id": "kontextueller-cursor", "name": "Kontextueller Cursor (wächst, dockt an, zeigt Label)", "kategorie_slug": "cursor", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "luxuriös", "verspielt", "laut" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Ein Cursor, der über Medien zum Label wächst („Abspielen“, „Ansehen“, „Ziehen“) und an Buttons andockt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 550, "kombinierbar_mit": [ "magnetische-elemente", "listen-hover-bildvorschau", "text-roll-hover", "cursor-masken-reveal" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/cursor/kontextueller-cursor/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/kontextueller-cursor/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/kontextueller-cursor/demo" }, { "id": "cursor-text-proximity", "name": "Typo reagiert auf Cursor-Nähe", "kategorie_slug": "cursor", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Die Headline spürt den Zeiger: Buchstaben in seiner Nähe werden fetter, kräftiger geschnitten oder weichen aus, der System-Cursor bleibt.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "scramble-decode", "variable-font-axes", "schrift-hero-viewportbreit" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/cursor-text-proximity/demo" }, { "id": "webgl-fluid-cursor", "name": "WebGL-Fluid- und Formspur am Cursor", "kategorie_slug": "cursor", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "ruhig", "präzise", "luxuriös", "verspielt", "warm", "experimentell" ], "technik_gruppen": [ "webgl", "canvas" ], "kurz": "Der Zeiger als Zuluft: Eine Stable-Fluids-Simulation strömt durch die Produktansicht einer Lüftungs-Software, wahlweise als Rauch, als Vektorpfeile oder als verzerrter Grundriss.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "kinetic-3d-shader-type", "cursor-masken-reveal", "webgl-bildverzerrung", "webgpu-tsl-compute", "audio-reaktiv-3d" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "rauch", "name": "Rauch: der Zeiger ist die Zuluft", "url": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo?v=rauch" }, { "id": "vektoren", "name": "Vektoren: Pfeil je Rasterzelle", "url": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo?v=vektoren" }, { "id": "verzerrung", "name": "Verzerrung: Grundriss weicht der Strömung aus", "url": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo?v=verzerrung" }, { "id": "autonom", "name": "Nebelprobe: Strömung ohne Zeiger", "url": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo?v=autonom" } ], "meta": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/webgl-fluid-cursor/demo" }, { "id": "blend-difference-cursor", "name": "Invertierender Cursor (mix-blend-mode: difference)", "kategorie_slug": "cursor", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein weißer Kreis mit mix-blend-mode: difference folgt dem Zeiger, invertiert die Regie-Namen und wächst über ihnen; über dem Werkbild schaltet er sich ab und wird zum Ring.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "cursor-follower-lerp", "cursor-masken-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/demo" }, { "id": "crosshair-coordinates-cursor", "name": "Fadenkreuz- und Koordinaten-Cursor", "kategorie_slug": "cursor", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "gsap", "canvas" ], "kurz": "Lageplan eines Kulturhauses: Ein feines Fadenkreuz mit Meter-Koordinaten fährt über den Grundriss und nimmt die Farbe des Saals an, über dem es steht.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "scramble-decode", "zahlen-odometer" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/demo" }, { "id": "cursor-follower-lerp", "name": "Nachzieh-Cursor (Lerp-Follower)", "kategorie_slug": "cursor", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "experimentell" ], "technik_gruppen": [ "js", "gsap" ], "kurz": "Studio-Startseite aus Wien-Neubau: Ein Punkt sitzt am Zeiger, ein 30-px-Ring zieht per Lerp 1/12 nach, wächst über Links und füllt sich über den Arbeiten in Signalorange.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 550, "kombinierbar_mit": [ "kontextueller-cursor", "blend-difference-cursor" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/meta.json", "detail": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/", "demo_url": "https://cecodesign.de/lab/fundus/cursor/cursor-follower-lerp/demo" }, { "id": "akkordeon-hoehe-auto", "name": "Akkordeon mit Höhenanimation auf auto", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Akkordeon-Einträge gleiten auf ihre natürliche Höhe auf, ohne JavaScript-Messung: per Grid 0fr → 1fr, interpolate-size oder calc-size.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "token-toggle-asymmetrisch", "token-federnd-verspielt" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "fitness-studio-rhythmus", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "FAQ Fahrschule, natives details", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis" }, { "id": "faq", "name": "FAQ mit Suche und Sprunglinks", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq" }, { "id": "leistungen", "name": "Leistungsliste mit Bild", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen" } ], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo" }, { "id": "button-zustaende", "name": "Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "canvas", "andere" ], "kurz": "Ein Buchungs-Button zeigt Hover, Druck, Laden und Erfolg direkt an sich selbst, ohne zu springen.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "druck-feedback", "kopieren-feedback", "spinner-ladeindikator", "token-federnd-verspielt" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "verein-nonprofit-wirkung", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo" }, { "id": "druck-feedback", "name": "Druck-Feedback (Press/Tap)", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Knöpfe, Tabs und Karten geben beim Drücken kurz nach und federn mit leichtem Überschwinger zurück.", "kurve": "cubic-bezier(0.45, 0.02, 0.09, 0.98)", "dauer_ms": null, "kombinierbar_mit": [ "token-federnd-verspielt", "button-zustaende", "magnetische-elemente" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "gastro-warm-appetitlich", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "kultur-programm-haltung", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo" }, { "id": "einblenden-starting-style", "name": "Ein-/Ausblenden mit @starting-style", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Menü, Hovercard und Dialog kommen per @starting-style an und gehen dank allow-discrete sichtbar wieder, ganz ohne Animations-Skript.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "hovercard-interest-invoker", "toast-stapel", "gestaffelte-einblendung", "token-federnd-verspielt" ], "in_rezepten": [ "architektur-ruhiges-raster", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo" }, { "id": "kopieren-feedback", "name": "Kopieren-Feedback", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "canvas", "andere" ], "kurz": "Kopieren bestätigt sich direkt am Knopf: Häkchen, Tooltip oder rollender Text, nach 2 s zurück.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 2000, "kombinierbar_mit": [ "button-zustaende", "text-roll-hover" ], "in_rezepten": [ "freelancer-stille-visitenkarte", "saas-produkt-praezise", "friseur-salon-handschrift", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo" }, { "id": "skeleton-shimmer", "name": "Skeleton mit Schimmer", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Graue Platzhalter in exakter Größe, über die eine Lichtkante wandert; die Inhalte blenden ohne Layoutsprung herein.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 1500, "kombinierbar_mit": [ "spinner-ladeindikator", "gestaffelte-einblendung" ], "in_rezepten": [ "fotograf-film-bild-zuerst", "saas-produkt-praezise", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Objektliste mit Schimmer, Synchron und Puls", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo?v=basis" }, { "id": "bild-platzhalter", "name": "Bild-Platzhalter aus Farbe oder Mini-Vorschau", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo?v=bild-platzhalter" } ], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo" }, { "id": "toast-stapel", "name": "Toast-Benachrichtigungen im Stapel", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Rückmeldungen gleiten unten rechts herein und schieben sich zu einem Stapel zusammen, ältere rücken kleiner nach hinten; Hover fächert auf und hält die Zeit an.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "einblenden-starting-style", "kopieren-feedback", "token-federnd-verspielt" ], "in_rezepten": [ "mode-beauty-kollektion", "kultur-programm-haltung", "saas-produkt-praezise", "d2c-produkt-zuerst", "fitness-studio-rhythmus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo" }, { "id": "toggle-switch", "name": "Toggle-Schalter", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Der Daumen federt in die neue Position, wird beim Drücken breiter und die Spur wechselt die Farbe: der Zustand ist sofort lesbar und fühlt sich haptisch an.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "token-federnd-verspielt", "theme-umschalter-view-transition", "zahlen-odometer" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/demo" }, { "id": "validierung-nach-interaktion", "name": "Validierung erst nach Interaktion", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Felder bleiben beim Tippen still, zeigen erst nach Verlassen oder Absenden einen Fehler und werden sofort grün, sobald die Eingabe stimmt.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "passwort-staerke", "button-zustaende" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "kanzlei-beratung-souveraen", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "eventlocation-hochzeit" ], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo" }, { "id": "animiertes-select", "name": "Animiertes Auswahlmenü (anpassbares select)", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Natives select mit appearance: base-select. Der Picker fällt 6 px herab und blendet in 300 ms ein, das gewählte Icon zeichnet sich neu.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "einblenden-starting-style", "gestaffelte-einblendung" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "boutique-hotel-gastgeber", "mode-beauty-kollektion", "luxus-manufaktur-stille", "d2c-produkt-zuerst", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo" }, { "id": "ki-streaming-text-denkindikator", "name": "KI-Streaming-Text und Denk-Indikator mit Shimmer", "kategorie_slug": "mikroanimationen", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein Archiv-Assistent zeigt mit wanderndem Glanz, woran er gerade arbeitet, und streamt seine Antwort Wort für Wort.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "typewriter-natural", "shimmer-gradient-text", "skeleton-shimmer", "command-palette-und-ki-suche", "toast-stapel" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "archiv", "name": "Archiv-Assistent eines Studios", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=archiv" }, { "id": "fragen", "name": "Frag-uns-Feld einer Praxis", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=fragen" } ], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo" }, { "id": "checkbox-radio-animiert", "name": "Animierte Checkbox und Radio", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Native Checkboxen und Radios mit eigener Optik: Häkchen zeichnet sich, Maske skaliert oder Quadrat füllt sich, die Semantik bleibt.", "kurve": "cubic-bezier(0.25, 0.1, 0.25, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "token-federnd-verspielt", "validierung-nach-interaktion" ], "in_rezepten": [ "kultur-programm-haltung", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo" }, { "id": "fortschrittsring", "name": "Fortschrittsring", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Natives als Ring: conic-gradient, per @property in 400 ms weich nachgeführt, bei 100 % in Messing.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "hold-to-confirm", "button-zustaende", "zahlen-odometer" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/fortschrittsring/demo" }, { "id": "gestaffelte-einblendung", "name": "Gestaffelte Einblendung per sibling-index()", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "laut" ], "technik_gruppen": [ "css" ], "kurz": "Nach dem Filterwechsel kommen die Projektkarten eines Zürcher Architekturbüros nacheinander, der Verzug kommt rein aus CSS über sibling-index().", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "einblenden-starting-style", "toast-stapel", "skeleton-shimmer" ], "in_rezepten": [ "freelancer-stille-visitenkarte" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/gestaffelte-einblendung/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/gestaffelte-einblendung/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/gestaffelte-einblendung/demo" }, { "id": "hold-to-confirm", "name": "Gedrückt halten zum Bestätigen", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "canvas", "andere" ], "kurz": "Ein Angebot wird per Halten angenommen: Ring, Balken oder Schwelle füllen sich in 1,2 s, Loslassen spult dreimal so schnell zurück.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "fortschrittsring", "button-zustaende", "druck-feedback" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/hold-to-confirm/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/hold-to-confirm/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/hold-to-confirm/demo" }, { "id": "icon-squash-stretch", "name": "Icon-Squash-and-Stretch (Pfeil dehnt sich)", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "canvas", "andere" ], "kurz": "Der Pfeil im Button streckt sich beim Hover: Der Schaft wird länger, die Spitze rückt vor und wird schmaler. Das wirkt gezeichnet statt mechanisch.", "kurve": "cubic-bezier(0.5, 1, 0.89, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "druck-feedback", "token-federnd-verspielt", "text-roll-hover" ], "in_rezepten": [ "gastro-warm-appetitlich", "kreativstudio-buehne", "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo" }, { "id": "like-herz-burst", "name": "Like/Herz mit Partikel-Burst", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Merk-Herz auf Objektkarten: Das Herz springt aus null mit Überschwinger, kleine Partikel und ein Ring zerstreuen sich, der Zähler der Merkliste rollt weiter.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 1000, "kombinierbar_mit": [ "zahlen-odometer", "icon-squash-stretch", "token-federnd-verspielt" ], "in_rezepten": [ "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/demo" }, { "id": "scroll-fortschritt", "name": "Scroll-Fortschrittsbalken und -ring", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Magazinartikel des erfundenen Tidehaus Flensburg: Lesebalken unter der Kopfzeile, Ring um den Nach-oben-Knopf oder Fortschritt je Kapitel, alles rein in CSS an den Scroll gekoppelt.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "pinned-scrub-scrollytelling", "horizontal-scroll-section", "bildsequenz-video-scrub", "scrollspy-kapitelnavigation" ], "in_rezepten": [ "kurs-coaching-lernweg" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/scroll-fortschritt/demo" }, { "id": "spinner-ladeindikator", "name": "Spinner und Ladeindikatoren", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Ein Ring mit atmendem Bogen, zwölf verblassende Balken oder die gezeichnete Blattkontur aus dem Logo: Ladeindikatoren im Spenden-Knopf und in einer Terminliste eines Weimarer Baumvereins.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 1500, "kombinierbar_mit": [ "button-zustaende", "skeleton-shimmer", "fortschrittsring" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/spinner-ladeindikator/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/spinner-ladeindikator/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/spinner-ladeindikator/demo" }, { "id": "corner-shape-eckenformen", "name": "Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css" ], "kurz": "Squircle, Scoop, Notch und Bevel als echte Eckenformen: Ticket, Tags, Avatar und Button bekommen eine eigene Eckensprache, die beim Umschalten weich morpht.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "clip-path-form-hover", "button-zustaende", "neo-skeuomorph-taktile-ui", "bento-grid-interaktiv", "druck-feedback" ], "in_rezepten": [ "pflege-dienst-naehe" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Eckensprache mit corner-shape", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=basis" }, { "id": "formen", "name": "Freie Formen mit border-shape", "url": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=formen" } ], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo" }, { "id": "drag-sortieren-platzhalter", "name": "Drag-and-drop-Sortieren mit Platzhalter- und Drop-Animation", "kategorie_slug": "mikroanimationen", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Gänge eines Menüs in die Wunschfolge ziehen: Das Original bleibt als Platzhalter, eine Linie oder ausweichende Nachbarn zeigen das Ziel, und ein kurzer Farb-Flash bestätigt das Ablegen.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "flip-zustandswechsel", "druck-feedback", "toast-stapel", "hold-to-confirm", "bento-grid-interaktiv" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/drag-sortieren-platzhalter/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/drag-sortieren-platzhalter/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/drag-sortieren-platzhalter/demo" }, { "id": "in-den-warenkorb-flug", "name": "In-den-Warenkorb-Flug", "kategorie_slug": "mikroanimationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Salz-Manufaktur aus Lüneburg: Das Produktbild fliegt im Bogen zum Warenkorb, das Icon federt, der Zähler rollt hoch und ein Mini-Warenkorb zeigt den Weg zum Gratisversand.", "kurve": "cubic-bezier(0.42, 0, 1, 1)", "dauer_ms": 500, "kombinierbar_mit": [ "button-zustaende", "zahlen-odometer", "toast-stapel" ], "in_rezepten": [ "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/demo" }, { "id": "maskottchen-zustaende", "name": "Figuren-/Maskottchen-Zustände", "kategorie_slug": "mikroanimationen", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "gsap", "canvas" ], "kurz": "Lernbegleiter Kalle in einem Kurs-Quiz: atmet, blinzelt, schaut dem Zeiger nach, denkt beim Prüfen, hüpft bei der richtigen Antwort und lässt bei der falschen den Trieb hängen.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "button-zustaende", "skeleton-shimmer" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo" }, { "id": "passwort-staerke", "name": "Passwortstärke-Visualisierung", "kategorie_slug": "mikroanimationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Passwort festlegen im Mandantenportal einer Kanzlei: Leiste, Segmente oder eine Zeichnung zeigen die Stärke, die Regeln haken sich einzeln ab, am Ende eine ruhige Bestätigung.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "validierung-nach-interaktion", "checkbox-radio-animiert" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/demo" }, { "id": "konfetti-erfolg", "name": "Konfetti / Erfolgs-Feier", "kategorie_slug": "mikroanimationen", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "js", "canvas" ], "kurz": "Spendenformular eines Küstenvereins: Nach dem Absenden wechselt die Karte zum Dank, Konfetti in Vereinsfarben schießt aus dem Spenden-Knopf, der Spendenbalken wächst.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "button-zustaende", "like-herz-burst", "maskottchen-zustaende", "toast-stapel", "hold-to-confirm" ], "in_rezepten": [ "kurs-coaching-lernweg", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/konfetti-erfolg/demo" }, { "id": "rive-datenbindung", "name": "Zustandsautomat mit Datenbindung (Rive-Prinzip)", "kategorie_slug": "mikroanimationen", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "js", "canvas" ], "kurz": "Ein Rechner-Hero, dessen Illustration ein Zustandsautomat steuert: Zahl, Schalter und Auslöser treiben Stapel, Prüfstation, Freigabe-Tor und Ergebnis live, wie bei Rive mit View Model und State Machine.", "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "dauer_ms": 150, "kombinierbar_mit": [ "produkt-ui-hero-perspektiv-tilt", "zahlen-odometer", "toggle-switch", "maskottchen-zustaende", "preis-section-editorial" ], "in_rezepten": [ "saas-produkt-praezise" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/meta.json", "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/", "demo_url": "https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/demo" }, { "id": "frosted-glass-erweitert", "name": "Frosted Glass mit erweitertem Backdrop", "kategorie_slug": "glas-material", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css" ], "kurz": "Sticky Header aus getöntem Glas, dessen Backdrop doppelt so hoch ist: Farbe von unten fließt schon vor der Kante ein, eine 4-px-Lichtkante gibt Tiefe ohne Schatten.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "liquid-glass-refraktion", "grain-noise-overlay", "progressive-blur" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/frosted-glass-erweitert/demo" }, { "id": "grain-noise-overlay", "name": "Grain-/Noise-Überlagerung", "kategorie_slug": "glas-material", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "filmisch", "warm" ], "technik_gruppen": [ "css", "webgl", "canvas" ], "kurz": "Eine kleine feTurbulence-Kachel legt Korn über Verlauf, Bild und Schrift und macht die digitale Fläche analog und greifbar.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "mesh-gradient-shader", "frosted-glass-erweitert", "halbton-raster", "graustufen-zu-farbe" ], "in_rezepten": [ "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Korn über der Fläche (Gestaltungsbüro)", "url": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo?v=basis" }, { "id": "button", "name": "Körnung auf Button-Flächen (Kaufbox)", "url": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo?v=button" } ], "meta": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo" }, { "id": "liquid-glass-refraktion", "name": "Liquid Glass mit Refraktion", "kategorie_slug": "glas-material", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "luxuriös", "verspielt" ], "technik_gruppen": [ "css", "js", "webgl", "canvas" ], "kurz": "Eine ziehbare Glaslinse bricht Titel und Bilder an ihrer Kante wie echtes Glas: SVG-Displacement-Map aus einem Squircle-Profil nach Snellius, als backdrop-filter, mit Rim-Light.", "kurve": "cubic-bezier(0.32, 0.72, 0, 1)", "dauer_ms": 420, "kombinierbar_mit": [ "frosted-glass-erweitert", "karten-spotlight-glow", "html-in-canvas-shader" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "linse", "name": "Linse: konvexes Squircle-Profil", "url": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/demo?v=linse" }, { "id": "lip", "name": "Lip: Rand erhaben, Mitte vertieft", "url": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/demo?v=lip" }, { "id": "prisma", "name": "Prisma: chromatische Aberration", "url": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/demo?v=prisma" }, { "id": "welle", "name": "Welle: fließendes Glasband über der Headline", "url": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/demo?v=welle" } ], "meta": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/liquid-glass-refraktion/demo" }, { "id": "mesh-gradient-shader", "name": "Animierter Mesh-Verlauf", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "abklingend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik_gruppen": [ "css", "webgl", "canvas" ], "kurz": "Warmer Mesh-Verlauf aus vier Markenfarben, der langsam atmet und einer Glaskarte etwas zum Brechen gibt, wahlweise als schräges Band oder als CSS-Fallback.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "grain-noise-overlay", "frosted-glass-erweitert", "liquid-glass-refraktion" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/mesh-gradient-shader/demo" }, { "id": "fluessigmetall-chrom", "name": "Flüssigmetall / Chrom", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "luxuriös", "laut", "experimentell" ], "technik_gruppen": [ "webgl" ], "kurz": "Der Schriftzug eines Rostocker Motion-Studios fließt als flüssiges Chrom, wird zum 3D-Tropfen oder glüht in der Signalfarbe.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": null, "kombinierbar_mit": [ "grain-noise-overlay", "nachbearbeitung-filmlook" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/fluessigmetall-chrom/demo" }, { "id": "geriffeltes-glas", "name": "Geriffeltes Glas (Fluted Glass)", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös", "warm" ], "technik_gruppen": [ "webgl", "canvas" ], "kurz": "Hero einer Erfurter Kanzlei: Besprechungsraum, Domblick und Archiv liegen hinter einer Riffelglasscheibe, das Bild driftet langsam und folgt dem Zeiger, die Riffel brechen es in Streifen.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "grain-noise-overlay", "webgl-bildverzerrung" ], "in_rezepten": [ "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "WebGL-Scheibe mit Drift (three.js)", "url": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=basis" }, { "id": "still", "name": "Stehendes Riffelglas, klar auf Knopfdruck (SVG, ohne three.js)", "url": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=still" } ], "meta": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo" }, { "id": "linien-punkt-raster", "name": "Linien- und Punktraster", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "webgl", "canvas" ], "kurz": "Ein feines Punktraster unter der Fahrschul-Route wölbt sich um den Zeiger; dazu die reine CSS-Fassung und ein Linienraster mit Plus-Marken.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "karten-spotlight-glow", "verlaufs-rahmen", "css-3d-transforms" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo" }, { "id": "progressive-blur", "name": "Progressiver Verlaufs-Blur", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "luxuriös", "filmisch" ], "technik_gruppen": [ "css" ], "kurz": "Inhalt taucht stufenlos unscharf unter Kopf und Warenkorb-Leiste: zehn gestapelte Backdrop-Ebenen mit wachsendem Blur und versetzten Masken.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "frosted-glass-erweitert", "liquid-glass-refraktion" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/progressive-blur/demo" }, { "id": "verlaufs-rahmen", "name": "Animierter Verlaufsrahmen", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css" ], "kurz": "Ein Lichtstreif läuft über die 1,5-px-Kante der einen Karte, die zählen soll: conic-gradient mit registriertem Winkel, ohne Fläche zu beanspruchen.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": 6000, "kombinierbar_mit": [ "karten-spotlight-glow", "linien-punkt-raster" ], "in_rezepten": [ "saas-produkt-praezise", "kurs-coaching-lernweg" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Padding-Box-Trick (Hotel)", "url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=basis" }, { "id": "saas", "name": "background-clip: border-area (Glas-Preiskarte)", "url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=saas" }, { "id": "button", "name": "Lichtlauf um eine Pille (Kurs-Anmeldung)", "url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=button" } ], "meta": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo" }, { "id": "neo-skeuomorph-taktile-ui", "name": "Neo-Skeuomorphismus / taktile UI (Material mit Lichtkante)", "kategorie_slug": "glas-material", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "luxuriös", "verspielt" ], "technik_gruppen": [ "css" ], "kurz": "Kaufbox einer Hautpflege-Manufaktur, in der jedes Bedienelement wie ein Objekt wirkt: Lichtkante oben, Haarlinie, gestaffelte Schatten, beim Drücken sinkt es ein.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 100, "kombinierbar_mit": [ "druck-feedback", "frosted-glass-erweitert", "liquid-glass-refraktion", "grain-noise-overlay", "bento-grid-interaktiv", "verlaufs-rahmen" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/demo" }, { "id": "halbton-raster", "name": "Halbton-Raster", "kategorie_slug": "glas-material", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut", "experimentell" ], "technik_gruppen": [ "webgl", "canvas" ], "kurz": "Programmseite eines Zürcher Kulturhauses: Jedes Bild erscheint als Raster in der Farbe seiner Sparte, beim Bildwechsel wächst das Raster kurz auf, beim Hover wird es feiner.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": null, "kombinierbar_mit": [ "graustufen-zu-farbe", "grain-noise-overlay", "ascii-dither-pixel-stil" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/demo" }, { "id": "papier-druck-textur", "name": "Papier- und Drucktextur", "kategorie_slug": "glas-material", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "webgl", "canvas" ], "kurz": "Mittagskarte eines Regensburger Wirtshauses als Riso-Bogen: Papierfasern im Streiflicht des Zeigers, zwei versetzte Druckfarben, Klebeband und Ausriss; jede Ebene einzeln schaltbar.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 700, "kombinierbar_mit": [ "grain-noise-overlay", "halbton-raster", "graustufen-zu-farbe" ], "in_rezepten": [ "gastro-warm-appetitlich" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo" }, { "id": "holo-irisierende-folie", "name": "Holo-/Irisierungsfolie auf Neigung und Cursor", "kategorie_slug": "glas-material", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "js" ], "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.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "kippen-3d-karten", "karten-spotlight-glow", "fluessigmetall-chrom", "verlaufs-rahmen", "flick-karten-stapel" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/holo-irisierende-folie/demo" }, { "id": "fluessig-marmor-hintergrund", "name": "Flüssiger Marmor-Hintergrund", "kategorie_slug": "glas-material", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "laut", "warm", "experimentell" ], "technik_gruppen": [ "css", "js", "webgl" ], "kurz": "Ein langsam fließender Marmor aus einem einzigen Shader trägt den Schrift-Hero, in Hausfarben statt Pastell-Aurora.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "versal-kondensiert-fit-to-width", "bewegung-pausieren-schalter", "grain-noise-overlay", "split-mask-reveal" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "marmor", "name": "Marmor", "url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=marmor" }, { "id": "tinte", "name": "Tinte", "url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=tinte" }, { "id": "seifenhaut", "name": "Seifenhaut (Experiment)", "url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=seifenhaut" }, { "id": "lava", "name": "Lava", "url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=lava" }, { "id": "bild", "name": "Bild verflüssigt", "url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=bild" } ], "meta": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/meta.json", "detail": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/", "demo_url": "https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo" }, { "id": "ascii-dither-pixel-stil", "name": "ASCII-, Dither- und Pixel-Stil (Render und Hover)", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "js", "webgl", "canvas" ], "kurz": "Ein 3D-Knoten läuft durch einen eigenen Shader-Pass und erscheint als ASCII mit CRT-Look, als Bayer-Dither in Markenfarben oder als Pixelraster; unter dem Zeiger scheint in 5vw-Kacheln das Original durch.", "kurve": "cubic-bezier(0.5, 1, 0.89, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "halbton-raster", "shader-uebergang-dissolve", "nachbearbeitung-filmlook", "interaktives-3d-hero", "scramble-decode", "karten-spotlight-glow", "bild-trail-cursor" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "szene", "name": "3D-Szene im Raster", "url": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo?v=szene" }, { "id": "video", "name": "Video als Zeichen in Echtzeit", "url": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo?v=video" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo" }, { "id": "glas-transmission-3d", "name": "Glas- und Kristallobjekte in 3D", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "luxuriös" ], "technik_gruppen": [ "webgl" ], "kurz": "Ein Brillant, ein Eisblock und eine Linse aus echtem Transmissionsglas brechen die große Serif-Typo und die Glutsonne dahinter.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "seitenwechsel-kamerafahrt", "webgl-text-sdf", "nachbearbeitung-filmlook" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/demo" }, { "id": "interaktives-3d-hero", "name": "Interaktives 3D-Objekt im Hero", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "luxuriös", "verspielt" ], "technik_gruppen": [ "gsap", "webgl" ], "kurz": "Ein gedrechselter Holzkreisel als Hero-Objekt: neigt sich zum Zeiger, lässt sich mit Nachlauf drehen und läuft angeworfen mit Präzession aus.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "glas-transmission-3d", "ascii-dither-pixel-stil", "fluessigmetall-chrom" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/interaktives-3d-hero/demo" }, { "id": "partikel-punktwolke", "name": "Morphende Partikel und Punktwolken", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "filmisch", "warm" ], "technik_gruppen": [ "webgl" ], "kurz": "32 768 Punkte fließen per GPU-Federsimulation von Form zu Form, sobald man einen Link berührt.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "seitenwechsel-kamerafahrt", "webgpu-tsl-compute", "audio-reaktiv-3d" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "ziele", "name": "Link-Ziele: jede Navigation hat eine Form", "url": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo?v=ziele" }, { "id": "schrift", "name": "Schriftzug: Punkte schreiben Wörter", "url": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo?v=schrift" }, { "id": "spuren", "name": "Spuren: Lichtspuren durch Nachleuchten", "url": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo?v=spuren" }, { "id": "chladni", "name": "Chladni: Punkte ordnen sich zu Klangfiguren", "url": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo?v=chladni" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo" }, { "id": "scroll-3d-kamerafahrt", "name": "Scroll-gesteuerte 3D-Szene / 3D-Modell (Kamerafahrt)", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "luxuriös", "filmisch", "laut", "experimentell" ], "technik_gruppen": [ "gsap", "lenis", "webgl" ], "kurz": "Ein Architekturmodell am Weinberg: Der Scroll fährt die Kamera auf einer CatmullRom-Kurve durch vier Kapitel, geglättet mit damp, synchron zu HTML-Texten und Beschriftungen am Modell.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "glas-transmission-3d", "seitenwechsel-kamerafahrt", "nachbearbeitung-filmlook", "smooth-scroll-lenis", "pinned-scrub-scrollytelling", "scroll-fortschritt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/scroll-3d-kamerafahrt/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/scroll-3d-kamerafahrt/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/scroll-3d-kamerafahrt/demo" }, { "id": "shader-uebergang-dissolve", "name": "Shader- und Dissolve-Übergang (Noise, Displacement, Pixel)", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "ruhig", "präzise", "luxuriös", "filmisch", "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "gsap", "webgl", "canvas" ], "kurz": "Projekt-Slider eines Markenateliers: Bilder verbrennen mit Glutkante, fließen per Displacement mit RGB-Shift oder zerfallen in Pixelblöcke, alles in einem Shader.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "seitenwechsel-kamerafahrt", "vt-shared-element-morph", "webgl-ladeszene-fortschritt", "slideshow-innere-gegenparallaxe", "token-filmisch-shader", "token-kinetisch-inout", "ascii-dither-pixel-stil", "webgl-bildverzerrung", "boot-sequenz-intro", "scramble-decode" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/demo" }, { "id": "webgl-bildverzerrung", "name": "WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)", "kategorie_slug": "3d-webgl", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "präzise", "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "gsap", "lenis", "webgl", "canvas" ], "kurz": "Projektraster eines Zeichenateliers: Die Bilder geben unter dem Zeiger nach, als Quadrat-Linse mit RGB-Shift, als Wölbung oder als Strömung nach Mausgeschwindigkeit; beim Scrollen biegen sie sich.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "3d-karussell-zylinder", "grain-noise-overlay", "shader-uebergang-dissolve", "bild-zoom-in-maske", "listen-hover-bildvorschau", "cursor-masken-reveal" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "linse", "name": "Quadrat-Linse mit RGB-Shift", "url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo?v=linse" }, { "id": "woelbung", "name": "Wölbung um den Zeiger", "url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo?v=woelbung" }, { "id": "stroemung", "name": "Strömung nach Mausgeschwindigkeit", "url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo?v=stroemung" }, { "id": "wasser", "name": "Wasser: Wellen breiten sich vom Zeiger aus", "url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo?v=wasser" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-bildverzerrung/demo" }, { "id": "css-3d-transforms", "name": "CSS-3D-Räume und -Objekte", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein Sideboard aus echten HTML-Flächen zum Drehen, Öffnen und Zerlegen, dazu Tilt-Karte und Klappkarten.", "kurve": "cubic-bezier(0.2, 0.8, 0.2, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "karten-spotlight-glow", "3d-karussell-zylinder" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/demo" }, { "id": "gaussian-splats", "name": "Gaussian Splats (gescannte Räume)", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "hoch", "stimmung": [ "ruhig", "filmisch" ], "technik_gruppen": [ "webgl" ], "kurz": "Ein gescannter Raum als 47 000 Gauß-Splats: Kamera fliegt zwischen Standpunkten, der Blick lässt sich ziehen, der Raum baut sich von der Leuchte aus auf.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "scroll-3d-kamerafahrt", "ascii-dither-pixel-stil" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/gaussian-splats/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/gaussian-splats/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/gaussian-splats/demo" }, { "id": "webgl-text-sdf", "name": "Typografie in WebGL", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "filmisch", "laut" ], "technik_gruppen": [ "webgl" ], "kurz": "Die Überschrift bleibt echter HTML-Text, WebGL legt SDF-Glyphen darüber: Sie verwürfeln per Atlas-Offset, laufen als Welle durch den Raum oder zerfallen in 3D.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "glas-transmission-3d", "seitenwechsel-kamerafahrt", "partikel-punktwolke" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/demo" }, { "id": "audio-reaktiv-3d", "name": "Audioreaktive 3D-Szenen", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "filmisch", "laut" ], "technik_gruppen": [ "js", "webgl" ], "kurz": "Eine Telefon-KI als Orb: Web Audio zerlegt die Stimme in Bass, Mitten und Höhen, und die Kugel verformt sich Silbe für Silbe.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "partikel-punktwolke", "webgl-fluid-cursor", "spielbare-3d-welt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/demo" }, { "id": "instanzierte-objektfelder", "name": "Instanzierte Objektfelder", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "filmisch" ], "technik_gruppen": [ "webgl" ], "kurz": "Ein Würfelfeld aus 1 904 Instanzen in einem Draw Call: Die Blöcke folgen dem Cursor als Welle, bilden die Stufen eines Lernwegs und zeichnen am Ende einen Haken.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "partikel-punktwolke", "webgpu-tsl-compute", "glas-transmission-3d" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/demo" }, { "id": "shader-embed-no-code", "name": "No-Code-Shader-Hintergründe als Embed (Unicorn Studio, Paper Shaders)", "kategorie_slug": "3d-webgl", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "filmisch" ], "technik_gruppen": [ "js", "webgl", "canvas" ], "kurz": "Ein Shader-Hintergrund aus dem No-Code-Editor: Lichtstrahlen fallen wie durchs Nordfenster einer Görlitzer Uhrenmanufaktur, umschaltbar auf Körnung und Raster, mit Poster-Fallback.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": 75, "kombinierbar_mit": [ "mesh-gradient-shader", "grain-noise-overlay", "footer-3d-buehne", "cursor-masken-reveal", "spline-embed", "token-filmisch-shader" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "embed", "name": "Embed-Szene mit Presets", "url": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/demo?v=embed" }, { "id": "eigen", "name": "Selbst gebauter Lichtschacht mit Vergleich", "url": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/demo?v=eigen" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/shader-embed-no-code/demo" }, { "id": "nachbearbeitung-filmlook", "name": "Post-Processing-Filmlook", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "filmisch" ], "technik_gruppen": [ "webgl" ], "kurz": "Eine Echtzeit-Szene am nächtlichen Steg bekommt den Kino-Look: Bloom, Aberration am Rand, Korn, Vignette und Grading in einem Pass, dazu Glitch nur beim Schnitt.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "seitenwechsel-kamerafahrt", "grain-noise-overlay", "ascii-dither-pixel-stil" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/demo" }, { "id": "spielbare-3d-welt", "name": "Spielbare 3D-Welt als Navigation", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "hoch", "stimmung": [ "verspielt", "laut", "warm" ], "technik_gruppen": [ "webgl" ], "kurz": "Die Kieler Förde als kleine Spielwelt: Mit dem Vereinsboot fährt man fünf Projektorte an, jede Boje öffnet eine Wirkungskarte, und alle Inhalte gibt es auch als 2D-Liste.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "audio-reaktiv-3d", "interaktives-3d-hero" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/spielbare-3d-welt/demo" }, { "id": "tiefenkarten-relighting", "name": "2.5D-Bilder mit Tiefenkarte", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "filmisch" ], "technik_gruppen": [ "webgl" ], "kurz": "Ein Rosengarten-Panorama mit Tiefenkarte: Die Sonne folgt dem Zeiger, sinkt sie tief, glüht der Fels und im Tal gehen Lichter an.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "webgl-bildverzerrung", "webgpu-tsl-compute" ], "in_rezepten": [ "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "sonne", "name": "Abendsonne am Zeiger", "url": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo?v=sonne" }, { "id": "scan", "name": "Morgen-Scan durch die Tiefe", "url": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo?v=scan" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo" }, { "id": "webgpu-tsl-compute", "name": "WebGPU mit Three.js-TSL", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "präzise" ], "technik_gruppen": [ "webgl" ], "kurz": "Reinraum-Simulation eines Dresdner SaaS-Tools: Compute-Partikel umströmen Anlagen und eine Person; ohne WebGPU läuft dieselbe Physik sichtbar markiert im WebGL2-Rückfall.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "partikel-punktwolke", "webgl-fluid-cursor", "tiefenkarten-relighting" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/demo" }, { "id": "html-in-canvas-shader", "name": "Shader auf echtem DOM (HTML-in-Canvas)", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "experimentell" ], "technik_gruppen": [ "webgl", "canvas" ], "kurz": "Ein echtes HTML-Produkt-UI wird zur Shader-Textur: es kippt in Perspektive, liegt unter einer Glaslinse oder löst sich beim Ansichtswechsel auf und bleibt dabei bedienbar.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "liquid-glass-refraktion", "shader-uebergang-dissolve", "webgl-bildverzerrung" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/html-in-canvas-shader/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/html-in-canvas-shader/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/html-in-canvas-shader/demo" }, { "id": "spline-embed", "name": "Spline-Szenen als Embed", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "verspielt" ], "technik_gruppen": [ "webgl" ], "kurz": "Eine Lebkuchendose als Spline-artige 3D-Szene mit Zuständen: Zeigen öffnet den Deckel, Farbfelder wechseln das Blech.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "interaktives-3d-hero" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/spline-embed/demo" }, { "id": "atmosphaere-partikel", "name": "Atmosphärische Partikel", "kategorie_slug": "3d-webgl", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "filmisch", "warm" ], "technik_gruppen": [ "js", "canvas" ], "kurz": "Boutique-Hotel am Ratzeburger Domsee: Staub leuchtet nur im Sonnenfleck auf, Glut steigt aus dem Kamin und verlischt, unscharfe Lichterketten atmen über dem See.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 2400, "kombinierbar_mit": [ "cinematic-video-hero", "bewegung-pausieren-schalter", "grain-noise-overlay", "token-luxus-weich", "buchungsleiste-datumsbereich" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "staub", "name": "Staub im Licht", "url": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/demo?v=staub" }, { "id": "glut", "name": "Glut über dem Feuer", "url": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/demo?v=glut" }, { "id": "bokeh", "name": "Bokeh-Lichterkette", "url": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/demo?v=bokeh" } ], "meta": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/meta.json", "detail": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/", "demo_url": "https://cecodesign.de/lab/fundus/3d-webgl/atmosphaere-partikel/demo" }, { "id": "3d-karussell-zylinder", "name": "3D-Karussell / Bildzylinder (Scroll- und Drag-gesteuert)", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "präzise", "filmisch", "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap", "lenis", "webgl" ], "kurz": "Zwölf Bilder auf einem CSS-3D-Zylinder: dreht sich langsam von selbst, Scrollen beschleunigt, Ziehen wirft ihn mit Trägheit an.", "kurve": "cubic-bezier(0.55, 0, 0.1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "token-physik-traege", "token-federnd-verspielt", "webgl-bildverzerrung", "shader-uebergang-dissolve", "css-3d-transforms", "horizontal-scroll-section", "css-view-reveal-nativ" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/3d-karussell-zylinder/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/3d-karussell-zylinder/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/3d-karussell-zylinder/demo" }, { "id": "css-native-karussell", "name": "Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Produktreihe einer Münsteraner Rösterei als echter Scroller: Scroll-Snap, Pfeile und Punkte vom Browser, die eingerastete Tüte hebt sich per scroll-state(), ganz ohne JS.", "kurve": "cubic-bezier(0.33, 1, 0.68, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "drag-slider-traegheit-loop", "token-swiss-knackig", "token-tech-praezise" ], "in_rezepten": [ "architektur-ruhiges-raster", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "produktreihe", "name": "Produktreihe", "url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe" }, { "id": "buehne", "name": "Vollbild-Bühne", "url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne" }, { "id": "peek", "name": "Kartenreihe mit Peek", "url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek" }, { "id": "variable-breiten", "name": "Variable Breiten", "url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=variable-breiten" }, { "id": "fenster", "name": "Fenster", "url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=fenster" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo" }, { "id": "drag-slider-traegheit-loop", "name": "Drag-Slider mit Trägheit und Endlosschleife", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Eine endlose Projektreihe, die dem Zeiger 1:1 folgt, mit Schwung ausgleitet und auf dem nächsten Slide einrastet.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 725, "kombinierbar_mit": [ "slideshow-innere-gegenparallaxe", "galerie-shared-element-vollbild", "token-studio-signatur", "token-physik-traege" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/drag-slider-traegheit-loop/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/drag-slider-traegheit-loop/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/drag-slider-traegheit-loop/demo" }, { "id": "galerie-shared-element-vollbild", "name": "Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Ein Projektbild wächst aus dem ruhigen Raster in die Detailansicht, die Nachbarn treten nach Abstand gestaffelt zurück; Schließen spielt alles zurück zur Kachel.", "kurve": "cubic-bezier(0.65, 0, 0.35, 1)", "dauer_ms": 700, "kombinierbar_mit": [ "unendliche-leinwand-galerie", "flip-zustandswechsel", "drag-slider-traegheit-loop", "token-kinetisch-inout", "token-toggle-asymmetrisch" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "immobilien-diskret-hochwertig", "boutique-hotel-gastgeber", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Projektraster zu Vollbild oder Panel", "url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis" }, { "id": "produkt", "name": "Produktgalerie mit Daumen", "url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt" }, { "id": "serie", "name": "Serie als Spalte mit Leuchtkasten", "url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=serie" }, { "id": "zoom", "name": "Zoom im Vollbild mit Lupe", "url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=zoom" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo" }, { "id": "unendliche-leinwand-galerie", "name": "Endlose Leinwand – Drag-Galerie in alle Richtungen", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "luxuriös", "filmisch", "verspielt", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap", "webgl", "canvas" ], "kurz": "Eine Bildwand ohne Ränder: ziehen, werfen, in jede Richtung weiter. Das Archiv wirkt größer als der Bildschirm und lädt zum Stöbern ein.", "kurve": "cubic-bezier(0.87, 0, 0.13, 1)", "dauer_ms": 2000, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "flip-zustandswechsel", "token-physik-traege", "token-editorial-langsam", "collage-scrapbook", "projektindex-hover-vorschau" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/unendliche-leinwand-galerie/demo" }, { "id": "video-vorschau-hover-viewport", "name": "Video-Vorschau bei Hover / im Viewport", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "luxuriös", "filmisch", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Projektkarten zeigen ein Standbild. Erst unter dem Zeiger oder im Viewport läuft der stumme Clip, das Bild zoomt dabei leicht.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "listen-hover-bildvorschau", "projektindex-hover-vorschau", "kontextueller-cursor", "bild-zoom-in-maske", "bento-grid-interaktiv" ], "in_rezepten": [ "kreativstudio-buehne", "fotograf-film-bild-zuerst", "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Projektraster mit Hover, Viewport oder Scrubbing", "url": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo?v=basis" }, { "id": "karussell-folie", "name": "Video nur in der aktiven Folie (Werkstattfilme)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo?v=karussell-folie" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo" }, { "id": "karussell-steuerung", "name": "Karussell-Steuerung und Anzeige", "kategorie_slug": "galerien-slider", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Fünf Steuerungen für ein natives Scroll-Snap-Karussell in fünf Branchen: Zähler „03 / 08“, Fortschrittsleiste per scroll-timeline, Daumen als ::scroll-marker, Selbstlauf mit Restzeit-Ring und Pause, Anker-Links mit eigener URL je Folie.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "css-native-karussell", "bewegung-pausieren-schalter", "objekt-steckbrief-expose", "lagen-steckbrief-karte", "programm-kalender", "galerie-shared-element-vollbild", "kopieren-feedback" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "boutique-hotel-gastgeber", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zaehler", "name": "Zähler", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler" }, { "id": "fortschritt", "name": "Fortschrittsleiste", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=fortschritt" }, { "id": "daumen", "name": "Daumen", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=daumen" }, { "id": "autoplay", "name": "Selbstlauf mit Pause", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=autoplay" }, { "id": "ankerlinks", "name": "Anker-Links", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=ankerlinks" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo" }, { "id": "akkordeon-panels", "name": "Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie", "kategorie_slug": "galerien-slider", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js" ], "kurz": "Fünf Objekte eines Jenaer Maklers als schmale Streifen; der gewählte wächst auf flex-grow 5 und deckt seine Szene auf, statt sie zu skalieren.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 72, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "token-studio-signatur", "token-luxus-weich", "blueprint-raster-sichtbar", "team-ueber-mich-layout" ], "in_rezepten": [ "boutique-hotel-gastgeber" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo" }, { "id": "flip-zustandswechsel", "name": "Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)", "kategorie_slug": "galerien-slider", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös", "verspielt" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Filter und Raster-Liste-Umschalter, bei denen jede Projektkachel sichtbar an ihren neuen Platz gleitet: wahlweise mit GSAP Flip oder nativ mit View Transitions.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "unendliche-leinwand-galerie", "token-swiss-knackig", "projektindex-hover-vorschau", "layout-formation-scroll", "vt-shared-element-morph", "vt-cross-document-mpa" ], "in_rezepten": [ "architektur-ruhiges-raster", "kultur-programm-haltung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "flip", "name": "GSAP Flip", "url": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=flip" }, { "id": "nativ", "name": "Nativ: element-scoped View Transition", "url": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo" }, { "id": "masonry-grid-lanes-galerie", "name": "Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)", "kategorie_slug": "galerien-slider", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Atelierwand eines Antwerpener Modelabels: native grid-lanes mit Rückfall auf JS-Masonry, umschaltbar gegen CSS-Spalten und Raster, Spuren und kürzeste Spur sichtbar.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": null, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "flip-zustandswechsel", "testimonials-neu-gedacht", "unendliche-leinwand-galerie" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "gastro-warm-appetitlich", "fotograf-film-bild-zuerst", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo" }, { "id": "raster-zu-wischreihe", "name": "Raster am Desktop, Wischreihe am Telefon", "kategorie_slug": "galerien-slider", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Leistungen eines Bremer SHK-Betriebs und zwölf Getriebe-Baureihen als ruhiges Raster, das per Container-Query zur Wischreihe wird; Karussell-Rollen, Pfeile und Marker gibt es nur im schmalen Zustand.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 400, "kombinierbar_mit": [ "css-native-karussell", "karussell-steuerung", "reading-flow-reihenfolge", "leistungsseite-antwort-zuerst", "team-ueber-mich-layout", "fluide-typo-clamp-cqi" ], "in_rezepten": [ "praxis-gesundheit-ruhig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "einreihig", "name": "Einreihig", "url": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=einreihig" }, { "id": "zweireihig", "name": "Zweireihig", "url": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=zweireihig" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo" }, { "id": "tiefenflug-galerie", "name": "Tiefenflug-Galerie", "kategorie_slug": "galerien-slider", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "filmisch", "experimentell" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ausstellungsarchiv einer Iserlohner Kunsthalle als Gang durch die Tiefe: Beim Scrollen kommt eine Ausstellung nach der anderen nach vorn, eine Leiste nennt Sparte, Datum und Zähler.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "css-view-reveal-nativ", "galerie-shared-element-vollbild", "scroll-fortschritt", "scrollspy-kapitelnavigation", "token-swiss-knackig" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "flug", "name": "Flug (Querformat links/rechts)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/demo?v=flug" }, { "id": "achse", "name": "Achse (Hochformat auf der Mitte)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/demo?v=achse" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/demo" }, { "id": "slideshow-innere-gegenparallaxe", "name": "Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Der Rahmen schiebt sich aus dem Bild, sein Inhalt läuft um 30 % dagegen: Fünf Ansichten eines Hotels am See wechseln wie Filmschnitte.", "kurve": "cubic-bezier(0.83, 0, 0.17, 1)", "dauer_ms": 1500, "kombinierbar_mit": [ "shader-uebergang-dissolve", "token-kinetisch-inout", "token-editorial-langsam" ], "in_rezepten": [ "boutique-hotel-gastgeber", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Vollbild mit Rad (Hotel am Seehafen)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=basis" }, { "id": "hero", "name": "Foto-Hero ohne Autoplay (Gasthaus am See)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=hero" }, { "id": "ueberblenden", "name": "Ruhige Überblendung (Weingut, fünf Lagen)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=ueberblenden" }, { "id": "tageslauf", "name": "Tageslauf mit Uhrzeiten (Gästehaus am See)", "url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=tageslauf" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo" }, { "id": "endlos-scroll-galerie", "name": "Endlose Scroll-Galerie mit Tiefenparallaxe", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "experimentell" ], "technik_gruppen": [ "css", "js", "gsap", "lenis" ], "kurz": "Archivseite einer Mannheimer Fotografin ohne Seitenende: vier Spalten laufen mit eigener Geschwindigkeit und eigener Trägheit, der Footer bleibt fest erreichbar.", "kurve": "cubic-bezier(0.455, 0.03, 0.515, 0.955)", "dauer_ms": 1200, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "token-physik-traege", "token-luxus-weich" ], "in_rezepten": [ "fotograf-film-bild-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/demo" }, { "id": "flick-karten-stapel", "name": "Karten-Stapel und Fächer zum Wegschnippen", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap" ], "kurz": "Probelektion einer Würzburger Weinschule als Lernkarten: oberste Karte nach rechts wischen heißt gemerkt, sie landet federnd hinten im Stapel; als Fächer mit mittiger Karte.", "kurve": "cubic-bezier(0.5, 1, 0.89, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "token-federnd-verspielt", "token-studio-signatur" ], "in_rezepten": [ "friseur-salon-handschrift" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/demo" }, { "id": "kuppel-kugel-galerie", "name": "Kuppel- und Kugel-Galerie", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "hoch", "stimmung": [ "filmisch", "verspielt", "experimentell" ], "technik_gruppen": [ "css", "gsap", "webgl" ], "kurz": "Das Winterprogramm eines Kulturhauses als Kuppel zum Umsehen oder als Globus: ziehen mit Trägheit, Klick fährt die Kamera an das Plakat und öffnet Termin und Tickets.", "kurve": "cubic-bezier(0.76, 0, 0.24, 1)", "dauer_ms": 1000, "kombinierbar_mit": [ "unendliche-leinwand-galerie", "token-physik-traege" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/demo" }, { "id": "radial-bogen-slider", "name": "Radial- und Bogen-Slider (Karten auf Kreisbahn)", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Uhrenkarten liegen auf einem großen Kreis, dessen Mitte weit unter der Bühne sitzt: Man zieht den Bogen, er rastet auf der obersten Karte ein.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "flick-karten-stapel", "token-federnd-verspielt" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/radial-bogen-slider/demo" }, { "id": "vorher-nachher-vergleichsregler", "name": "Vorher-Nachher-Vergleichsregler", "kategorie_slug": "galerien-slider", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Zwei deckungsgleiche Bilder übereinander, ein Griff teilt sie: Man prüft den Unterschied selbst, statt ihn behauptet zu bekommen.", "kurve": "cubic-bezier(0.5, 0.1, 0.2, 1)", "dauer_ms": 350, "kombinierbar_mit": [ "case-study-geruest", "cursor-masken-reveal", "galerie-shared-element-vollbild", "graustufen-zu-farbe" ], "in_rezepten": [ "handwerk-werkstatt-klartext" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/demo" }, { "id": "karten-faecher-container", "name": "Kartenfächer nach Containerbreite", "kategorie_slug": "galerien-slider", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "experimentell" ], "technik_gruppen": [ "css" ], "kurz": "Sieben Stoffmuster liegen im schmalen Container als Stapel und fächern sich ohne Breakpoint und ohne Skript zu Bogen, Reihe oder Halbkreis auf.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "gestaffelte-einblendung", "fluide-typo-clamp-cqi", "flick-karten-stapel", "css-native-karussell" ], "in_rezepten": [ "mode-beauty-kollektion" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bogen", "name": "Bogen", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=bogen" }, { "id": "facher-gerade", "name": "Gerade Reihe", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=facher-gerade" }, { "id": "kreis", "name": "Halbkreis", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo?v=kreis" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo" }, { "id": "karussell-karten-verformen", "name": "Karussell mit verformten Karten", "kategorie_slug": "galerien-slider", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "hoch", "stimmung": [ "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "js", "webgl" ], "kurz": "Arbeiten eines Ludwigshafener Studios als Karussell: die Karte in der Mitte liegt flach, die Nachbarn biegen sich weg, schlagen beim Ziehen Wellen oder rollen sich vom Rand her ein.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "drag-slider-traegheit-loop", "kontextueller-cursor", "token-editorial-langsam", "schrift-hero-viewportbreit" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "biegen", "name": "Biegen", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo?v=biegen" }, { "id": "welle", "name": "Welle nach Tempo", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo?v=welle" }, { "id": "rollen", "name": "Rollen", "url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo?v=rollen" } ], "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/meta.json", "detail": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/", "demo_url": "https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo" }, { "id": "footer-cta-riesen-wortmarke", "name": "Abschluss-Footer mit großem CTA und Riesen-Wortmarke", "kategorie_slug": "footer", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut", "warm" ], "technik_gruppen": [ "css", "js", "gsap", "canvas" ], "kurz": "Großer Abschluss mit direkter Ansprache, E-Mail zum Kopieren und randloser, unten angeschnittener Wortmarke, die sich aufbaut, aufgedeckt wird oder dem Zeiger folgt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1000, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "marquee-laufband", "blueprint-raster-sichtbar", "footer-reveal", "interaktiver-physik-footer", "studio-visitenkarte-footer", "live-uhr-und-standort" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/", "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/demo" }, { "id": "footer-reveal", "name": "Footer-Reveal (Footer liegt unter der Seite)", "kategorie_slug": "footer", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös", "filmisch" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Die Seite hebt sich am Ende wie ein Vorhang und legt einen Footer frei, der schon darunter liegt.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": null, "kombinierbar_mit": [ "footer-cta-riesen-wortmarke", "footer-3d-buehne", "section-overlap-uebergang", "marquee-laufband" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/footer/footer-reveal/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/footer-reveal/", "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-reveal/demo" }, { "id": "mega-footer-sitemap", "name": "Mega-Footer mit Sitemap und Utility-Leiste", "kategorie_slug": "footer", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Mega-Footer mit Sitemap-Spalten, CTA-Streifen und Utility-Leiste (Status, Theme, Sprache, Cookies), der unter 640 px Containerbreite zum Akkordeon wird.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "footer-cta-riesen-wortmarke", "theme-umschalter-view-transition" ], "in_rezepten": [ "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "fitness-studio-rhythmus", "industrie-b2b-mittelstand", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/", "demo_url": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo" }, { "id": "studio-visitenkarte-footer", "name": "Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)", "kategorie_slug": "footer", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Footer als Visitenkarte einer Interaction-Designerin aus Hannover: Kontakt-Tabs mit rollender E-Mail und Kopier-Rückmeldung, Adresse, Ortszeit je Standort und Ausgabe-Zeile.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "live-uhr-und-standort", "footer-cta-riesen-wortmarke", "mega-footer-sitemap" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "friseur-salon-handschrift", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Stille Visitenkarte", "url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis" }, { "id": "praxis", "name": "Praxis mit Sprechzeiten und Anfahrt", "url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis" }, { "id": "buehne", "name": "Studio-Bühne mit Riesen-Wortmarke", "url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=buehne" }, { "id": "gastgeber", "name": "Gastgeber (Hotel am See)", "url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber" } ], "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/", "demo_url": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo" }, { "id": "footer-newsletter-mit-persoenlichkeit", "name": "Newsletter-Modul mit Persönlichkeit", "kategorie_slug": "footer", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Die „Maschenpost“ einer Flensburger Strickmarke: benannter Newsletter mit konkretem Vorteil, Knopf „Anschlagen“, Status-Roll und einer Maschenreihe als Bestätigung.", "kurve": "cubic-bezier(0, 0, 0.58, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "mega-footer-sitemap", "studio-visitenkarte-footer" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "mode-beauty-kollektion", "kultur-programm-haltung", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "musik-kuenstler-buehne", "arbeitgeber-karriere", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Shop mit Markenstimme", "url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis" }, { "id": "kultur", "name": "Wochenzettel mit Programmauswahl", "url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur" }, { "id": "saison", "name": "Saisonbrief im Gastro-Footer", "url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison" } ], "meta": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/", "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo" }, { "id": "interaktiver-physik-footer", "name": "Interaktiver Physik-Footer", "kategorie_slug": "footer", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "präzise", "verspielt", "laut" ], "technik_gruppen": [ "js", "canvas" ], "kurz": "Die Lernziele eines Jenaer Python-Kurses fallen als Pillen in den Footer, stapeln sich und lassen sich greifen, werfen und anschubsen. Eigene kleine Physik ohne Bibliothek.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "footer-cta-riesen-wortmarke" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/", "demo_url": "https://cecodesign.de/lab/fundus/footer/interaktiver-physik-footer/demo" }, { "id": "footer-3d-buehne", "name": "Footer als 3D-/Shader-Bühne", "kategorie_slug": "footer", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "hoch", "stimmung": [ "präzise", "luxuriös", "filmisch" ], "technik_gruppen": [ "js", "webgl" ], "kurz": "Bleilettern aus three.js als Schlussbühne eines Mainzer Studios: eine Letter folgt dem Zeiger, die ganze Wortmarke steht spiegelverkehrt im Satz oder zerfällt in Partikel.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "footer-reveal", "footer-cta-riesen-wortmarke" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/", "demo_url": "https://cecodesign.de/lab/fundus/footer/footer-3d-buehne/demo" }, { "id": "kolophon-footer", "name": "Kolophon: Schriften, Bildnachweis, Stand, Gewicht", "kategorie_slug": "footer", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Footer eines Studios mit der ruhigen Zeile „Stand 3. November 2026 · Kolophon“; dahinter eine Kolophon-Seite mit Schriftmustern, benannten Farben, Bildnachweis je Bild und gemessenem Seitengewicht ohne CO2-Wert.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "mega-footer-sitemap", "studio-visitenkarte-footer", "footer-cta-riesen-wortmarke", "firmendaten-strukturiert", "barrierefreiheit-seite" ], "in_rezepten": [ "architektur-ruhiges-raster", "kreativstudio-buehne", "fotograf-film-bild-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zeile", "name": "Zeile im Footer", "url": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo?v=zeile" }, { "id": "seite", "name": "Kolophon-Seite", "url": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo?v=seite" }, { "id": "gewicht", "name": "Gemessenes Seitengewicht", "url": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo?v=gewicht" } ], "meta": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/meta.json", "detail": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/", "demo_url": "https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo" }, { "id": "token-editorial-langsam", "name": "Animationsstil „Editorial langsam“", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Fallstudie eines Designstudios: Zeilen steigen aus Masken, das Bild deckt sich auf und sinkt von 1,1 auf 1, alles mit expo.out und langer, weicher Landung.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "slideshow-innere-gegenparallaxe", "galerie-shared-element-vollbild", "unendliche-leinwand-galerie" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo" }, { "id": "token-federnd-verspielt", "name": "Animationsstil „Federnd verspielt“", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "gsap", "andere" ], "kurz": "Stickerkarten landen mit Überschwingen, Reiter, Schalter und Knöpfe federn nach; gezogene Karten schwingen per Federphysik zurück.", "kurve": "cubic-bezier(0.34, 1.56, 0.64, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "flick-karten-stapel", "radial-bogen-slider", "3d-karussell-zylinder", "druck-feedback", "toggle-switch", "einblenden-starting-style", "gleitender-indikator" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "kurs-coaching-lernweg", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/demo" }, { "id": "token-kinetisch-inout", "name": "Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "luxuriös", "filmisch", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Projekt-Slideshow eines Designstudios: Rahmen fährt 100 %, das Bild darin 30 % gegenläufig, Buchstaben tauschen zufällig versetzt, alles mit einer power4.inOut-Kurve.", "kurve": "cubic-bezier(0.83, 0, 0.17, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "slideshow-innere-gegenparallaxe", "shader-uebergang-dissolve", "galerie-shared-element-vollbild" ], "in_rezepten": [ "fotograf-film-bild-zuerst", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo" }, { "id": "token-physik-traege", "name": "Animationsstil „Physik träge“ (Lerp, Trägheit, Geschwindigkeit)", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "verspielt" ], "technik_gruppen": [ "js", "gsap", "lenis" ], "kurz": "Ein Arbeitsstreifen mit Masse: Er folgt Zeiger, Rad und Finger per Lerp, Feder oder quickTo, neigt und spreizt sich mit dem Tempo und gleitet nach dem Wurf aus.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 600, "kombinierbar_mit": [ "drag-slider-traegheit-loop", "unendliche-leinwand-galerie", "3d-karussell-zylinder", "endlos-scroll-galerie" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-physik-traege/demo" }, { "id": "token-studio-signatur", "name": "Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "luxuriös", "laut" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Studio-Startseite, auf der Button, Slider, Akkordeon und Menü dieselbe eigene Kurve cubic-bezier(0.625, 0.05, 0, 1) mit krummen Dauern teilen; umschaltbar auf zwei weitere gemessene Hauskurven.", "kurve": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "drag-slider-traegheit-loop", "akkordeon-panels", "flick-karten-stapel" ], "in_rezepten": [ "friseur-salon-handschrift", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/demo" }, { "id": "token-toggle-asymmetrisch", "name": "Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "luxuriös" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Ein Mega-Menü öffnet mit Ausklang in 1,1 s und schließt mit Anlauf-Kurve in zwei Dritteln der Zeit, ohne wie zurückgespult zu wirken.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "galerie-shared-element-vollbild", "akkordeon-panels", "token-studio-signatur", "akkordeon-hoehe-auto", "einblenden-starting-style", "token-federnd-verspielt" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "luxus-manufaktur-stille", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "pflege-dienst-naehe", "musik-kuenstler-buehne", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo" }, { "id": "token-tech-praezise", "name": "Animationsstil „Tech präzise“ (Produkt-UI)", "kategorie_slug": "animationsstile", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Produkt-UI einer Saarbrücker Beleg-Software: Panel, Reiter, Buchen und Toast laufen exakt auf den Carbon-Token, ein Protokoll zeigt jede Bewegung mit Dauer und Kurve.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 70, "kombinierbar_mit": [ "css-native-karussell", "flip-zustandswechsel" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "freelancer-stille-visitenkarte", "saas-produkt-praezise", "praxis-gesundheit-ruhig", "fitness-studio-rhythmus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo" }, { "id": "token-luxus-weich", "name": "Animationsstil „Luxus weich“", "kategorie_slug": "animationsstile", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "luxuriös" ], "technik_gruppen": [ "css", "gsap", "lenis" ], "kurz": "Hero eines Kitzbüheler Boutique-Hotels: Bildwechsel als Crossfade mit Blur, einmaliges Zurückskalieren oder Maske, alles in sine-Kurven mit langen Dauern; darunter Zimmer, die per Scroll durch eine Sinus-Kurve erscheinen.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "endlos-scroll-galerie", "akkordeon-panels", "galerie-shared-element-vollbild" ], "in_rezepten": [ "boutique-hotel-gastgeber", "mode-beauty-kollektion", "bestattung-wuerdig", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo" }, { "id": "token-swiss-knackig", "name": "Animationsstil „Swiss knackig“", "kategorie_slug": "animationsstile", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Programmseite eines Luzerner Kulturhauses: harte Masken, nur senkrechte oder waagerechte Wege, eine Kurve und vier Dauern als Token.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "flip-zustandswechsel", "css-native-karussell" ], "in_rezepten": [ "architektur-ruhiges-raster", "kultur-programm-haltung", "kanzlei-beratung-souveraen", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo" }, { "id": "token-brutal-hart", "name": "Animationsstil „Brutal hart“", "kategorie_slug": "animationsstile", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut", "experimentell" ], "technik_gruppen": [ "css", "gsap" ], "kurz": "Keine Kurve, nur Takt: Zeichen tippen im 40-ms-Raster, ein Verschluss fährt in 32 Stufen, das Bild rendert in sechs Pixelstufen.", "kurve": "cubic-bezier(0, 0, 1, 1)", "dauer_ms": 180, "kombinierbar_mit": [ "token-tech-praezise", "shader-uebergang-dissolve" ], "in_rezepten": [ "fitness-studio-rhythmus", "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/demo" }, { "id": "token-filmisch-shader", "name": "Animationsstil „Shader linear“ (Zeit linear, Form im Material)", "kategorie_slug": "animationsstile", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "hoch", "stimmung": [ "filmisch", "warm", "experimentell" ], "technik_gruppen": [ "gsap", "webgl" ], "kurz": "Showreel-Standbilder einer Ludwigsburger Kamerafrau: uProgress läuft linear, jeder Pixel blendet mit eigenem smoothstep-Fenster über, versetzt nach Helligkeit, Rauschen oder Abstand zum Klick; scrubbar und umkehrbar.", "kurve": "cubic-bezier(0.37, 0, 0.63, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "shader-uebergang-dissolve", "token-kinetisch-inout" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/token-filmisch-shader/demo" }, { "id": "generatives-markenzeichen", "name": "Generatives Markenzeichen", "kategorie_slug": "animationsstile", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut", "experimentell" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Das Zeichen eines Kemptener Studios entsteht live aus Regeln: Die Öffnung im Ring folgt der Sonne, der Wochentag schneidet, ein Wort gibt Ringe und Weite vor, ein Zufallswert pro Besuch kommt aus CSS random() oder JS mit Saat.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "logo-aufbau-intro", "footer-cta-riesen-wortmarke", "token-studio-signatur", "collage-scrapbook" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "tag", "name": "Tag und Woche", "url": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo?v=tag" }, { "id": "team", "name": "Team-Karten", "url": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo?v=team" } ], "meta": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/meta.json", "detail": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/", "demo_url": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo" }, { "id": "lesesatz-text-wrap", "name": "Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty", "kategorie_slug": "typo-techniken", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial" ], "technik_gruppen": [ "css" ], "kurz": "Lauftext auf 64ch, 17–19px und 1.6 Zeilenhöhe begrenzt; Headlines mit text-wrap: balance, Absätze mit text-wrap: pretty. Die Demo misst live mit.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "editorial-magazin-layout" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "freelancer-stille-visitenkarte", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo" }, { "id": "text-box-trim", "name": "Optisch exakte Textabstände mit text-box-trim / text-box-edge", "kategorie_slug": "typo-techniken", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Ein Token text-box: trim-both cap alphabetic schneidet den unsichtbaren Leerraum über der Versalhöhe und unter der Grundlinie ab: Abstände stimmen sichtbar, Labels sitzen mittig.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "headline-laufweite-zeilenabstand", "blueprint-raster-sichtbar", "schrift-hero-viewportbreit", "button-zustaende", "fluide-typo-clamp-cqi" ], "in_rezepten": [ "architektur-ruhiges-raster", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "luxus-manufaktur-stille", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo" }, { "id": "fluide-typo-clamp-cqi", "name": "Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten", "kategorie_slug": "typo-techniken", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Eine Studio-Seite in einem ziehbaren Rahmen: Headline, Lead, Kartentitel und Wortmarke wachsen stufenlos mit, Karten richten ihre Titel nach der eigenen Breite.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "text-box-trim", "lesesatz-text-wrap", "eine-familie-wenig-gewichte", "bento-grid-interaktiv" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "boutique-hotel-gastgeber", "kreativstudio-buehne", "kultur-programm-haltung", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "basis", "name": "Fließende Schrift mit clamp() und cqi", "url": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo?v=basis" }, { "id": "zustaende-progress", "name": "Fließende Zustände mit progress()", "url": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo?v=zustaende-progress" } ], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo" }, { "id": "eine-familie-wenig-gewichte", "name": "Eine Familie, wenige Gewichte (Hierarchie über Größe)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Startseite eines Innsbrucker Architekturbüros in einer Familie: Hierarchie entsteht über Größe, Betonung über Kursiv, eine Gegenprobe zeigt dieselbe Seite mit fünf Gewichten.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "blueprint-raster-sichtbar" ], "in_rezepten": [ "architektur-ruhiges-raster", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "saas-produkt-praezise", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo" }, { "id": "gemischte-schnitte-zeile", "name": "Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "luxuriös", "laut" ], "technik_gruppen": [ "css" ], "kurz": "Ein Wort in Kursiv-Serif mitten im Grotesk-Satz: die leise Stimme einer Seite, sauber auf x-Höhe und Laufweite angeglichen.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 120, "kombinierbar_mit": [ "editorial-magazin-layout", "schrift-hero-viewportbreit" ], "in_rezepten": [ "freelancer-stille-visitenkarte" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/gemischte-schnitte-zeile/demo" }, { "id": "headline-laufweite-zeilenabstand", "name": "Enge Laufweite und Zeilenabstand bei riesigen Headlines", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut" ], "technik_gruppen": [ "css" ], "kurz": "Große Headlines brauchen engere Laufweite und knapperen Zeilenabstand: je größer die Schrift, desto stärker, als Formel an die Größe gekoppelt.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 900, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "split-mask-reveal" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "kreativstudio-buehne", "kultur-programm-haltung", "saas-produkt-praezise", "friseur-salon-handschrift", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "arbeitgeber-karriere", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo" }, { "id": "mono-labels-versal", "name": "Mono als Label- und Metaschrift (kleine Versalien)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Projektblatt eines Chemnitzer Architekturbüros, auf dem ein einziges Mono-Token alle Labels trägt: Navigation, Rubriken, Projektdaten, Planbeschriftung, Werkverzeichnis und Visitenkarte.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "meta-labels-hud-typografie", "scramble-decode" ], "in_rezepten": [ "kreativstudio-buehne", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "saas-produkt-praezise", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo" }, { "id": "optische-groessen-opsz", "name": "Optische Größen nutzen (opsz-Achse)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css" ], "kurz": "Neuheitenseite einer Hanauer Uhrenmanufaktur in einer einzigen Bodoni Moda: Titel mit Haarstrichen, Gravur auf dem Zifferblatt robust, gesteuert über die opsz-Achse.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "editorial-magazin-layout" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo" }, { "id": "serif-grotesk-duotone", "name": "Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "laut", "warm" ], "technik_gruppen": [ "css" ], "kurz": "Startseite einer Bremer Kanzlei mit drei klar verteilten Stimmen: Newsreader für Titel und Zitate, Schibsted Grotesk für Text und Bedienung, DM Mono für Daten und Labels; ein Knopf färbt jedes Element nach seiner Schrift.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "editorial-magazin-layout" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kanzlei-beratung-souveraen", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo" }, { "id": "tabellenziffern", "name": "Tabellenziffern für Preis- und Datenblöcke", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Kostenseite einer Konstanzer Physiopraxis: Preise, Sprechzeiten und ein Serienrechner mit Tabellenziffern, die Kommas stehen untereinander und die Summe zappelt nicht.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "zahlen-odometer", "preis-section-editorial" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "kanzlei-beratung-souveraen", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "verein-nonprofit-wirkung", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo" }, { "id": "versal-kondensiert-fit-to-width", "name": "Kondensierte Versal-Headlines auf volle Breite (fit-to-width)", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "laut" ], "technik_gruppen": [ "css" ], "kurz": "Mission eines Bochumer Schwimmvereins in Big Shoulders: jede Versalzeile füllt die volle Breite, über die Schriftgröße je Zeile oder über die Breitenachse von Archivo.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "schrift-hero-viewportbreit" ], "in_rezepten": [ "kreativstudio-buehne", "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo" }, { "id": "initial-letter-initialen", "name": "Echte Initialen mit initial-letter", "kategorie_slug": "typo-techniken", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "luxuriös" ], "technik_gruppen": [ "css" ], "kurz": "Eine echte Initiale, die der Browser selbst auf das Zeilenraster setzt: oben bündig mit der Versalhöhe, unten auf der Grundlinie der dritten Zeile.", "kurve": "cubic-bezier(0.4, 0, 0.22, 1)", "dauer_ms": 125, "kombinierbar_mit": [ "editorial-magazin-layout", "lesesatz-text-wrap", "serif-grotesk-duotone", "optische-groessen-opsz", "case-study-geruest" ], "in_rezepten": [ "kanzlei-beratung-souveraen" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/demo" }, { "id": "text-um-form", "name": "Text fließt um eine bewegte Form (Experiment)", "kategorie_slug": "typo-techniken", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "editorial", "experimentell" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Ein Ausstellungstext umfließt eine wandernde, ziehbare Skulptur-Form: Pretext bricht jede Zeile pro Bild neu um, ruhende Form mit shape-outside als Fallback.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "editorial-magazin-layout", "lesesatz-text-wrap", "initial-letter-initialen", "schrift-hero-viewportbreit" ], "in_rezepten": [ "kultur-programm-haltung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "pretext", "name": "Live-Umfluss mit Pretext", "url": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo?v=pretext" }, { "id": "css", "name": "Ruhende Form mit shape-outside", "url": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo?v=css" } ], "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/meta.json", "detail": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/", "demo_url": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo" }, { "id": "bewertungen-verteilung", "name": "Bewertungen mit Sternverteilung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Durchschnitt und Sternverteilung, deren Balken die Liste filtern, mit Reiseart, Sortierung, Antwort des Hauses und sichtbarem Echtheitshinweis.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "testimonials-neu-gedacht", "token-toggle-asymmetrisch", "gleitender-indikator", "tabellenziffern", "zahlen-odometer" ], "in_rezepten": [ "boutique-hotel-gastgeber", "mode-beauty-kollektion", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "seitlich", "name": "Verteilung seitlich", "url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=seitlich" }, { "id": "band", "name": "Verteilung als Band", "url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo" }, { "id": "bewertungsprofil-mit-echtheitshinweis", "name": "Plattform-Bewertungen mit Echtheitshinweis", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Google- oder Plattform-Bewertungen auf der eigenen Seite: Kopfzeile mit Schnitt, Anzahl und Stand, drei Stimmen mit Antwort, Echtheitshinweis direkt daneben und Live-Ansicht nur per 2-Klick.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "karte-zwei-klick", "oeffnungszeiten-status", "bewertungen-verteilung", "testimonials-neu-gedacht", "consent-banner-gestaltet", "tabellenziffern" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "praxis-gesundheit-ruhig", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "band", "name": "Band unter dem Hero", "url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band" }, { "id": "pille", "name": "Kopfzeilen-Pille", "url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille" }, { "id": "mehrere", "name": "Mehrere Plattformen", "url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo" }, { "id": "bild-hotspots", "name": "Bild mit Markierungspunkten", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "andere" ], "kurz": "Raumbild mit vier Punkten: Jeder Punkt ist ein Popover-Invoker, die Karte mit Name, Preis und „Zum Produkt“ hängt per Anchor Positioning am Punkt und weicht am Rand aus.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "native-popover-dropdowns", "einblenden-starting-style", "produkt-kaufbox-varianten", "galerie-shared-element-vollbild", "technische-daten-produktseite" ], "in_rezepten": [ "mode-beauty-kollektion", "d2c-produkt-zuerst", "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "shop", "name": "Shop the Look", "url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop" }, { "id": "bauteil", "name": "Bauteile mit Nummern", "url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil" }, { "id": "zimmer", "name": "Zimmerausstattung", "url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=zimmer" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo" }, { "id": "buchungsleiste-datumsbereich", "name": "Buchungsleiste mit Datumsbereich", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js" ], "kurz": "Anreise und Abreise in einem Kalender mit Belegung und Mindestaufenthalt, Gäste mit Kinderalter, am Desktop als verankertes Popover, auf dem Telefon als Bottom-Sheet; Übergabe an die Engine erst nach zweitem Klick.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "cinematic-video-hero", "native-popover-dropdowns", "einblenden-starting-style", "token-toggle-asymmetrisch", "mobile-bottom-navigation", "animiertes-select", "slideshow-innere-gegenparallaxe" ], "in_rezepten": [ "boutique-hotel-gastgeber" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "leiste", "name": "Leiste unter dem Hero", "url": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=leiste" }, { "id": "zimmer", "name": "Buchungskarte auf der Zimmerseite", "url": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=zimmer" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo" }, { "id": "datei-upload-ablage", "name": "Datei-Ablage mit Vorschau und Prüfung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Schadensfoto zur Anfrage: echtes Dateifeld in einer Ablagefläche, Vorschau-Karten mit Entfernen, Fehler mit Dateiname am Feld und Verkleinern auf 2000 px im Browser.", "kurve": "cubic-bezier(0, 0, 0.38, 0.9)", "dauer_ms": 150, "kombinierbar_mit": [ "kontakt-anfrage-formular", "stellen-karriere", "mehrschritt-anfrage", "validierung-nach-interaktion", "formular-fehlerzusammenfassung", "fortschrittsring" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "kfz-werkstatt-autohaus", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "foto", "name": "Schadensfoto zur Anfrage", "url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=foto" }, { "id": "dokument", "name": "Lebenslauf als PDF", "url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=dokument" }, { "id": "kompakt-mobil", "name": "Ein Knopf und Kacheln", "url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=kompakt-mobil" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo" }, { "id": "download-center-dokumente", "name": "Download-Center für technische Dokumente", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Bibliothek mit rund 30 Dateien zu drei Baureihen: Chips mit Trefferzahl, Suche nach Artikel- oder Seriennummer, Version, Stand, Sprache und Größe an jeder Datei, dauerhafte Adressen und ältere Fassungen, die als ersetzt markiert abrufbar bleiben.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "facettenfilter-ergebnisliste", "fehlerseite-leerzustand", "button-zustaende", "kopieren-feedback", "tabs-pfeiltasten-focusgroup", "blueprint-raster-sichtbar", "tabellenziffern", "technische-daten-produktseite" ], "in_rezepten": [ "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "liste", "name": "Bibliothek", "url": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo?v=liste" }, { "id": "produkt", "name": "Produktseite", "url": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo?v=produkt" }, { "id": "typenschild", "name": "Typenschild", "url": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo?v=typenschild" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo" }, { "id": "eigener-videoplayer", "name": "Eigener Videoplayer", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "editorial", "präzise", "filmisch" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Natives video mit eigener, ruhiger Steuerung: Zeitleiste mit Vorschaubild, Lautstärke, selbst gesetzte WebVTT-Untertitel, Vollbild, Tastatur und Zustände per :playing/:paused mit Klassen als Fallback.", "kurve": "cubic-bezier(0.455, 0.03, 0.515, 0.955)", "dauer_ms": 200, "kombinierbar_mit": [ "cinematic-video-hero", "video-vorschau-hover-viewport", "galerie-shared-element-vollbild", "projektindex-hover-vorschau", "akkordeon-hoehe-auto" ], "in_rezepten": [ "kreativstudio-buehne", "fotograf-film-bild-zuerst", "kurs-coaching-lernweg", "musik-kuenstler-buehne", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "showreel", "name": "Showreel auf dunkler Bühne", "url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=showreel" }, { "id": "kapitel", "name": "Kursvideo mit Kapiteln", "url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=kapitel" }, { "id": "ambilight", "name": "Raumlicht um den Film", "url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=ambilight" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo" }, { "id": "eu-gewaehrleistungshinweis", "name": "EU-Hinweis zur Gewährleistung und Garantie-Label", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Der Ort für das amtliche EU-Label: als feste Leiste unter dem Preis, als geschachtelte Garantie-Kurzform am Produktbild mit vollem Label im Dialog und als Footer-Link auf eine schlichte Seite, jeweils mit einem Satz, der Gewährleistung und Herstellergarantie trennt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "produkt-kaufbox-varianten", "warenkorb-drawer", "mega-footer-sitemap", "widerruf-und-kuendigung-schaltflaeche", "dialog-modal-nativ" ], "in_rezepten": [ "gastro-warm-appetitlich", "mode-beauty-kollektion", "luxus-manufaktur-stille", "d2c-produkt-zuerst", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "kaufbox", "name": "Label-Leiste in der Kaufbox", "url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox" }, { "id": "garantie-label", "name": "Garantie-Label am Produktbild", "url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=garantie-label" }, { "id": "footer-seite", "name": "Footer-Link und Seite", "url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=footer-seite" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo" }, { "id": "facettenfilter-ergebnisliste", "name": "Facettenfilter mit Ergebnisliste", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Kategorieseite mit Facetten für Kategorie, Größe, Farbe und Preis, Chips der aktiven Filter, live zählender Trefferzahl und einer Liste, die sich per View Transition nur in der Position umordnet; auf dem Telefon als Bottom-Sheet.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "flip-zustandswechsel", "animiertes-select", "native-popover-dropdowns", "skeleton-shimmer", "bild-zoom-in-maske", "gestapelte-drawer-navigation", "checkbox-radio-animiert" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "mode-beauty-kollektion", "kultur-programm-haltung", "kanzlei-beratung-souveraen", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "seitenleiste", "name": "Seitenleiste", "url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=seitenleiste" }, { "id": "leiste", "name": "Filterleiste mit Popover", "url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste" }, { "id": "schublade", "name": "Schublade", "url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=schublade" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo" }, { "id": "fahrzeugbestand-feed-teaser", "name": "Fahrzeugbestand aus dem Börsen-Feed", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Fahrzeugkarten aus dem Händler-Feed mit Gesamtpreis, Steuerart, Eckdaten und der Pflichtzeile zu Verbrauch, CO₂ und CO₂-Klasse in gleicher Größe; Stand mit Uhrzeit, Feed-Lücken und Störung sauber abgefangen.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 120, "kombinierbar_mit": [ "facettenfilter-ergebnisliste", "objekt-steckbrief-expose", "kontakt-anfrage-formular", "icon-squash-stretch", "tiefen-taste-3d", "token-toggle-asymmetrisch", "sofort-navigation-vorladen", "fehlerseite-leerzustand", "finanzierung-pflichtangaben" ], "in_rezepten": [ "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "teaser", "name": "Teaser auf der Startseite", "url": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/demo?v=teaser" }, { "id": "liste", "name": "Bestandsliste mit Schnellsuche", "url": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/demo?v=liste" }, { "id": "portal", "name": "Verweis auf die Börse (ohne Feed)", "url": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/demo?v=portal" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/fahrzeugbestand-feed-teaser/demo" }, { "id": "fehlerseite-leerzustand", "name": "Fehlerseite und Leerzustände", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "404-Seite, Suche ohne Treffer und leere Bereiche mit Haltung: klare Überschrift ohne Schuld, „Meintest du“ aus Adresse oder Tippfehler, Filter-Hinweise mit Trefferzahl, Leerzustand erst nach dem Laden und mit erstem Schritt.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "skeleton-shimmer", "command-palette-und-ki-suche", "einblenden-starting-style", "like-herz-burst", "flip-zustandswechsel" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "404", "name": "Seite nicht gefunden", "url": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo?v=404" }, { "id": "keine-treffer", "name": "Suche ohne Treffer", "url": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo?v=keine-treffer" }, { "id": "leer", "name": "Leerer Kundenbereich", "url": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo?v=leer" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo" }, { "id": "finanzierung-pflichtangaben", "name": "Finanzierung mit Pflichtangaben und Warnhinweis", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Neben jeder Rate stehen effektiver Jahreszins in gleicher Größe, Sollzins, Nettodarlehen und Laufzeit, darunter als eigene Zeile „Achtung! Kreditaufnahme kostet Geld.“; das repräsentative Beispiel klappt auf, fehlende Pflichtwerte machen den Block zum markierten Platzhalter ohne Rate.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "kostenrechner-konfigurator", "fahrzeugbestand-feed-teaser", "produkt-kaufbox-varianten", "tabellenziffern", "akkordeon-hoehe-auto" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "luxus-manufaktur-stille", "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "fahrzeugkarte", "name": "Fahrzeugkarte mit Detailansicht", "url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=fahrzeugkarte" }, { "id": "kaufbox", "name": "Ratenzeile in der Kaufbox", "url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=kaufbox" }, { "id": "rechner", "name": "Ratenrechner mit Laufzeit-Regler", "url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=rechner" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo" }, { "id": "gedenkseiten-kondolenz", "name": "Traueranzeigen und Gedenkseite mit Kondolenzbuch", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Traueranzeigen mit Suche und Termin der Trauerfeier, dazu eine Gedenkseite mit .ics, Kondolenzbuch mit Freigabe, stillen Kerzen als Zahl und einem klaren Ende.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "kopieren-feedback", "tabs-pfeiltasten-focusgroup", "formular-fehlerzusammenfassung", "tabellenziffern", "facettenfilter-ergebnisliste", "fehlerseite-leerzustand" ], "in_rezepten": [ "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "liste", "name": "Traueranzeigen mit Suche", "url": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/demo?v=liste" }, { "id": "gedenkseite", "name": "Gedenkseite mit Kondolenzbuch", "url": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/demo?v=gedenkseite" }, { "id": "still", "name": "Still: ohne Kondolenzbuch", "url": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/demo?v=still" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/demo" }, { "id": "gutschein-konfigurator", "name": "Gutschein-Konfigurator", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "luxuriös", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Gutschein in drei Schritten: Betrag oder Erlebnis wählen, Karte mit Motiv und persönlichem Satz live gestalten, Zustellung festlegen, dann per URL zum Zahlungsdienst; darunter die Code-Prüfung mit Restwert.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "validierung-nach-interaktion", "checkbox-radio-animiert", "kopieren-feedback", "dialog-modal-nativ", "warenkorb-drawer", "formular-fehlerzusammenfassung", "buchungsleiste-datumsbereich" ], "in_rezepten": [ "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "friseur-salon-handschrift", "fitness-studio-rhythmus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo" }, { "id": "kostenrechner-konfigurator", "name": "Kostenrechner mit Spanne", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Fläche, Ausstattung und Optionen einstellen, die Kosten stehen sofort als ehrliche Spanne mit Aufschlüsselung da und gehen mit einem Klick als Anfrage an den Betrieb.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 280, "kombinierbar_mit": [ "kontakt-anfrage-formular", "validierung-nach-interaktion", "checkbox-radio-animiert", "tabellenziffern", "akkordeon-hoehe-auto" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "saas-produkt-praezise", "kurs-coaching-lernweg" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bad", "name": "Badsanierung", "url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad" }, { "id": "dach", "name": "Dachdämmung", "url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=dach" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo" }, { "id": "lagen-steckbrief-karte", "name": "Lagen mit Steckbrief und eigener Karte", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Lagen als Liste mit Steckbrief (Foto, Boden, Ausrichtung, Neigung, Höhe, Fläche, Sorten, Klassifikation, Weine mit Grundpreis) und als eigene SVG-Karte mit Höhenlinien und Bodenmustern; Liste und Karte markieren sich gegenseitig, jede Lage hat eine Adresse mit Rückweg zum Wein.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "wein-steckbrief-pflichtangaben", "tiefenkarten-relighting", "karte-zwei-klick", "facettenfilter-ergebnisliste", "bild-zoom-in-maske", "kontur-button-zeichnen", "tabellenziffern", "mono-labels-versal" ], "in_rezepten": [ "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "weinberg", "name": "Lagen eines Weinguts", "url": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo?v=weinberg" }, { "id": "obstwiese", "name": "Streuobstwiesen einer Brennerei", "url": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo?v=obstwiese" }, { "id": "hof", "name": "Felder und Ställe eines Hofladens", "url": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo?v=hof" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo" }, { "id": "leistungsseite-antwort-zuerst", "name": "Leistungsseite: Antwort zuerst", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Eine Leistungsseite, die mit der Antwort beginnt: Leistung und Ort als H1, darunter in drei Sätzen was, für wen, Preis, Dauer und Gebiet, danach Ablauf, Preise, Beispiel, Fragen, Ansprechperson und eine Handlung.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "prozess-timeline-wachsende-linie", "vorher-nachher-vergleichsregler", "kostenrechner-konfigurator", "mehrschritt-anfrage", "termin-buchung-zwei-klick", "mobile-bottom-navigation", "lesesatz-text-wrap", "tabellenziffern" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "handwerk", "name": "Handwerk", "url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk" }, { "id": "praxis", "name": "Praxis", "url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo" }, { "id": "mehrschritt-anfrage", "name": "Mehrschritt-Anfrage mit Zusammenfassung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js" ], "kurz": "Anmeldung in vier kurzen Schritten mit Schrittleiste, Prüfseite mit „Ändern“ vor dem Senden und Zurück ohne Datenverlust; der Schritt gleitet per View Transition, der Fokus landet auf seiner Überschrift.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 160, "kombinierbar_mit": [ "validierung-nach-interaktion", "fortschrittsring", "checkbox-radio-animiert", "animiertes-select", "button-zustaende", "kontakt-anfrage-formular", "termin-buchung-zwei-klick" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "kurs-coaching-lernweg", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "leiste", "name": "Schrittleiste", "url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste" }, { "id": "ring", "name": "Fortschrittsring", "url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=ring" }, { "id": "senkrecht", "name": "Senkrechter Stepper", "url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht" }, { "id": "plz", "name": "PLZ zuerst", "url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo" }, { "id": "objekt-steckbrief-expose", "name": "Objekt-Steckbrief im Exposé", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Exposé-Eckdaten als ruhige Tabelle mit Tabellenziffern, Pflichtangaben zum Energieausweis mit Skala A+ bis H und ein eigener SVG-Grundriss, der mit der Raumliste verbunden ist.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "split-screen-sticky-seiten", "galerie-shared-element-vollbild", "richtungsbewusste-uebergaenge", "kontakt-anfrage-formular", "karte-zwei-klick", "zahlen-fakten-section" ], "in_rezepten": [ "immobilien-diskret-hochwertig", "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "kauf", "name": "Kauf-Exposé mit Geschossen", "url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=kauf" }, { "id": "miete", "name": "Miet-Exposé", "url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=miete" }, { "id": "anzeige", "name": "Objektkarten in der Angebotsliste", "url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=anzeige" }, { "id": "fahrzeug", "name": "Fahrzeugangebot mit Pkw-EnVKV-Angaben", "url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=fahrzeug" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo" }, { "id": "oeffnungszeiten-status", "name": "Öffnungszeiten mit Live-Status", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "„Jetzt geöffnet, schließt in 40 Min.“ aus echten Zeiten mit Mittagspause, Feiertagen und Sonderzeiten, gerechnet in Europe/Berlin, ohne Layout-Sprung.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 200, "kombinierbar_mit": [ "live-uhr-und-standort", "mobile-bottom-navigation", "tabellenziffern", "native-popover-dropdowns", "termin-buchung-zwei-klick", "karte-zwei-klick", "studio-visitenkarte-footer" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "karte", "name": "Sprechzeiten-Karte", "url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte" }, { "id": "kompakt", "name": "Kopfzeile kompakt", "url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt" }, { "id": "termin", "name": "Termin nach Vereinbarung", "url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin" }, { "id": "auslastung", "name": "Auslastung jetzt", "url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=auslastung" }, { "id": "hinweisleiste", "name": "Hinweisleiste über dem Kopf", "url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo" }, { "id": "player-einbettung-zwei-klick", "name": "Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Release, Musikvideo und DJ-Set hörbar machen, ohne vorher Daten an Spotify, YouTube & Co. zu senden: Platzhalter in Player-Höhe, Laden nach Klick, Fehler mit Link nach außen, Widerruf ohne Neuladen.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "consent-banner-gestaltet", "karte-zwei-klick", "termin-buchung-zwei-klick", "eigener-videoplayer", "tourdaten-liste", "tiefen-taste-3d", "kontur-button-zeichnen", "css-native-karussell" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "release", "name": "Release mit Trackliste", "url": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo?v=release" }, { "id": "video", "name": "Musikvideo", "url": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo?v=video" }, { "id": "mix", "name": "DJ-Set mit Tracklist", "url": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo?v=mix" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo" }, { "id": "produkt-kaufbox-varianten", "name": "Kaufbox mit Farb- und Größenwahl", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Kaufbox mit echten Radio-Gruppen für Farbe und Größe, ausverkauften Größen mit „Benachrichtige mich“, Bestand und Lieferdatum, Menge und einem Knopf mit drei Zuständen; das selbst gezeichnete Produktbild wechselt mit der Farbe, auf dem Telefon bleibt eine Kaufleiste unten.", "kurve": "cubic-bezier(0, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "split-screen-sticky-seiten", "galerie-shared-element-vollbild", "akkordeon-hoehe-auto", "in-den-warenkorb-flug", "toast-stapel", "button-zustaende", "druck-feedback" ], "in_rezepten": [ "gastro-warm-appetitlich", "mode-beauty-kollektion", "luxus-manufaktur-stille", "d2c-produkt-zuerst", "musik-kuenstler-buehne", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "seite", "name": "Produktseite", "url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite" }, { "id": "kompakt", "name": "Schnellkauf", "url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo" }, { "id": "produktfinder-quiz", "name": "Produktfinder in wenigen Fragen", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Vier Fragen mit Fortschritt und Zurück, danach ein Produkt mit Begründung aus den eigenen Antworten, zwei Alternativen, Neustart und teilbarem Link.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "fortschrittsring", "checkbox-radio-animiert", "flip-zustandswechsel", "kopieren-feedback", "toast-stapel", "mono-labels-versal" ], "in_rezepten": [ "mode-beauty-kollektion", "kurs-coaching-lernweg", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "schritte", "name": "Schritt für Schritt", "url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte" }, { "id": "live", "name": "Alles auf einer Seite", "url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=live" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo" }, { "id": "programm-kalender", "name": "Programm-Kalender mit Liste und Monat", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "experimentell" ], "technik_gruppen": [ "css", "js" ], "kurz": "Programm eines Kulturhauses als Liste und Monat mit Rubrik-Filter, echter .ics-Datei je Termin, gedimmter Vergangenheit und Ausverkauft-Zustand.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "flip-zustandswechsel", "gleitender-indikator", "sticky-shrink-header", "toast-stapel" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "boutique-hotel-gastgeber", "kultur-programm-haltung", "verein-nonprofit-wirkung", "industrie-b2b-mittelstand", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "programm", "name": "Liste und Monat", "url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm" }, { "id": "tage", "name": "Tagesleiste", "url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=tage" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo" }, { "id": "raumkapazitaeten-bestuhlung", "name": "Räume mit Kapazitäten je Bestuhlung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Räume × Bestuhlung als echte Tabelle mit Fläche, Mindestgästen und Saisonmiete; ein Filter nach Gästezahl und Form markiert, was passt, und je Raum zeigt ein SVG-Plan mit Text, wie gestellt wird.", "kurve": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "termin-verfuegbarkeit-anfrage", "css-native-karussell", "vergleichstabelle-sticky", "tabs-pfeiltasten-focusgroup", "karte-zwei-klick", "mehrschritt-anfrage", "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen" ], "in_rezepten": [ "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "tabelle", "name": "Vergleichstabelle", "url": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo?v=tabelle" }, { "id": "raum", "name": "Ein Raum mit Plan", "url": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo?v=raum" }, { "id": "gelaende", "name": "Gelände als Skizze", "url": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo?v=gelaende" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo" }, { "id": "reparatur-richtpreise", "name": "Reparatur-Richtpreise und Reparaturweg", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Richtpreise typischer Reparaturen je Modellreihe als echte Tabelle (mobil Kartenliste), Ersatzteile mit Teilenummer, der Satz zur Verlängerung als Platzhalter und ein kurzer Auftrag mit Seriennummer; für Betriebe das Europäische Formular für Reparaturinformationen mit 30 Tagen Bindung und Druckansicht.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "technische-daten-produktseite", "download-center-dokumente", "kontakt-anfrage-formular", "tabellenziffern", "datei-upload-ablage" ], "in_rezepten": [ "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "hersteller", "name": "Hersteller: Richtpreise und Auftrag", "url": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=hersteller" }, { "id": "betrieb", "name": "Betrieb: Europäisches Formular als Angebot", "url": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=betrieb" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo" }, { "id": "speisekarte-editorial", "name": "Speisekarte als Editorial", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Karte als HTML-Text mit Rubriken-Tabs, Preisen in Tabellenziffern, Allergen-Kürzeln mit verankerter Erklärung, Filter nach Verträglichkeit und Druckversion.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "gleitender-indikator", "tabellenziffern", "papier-druck-textur", "native-popover-dropdowns", "serif-grotesk-duotone", "mobile-bottom-navigation" ], "in_rezepten": [ "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "friseur-salon-handschrift", "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bistro", "name": "Bistro-Tafel", "url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro" }, { "id": "menue", "name": "Fine-Dining-Menü", "url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=menue" }, { "id": "preisliste", "name": "Preisliste Dienstleistung", "url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo" }, { "id": "spendenmodul-wirkung", "name": "Spendenmodul mit Wirkungssatz", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Spenden mit Umschalter einmalig/monatlich, vier Beträgen mit Wirkungssatz, geprüftem freiem Feld, Odometer, wechselnder Strichzeichnung und Vertrauenszeile.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": 180, "kombinierbar_mit": [ "gleitender-indikator", "zahlen-odometer", "validierung-nach-interaktion", "checkbox-radio-animiert", "konfetti-erfolg" ], "in_rezepten": [ "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "formular", "name": "Einmalig oder monatlich", "url": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo?v=formular" }, { "id": "kampagne", "name": "Aktion mit Spendenziel", "url": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo?v=kampagne" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/spendenmodul-wirkung/demo" }, { "id": "standortfinder-liste", "name": "Standortfinder als Liste", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Standorte als Liste mit Öffnungsstatus; erst nach Klick auf „Meinen Standort verwenden“ oder nach PLZ-Eingabe kommen Entfernungen dazu und die Liste ordnet sich nach Nähe, die Karte lädt erst nach einem zweiten Klick.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 250, "kombinierbar_mit": [ "karte-zwei-klick", "termin-buchung-zwei-klick", "akkordeon-hoehe-auto", "toggle-switch", "flip-zustandswechsel" ], "in_rezepten": [ "gastro-warm-appetitlich", "luxus-manufaktur-stille", "praxis-gesundheit-ruhig", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "liste", "name": "Liste mit Übersicht und Karte per 2-Klick", "url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste" }, { "id": "kompakt", "name": "Nur Liste", "url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo" }, { "id": "stellen-karriere", "name": "Stellenliste mit Kurzbewerbung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Offene Stellen nach Bereich, Ort und Teilzeit filtern, die Trefferzahl zählt mit, jede Stelle klappt mit Gehaltsrahmen auf, beworben wird in einem Schritt mit Name, E-Mail und Datei.", "kurve": "cubic-bezier(0.4, 0, 0.22, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "validierung-nach-interaktion", "akkordeon-hoehe-auto", "team-ueber-mich-layout", "checkbox-radio-animiert", "toggle-switch" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "kanzlei-beratung-souveraen", "friseur-salon-handschrift", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "liste", "name": "Viele Stellen mit Filter", "url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste" }, { "id": "wenige", "name": "Wenige Stellen", "url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo" }, { "id": "stellenseite-mit-jobposting", "name": "Stellenseite mit Gehalt, Ablauf und JobPosting-Daten", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Eine Stelle als eigene Seite: Gehaltsspanne auf dem Zettel, drei Blöcke mit Zahlen, Ablauf mit Fristen, Ansprechperson und daneben die Kurzbewerbung; JobPosting-Daten aus demselben Datensatz, beim Vergeben entfernt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "stellen-karriere", "mehrschritt-anfrage", "formular-fehlerzusammenfassung", "validierung-nach-interaktion", "kopieren-feedback", "fuellung-vom-eintrittspunkt", "pfeil-icon-button", "prozess-timeline-wachsende-linie", "team-ueber-mich-layout", "footer-newsletter-mit-persoenlichkeit", "token-federnd-verspielt", "token-toggle-asymmetrisch" ], "in_rezepten": [ "arbeitgeber-karriere" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "handwerk", "name": "Handwerk mit Stundenlohn", "url": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=handwerk" }, { "id": "pflege", "name": "Pflege mit Tarif, Vollzeit und Teilzeit", "url": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=pflege" }, { "id": "ausbildung", "name": "Ausbildung mit Vergütung je Jahr", "url": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=ausbildung" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo" }, { "id": "technische-daten-produktseite", "name": "Produktseite mit technischen Daten", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Baureihe als echte Variantentabelle mit fester Kopfzeile und Artikelnummer-Spalte; Zeile wählen zieht die Maßzeichnung waagerecht auf die neue Länge, Kenndaten stehen mit Wert, Einheit und Prüfbedingung, die Anfrage übernimmt die Artikelnummer.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "tabs-pfeiltasten-focusgroup", "kopieren-feedback", "button-zustaende", "kontur-button-zeichnen", "tabellenziffern", "blueprint-raster-sichtbar", "dialog-modal-nativ", "facettenfilter-ergebnisliste", "mehrschritt-anfrage", "validierung-nach-interaktion" ], "in_rezepten": [ "industrie-b2b-mittelstand" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "baureihe", "name": "Baureihe", "url": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo?v=baureihe" }, { "id": "einzel", "name": "Einzelartikel", "url": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo?v=einzel" }, { "id": "konfiguriert", "name": "Konfiguriert", "url": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo?v=konfiguriert" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo" }, { "id": "termin-verfuegbarkeit-anfrage", "name": "Wunschtermin mit freien Terminen und Anfrage-Übergabe", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "filmisch" ], "technik_gruppen": [ "css", "js" ], "kurz": "Wunschdatum, Anlass und Gäste in einer Leiste, darunter ehrlich frei, angefragt oder vergeben als Monatstabelle mit Stand-Datum; ein Klick auf einen freien Tag übergibt alles an die Anfrage.", "kurve": "cubic-bezier(0.625, 0.05, 0, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "mehrschritt-anfrage", "raumkapazitaeten-bestuhlung", "animiertes-select", "validierung-nach-interaktion", "formular-fehlerzusammenfassung", "termin-buchung-zwei-klick", "cinematic-video-hero", "fuellung-vom-eintrittspunkt", "kontur-button-zeichnen", "sticky-shrink-header" ], "in_rezepten": [ "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "leiste", "name": "Leiste unterm Hero", "url": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo?v=leiste" }, { "id": "kalender", "name": "Monatskalender", "url": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo?v=kalender" }, { "id": "catering", "name": "Catering-Kapazität", "url": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo?v=catering" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo" }, { "id": "tourdaten-liste", "name": "Tourdaten und Termine mit Ticketstatus", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css", "js" ], "kurz": "Tourdaten als echte Liste: Datum, Stadt, Ort, Status als Wort und Ticketweg zum Anbieter, mit Verlegt, Abgesagt, Zusatzkonzert, .ics, Abo, Filter ab 15 Terminen und MusicEvent-Markup.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "facettenfilter-ergebnisliste", "kontur-button-zeichnen", "tiefen-taste-3d", "footer-newsletter-mit-persoenlichkeit", "toast-stapel", "kopieren-feedback", "fehlerseite-leerzustand" ], "in_rezepten": [ "musik-kuenstler-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "tour", "name": "Tour eines Acts", "url": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo?v=tour" }, { "id": "label", "name": "Label mit mehreren Acts", "url": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo?v=label" }, { "id": "ausstellungen", "name": "Ausstellungen", "url": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo?v=ausstellungen" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo" }, { "id": "trauerfall-sofortleiste", "name": "Trauerfall-Sofortleiste mit erster Anleitung", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise", "warm" ], "technik_gruppen": [ "css", "js" ], "kurz": "Die Nummer auf jeder Seite, dazu „Was ist jetzt zu tun?“ nach Sterbeort, eine Checkliste zum Drucken und ein Rückruf, der nur verspricht, was das Haus hält.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "tabs-pfeiltasten-focusgroup", "akkordeon-hoehe-auto", "sprunglinks-landmarken", "formular-fehlerzusammenfassung", "consent-banner-gestaltet", "oeffnungszeiten-status", "tabellenziffern", "zoom-und-textabstand-robust" ], "in_rezepten": [ "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "leiste", "name": "Leiste mit Anleitung", "url": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo?v=leiste" }, { "id": "seite", "name": "Eigene Seite „Was ist jetzt zu tun?“", "url": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo?v=seite" }, { "id": "wald", "name": "Bestattungswald: Verwaltung", "url": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo?v=wald" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo" }, { "id": "vergleichstabelle-sticky", "name": "Vergleichstabelle mit fester Kopfzeile", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Echte Tabelle mit fester Kopfzeile und erster Spalte, Monats- und Jahrespreis, hervorgehobenem Paket, „Nur Unterschiede“ und Paket-Umschalter auf dem Telefon.", "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "dauer_ms": 160, "kombinierbar_mit": [ "preis-section-editorial", "gleitender-indikator", "zahlen-odometer", "tabellenziffern", "toggle-switch", "akkordeon-hoehe-auto" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "fotograf-film-bild-zuerst", "saas-produkt-praezise", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "fitness-studio-rhythmus", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "pakete", "name": "Paketvergleich mit Abrechnungs-Umschalter", "url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete" }, { "id": "alternativen", "name": "Vergleich mit Alternativen", "url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=alternativen" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo" }, { "id": "warenkorb-drawer", "name": "Warenkorb als Seitenpanel", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "warm" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Mini-Warenkorb als natives dialog-Panel von rechts: Mengenwahl, Entfernen mit Rückgängig, Versandschwelle als Fortschritt, Leerzustand und Summe inkl. MwSt.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 400, "kombinierbar_mit": [ "in-den-warenkorb-flug", "toast-stapel", "druck-feedback", "einblenden-starting-style" ], "in_rezepten": [ "gastro-warm-appetitlich", "mode-beauty-kollektion", "d2c-produkt-zuerst", "musik-kuenstler-buehne", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "drawer", "name": "Seitenpanel", "url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer" }, { "id": "hinweis", "name": "Hinweis am Symbol", "url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=hinweis" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo" }, { "id": "wein-steckbrief-pflichtangaben", "name": "Wein-Steckbrief mit Pflichtangaben", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "editorial", "präzise", "warm" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Weinseite, deren Pflichtangaben wie ein Etikett gesetzt sind: Raster in Mono, Klappe mit Zutaten und Nährwerten je nach Herstellungsdatum, Kaufbox mit Grundpreis für Flasche, Magnum und Karton, ausgetrunkene Jahrgänge mit Nachfolger und Jugendschutz am Knopf.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "produkt-kaufbox-varianten", "facettenfilter-ergebnisliste", "warenkorb-drawer", "tabellenziffern", "mono-labels-versal", "kontur-button-zeichnen", "button-zustaende", "akkordeon-hoehe-auto" ], "in_rezepten": [ "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "wein", "name": "Stillwein mit Lage", "url": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=wein" }, { "id": "sekt", "name": "Sekt mit Herstellungsdatum", "url": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=sekt" }, { "id": "brand", "name": "Spirituose ab 18", "url": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=brand" }, { "id": "liste", "name": "Kompakte Zeile und Warenkorb", "url": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=liste" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo" }, { "id": "widerruf-und-kuendigung-schaltflaeche", "name": "Widerrufs- und Kündigungs-Button", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Widerrufs- und Kündigungs-Button als zwei getrennte, zweistufige Abläufe aus der Fußzeile, mit Pflichtfeldern, Fehlerliste und Eingangsbestätigung, dazu zwei typische Fehler zum Vergleich.", "kurve": "cubic-bezier(0, 0, 0.2, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "validierung-nach-interaktion", "formular-fehlerzusammenfassung", "button-zustaende", "mega-footer-sitemap", "mehrschritt-anfrage", "token-toggle-asymmetrisch" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "mode-beauty-kollektion", "luxus-manufaktur-stille", "saas-produkt-praezise", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "kfz-werkstatt-autohaus", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "richtig", "name": "Richtig", "url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig" }, { "id": "halteangebot", "name": "Falsch: Halteangebot und Hürden", "url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=halteangebot" }, { "id": "versteckt", "name": "Falsch: versteckter Link", "url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=versteckt" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo" }, { "id": "wochen-kursplan", "name": "Wochen-Kursplan mit Live-Status", "kategorie_slug": "sektionen", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css", "js" ], "kurz": "Wiederkehrender Wochenplan als Raster aus Tagen und Stunden, mobil mit Tages-Reitern, mit Filtern, „läuft gerade“ und „als Nächstes“ in Ortszeit, Ausfällen am Termin, Probetraining je Termin und .ics je Kurs.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": 180, "kombinierbar_mit": [ "oeffnungszeiten-status", "programm-kalender", "tabs-pfeiltasten-focusgroup", "dialog-modal-nativ", "toast-stapel", "termin-buchung-zwei-klick", "vergleichstabelle-sticky", "sticky-shrink-header" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "fitness-studio-rhythmus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "verein", "name": "Sportverein", "url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=verein" }, { "id": "studio", "name": "Yoga- und Fitnessstudio", "url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo" }, { "id": "agentenformular-webmcp", "name": "Agentenformular mit WebMCP", "kategorie_slug": "sektionen", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "experimentell" ], "technik_gruppen": [ "css", "js" ], "kurz": "Termin- und Angebotsformular eines Heizungsbauers, das Menschen normal bedienen und KI-Agenten als WebMCP-Werkzeug lesen; eine umschaltbare Agenten-Sicht zeigt Schema, Lese-Werkzeug und eine optionale llms.txt.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "mensch-maschine-umschalter", "kontakt-anfrage-formular", "validierung-nach-interaktion" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "termin", "name": "Wartungstermin", "url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=termin" }, { "id": "projekt", "name": "Projektanfrage", "url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo" }, { "id": "css-diagramm-attr", "name": "Balkendiagramm aus Datenattributen", "kategorie_slug": "sektionen", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "editorial", "präzise" ], "technik_gruppen": [ "css" ], "kurz": "Eine echte Tabelle wird zum Balkendiagramm: Die Zahl steht im Attribut, CSS rechnet die Länge, beim Einscrollen wachsen die Balken einmal auf ihren Wert.", "kurve": null, "dauer_ms": null, "kombinierbar_mit": [ "zahlen-fakten-section", "daten-scrollytelling", "fortschrittsring", "tabellenziffern", "spendenmodul-wirkung", "vergleichstabelle-sticky", "css-view-reveal-nativ" ], "in_rezepten": [ "verein-nonprofit-wirkung" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "balken", "name": "Balken neben der Zahl", "url": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=balken" }, { "id": "anteil", "name": "Gestapelter Anteil", "url": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=anteil" }, { "id": "ziel", "name": "Fortschritt zum Ziel", "url": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo?v=ziel" } ], "meta": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/meta.json", "detail": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/", "demo_url": "https://cecodesign.de/lab/fundus/sektionen/css-diagramm-attr/demo" }, { "id": "barrierefreiheit-seite", "name": "Seite „Barrierefreiheit“ als Vorlage", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Vorlage für die Seite „Barrierefreiheit“: Stand auf einen Blick, bekannte Lücken mit Ausweg, Feedback-Formular und deutlich markierte Platzhalter für alles Rechtliche.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 150, "kombinierbar_mit": [ "formular-fehlerzusammenfassung", "validierung-nach-interaktion", "scrollspy-kapitelnavigation", "akkordeon-hoehe-auto", "kontakt-anfrage-formular", "sprunglinks-landmarken", "fokus-stil-system", "zoom-und-textabstand-robust", "kontrastmodus-forced-colors" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "mode-beauty-kollektion", "kultur-programm-haltung", "luxus-manufaktur-stille", "saas-produkt-praezise", "praxis-gesundheit-ruhig", "kurs-coaching-lernweg", "d2c-produkt-zuerst", "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "musik-kuenstler-buehne", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "erklaerung", "name": "Erklärung (EU-Muster)", "url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung" }, { "id": "bfsg", "name": "Informationen nach BFSG", "url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo" }, { "id": "bewegung-pausieren-schalter", "name": "Schalter „Bewegung reduzieren“ mit Pause-Knöpfen", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein gestalteter Schalter „Bewegung reduzieren“ in der Kopfleiste hält Laufband, Bewegtbild und Karussell sofort an und merkt sich die Wahl; jedes Element hat zusätzlich seinen eigenen Pause-Knopf.", "kurve": "cubic-bezier(0.215, 0.61, 0.355, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "marquee-laufband", "css-native-karussell", "cinematic-video-hero", "toggle-switch", "logo-wand-social-proof", "token-swiss-knackig" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo" }, { "id": "dialog-modal-nativ", "name": "Natives Modal mit ", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Modale Fenster aus dem nativen : showModal(), closedby=\"any\" mit Klick-Fallback, ::backdrop und Ein- und Ausblenden per @starting-style, als Bildansicht, Bestätigung und Formular mit method=\"dialog\".", "kurve": "cubic-bezier(0.1, 0.9, 0.3, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "einblenden-starting-style", "galerie-shared-element-vollbild", "kontakt-anfrage-formular", "validierung-nach-interaktion", "button-zustaende", "token-swiss-knackig" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "bild", "name": "Bildansicht", "url": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo?v=bild" }, { "id": "bestaetigung", "name": "Bestätigung", "url": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo?v=bestaetigung" }, { "id": "formular", "name": "Formular", "url": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo?v=formular" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo" }, { "id": "firmendaten-strukturiert", "name": "Firmendaten aus einer Quelle", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Ein Datenblock firma.json erzeugt Kontaktblock und LocalBusiness-JSON-LD; ein Abgleich vergleicht sichtbaren Text und Markup und markiert jede Abweichung in allen drei Spalten.", "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": 200, "kombinierbar_mit": [ "oeffnungszeiten-status", "studio-visitenkarte-footer", "karte-zwei-klick", "standortfinder-liste", "leistungsseite-antwort-zuerst", "termin-buchung-zwei-klick", "mobile-bottom-navigation" ], "in_rezepten": [ "friseur-salon-handschrift", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zahnarzt", "name": "Zahnarztpraxis (Dentist)", "url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=zahnarzt" }, { "id": "friseur", "name": "Friseursalon (HairSalon)", "url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur" }, { "id": "werkstatt", "name": "Kfz-Werkstatt (AutoRepair)", "url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo" }, { "id": "fokus-stil-system", "name": "Fokus-Stil als Gestaltungssystem", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Tastaturfokus als Teil der Gestaltung: :focus-visible mit outline in der Markenfarbe, eigener Form für Link, Knopf, Feld und Karte, kurzem Übergang und mindestens 3:1 Kontrast, wahlweise als Doppelring oder gelbe Signalfläche.", "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)", "dauer_ms": 160, "kombinierbar_mit": [ "button-zustaende", "unterstreichung-varianten", "validierung-nach-interaktion", "kopieren-feedback", "token-tech-praezise", "theme-umschalter-view-transition" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "ring", "name": "Ring in Markenfarbe", "url": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo?v=ring" }, { "id": "doppel", "name": "Doppelring", "url": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo?v=doppel" }, { "id": "signal", "name": "Signalfläche", "url": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo?v=signal" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo" }, { "id": "formular-fehlerzusammenfassung", "name": "Fehlerzusammenfassung im Formular", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Nach dem Absenden steht oben, wie viele Angaben fehlen, mit Sprunglinks zu den Feldern; beim Korrigieren hakt sich die Liste live ab.", "kurve": "cubic-bezier(0.22, 1, 0.36, 1)", "dauer_ms": 300, "kombinierbar_mit": [ "validierung-nach-interaktion", "mehrschritt-anfrage", "kontakt-anfrage-formular", "checkbox-radio-animiert", "button-zustaende", "fokus-stil-system" ], "in_rezepten": [ "handwerk-werkstatt-klartext", "fahrschule-freundlich-buchbar", "kanzlei-beratung-souveraen", "kurs-coaching-lernweg", "verein-nonprofit-wirkung", "fitness-studio-rhythmus", "pflege-dienst-naehe", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "liste", "name": "Liste mit Sprunglinks", "url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste" }, { "id": "kompakt", "name": "Kompakt über dem Knopf", "url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo" }, { "id": "kontrastmodus-forced-colors", "name": "Kontrastmodus und contrast-color()", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Eine Farbberatungsseite, die im Windows-Kontrastmodus bedienbar bleibt: Knöpfe, Fokus und Auswahl in Systemfarben, nur Farbtöne behalten ihre Farbe, Text auf jedem Ton wählt contrast-color().", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "button-zustaende", "checkbox-radio-animiert", "theme-umschalter-view-transition", "kontakt-anfrage-formular", "validierung-nach-interaktion" ], "in_rezepten": [ "pflege-dienst-naehe" ], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo" }, { "id": "reading-flow-reihenfolge", "name": "Lesereihenfolge im Raster", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "laut" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Ein Broken Grid, bei dem Tab und Screenreader dank reading-flow so wandern, wie das Auge liest; ohne Unterstützung bleibt das Raster in HTML-Reihenfolge.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 1200, "kombinierbar_mit": [ "bento-grid-interaktiv", "broken-grid-asymmetrisch", "projektindex-hover-vorschau", "case-study-geruest", "editorial-magazin-layout", "fokus-stil-system" ], "in_rezepten": [ "kreativstudio-buehne" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zeilen", "name": "Broken Grid mit grid-rows", "url": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo?v=zeilen" }, { "id": "reihenfolge", "name": "Highlight mit reading-order", "url": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo?v=reihenfolge" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo" }, { "id": "sofort-navigation-vorladen", "name": "Sofortige Seitenwechsel durch Vorladen", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Eine Architekturseite mit echten Speculation Rules: prefetch und prerender nach 200 ms Hover, klare Ausschlüsse, Statistik erst bei prerenderingchange; ein Monitor zeigt Slots, Ausschlussgrund und Wechselzeit.", "kurve": "cubic-bezier(0.1, 0.6, 0.4, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "vt-cross-document-mpa", "vt-shared-element-morph", "sprunglinks-landmarken", "hover-absicht-timing", "projektindex-hover-vorschau", "consent-banner-gestaltet" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "empfehlung", "name": "Empfehlung: prefetch und prerender moderate", "url": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo?v=empfehlung" }, { "id": "wordpress", "name": "WordPress-Standard (vereinfacht)", "url": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo?v=wordpress" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo" }, { "id": "sprunglinks-landmarken", "name": "Sprunglinks und Landmarken", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js" ], "kurz": "Gestaltete Sprunglinks erscheinen erst beim ersten Tab und führen direkt zu Inhalt, Suche oder Spendenformular; darunter ist die Seite in benannte Landmarken gegliedert, die eine Karte sichtbar macht.", "kurve": "cubic-bezier(0.645, 0.045, 0.355, 1)", "dauer_ms": 200, "kombinierbar_mit": [ "sticky-shrink-header", "native-popover-dropdowns", "gleitender-indikator", "mega-footer-sitemap", "consent-banner-gestaltet" ], "in_rezepten": [], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "menue", "name": "Drei Ziele", "url": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo?v=menue" }, { "id": "einzeln", "name": "Nur „Zum Inhalt“", "url": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo?v=einzeln" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo" }, { "id": "tabs-pfeiltasten-focusgroup", "name": "Tabs und Segmente mit Pfeiltasten", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Reiter und Segmente sind eine Tab-Station: Pfeile, Pos1 und Ende wechseln innerhalb, nativ per focusgroup, sonst per roving tabindex.", "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "dauer_ms": 180, "kombinierbar_mit": [ "gleitender-indikator", "split-screen-sticky-seiten", "preis-section-editorial", "produkt-ui-hero-perspektiv-tilt", "akkordeon-hoehe-auto", "fokus-stil-system", "speisekarte-editorial" ], "in_rezepten": [ "gastro-warm-appetitlich", "saas-produkt-praezise", "friseur-salon-handschrift", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "kfz-werkstatt-autohaus", "bestattung-wuerdig", "eventlocation-hochzeit" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "auto", "name": "Automatisch", "url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto" }, { "id": "manuell", "name": "Manuell", "url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=manuell" }, { "id": "vertikal", "name": "Senkrecht", "url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=vertikal" } ], "meta": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo" }, { "id": "zoom-und-textabstand-robust", "name": "Zoom- und textabstandfestes Layout", "kategorie_slug": "zugang", "prioritaet": "E", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Eine Manufaktur-Seite mit Riesen-Wortmarke und Schrift-Hero, die erhöhte Textabstände und 320 px Breite ohne Abschneiden hält; daneben zeigt eine anfällige Fassung, was sonst bricht.", "kurve": "cubic-bezier(0.1, 0.6, 0.4, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "schrift-hero-viewportbreit", "fluide-typo-clamp-cqi", "footer-cta-riesen-wortmarke", "hide-on-scroll-header", "zahlen-fakten-section", "versal-kondensiert-fit-to-width" ], "in_rezepten": [ "pflege-dienst-naehe", "bestattung-wuerdig" ], "in_basis": true, "demo": true, "status": "fertig", "varianten_demo": [], "meta": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/meta.json", "detail": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/", "demo_url": "https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo" }, { "id": "button-system-uebersicht", "name": "Button-System und Übersicht", "kategorie_slug": "buttons", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Button-System eines Marburger Interface-Büros: fünf Typen, sieben Zustände, Tokens mit live gerechnetem Kontrast, eine Galerie aller 24 Button-Muster des Fundus zum Anfassen und die Zuordnung der 21 Rezepte.", "kurve": "cubic-bezier(0.2, 0, 0, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "button-zustaende", "druck-feedback", "fokus-stil-system", "glas-button", "pfeil-icon-button", "tiefen-taste-3d", "kontur-button-zeichnen", "button-gruppe-expressiv", "kontrastmodus-forced-colors" ], "in_rezepten": [], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "hell", "name": "Hell", "url": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/demo?v=hell" }, { "id": "dunkel", "name": "Dunkel", "url": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/demo?v=dunkel" }, { "id": "rezepte", "name": "Rezept-Welten", "url": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/demo?v=rezepte" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/button-system-uebersicht/demo" }, { "id": "glas-button", "name": "Glas-Button", "kategorie_slug": "buttons", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "mittel", "stimmung": [ "ruhig", "präzise", "luxuriös" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Ein Glas-Button für die eine Buchungshandlung über dem Foto: unscharfer Saum mit Lichtkante, dichter Kern unter dem Text, in Chromium mit echter Randbrechung.", "kurve": "cubic-bezier(0.4, 0, 0.2, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "liquid-glass-refraktion", "frosted-glass-erweitert", "button-zustaende", "druck-feedback", "fokus-stil-system", "buchungsleiste-datumsbereich", "token-luxus-weich", "kontrastmodus-forced-colors" ], "in_rezepten": [ "boutique-hotel-gastgeber", "mode-beauty-kollektion" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "frost", "name": "Frost", "url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=frost" }, { "id": "liquid", "name": "Liquid (Refraktion)", "url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=liquid" }, { "id": "getoent", "name": "Getönt", "url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=getoent" }, { "id": "glanz", "name": "Glanz", "url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=glanz" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/glas-button/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/glas-button/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/glas-button/demo" }, { "id": "pfeil-icon-button", "name": "Pfeil-Icon-Button", "kategorie_slug": "buttons", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "präzise" ], "technik_gruppen": [ "css", "js", "canvas" ], "kurz": "Pfeil-Pillen eines Architekturbüros, bei denen nur das Icon sich bewegt: Kreis wird Fläche, Pfeil tauscht, Stripe-Linie oder Kreis wechselt die Seite.", "kurve": "cubic-bezier(0.25, 1, 0.5, 1)", "dauer_ms": 250, "kombinierbar_mit": [ "icon-squash-stretch", "fuellung-vom-eintrittspunkt", "druck-feedback", "button-zustaende", "unterstreichung-varianten", "projektindex-hover-vorschau", "scroll-naechstes-projekt", "token-swiss-knackig" ], "in_rezepten": [ "architektur-ruhiges-raster", "immobilien-diskret-hochwertig", "gastro-warm-appetitlich", "boutique-hotel-gastgeber", "kreativstudio-buehne", "freelancer-stille-visitenkarte", "fotograf-film-bild-zuerst", "luxus-manufaktur-stille", "kanzlei-beratung-souveraen", "praxis-gesundheit-ruhig", "friseur-salon-handschrift", "pflege-dienst-naehe", "kfz-werkstatt-autohaus", "arbeitgeber-karriere", "bestattung-wuerdig" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "kreis-expand", "name": "Kreis wird Fläche", "url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=kreis-expand" }, { "id": "tausch", "name": "Pfeil-Tausch", "url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch" }, { "id": "linie", "name": "Linie (Stripe)", "url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie" }, { "id": "seitenwechsel", "name": "Seitenwechsel", "url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=seitenwechsel" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo" }, { "id": "button-gruppe-expressiv", "name": "Button-Gruppe expressiv (Toggle, Auswahl, Split)", "kategorie_slug": "buttons", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "präzise", "verspielt" ], "technik_gruppen": [ "css", "js", "andere" ], "kurz": "Verbundene Knopfgruppe nach Material 3 Expressive: Druck macht breiter und eckiger, Auswahl macht rund, der Split-Button öffnet sein Menü mit drehendem Pfeil.", "kurve": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 150, "kombinierbar_mit": [ "facettenfilter-ergebnisliste", "produkt-kaufbox-varianten", "tabs-pfeiltasten-focusgroup", "gleitender-indikator", "button-zustaende", "druck-feedback", "native-popover-dropdowns", "token-toggle-asymmetrisch", "flip-zustandswechsel", "toast-stapel" ], "in_rezepten": [ "saas-produkt-praezise", "d2c-produkt-zuerst" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "toggle", "name": "Toggle-Gruppe (Mehrfachauswahl)", "url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=toggle" }, { "id": "einzeln", "name": "Einfachauswahl (Radiogruppe)", "url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=einzeln" }, { "id": "split", "name": "Split-Button mit Menü", "url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo" }, { "id": "kontur-button-zeichnen", "name": "Kontur-Button, der sich zeichnet", "kategorie_slug": "buttons", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "leistungskosten": "niedrig", "stimmung": [ "ruhig", "luxuriös" ], "technik_gruppen": [ "css", "canvas" ], "kurz": "Ein Outline-Button, dessen Kontur sich bei Hover und Fokus einmal um ihn herum zeichnet: als Linie, als wachsende Ecken, als aufrückende Doppelkontur oder als wandernde Striche.", "kurve": "cubic-bezier(0.42, 0, 0.58, 1)", "dauer_ms": 800, "kombinierbar_mit": [ "button-zustaende", "fokus-stil-system", "unterstreichung-varianten", "svg-pfad-zeichnen-scroll", "token-toggle-asymmetrisch", "token-swiss-knackig", "kontrastmodus-forced-colors" ], "in_rezepten": [ "architektur-ruhiges-raster", "handwerk-werkstatt-klartext", "fotograf-film-bild-zuerst", "kultur-programm-haltung", "luxus-manufaktur-stille", "musik-kuenstler-buehne", "industrie-b2b-mittelstand", "eventlocation-hochzeit", "weingut-hofladen-herkunft" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "zeichnen", "name": "Linie zeichnet sich", "url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen" }, { "id": "ecken", "name": "Eckklammern schließen sich", "url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken" }, { "id": "doppel", "name": "Doppelkontur rückt auf", "url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel" }, { "id": "laufend", "name": "Gestrichelte Kontur läuft", "url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=laufend" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo" }, { "id": "tiefen-taste-3d", "name": "Tiefen-Taste (3D-Button)", "kategorie_slug": "buttons", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "leistungskosten": "niedrig", "stimmung": [ "verspielt", "laut" ], "technik_gruppen": [ "css", "js" ], "kurz": "Der Button hat sichtbare Tiefe: Hover hebt die Fläche an, Druck setzt sie fast auf. Als Stapel, harter Versatz, Keycap oder Soft-Taste mit Kontur.", "kurve": "cubic-bezier(0.3, 0.7, 0.4, 1.5)", "dauer_ms": 250, "kombinierbar_mit": [ "button-zustaende", "druck-feedback", "fokus-stil-system", "kontrastmodus-forced-colors", "token-federnd-verspielt", "token-brutal-hart", "neo-skeuomorph-taktile-ui", "termin-buchung-zwei-klick" ], "in_rezepten": [ "fahrschule-freundlich-buchbar", "kurs-coaching-lernweg", "fitness-studio-rhythmus", "musik-kuenstler-buehne", "kfz-werkstatt-autohaus" ], "in_basis": false, "demo": true, "status": "fertig", "varianten_demo": [ { "id": "stapel", "name": "Stapel aus Schatten, Kante und Front", "url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=stapel" }, { "id": "versatz-brutal", "name": "Harter Versatz (Brutalismus)", "url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=versatz-brutal" }, { "id": "keycap", "name": "Keycap mit Unterkante", "url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=keycap" }, { "id": "soft", "name": "Soft-Taste mit Kontur", "url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=soft" } ], "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json", "detail": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/", "demo_url": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo" } ] }