[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"flux-reading-en":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\u002Fen\u002Fshader-poetry-in-the-browser.md","Shader poetry in the browser",{"type":8,"value":9,"toc":60},"minimark",[10,14,19,22,37,43,47,54,57],[11,12,13],"p",{},"A fragment shader might be the most poetic piece of code I know. It runs for every single pixel at once, knows nothing of its neighbors, and yet out of that radical solitude a coherent image emerges. One small function, a few variables — and suddenly a whole world flows across the screen.",[15,16,18],"h2",{"id":17},"little-code-infinite-worlds","Little code, infinite worlds",[11,20,21],{},"What fascinates me about shaders is their ratio of effort to result. With a handful of lines — a noise function, a gradient, time as a variable — you can conjure fog that never looks the same twice. No asset, no video, no megabytes — just mathematics recomputing itself frame by frame.",[11,23,24,25,29,30,29,33,36],{},"That's what I mean by poetry. A poem says more with a few words than a page of prose ever could. A shader does the same with code. ",[26,27,28],"code",{},"sin",", ",[26,31,32],{},"fract",[26,34,35],{},"mix",", a little Perlin noise — that's the vocabulary, and the combinations are endless.",[38,39,40],"blockquote",{},[11,41,42],{},"A shader isn't an image you save. It's a rule by which beauty is born again and again.",[15,44,46],{"id":45},"time-as-a-material","Time as a material",[11,48,49,50,53],{},"What makes shaders feel alive is time. The moment I feed ",[26,51,52],{},"u_time"," into a function, the image stops being a still and becomes a flow. Gradients drift, noise shifts, colors breathe. That soft, endless change reads as organic — it recalls water, smoke, light falling through leaves.",[11,55,56],{},"In practice I use shaders gently: as a calm, living background, as a transition between images, as a texture that gives a surface depth. They should never shout. Their strength is the subliminal — that barely perceptible shimmer that makes a page feel warm and alive without your being able to say why.",[11,58,59],{},"Writing shaders feels less like programming to me and more like painting with mathematics. You set up an equation and watch which world emerges from it. Sometimes it's chaos. And sometimes, when the numbers are right, something appears that you never planned and that's somehow exactly right.",{"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 shaders as a medium for generative beauty — on noise, gradients, time and how a few lines of code open infinite worlds.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Fshader-poetry-in-the-browser",{"title":6,"description":68},"blog\u002Fen\u002Fshader-poetry-in-the-browser",[78,79,80],"Shaders","WebGL","Creativity","Sq7TrhmbL55IjCyOgK0vEChj-KfKBLHJUsbY0yRR0wM",{"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\u002Fen\u002Fscrollytelling-and-motion.md","Scrollytelling: stories that unfold",{"type":8,"value":86,"toc":150},[87,90,94,97,102,105,109,112,115,147],[11,88,89],{},"Scrolling is the most natural gesture on the web. That's exactly why I love scrollytelling so\nmuch: it takes something everyone already does and turns it into the rhythm of a story. When\nit's done well, scrolling doesn't feel like navigation — it feels like turning a page.",[15,91,93],{"id":92},"motion-belongs-to-the-content","Motion belongs to the content",[11,95,96],{},"The most common mistake is to start with the animation. I start with the story. Only once I know\nwhat needs to be said, and in what order, do I ask which motion supports it. A diagram that\nbuilds up layer by layer as you scroll explains itself. A passage of text that slowly reveals an\nimage guides the eye exactly where it should go.",[38,98,99],{},[11,100,101],{},"Animation that tells you nothing is decoration. Animation that tells you something is language.",[11,103,104],{},"Motion should answer a question the content is raising right now — not one that distracts from\nit. The moment the effect is louder than the point, I've reached too far.",[15,106,108],{"id":107},"rhythm-and-restraint","Rhythm and restraint",[11,110,111],{},"A good scroll narrative lives on pacing. It needs quiet stretches where nothing happens, so the\nmoving moments carry weight. I think of it like music: the rests are part of the composition.",[11,113,114],{},"Technically, a little discipline keeps me honest:",[116,117,118,126,132,141],"ul",{},[119,120,121,125],"li",{},[122,123,124],"strong",{},"Tie to scroll progress, not to time"," — that keeps the person in control",[119,127,128,131],{},[122,129,130],{},"Be sparing with simultaneous motion"," — one thing at a time reads more clearly",[119,133,134,140],{},[122,135,136,137],{},"Respect ",[26,138,139],{},"prefers-reduced-motion"," — the story must work without animation too",[119,142,143,146],{},[122,144,145],{},"Stay reversible on scroll-up",", so nothing feels broken",[11,148,149],{},"In the end, scrollytelling is a matter of attitude for me: I trust that less motion, but the\nright motion, moves people more. The most elegant projects are the ones where, afterwards,\nnobody talks about the animation — they talk about what they understood.",{"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","How scroll-driven storytelling ties motion to content — through pacing, restraint, and the courage to occasionally stand still.",{},"\u002Fblog\u002Fen\u002Fscrollytelling-and-motion",{"title":84,"description":155},"blog\u002Fen\u002Fscrollytelling-and-motion",[161,162,163],"Motion","Design","UX","DioTvmlNARZhGLDu5amP9SNdx8kNTBLuEODPrL-Ukbk",{"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\u002Fen\u002Fmotion-that-carries-meaning.md","Motion that carries meaning",{"type":8,"value":169,"toc":204},[170,173,177,180,183,188,192,195,201],[11,171,172],{},"There are two kinds of animation on the web. One wants to be seen — it bounces, blinks and shouts \"look at me.\" The other wants to be understood. It explains, reassures and guides without ever registering as an effect. I'm interested almost exclusively in the second kind.",[15,174,176],{"id":175},"motion-is-language","Motion is language",[11,178,179],{},"When a menu opens, the way it unfolds tells me where it came from and where it belongs. An element that grows out of the button I just clicked creates a spatial logic my brain understands instantly. Motion can show causality: this led to that. That's what good choreography is — not decoration but explanation.",[11,181,182],{},"The secret lives in the easing. Linear motion doesn't exist in the real world; everything accelerates and slows. A gentle ease-out curve feels like something coming naturally to rest. That single curve decides whether an animation reads as cheap or refined.",[38,184,185],{},[11,186,187],{},"The best animation goes unnoticed. You only feel that something felt right.",[15,189,191],{"id":190},"restraint-as-a-style","Restraint as a style",[11,193,194],{},"More motion is almost never better. With every animation I ask: what does it do for the user? Does it help them understand something? Bridge a wait? Gently lead the eye? If the answer is \"it looks cool,\" it usually gets cut.",[11,196,197,198,200],{},"In practice that means short durations, often between 200 and 400 milliseconds. Staggered timing so lists appear like an ordered breath instead of a swarm. And always a ",[26,199,139],{}," path, because elegance includes consideration.",[11,202,203],{},"Choreography is my favorite word for this. A page is a small stage, and every element has a cue. When everything appears at the right moment, in the right order, with the right curve, you get something that feels alive without feeling restless. Motion that carries meaning is motion that serves.",{"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 with intent — on easing, choreography and restraint, and how motion guides rather than distracts.",{},"\u002Fblog\u002Fen\u002Fmotion-that-carries-meaning",{"title":167,"description":209},"blog\u002Fen\u002Fmotion-that-carries-meaning",[161,163,162],"KukdugqZaW6U1SgeAe3ZLA_p8UNy5yKRMvoM4XxDJNA",{"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\u002Fen\u002Fgenerative-design.md","Generative design",{"type":8,"value":220,"toc":252},[221,224,228,231,234,239,243,246,249],[11,222,223],{},"There's a moment in generative design I love: I write a rule, let it run — and see something I'd never have drawn by hand. Not because the machine is smarter, but because I gave it permission to surprise me. Working generatively, for me, means not drawing the image but drawing the system that draws images.",[15,225,227],{"id":226},"rules-instead-of-brushstrokes","Rules instead of brushstrokes",[11,229,230],{},"Here I'm not designing a single outcome but a space of possibilities. A few lines of code describe how forms grow, how colors distribute, how strokes overlap. The real craft lives in phrasing those rules — precise enough that a result holds together, open enough that every run stays its own.",[11,232,233],{},"Randomness is not chaos here but a measured collaborator. A little noise on a position, a chance pick from a curated palette, a variation in stroke weight. Too much randomness turns to mush; too little turns mechanical. The art lies in the span between — where a result feels alive without feeling arbitrary.",[38,235,236],{},[11,237,238],{},"I don't design the image. I design the conditions under which beautiful images can appear.",[15,240,242],{"id":241},"curating-the-randomness","Curating the randomness",[11,244,245],{},"Building a system is one half. The other is ruthless selection. I let hundreds of variants run and look at them the way a photographer reads contact sheets — most I discard, a precious few hit exactly the right nerve. The judgment stays human. The generator proposes; I decide what becomes art and what becomes scrap.",[11,247,248],{},"For my clients this means something very concrete: an identity that isn't a rigid logo but a living system. A pattern that looks different on every card yet always carries the same handwriting. A hero image that reinvents itself on every load — unmistakable because it's infinite, and unified because it was born from the same rules.",[11,250,251],{},"Generative design is, to me, the most beautiful form of collaboration with the machine. It asks me to let go without surrendering control — to translate intent into rules and then allow myself to marvel at what comes back.",{"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","How I use code and randomness as a design partner — rules that produce surprising, organic, one-of-a-kind visuals every single run.",{},"\u002Fblog\u002Fen\u002Fgenerative-design",{"title":218,"description":257},"blog\u002Fen\u002Fgenerative-design",[263,80,264],"Generative","Code","kG-ec8t3iyIT4IVxP_jSQBSl2It9S8nAjn7qmZcoOdU",1793626538138]