[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"flux-reading-de":3},[4,82,165,216],{"id":5,"title":6,"body":7,"cover":66,"date":67,"description":68,"draft":69,"extension":70,"locale":71,"meta":72,"navigation":73,"path":74,"seo":75,"stem":76,"tags":77,"__hash__":81},"blog\u002Fblog\u002Fde\u002Fshader-poetry-in-the-browser.md","Shader-Poesie im Browser",{"type":8,"value":9,"toc":60},"minimark",[10,14,19,22,37,43,47,54,57],[11,12,13],"p",{},"Ein Fragment-Shader ist das vielleicht poetischste Stück Code, das ich kenne. Er läuft für jeden einzelnen Pixel gleichzeitig, weiß nichts von seinen Nachbarn und doch entsteht aus dieser radikalen Einsamkeit ein zusammenhängendes Bild. Eine kleine Funktion, ein paar Variablen — und plötzlich fließt eine ganze Welt über den Bildschirm.",[15,16,18],"h2",{"id":17},"wenig-code-unendliche-welten","Wenig Code, unendliche Welten",[11,20,21],{},"Das Faszinierende an Shadern ist ihr Verhältnis von Aufwand zu Ergebnis. Mit einer Handvoll Zeilen Noise-Funktion, einem Farbverlauf und der Zeit als Variable lässt sich Nebel erzeugen, der nie zweimal gleich aussieht. Kein Asset, kein Video, kein Megabyte — nur Mathematik, die sich Bild für Bild neu berechnet.",[11,23,24,25,29,30,29,33,36],{},"Genau das meine ich mit Poesie. Ein Gedicht sagt mit wenigen Worten mehr, als eine Seite Prosa je könnte. Ein Shader tut dasselbe mit Code. ",[26,27,28],"code",{},"sin",", ",[26,31,32],{},"fract",[26,34,35],{},"mix",", ein bisschen Perlin-Noise — das ist das Vokabular, und die Kombinationen sind grenzenlos.",[38,39,40],"blockquote",{},[11,41,42],{},"Ein Shader ist kein Bild, das man speichert. Er ist eine Regel, nach der Schönheit immer wieder neu geboren wird.",[15,44,46],{"id":45},"zeit-als-material","Zeit als Material",[11,48,49,50,53],{},"Was Shader lebendig macht, ist die Zeit. Sobald ich ",[26,51,52],{},"u_time"," in eine Funktion gebe, hört das Bild auf, ein Standbild zu sein, und wird zu einem Fluss. Verläufe wandern, Noise verschiebt sich, Farben atmen. Diese sanfte, endlose Veränderung wirkt organisch — sie erinnert an Wasser, an Rauch, an Licht, das durch Blätter fällt.",[11,55,56],{},"In der Praxis nutze ich Shader behutsam: als ruhigen, lebenden Hintergrund, als Übergang zwischen Bildern, als Textur, die einer Fläche Tiefe gibt. Sie sollen nie schreien. Ihre Stärke ist das Unterschwellige — dieses kaum merkliche Wabern, das eine Seite warm und lebendig wirken lässt, ohne dass man sagen könnte, warum.",[11,58,59],{},"Shader zu schreiben fühlt sich für mich weniger nach Programmieren an und mehr nach Malen mit Mathematik. Man stellt eine Gleichung auf und schaut, welche Welt aus ihr hervorkommt. Manchmal ist es Chaos. Und manchmal, wenn die Zahlen stimmen, entsteht etwas, das man nicht geplant hatte und das trotzdem genau richtig ist.",{"title":61,"searchDepth":62,"depth":62,"links":63},"",2,[64,65],{"id":17,"depth":62,"text":18},{"id":45,"depth":62,"text":46},null,"2026-03-03","Fragment-Shader als Medium für generative Schönheit — über Noise, Verläufe, Zeit und wie wenige Zeilen Code unendliche Welten öffnen.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fshader-poetry-in-the-browser",{"title":6,"description":68},"blog\u002Fde\u002Fshader-poetry-in-the-browser",[78,79,80],"Shader","WebGL","Kreativität","HnxjQ7cxdApkOxHs3PllWLqQ5EVLcagQmuVHr-Qx01g",{"id":83,"title":84,"body":85,"cover":66,"date":154,"description":155,"draft":69,"extension":70,"locale":71,"meta":156,"navigation":73,"path":157,"seo":158,"stem":159,"tags":160,"__hash__":164},"blog\u002Fblog\u002Fde\u002Fscrollytelling-and-motion.md","Scrollytelling: Geschichten, die sich entfalten",{"type":8,"value":86,"toc":150},[87,90,94,97,102,105,109,112,115,147],[11,88,89],{},"Scrollen ist die natürlichste Geste im Web. Genau deshalb mag ich Scrollytelling so sehr: Es\nnimmt etwas, das ohnehin jede:r tut, und macht daraus den Takt einer Geschichte. Wenn es gut\ngemacht ist, fühlt sich Scrollen nicht wie Navigation an, sondern wie Umblättern.",[15,91,93],{"id":92},"bewegung-gehört-dem-inhalt","Bewegung gehört dem Inhalt",[11,95,96],{},"Der häufigste Fehler ist, mit Animation anzufangen. Ich fange mit der Geschichte an. Erst wenn\nich weiß, was gesagt werden soll und in welcher Reihenfolge, frage ich, welche Bewegung das\nunterstützt. Eine Grafik, die beim Scrollen Schicht für Schicht aufbaut, erklärt von selbst.\nEin Text, der ein Bild langsam freigibt, lenkt den Blick genau dorthin, wo er hingehört.",[38,98,99],{},[11,100,101],{},"Animation, die nichts erzählt, ist Dekoration. Animation, die etwas erzählt, ist Sprache.",[11,103,104],{},"Bewegung sollte eine Frage beantworten, die der Inhalt gerade aufwirft — nicht eine, die ihn\nablenkt. Sobald der Effekt lauter ist als die Aussage, habe ich zu viel gewollt.",[15,106,108],{"id":107},"rhythmus-und-zurückhaltung","Rhythmus und Zurückhaltung",[11,110,111],{},"Eine gute Scroll-Erzählung lebt vom Tempo. Es braucht ruhige Passagen, in denen nichts\npassiert, damit die bewegten Momente Gewicht bekommen. Ich denke das wie Musik: Pausen sind\nTeil der Komposition.",[11,113,114],{},"Technisch hilft mir dabei ein paar Disziplin:",[116,117,118,126,132,141],"ul",{},[119,120,121,125],"li",{},[122,123,124],"strong",{},"An den Scroll-Fortschritt binden, nicht an Zeit"," — so behält der Mensch die Kontrolle",[119,127,128,131],{},[122,129,130],{},"Sparsam mit gleichzeitiger Bewegung"," — eine Sache zur Zeit liest sich klarer",[119,133,134,140],{},[122,135,136,139],{},[26,137,138],{},"prefers-reduced-motion"," respektieren"," — die Geschichte muss auch ohne Animation funktionieren",[119,142,143,146],{},[122,144,145],{},"Beim Zurückscrollen umkehrbar bleiben",", damit nichts kaputt wirkt",[11,148,149],{},"Am Ende ist Scrollytelling für mich eine Frage der Haltung: Ich vertraue darauf, dass weniger\nBewegung, dafür die richtige, mehr bewegt. Die elegantesten Projekte sind die, bei denen am\nSchluss niemand über die Animation spricht — sondern über das, was sie verstanden haben.",{"title":61,"searchDepth":62,"depth":62,"links":151},[152,153],{"id":92,"depth":62,"text":93},{"id":107,"depth":62,"text":108},"2021-09-01","Wie scrollgesteuertes Erzählen Bewegung an Inhalt bindet — mit Rhythmus, Zurückhaltung und dem Mut, auch mal stillzustehen.",{},"\u002Fblog\u002Fde\u002Fscrollytelling-and-motion",{"title":84,"description":155},"blog\u002Fde\u002Fscrollytelling-and-motion",[161,162,163],"Motion","Design","UX","xkd703EAA5weoRmDIQJEUcBX-eHjA8XWZalqvFw-7xw",{"id":166,"title":167,"body":168,"cover":66,"date":208,"description":209,"draft":69,"extension":70,"locale":71,"meta":210,"navigation":73,"path":211,"seo":212,"stem":213,"tags":214,"__hash__":215},"blog\u002Fblog\u002Fde\u002Fmotion-that-carries-meaning.md","Bewegung, die Bedeutung trägt",{"type":8,"value":169,"toc":204},[170,173,177,180,183,188,192,195,201],[11,171,172],{},"Es gibt zwei Arten von Animation im Web. Die eine will gesehen werden — sie hüpft, blinkt und schreit „schau mich an\". Die andere will verstanden werden. Sie erklärt, beruhigt und führt, ohne dass man sie als Effekt wahrnimmt. Ich interessiere mich fast ausschließlich für die zweite.",[15,174,176],{"id":175},"bewegung-ist-sprache","Bewegung ist Sprache",[11,178,179],{},"Wenn ein Menü aufklappt, sagt mir die Art, wie es sich öffnet, woher es kommt und wohin es gehört. Ein Element, das aus dem Button hervorwächst, in dem ich gerade geklickt habe, schafft eine räumliche Logik, die mein Gehirn sofort versteht. Bewegung kann Kausalität zeigen: Das hier führte zu jenem. Genau das ist gute Choreografie — nicht Dekoration, sondern Erklärung.",[11,181,182],{},"Das Geheimnis liegt im Easing. Lineare Bewegung gibt es in der echten Welt nicht; alles beschleunigt und bremst. Eine sanfte Ease-out-Kurve fühlt sich an wie etwas, das natürlich zur Ruhe kommt. Diese eine Kurve entscheidet darüber, ob eine Animation billig oder edel wirkt.",[38,184,185],{},[11,186,187],{},"Die beste Animation bemerkt niemand. Man fühlt nur, dass sich etwas richtig angefühlt hat.",[15,189,191],{"id":190},"zurückhaltung-als-stil","Zurückhaltung als Stil",[11,193,194],{},"Mehr Bewegung ist fast nie besser. Ich frage mich bei jeder Animation: Was tut sie für den Nutzer? Hilft sie, etwas zu verstehen? Überbrückt sie eine Wartezeit? Lenkt sie sanft den Blick? Wenn die Antwort „sie sieht cool aus\" lautet, fliegt sie meistens raus.",[11,196,197,198,200],{},"Praktisch heißt das: kurze Dauern, oft zwischen 200 und 400 Millisekunden. Gestaffeltes Timing, damit Listen wie ein geordneter Atemzug erscheinen statt wie ein Schwarm. Und immer ein ",[26,199,138],{},"-Pfad, denn Eleganz schließt Rücksicht ein.",[11,202,203],{},"Choreografie ist das Wort, das ich am liebsten benutze. Eine Seite ist eine kleine Bühne, und jedes Element hat einen Einsatz. Wenn alles im richtigen Moment erscheint, in der richtigen Reihenfolge, mit der richtigen Kurve, dann entsteht etwas, das sich lebendig anfühlt — ohne unruhig zu sein. Bewegung, die Bedeutung trägt, ist Bewegung, die dient.",{"title":61,"searchDepth":62,"depth":62,"links":205},[206,207],{"id":175,"depth":62,"text":176},{"id":190,"depth":62,"text":191},"2026-02-09","Animation mit Absicht — über Easing, Choreografie und Zurückhaltung, und wie Bewegung führt, statt abzulenken.",{},"\u002Fblog\u002Fde\u002Fmotion-that-carries-meaning",{"title":167,"description":209},"blog\u002Fde\u002Fmotion-that-carries-meaning",[161,163,162],"Nb88pg8vrScOP8fsM9cu8fsFWe7nePS6uJ8MBo0hmV4",{"id":217,"title":218,"body":219,"cover":66,"date":256,"description":257,"draft":69,"extension":70,"locale":71,"meta":258,"navigation":73,"path":259,"seo":260,"stem":261,"tags":262,"__hash__":265},"blog\u002Fblog\u002Fde\u002Fgenerative-design.md","Generative Gestaltung",{"type":8,"value":220,"toc":252},[221,224,228,231,234,239,243,246,249],[11,222,223],{},"Es gibt einen Moment in der generativen Gestaltung, den ich liebe: Ich schreibe eine Regel, lasse sie laufen — und sehe etwas, das ich selbst nie von Hand entworfen hätte. Nicht weil die Maschine klüger ist, sondern weil ich ihr erlaubt habe, mich zu überraschen. Generatives Arbeiten heißt für mich, nicht das Bild zu zeichnen, sondern das System, das Bilder zeichnet.",[15,225,227],{"id":226},"regeln-statt-pinselstriche","Regeln statt Pinselstriche",[11,229,230],{},"Ich gestalte hier kein einzelnes Ergebnis, sondern einen Raum von Möglichkeiten. Ein paar Linien Code beschreiben, wie Formen wachsen, wie Farben sich verteilen, wie Linien sich überlagern. Das eigentliche Handwerk steckt im Formulieren dieser Regeln — präzise genug, dass ein Ergebnis Bestand hat, offen genug, dass jeder Durchlauf eigen bleibt.",[11,232,233],{},"Der Zufall ist dabei kein Chaos, sondern ein dosierter Mitspieler. Ein wenig Rauschen auf einer Position, eine zufällige Wahl aus einer kuratierten Palette, eine Variation der Strichstärke. Zu viel Zufall wird Matsch, zu wenig wird mechanisch. Die Kunst liegt in der Spanne dazwischen — dort, wo das Ergebnis lebendig wirkt, ohne beliebig zu sein.",[38,235,236],{},[11,237,238],{},"Ich entwerfe nicht das Bild. Ich entwerfe die Bedingungen, unter denen schöne Bilder entstehen können.",[15,240,242],{"id":241},"den-zufall-kuratieren","Den Zufall kuratieren",[11,244,245],{},"Ein System zu bauen ist die eine Hälfte. Die andere ist, hartnäckig auszusortieren. Ich lasse Hunderte Varianten laufen und betrachte sie wie ein Fotograf seine Kontaktabzüge — die meisten verwerfe ich, einige wenige treffen genau den Nerv. Das Urteil bleibt menschlich. Der Generator schlägt vor; ich entscheide, was Kunst wird und was Ausschuss.",[11,247,248],{},"Für meine Kunden bedeutet das etwas sehr Konkretes: eine Identität, die nicht aus einem starren Logo besteht, sondern aus einem lebendigen System. Ein Muster, das auf jeder Karte anders aussieht und doch immer dieselbe Handschrift trägt. Ein Heldenbild, das sich bei jedem Laden neu erfindet. Unverwechselbar, weil unendlich, und doch eindeutig, weil von denselben Regeln geboren.",[11,250,251],{},"Generative Gestaltung ist für mich die schönste Form der Zusammenarbeit mit der Maschine. Sie verlangt, dass ich loslasse, ohne die Kontrolle aufzugeben — dass ich Absicht in Regeln übersetze und dann staunen darf über das, was zurückkommt.",{"title":61,"searchDepth":62,"depth":62,"links":253},[254,255],{"id":226,"depth":62,"text":227},{"id":241,"depth":62,"text":242},"2026-04-06","Wie ich Code und Zufall als Gestaltungspartner einsetze — Regeln, die überraschende, organische und unverwechselbare Bilder hervorbringen.",{},"\u002Fblog\u002Fde\u002Fgenerative-design",{"title":218,"description":257},"blog\u002Fde\u002Fgenerative-design",[263,80,264],"Generativ","Code","ccqiFFo-U8lcJAo3Fxbk04FTsTC-EMSJd07xllyfAAg",1793626538125]