{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "collage-scrapbook",
 "name": "Collage-/Scrapbook-Layout",
 "name_en": "Collage / scrapbook layout",
 "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.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "warm",
  "handgemacht",
  "persönlich"
 ],
 "technik": [
  "css",
  "css-grid",
  "clip-path",
  "gsap",
  "draggable",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Bilder, Freisteller, Sticker, handschriftliche Notizen, Klebeband und Papier liegen überlappend und leicht gedreht übereinander. Das Arrangement folgt verdeckt einem Raster (z. B. 12 × 12), wirkt aber zufällig. Teile lassen sich ziehen oder bewegen sich mit unterschiedlicher Parallaxe. Beim Hover hebt sich ein Teil an: mehr Schatten, Drehung zurück auf 0.",
  "warum_es_wirkt": "Wirkt handgemacht, persönlich und analog. Ein Gegenpol zu glatten Template- und KI-Ästhetiken, der zum Spielen einlädt.",
  "wann_einsetzen": "Persönliche Portfolios, Kreative, Food, Reise, Mode, Kulturprojekte, Vereine, Kampagnen und Über-mich-Bereiche.",
  "wann_nicht": "Seriöse B2B-Kontexte, informationsdichte Seiten und Projekte ohne eigenes Material.",
  "varianten": [
   "Cutout-Collage mit clip-path-Polygonen",
   "Ziehbare Pinnwand",
   "Sticker und Notizen über Fotos",
   "Gescannte Papiertexturen und Klebeband",
   "Reise-Collage als ganze Seite"
  ],
  "umsetzung": "12 × 12-Raster (grid-template-columns und grid-template-rows: repeat(12, 1fr)), Teile überlappend per grid-area platziert, Ebenen über z-index. Freisteller per clip-path: polygon() in Prozent, damit sie mitskalieren. Drehung über eine CSS-Variable --r (etwa −6° bis 6°). Ziehen mit GSAP Draggable oder Pointer Events; die Lage nur bewusst speichern. Freisteller als WebP oder AVIF mit Alpha bzw. PNG; Schatten mit drop-shadow statt box-shadow, damit er der Form folgt. Ziehen und Drehen auf ein inneres und ein äußeres Element verteilen, sonst überschreiben sich die Transforms. Zufall aus CSS: random() ist seit Chrome 156 stabil (20.10.2026), Firefox fehlt noch. Für ein leichtes Zittern je Teil etwa rotate: calc(var(--r) + random(element-scoped, -2deg, 2deg)) in @supports (rotate: random(element-scoped, -2deg, 2deg)), sonst bleibt --r. Die Grundlage bleibt eine feste, gestaltete Drehung je Teil: Zufall bei Lage oder starker Drehung bricht das verdeckte Raster, und die Collage sähe bei jedem Besuch anders aus.",
  "mobil": "Weniger Teile und eine eigene Hochformat-Komposition mit eigenen Grid-Bereichen. Ziehen nur, wenn es das Scrollen nicht blockiert.",
  "reduzierte_bewegung": "Keine Parallaxe, die Teile stehen still.",
  "barrierefreiheit": "Dekorative Teile mit aria-hidden ausblenden und den Inhalt der Collage in einem Text beschreiben. Ziehen darf nicht die einzige Bedienung sein. Die Lesereihenfolge der Texte festlegen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Raster 12×12; Container max-width 65rem, padding 0 10 %; Parallaxe-Speed −10…10 (Default −2, Rellax)",
  "sonstiges": "Rellax wird bei prefers-reduced-motion zerstört",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2020/02/05/crafting-a-cutout-collage-layout-with-css-grid-and-clip-path/"
 },
 "kurve": {
  "bezier": [
   0.645,
   0.045,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.645, 0.045, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Traveler's Collage",
   "url": "https://www.awwwards.com/sites/travelers-collage",
   "auszeichnung": "Awwwards Honorable Mention",
   "beobachtung": "Laut Awwwards handgemachte digitale Collage aus 13 Jahren Reisen (120 Städte, 30 Länder).",
   "art": "website-ungeprueft"
  },
  {
   "seite": "La Palatine (laut Figma)",
   "url": "https://www.figma.com/resource-library/web-design-trends/",
   "auszeichnung": "",
   "beobachtung": "Figma nennt La Palatine als Beispiel für Scrapbook-Layouts mit Freisteller-Fotos und Sticker-Grafiken.",
   "art": "artikel"
  },
  {
   "seite": "Draggable Canvas – The Search for Work Happiness",
   "url": "https://www.awwwards.com/inspiration/draggable-canvas-the-search-for-work-happiness",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel ziehbare Leinwand.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "OH Architecture – Draggable Gallery",
   "url": "https://www.awwwards.com/inspiration/draggable-gallery-oh-architecture",
   "auszeichnung": "Awwwards-Element",
   "beobachtung": "Laut Titel ziehbare Galerie.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [
  {
   "titel": "Crafting a Cutout Collage Layout with CSS Grid and Clip-path (Codrops)",
   "url": "https://tympanus.net/codrops/2020/02/05/crafting-a-cutout-collage-layout-with-css-grid-and-clip-path/"
  }
 ],
 "kombinierbar_mit": [
  "broken-grid-asymmetrisch",
  "unendliche-leinwand-galerie",
  "team-ueber-mich-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/collage-scrapbook/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein live geprüfter Produktionsbeleg; Belege nur über Awwwards (nicht abrufbar). Vorschlag C."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-3.json (Kein live geprüfter Produktionsbeleg; Belege nur über Awwwards (nicht abrufbar). Vorschlag C.)",
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "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.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "CustomEase@3.15.0",
   "Flip@3.15.0",
   "Draggable@3.15.0"
  ],
  "werte": {
   "easing": "cubic-bezier(0.645, 0.045, 0.355, 1) (easeInOutCubic, CustomEase „wirkung“, gemessen bei The Ocean Cleanup)",
   "raster": "12 × 12 (grid-template-columns/rows repeat(12, minmax(0, 1fr))), Collage über die ganze Heldenfläche, Text in Spalte 1–5; mobil 6 × 8 mit aspect-ratio 3 / 4",
   "drehung_grad": "−14 bis 10 je Teil über CSS-Variable --r",
   "ankunft": "opacity 0 → 1, y −22px → 0, scale 1.08 → 1, rotation ±6° → 0, 800 ms, Versatz 90 ms",
   "variantenwechsel": "GSAP Flip 800 ms, Versatz 30 ms; Drehung gleitet per CSS-Transition rotate 800 ms mit derselben Kurve; clip-path der Freisteller 800 ms",
   "hover": "rotate → 0°, translateY −5px, Schatten drop-shadow(0 4px 4px rgba(0,20,50,.22)) drop-shadow(0 26px 34px rgba(0,20,50,.38)), 200 ms",
   "schatten_ruhe": "drop-shadow(0 2px 2px rgba(0,20,50,.25)) drop-shadow(0 14px 22px rgba(0,20,50,.3))",
   "ziehen": "Draggable type x,y, bounds .held, edgeResistance 0.7, gezogenes Teil kommt nach oben (z-index hochzählen); Lage wird beim Variantenwechsel verworfen",
   "seitenverhaeltnisse": "Foto 400/290, Polaroid 260/316, Karte 220/260 (Breite aus dem Raster)",
   "spenden_knopf": "#ffca0a mit Text #222520, 44–48px hoch, background-color 150 ms linear",
   "farben": "Marke #002e6d, helle Fläche #edf5fa, Wasser #8dbbe0, Papier #fbfaf6, Tinte #222520, Grün #3f6b4a (Stiefel), Signal #ffca0a nur für Spenden",
   "schrift": "Big Shoulders 800 versal clamp(2.75rem, 1.6rem + 5vw, 6rem)/0.95 +0.005em; Zahlen Big Shoulders 800 tabular-nums; Archivo 1.0625rem/1.6 (Protokoll mit font-stretch 75 %); Caveat 600 für Handschrift",
   "vorfuehrung_runde_ms": 11400
  },
  "ausloeser": "laden",
  "touch": "Kein Ziehen, damit das Scrollen frei bleibt; kein Hover. Die Collage steht unter dem Text als Hochformat-Komposition (6 × 8 Raster) mit fünf Teilen: Foto, Aufkleber, Polaroid, Protokoll, Notiz. Karte, Stiefel und Steckling entfallen.",
  "reduziert": "Keine Ankunft, Teile liegen sofort. Variantenwechsel ohne Flip und ohne Drehbewegung. Hover dreht ohne Transition auf 0, ohne Anheben. Ziehen per Maus bleibt möglich, weil der Nutzer es selbst auslöst.",
  "korrekturen": {
   "beschreibung": "Bilder, Freisteller, Sticker, handschriftliche Notizen, Klebeband und Papier liegen überlappend und leicht gedreht übereinander. Das Arrangement folgt verdeckt einem Raster (z. B. 12 × 12), wirkt aber zufällig. Teile lassen sich ziehen oder bewegen sich mit unterschiedlicher Parallaxe. Beim Hover hebt sich ein Teil an: mehr Schatten, Drehung zurück auf 0.",
   "warum_es_wirkt": "Wirkt handgemacht, persönlich und analog. Ein Gegenpol zu glatten Template- und KI-Ästhetiken, der zum Spielen einlädt.",
   "wann_einsetzen": "Persönliche Portfolios, Kreative, Food, Reise, Mode, Kulturprojekte, Vereine, Kampagnen und Über-mich-Bereiche.",
   "wann_nicht": "Seriöse B2B-Kontexte, informationsdichte Seiten und Projekte ohne eigenes Material.",
   "varianten": [
    "Cutout-Collage mit clip-path-Polygonen",
    "Ziehbare Pinnwand",
    "Sticker und Notizen über Fotos",
    "Gescannte Papiertexturen und Klebeband",
    "Reise-Collage als ganze Seite"
   ],
   "umsetzung": "12 × 12-Raster (grid-template-columns und grid-template-rows: repeat(12, 1fr)), Teile überlappend per grid-area platziert, Ebenen über z-index. Freisteller per clip-path: polygon() in Prozent, damit sie mitskalieren. Drehung über eine CSS-Variable --r (etwa −6° bis 6°). Ziehen mit GSAP Draggable oder Pointer Events; die Lage nur bewusst speichern. Freisteller als WebP oder AVIF mit Alpha bzw. PNG; Schatten mit drop-shadow statt box-shadow, damit er der Form folgt. Ziehen und Drehen auf ein inneres und ein äußeres Element verteilen, sonst überschreiben sich die Transforms. Zufall aus CSS: random() ist seit Chrome 156 stabil (20.10.2026), Firefox fehlt noch. Für ein leichtes Zittern je Teil etwa rotate: calc(var(--r) + random(element-scoped, -2deg, 2deg)) in @supports (rotate: random(element-scoped, -2deg, 2deg)), sonst bleibt --r. Die Grundlage bleibt eine feste, gestaltete Drehung je Teil: Zufall bei Lage oder starker Drehung bricht das verdeckte Raster, und die Collage sähe bei jedem Besuch anders aus.",
   "mobil": "Weniger Teile und eine eigene Hochformat-Komposition mit eigenen Grid-Bereichen. Ziehen nur, wenn es das Scrollen nicht blockiert.",
   "reduzierte_bewegung": "Keine Parallaxe, die Teile stehen still.",
   "barrierefreiheit": "Dekorative Teile mit aria-hidden ausblenden und den Inhalt der Collage in einem Text beschreiben. Ziehen darf nicht die einzige Bedienung sein. Die Lesereihenfolge der Texte festlegen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Flussbande Halle (Saale) e.V., der Müll aus der Saale sammelt (Big Shoulders und Archivo, Navy #002e6d, Gelb nur für Spenden; Caveat zusätzlich für Handschrift, weil das Muster Notizen verlangt). Alle Bilder sind eigene SVGs im Riso-Look: Sammeltag an der Peißnitz, Einkaufswagen aus dem Fluss, Karte der Abschnitte, Stiefel, Weidensteckling, Aufkleber und Stempel; dazu ein Sammelprotokoll als Text. Wirkungszahlen mit Stand im Text. Parallaxe bewusst weggelassen, weil das Rezept mehrschicht-parallax ausschließt; Ziehen, Hover und Flip-Wechsel zeigen das Muster. Referenzen: worksinprogress.co, grit.pictures, oatly.com, tympanus.net (Codrops-Tutorial). AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Punktleiste im Sammelprotokoll als Flex-Füller mit eigenem overflow (Name nie abgeschnitten), Spalten minmax(0, 1fr) auto (Werte jetzt ganz sichtbar); bei ≤ 360 px Notiz eine Rasterzeile höher und 15 px; .sr mit CanvasText auf Canvas; Knopf-Rahmen im Kontrastmodus. Korrektur 02.11.2026: Hinweis auf CSS random() in umsetzung ergänzt (Chrome 156 stabil seit 20.10.2026, Schlüsselwort element-scoped; Smashing Magazine, buildmvpfast.com). Demo unverändert: Drehung bleibt fest über --r."
 }
}