[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"article-real-time-video-shader-tool-claude":3},{"page":4,"related":418},{"id":5,"title":6,"slug":7,"date":8,"_updatedAt":9,"external":10,"categories":11,"featuredMedia":16,"blocks":35,"menu":34,"foot":34,"seo":413},"fhEUSNRARvCN3tN7F_T5jw","How We Build: Where Good Taste Comes From","real-time-video-shader-tool-claude","2026-11-09","2026-11-09T19:10:56+00:00","",[12],{"id":13,"slug":14,"title":15},"MRKCA8y-RtSXQRHCBbP9Og","innovation","Innovation",{"id":17,"_createdAt":18,"alt":19,"title":10,"focalPoint":20,"width":22,"height":23,"thumbnail":24,"small":25,"medium":26,"responsiveImage":27,"video":34},"f5XEDVYdQe-zvIbon2kS-w","2026-11-09T18:14:53+00:00","Chromaflow, a browser tool for real-time video shader effects, shown on a monitor with its effects panel beside a sneaker render",{"x":21,"y":21},0.5,1200,630,"https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":28,"webpSrcSet":10,"sizes":29,"src":30,"width":22,"height":23,"aspectRatio":31,"alt":19,"title":10,"base64":32,"bgColor":33},"https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 300w,https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 600w,https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 900w,https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880 1200w","(max-width: 1200px) 100vw, 1200px","https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png?auto=format&fit=max&h=2880&q=95&w=2880",1.9047619047619047,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLChQLDhgQDRUNDh0WFhEVFxUZHRYTFhUmHysjGh0oHRYWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDggOHAoNHC8cFhwvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA0AGAMBIgACEQEDEQH/xAAZAAABBQAAAAAAAAAAAAAAAAAHAAEDBAb/xAAeEAACAgICAwAAAAAAAAAAAAABAwACBAUGEhEUIf/EABYBAAMAAAAAAAAAAAAAAAAAAAIDBP/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhEh/9oADAMBAAIRAxEAPwDGp4wl6/oli3EUrR2EIttNiqx/NayD0lHHIIjqRJNVgMzowQa1Bjwja/VY12HtWKGlwB1Wn//Z","#c84543",null,{"id":36,"type":37,"blocks":38},"QCzV344MRDONf99kcsq6bw","blocks_select",[39,72,76,85,87,111,113,122,124,146,148,168,170,179,181,202,204,212,214,223,225,234,236,320,322,341,343,410],{"id":40,"type":41,"eyebrow":42,"breadcrumb":34,"title":43,"titleSize":44,"titleAlignment":45,"label":46,"text":10,"list":47,"media":48,"mediaMobile":34,"mediaSmall":34,"theme":66,"aligned":70,"mediaFullOpacity":71},"e-b_y8VVTFuOPW8YbBOFlA","media_hero_expanded_block","By Fantasy","Where the Taste Comes From","h3-alt","items-center justify-center","How We Build",[],{"id":49,"_createdAt":50,"alt":34,"title":34,"focalPoint":51,"width":52,"height":53,"thumbnail":54,"small":55,"medium":56,"responsiveImage":57,"video":34},"bNHaagiZSuKuHUOsywA_9w","2026-11-09T18:43:59+00:00",{"x":21,"y":21},3840,2720,"https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":58,"webpSrcSet":10,"sizes":59,"src":60,"width":61,"height":62,"aspectRatio":63,"alt":34,"title":34,"base64":64,"bgColor":65},"https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 720w,https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 2160w,https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&fit=max&h=2880&q=95&w=2880 2880w","(max-width: 2880px) 100vw, 2880px","https://www.datocms-assets.com/157026/1794250975-chromaflow_header_02.png?auto=format&fit=max&h=2880&q=95&w=2880",2880,2040,1.411764705882353,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDiIaFQ0NDh0QFhEYHSUdHSIVJi0uNysjGikoHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHA0QHS8oIx0vNS81Ly8vLy8vLy8vLy8vLy8vMi8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABEAGAMBIgACEQEDEQH/xAAYAAEAAwEAAAAAAAAAAAAAAAAABAYHBf/EACMQAAEDAwIHAAAAAAAAAAAAAAEAAgQDBREGMhIWITRBUWH/xAAWAQEBAQAAAAAAAAAAAAAAAAADAgT/xAAYEQADAQEAAAAAAAAAAAAAAAAAAQIxEf/aAAwDAQACEQMRAD8Ao0DTMOocVHOJ+qbyZBZlxecesrUZ+mbPCqZa4BcqrCt73ljXhNSkzp0ZlT05FdMLA4kDwi1K26Wgvk8ZI6okSnhLdEy/byq3R7pEQ1oqLVaN4RESLCT/2Q==","#b84e46",{"id":67,"background":68,"text":70},"PfYM8lj9RzmFGvLmebwuMg",{"hex":69},"#EEF5F8",false,true,{"id":73,"type":74,"space":75},"eW4mZr6STTKbkweO9jchAw","space_block","small",{"id":77,"type":78,"eyebrow":10,"title":10,"text":79,"cta":34,"list":80,"stats":81,"theme":82},"ACA__sJoRHiRS8wSeMTEDQ","text_block","\u003Cp dir=\"ltr\">\u003Cspan>Mark Dearman is an independent 3D and motion designer who works with Fantasy. He wanted a faster way to experiment with shader effects on footage, so he built Chromaflow with Claude.\u003C/span>\u003C/p>",[],[],{"id":83,"background":84,"text":71},"GhOJl3s3TKCskLqj2rSenA",{"hex":69},{"id":86,"type":74,"space":75},"WHhEYJ7QQF-5T_pJboKzPQ",{"id":88,"type":89,"title":90,"text":91,"list":92,"cta":34,"media":93,"caption":10,"theme":108,"reverse":70},"Au9M9132QHeTWvC4FJyaDg","media_text_block","\u003Ch2 dir=\"ltr\">\u003Cspan>Why build a real-time shader tool for video?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>Every time Mark changed an effect in the tools he used every day, he had to wait for a render before he could see whether it worked.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“I wanted to play. A lot of the fun in finding a look is the back-and-forth: nudge a parameter, see what happens, try something else. After Effects is brilliant for finishing shots, but it isn’t built for that kind of real-time experimenting. Once you start stacking effects, previews slow down and you end up waiting on renders instead of reacting to what you’re seeing.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Shaders were the other part. They’re perfect for this kind of work because they run on the GPU and respond instantly, but there’s no native way to use them in After Effects, so you’re always going through plugins or extra setup before you can start exploring.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“So I wanted something closer to a sketchbook: drop in a clip, layer up GPU effects, tweak them while the footage plays in real time, and export an MP4 I can take back into a proper comp. Because it runs in the browser, there’s nothing to install, so you can just open it and start.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“I also didn’t want it to be a fixed toolkit. I built it so I can keep adding new shaders as ideas come up, so the platform grows alongside the creative exploration. Every new effect opens up new combinations with the ones already there, so it should keep getting more interesting over time.”\u003C/span>\u003C/p>",[],{"id":94,"_createdAt":95,"alt":96,"title":10,"focalPoint":34,"width":97,"height":98,"thumbnail":99,"small":100,"medium":101,"responsiveImage":34,"video":102},"W0VGkwk-QmCAoekODvYc1g","2026-11-09T18:15:09+00:00","The Chromaflow effects panel switching on the Lens and Analogue effects and adjusting their sliders while footage plays behind it",1080,1350,"https://www.datocms-assets.com/157026/1794248095-chromaflow-effects-panel-lens-analogue-live-footage.mp4?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248095-chromaflow-effects-panel-lens-analogue-live-footage.mp4?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248095-chromaflow-effects-panel-lens-analogue-live-footage.mp4?auto=format&fit=max&h=2000&q=95&w=2000",{"mp4low":103,"mp4medium":104,"mp4high":105,"width":97,"height":98,"thumbnailUrl":106,"title":10,"duration":107},"https://stream.mux.com/hVsUQ00REzKP027nMKPijfs9tf6uLqx4m01/low.mp4","https://stream.mux.com/hVsUQ00REzKP027nMKPijfs9tf6uLqx4m01/medium.mp4","https://stream.mux.com/hVsUQ00REzKP027nMKPijfs9tf6uLqx4m01/high.mp4","https://image.mux.com/hVsUQ00REzKP027nMKPijfs9tf6uLqx4m01/thumbnail.jpg",17,{"id":109,"background":110,"text":71},"dgzOxpu8RdufSCwMRAmFDQ",{"hex":69},{"id":112,"type":74,"space":75},"PW9tiI9DS16x-ROJlT0Qfw",{"id":114,"type":78,"eyebrow":10,"title":115,"text":116,"cta":34,"list":117,"stats":118,"theme":119},"RPz8DwUZTyiNEPnp3CWDJQ","\u003Ch2 dir=\"ltr\">\u003Cspan>How did one shader become a full tool?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>It began as a single shader for a single project.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“It started much smaller than it is now: a single shader. I was working on a project that needed a particular effect, and rather than go hunting for a plugin, I wondered whether I could just build it myself with Claude.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Once that first shader was working, I decided to keep building on it. I added more effects, then an interface to control them, then a way to export, and step by step it became a full tool.”\u003C/span>\u003C/p>",[],[],{"id":120,"background":121,"text":71},"D0RuZKM3TOG82sIxDYgbIw",{"hex":69},{"id":123,"type":74,"space":75},"Tpl_2TSpSu6V37VhiRtfAw",{"id":125,"type":89,"title":126,"text":127,"list":128,"cta":34,"media":129,"caption":10,"theme":142,"reverse":71},"X45M8vThQlKA9azzGZhbwg","\u003Ch2 dir=\"ltr\">\u003Cspan>How do you explain a visual problem to Claude?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>He used the same language he’d use with a technical director, and Claude turned it into shader math.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“The first ask was simple, basically ‘here’s the look I want, can we make this as a shader?’ What surprised me was how intuitive the process was. I could describe what I was seeing in art director terms, like ‘the distortion needs to be removed at the centre’ or ‘the colour’s getting too neon,’ and Claude would translate that into the technical changes. It felt like working with my own personal technical director.”\u003C/span>\u003C/p>",[],{"id":130,"_createdAt":131,"alt":132,"title":10,"focalPoint":34,"width":97,"height":98,"thumbnail":133,"small":134,"medium":135,"responsiveImage":34,"video":136},"cibdK9XoRIuVC1-f6oVNnw","2026-11-09T18:16:40+00:00","A typed note to Claude saying the datamosh effect looks too blocky and uniform, and Claude replying that it is reworking datamosh.ts to melt in torn, organic regions","https://www.datocms-assets.com/157026/1794248187-chromaflow-claude-art-direction-note-datamosh-shader.mp4?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248187-chromaflow-claude-art-direction-note-datamosh-shader.mp4?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248187-chromaflow-claude-art-direction-note-datamosh-shader.mp4?auto=format&fit=max&h=2000&q=95&w=2000",{"mp4low":137,"mp4medium":138,"mp4high":139,"width":97,"height":98,"thumbnailUrl":140,"title":10,"duration":141},"https://stream.mux.com/UWXzLBUmWNhwajXn3CytYnMEgDW02Sogy/low.mp4","https://stream.mux.com/UWXzLBUmWNhwajXn3CytYnMEgDW02Sogy/medium.mp4","https://stream.mux.com/UWXzLBUmWNhwajXn3CytYnMEgDW02Sogy/high.mp4","https://image.mux.com/UWXzLBUmWNhwajXn3CytYnMEgDW02Sogy/thumbnail.jpg",12,{"id":143,"background":144,"text":70},"Cj2CdcbJQMSTNEYIZ0Jr5g",{"hex":145},"#0C171E",{"id":147,"type":74,"space":75},"Cy7tnm2QSzqrsUn5hyUNRQ",{"id":149,"type":89,"title":150,"text":151,"list":152,"cta":34,"media":153,"caption":10,"theme":165,"reverse":70},"ATng_tjLR2qrhkuFiL8tfg","\u003Ch2 dir=\"ltr\">\u003Cspan>Why does Chromaflow have no timeline or keyframes?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>Because Chromaflow does one job, and After Effects already handles animation.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Chromaflow is a shader effects tool. The movement comes from the footage itself. You bring a clip that’s already moving, and the effects respond to it in real time. That’s what makes it approachable for people who don’t do motion. There’s no animating to learn, just a clip and some sliders.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“From the start my rule was to keep it simple and do one thing really well, rather than several things averagely. So there’s no timeline and no keyframes. After Effects already handles animation brilliantly, and there’s no point rebuilding that. What After Effects doesn’t do well is play back stacked effects in real time, and that’s exactly what Chromaflow is built for. Everything runs on the GPU, so you can tweak a parameter and see the result instantly, while the footage plays.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Every feature I didn’t add keeps the focus on the part that matters: exploring how an effect looks and feels on real footage and CG renders.”\u003C/span>\u003C/p>",[],{"id":154,"_createdAt":155,"alt":156,"title":10,"focalPoint":34,"width":97,"height":98,"thumbnail":157,"small":158,"medium":159,"responsiveImage":34,"video":160},"YSIh8gHxTz2ks6xHvyamQg","2026-11-09T18:17:04+00:00","One sneaker clip run through several Chromaflow shader effects in turn, including a pixel dither, a blue halftone print look and a chromatic glow","https://www.datocms-assets.com/157026/1794248208-chromaflow-shader-effects-stacked-on-one-clip.mp4?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248208-chromaflow-shader-effects-stacked-on-one-clip.mp4?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248208-chromaflow-shader-effects-stacked-on-one-clip.mp4?auto=format&fit=max&h=2000&q=95&w=2000",{"mp4low":161,"mp4medium":162,"mp4high":163,"width":97,"height":98,"thumbnailUrl":164,"title":10,"duration":141},"https://stream.mux.com/tX9a7tAfwEKXyoRxoZjE00Nwvks82pYyd/low.mp4","https://stream.mux.com/tX9a7tAfwEKXyoRxoZjE00Nwvks82pYyd/medium.mp4","https://stream.mux.com/tX9a7tAfwEKXyoRxoZjE00Nwvks82pYyd/high.mp4","https://image.mux.com/tX9a7tAfwEKXyoRxoZjE00Nwvks82pYyd/thumbnail.jpg",{"id":166,"background":167,"text":70},"LwkFg5vDRiCvUKEWDjFHkw",{"hex":145},{"id":169,"type":74,"space":75},"Iy6wIfHoSISY2pOlk4jStQ",{"id":171,"type":78,"eyebrow":10,"title":172,"text":173,"cta":34,"list":174,"stats":175,"theme":176},"GDMwp-l0Tjab9YZbBIHV1A","\u003Ch2 dir=\"ltr\">\u003Cspan>Why run it in the browser?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>For work under NDA, where the footage gets processed decides whether a studio can use a tool at all.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Your footage never leaves your machine. There’s no server, no account. The video is decoded, run through the effects on your graphics card, and encoded back into an MP4, all locally.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“For anyone working on client material, that’s a big deal. A lot of what we work on is under NDA, and you can’t always drop it into an online tool. With Chromaflow there’s nothing to trust, because nothing travels.”\u003C/span>\u003C/p>",[],[],{"id":177,"background":178,"text":70},"I0V_eOFvTwO2ytotsaHNFg",{"hex":145},{"id":180,"type":74,"space":75},"Z03zYc7eTGWEmlj2BxFzJw",{"id":182,"type":89,"title":183,"text":184,"list":185,"cta":34,"media":186,"caption":10,"theme":199,"reverse":71},"IaWeptJ1RhCJNZ7cANyCDw","\u003Ch2 dir=\"ltr\">\u003Cspan>Why build your own tool instead of using what’s out there?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>Mark wanted effects he couldn’t get from a preset.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Because the best ideas often sit just outside what off-the-shelf tools can do. If I’m only working with the presets everyone else has, the work starts to look like everyone else’s.\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>“Building Chromaflow meant that when I had an idea for an effect, I could make it exist rather than settle for the nearest available option. If the tool doesn’t do what the idea needs, find a way to make it.”\u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\n\u003Cp dir=\"ltr\">\u003Cspan>When he shared Chromaflow with the Fantasy team on Slack, Mark pitched it as “an easy way to stylise old shots, poor quality or stock footage for presentations, social assets etc.” Since then, the team has tested the tool out creating assets across numerous projects.\u003C/span>\u003C/p>",[],{"id":187,"_createdAt":188,"alt":189,"title":10,"focalPoint":34,"width":97,"height":98,"thumbnail":190,"small":191,"medium":192,"responsiveImage":34,"video":193},"cMT9hdVoQdaz077jpu6kIQ","2026-11-09T18:18:28+00:00","A teal CG render of layered glass and circuit plates looping through a Chromaflow shader effect","https://www.datocms-assets.com/157026/1794248302-chromaflow-cg-render-shader-effect-loop.mp4?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248302-chromaflow-cg-render-shader-effect-loop.mp4?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248302-chromaflow-cg-render-shader-effect-loop.mp4?auto=format&fit=max&h=2000&q=95&w=2000",{"mp4low":194,"mp4medium":195,"mp4high":196,"width":97,"height":98,"thumbnailUrl":197,"title":10,"duration":198},"https://stream.mux.com/ZtqT8VIK2BpKFE3jzmDMV87ziKFP6pfw/low.mp4","https://stream.mux.com/ZtqT8VIK2BpKFE3jzmDMV87ziKFP6pfw/medium.mp4","https://stream.mux.com/ZtqT8VIK2BpKFE3jzmDMV87ziKFP6pfw/high.mp4","https://image.mux.com/ZtqT8VIK2BpKFE3jzmDMV87ziKFP6pfw/thumbnail.jpg",2,{"id":200,"background":201,"text":70},"GdvsX6sbRhy-dmvIzTe6Jw",{"hex":145},{"id":203,"type":74,"space":75},"LtUjCRyET3y9sCrU6Uj2vQ",{"id":205,"type":206,"icon":71,"quote":207,"cite":208,"theme":209},"MUWADKQvQQS2QGEADVw9og","quote_block","AI made the building faster. The taste still has to come from somewhere.","Mark Dearman, 3D and Motion Designer",{"id":210,"background":211,"text":70},"CPz1OT3kTjKeM62IY9O-gA",{"hex":145},{"id":213,"type":74,"space":75},"BFfhhIMuTQ6oe1lwDaDWeg",{"id":215,"type":78,"eyebrow":10,"title":216,"text":217,"cta":34,"list":218,"stats":219,"theme":220},"JUZ7OJUQRMW_GKiPNY-vdg","\u003Ch2 dir=\"ltr\">\u003Cspan>What has working with Claude changed for Mark?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>“It’s changed who can build what. I’m an art director and designer, not a graphics programmer, but working with Claude felt like having a technical director alongside me. What it hasn’t changed is where the judgment comes from. Claude can write a shader, but deciding whether it looks right, whether it feels right in motion, and whether it serves the idea is still the creative work. AI made the building faster. The taste still has to come from somewhere.”\u003C/span>\u003C/p>",[],[],{"id":221,"background":222,"text":70},"CzCloxqQTEKdrGTYIvVztQ",{"hex":145},{"id":224,"type":74,"space":75},"BDPG2MxiT9e3DhztPXp0Yg",{"id":226,"type":78,"eyebrow":10,"title":227,"text":228,"cta":34,"list":229,"stats":230,"theme":231},"cQ_FqloYSzyuhHF4EFw9jA","\u003Ch2 dir=\"ltr\">\u003Cspan>So who did what?\u003C/span>\u003C/h2>","\u003Cp dir=\"ltr\">\u003Cspan>Claude wrote the shader code and turned Mark’s notes on what he saw into the changes that fixed it. Mark decided which effects were worth making in the first place, and whether each result looked right on real footage. Between them, Mark and Claude grew one effect for one project into a browser tool that layers more than a dozen GPU effects over footage as it plays and exports an MP4 ready for a proper comp.\u003C/span>\u003C/p>",[],[],{"id":232,"background":233,"text":70},"N6MzriDTQ3CMEIigmywcZw",{"hex":145},{"id":235,"type":74,"space":75},"Lf9NrsWoT2OBSKqbFIR8Vg",{"id":237,"type":238,"title":239,"collapsed":71,"items":240,"theme":317},"Pl4YeVppTUmJ_EiRVn4jqQ","how_to_block","How to build a real-time video effects tool with Claude",[241,257,269,281,293,305],{"id":242,"title":243,"content":244},"fXTgV2e7Qe-yiWx1r_540g","Start with the one effect a project needs.",{"value":245,"blocks":256},{"schema":246,"document":247},"dast",{"type":248,"children":249},"root",[250],{"type":251,"children":252},"paragraph",[253],{"type":254,"value":255},"span","Mark’s first version was a single shader for a look one project called for. Get one effect working on real footage before you add an interface or a second effect.",[],{"id":258,"title":259,"content":260},"R1n-zBNKS5qCIZHxh7zh5w","Give notes the way you would to a technical director.",{"value":261,"blocks":268},{"schema":246,"document":262},{"type":248,"children":263},[264],{"type":251,"children":265},[266],{"type":254,"value":267},"Describe what you see on screen in your own craft language (one of Mark’s notes was “the distortion needs to be removed at the centre”), and Claude translates it into the technical changes.",[],{"id":270,"title":271,"content":272},"DPT3txvOT1S7cDynfKm3QQ","Pick the one job your tool does.",{"value":273,"blocks":280},{"schema":246,"document":274},{"type":248,"children":275},[276],{"type":251,"children":277},[278],{"type":254,"value":279},"Chromaflow skips animation because After Effects already handles it. Build for the gap your finishing software leaves, and let your finishing software handle the rest.",[],{"id":282,"title":283,"content":284},"UQfUfSuFT36ZWzud_uZCCw","Run the effects on the GPU, in the browser.",{"value":285,"blocks":292},{"schema":246,"document":286},{"type":248,"children":287},[288],{"type":251,"children":289},[290],{"type":254,"value":291},"GPU shaders respond instantly, so you can change a parameter while the footage plays. A browser tool needs no install, and your footage stays on your own machine.",[],{"id":294,"title":295,"content":296},"GOLtndaRRvK1PuaXcPtjuQ","Export a file your finishing software can use.",{"value":297,"blocks":304},{"schema":246,"document":298},{"type":248,"children":299},[300],{"type":251,"children":301},[302],{"type":254,"value":303},"Chromaflow exports an MP4 that goes straight back into an After Effects comp, so plan that handoff from the start.",[],{"id":306,"title":307,"content":308},"CTy_MOk1T7OrtbY0kcu4kQ","Leave room for the next effect.",{"value":309,"blocks":316},{"schema":246,"document":310},{"type":248,"children":311},[312],{"type":251,"children":313},[314],{"type":254,"value":315},"Build the tool so new shaders slot in as ideas come up. Each new one adds combinations with the effects already there.",[],{"id":318,"background":319,"text":70},"WNudc43xRKOX5YrAbhx8fQ",{"hex":145},{"id":321,"type":74,"space":75},"Cr0Q5YnSSvygq3zN4WVVIA",{"id":323,"type":324,"media":325,"theme":338},"E7Aas4B9RCm8a8lvBH2WLg","media_full_block",{"id":326,"_createdAt":327,"alt":328,"title":10,"focalPoint":329,"width":52,"height":53,"thumbnail":330,"small":331,"medium":332,"responsiveImage":333,"video":34},"ClG2wn2dRAOlc2Lo-cQCYQ","2026-11-09T18:14:46+00:00","Chromaflow open on a desktop monitor: a sneaker render on a teal background with Tracker data markers, beside an effects panel listing Heatmap, Lens, Halftone, Dither, Glitch, Datamosh and more",{"x":21,"y":21},"https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":334,"webpSrcSet":10,"sizes":59,"src":335,"width":61,"height":62,"aspectRatio":63,"alt":328,"title":10,"base64":336,"bgColor":337},"https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 720w,https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 2160w,https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&fit=max&h=2880&q=95&w=2880 2880w","https://www.datocms-assets.com/157026/1794248078-chromaflow-real-time-video-shader-tool-hero.png?auto=format&fit=max&h=2880&q=95&w=2880","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDiAaDhkWFR0VFhYVIB0dHSIfIBUaIisjHR0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHA8PFy8lIh0vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABEAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAABwEFBgT/xAAjEAABAwIFBQAAAAAAAAAAAAAAAQIDBAYFERIhQRMUMTSB/8QAFwEBAQEBAAAAAAAAAAAAAAAAAwIEAf/EABkRAAMBAQEAAAAAAAAAAAAAAAABAhFBMf/aAAwDAQACEQMRAD8AwrbUmndpVDsisbptVz3cDHdbdXE/NGFdU4fXOlWJEUus0zp0LyC1298rc9kUBiYfaNW6fWqLuSIksJboZtTyZmb3vpIAV6Mi9w/ygABfDjP/2Q==","#aa3d37",{"id":339,"background":340,"text":70},"JM_3xIzeRtObsTcHQkkDIw",{"hex":145},{"id":342,"type":74,"space":75},"AbN69Rf6SouOkfYvDSE7Bw",{"id":344,"type":345,"title":10,"aligned":70,"items":346,"theme":407},"JQuX08L1QCyGUaNF5-goNA","faq_block",[347,359,371,383,395],{"id":348,"question":349,"answer":350},"PbydjdrfQUWc5K0iw9aneA","What is Chromaflow?",{"value":351,"blocks":358},{"schema":246,"document":352},{"type":248,"children":353},[354],{"type":251,"children":355},[356],{"type":254,"value":357},"Chromaflow is a browser-based video effects tool built by 3D and motion designer Mark Dearman with Claude. You drop in a clip, stack GPU shader effects such as halftone, dither, glitch, and datamosh, adjust them while the footage plays, and export an MP4. It’s live at chromaflow.co.uk.",[],{"id":360,"question":361,"answer":362},"bYsykBttTEm9qYSygsMayA","Can a designer build GPU shaders with Claude without knowing graphics programming?",{"value":363,"blocks":370},{"schema":246,"document":364},{"type":248,"children":365},[366],{"type":251,"children":367},[368],{"type":254,"value":369},"Yes. Mark built Chromaflow’s shaders by describing the look he wanted in art director terms, such as “the colour’s getting too neon,” and Claude made the technical changes. Deciding whether each result looked right stayed with him.",[],{"id":372,"question":373,"answer":374},"NP2LngbrQYqbht4jdpmNOQ","Can you use custom shaders in After Effects?",{"value":375,"blocks":382},{"schema":246,"document":376},{"type":248,"children":377},[378],{"type":251,"children":379},[380],{"type":254,"value":381},"After Effects doesn’t run custom shaders natively. It usually takes a third-party plugin or extra setup, which is why Mark built Chromaflow to run them in the browser and export an MP4 he can bring back into an After Effects comp.",[],{"id":384,"question":385,"answer":386},"QRqtIug-TaOwLBja4PMrFw","Does Chromaflow upload your footage?",{"value":387,"blocks":394},{"schema":246,"document":388},{"type":248,"children":389},[390],{"type":251,"children":391},[392],{"type":254,"value":393},"No. Chromaflow has no server and no account. It decodes the video, runs it through the effects on your graphics card, and encodes it back into an MP4 on your own computer, so footage under NDA never leaves the machine.",[],{"id":396,"question":397,"answer":398},"PnyPqO_9R-CelztsTB9I-A","Is Chromaflow an animation tool?",{"value":399,"blocks":406},{"schema":246,"document":400},{"type":248,"children":401},[402],{"type":251,"children":403},[404],{"type":254,"value":405},"No. Chromaflow is a shader effects tool with no timeline or keyframes. The movement comes from the footage itself, and the effects respond to it in real time, which keeps it approachable for people who don’t do motion.",[],{"id":408,"background":409,"text":70},"XGKc1VacQPqQkxROdwLWPA",{"hex":145},{"id":411,"type":74,"space":412},"aPdcY1k4RE2n-R4N-jT_Kg","large",{"noIndex":70,"title":414,"description":415,"image":416},"Can You Build Real-Time Video Shaders With Claude?","How 3D and motion designer Mark Dearman used Claude to build Chromaflow, a browser tool that stacks GPU shader effects on video while it plays.",{"url":417},"https://www.datocms-assets.com/157026/1794248087-chromaflow-real-time-video-shader-tool-link-preview.png",[419,445],{"id":420,"slug":421,"title":422,"date":423,"categories":424,"featuredMedia":429},"NtRhC4DHR5mJY6QrJZE1Bw","how-brand-websites-compete-with-ai-agents","How Brand Websites Compete With AI Agents","2026-10-20",[425],{"id":426,"slug":427,"title":428},"BNHDMcqGRAmO2nSQJkFHgg","insights","Insights",{"id":430,"_createdAt":431,"alt":34,"title":34,"focalPoint":432,"width":433,"height":434,"thumbnail":435,"small":436,"medium":437,"responsiveImage":438,"video":34},"QUuzyvWARmqhV-ceFzXeKw","2026-11-04T19:43:08+00:00",{"x":21,"y":21},3264,1824,"https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":439,"webpSrcSet":10,"sizes":59,"src":440,"width":61,"height":441,"aspectRatio":442,"alt":34,"title":34,"base64":443,"bgColor":444},"https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 720w,https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 2160w,https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&fit=max&h=2880&q=95&w=2880 2880w","https://www.datocms-assets.com/157026/1793822534-windridge-ipad-mockup-flipped.png?auto=format&fit=max&h=2880&q=95&w=2880",1609,1.7894736842105265,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoRDhgQDhcNDhobFhgVHR8cHRYVFiYaIisjGh0oHSEWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg4PHQUQHC8cFh0vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA4AGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAGBwEEBQD/xAAgEAAABwACAwEAAAAAAAAAAAAAAQIDBAUREkEUITEG/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwBZU1YxMfSSl9g8k/m4jNVvMvgW1e+5HkEpCs9ghsL6X4JI5HmBDHsILLLqsPsQKL0hbxGpRjhJ/9k=","#95bdcf",{"id":446,"slug":447,"title":448,"date":449,"categories":450,"featuredMedia":452},"LBHjyKpORMus8MNHUVPSkw","the-prototype-is-the-product","The Prototype is the Product","2026-10-26",[451],{"id":426,"slug":427,"title":428},{"id":453,"_createdAt":454,"alt":455,"title":10,"focalPoint":456,"width":457,"height":97,"thumbnail":458,"small":459,"medium":460,"responsiveImage":461,"video":34},"bU8v5Q1uRyWwgtOaAd5ESQ","2026-10-14T19:40:35+01:00","Close-up of a white ring around a clear glass lens with a pulse of light passing through the center, in front of orange and pink forms, illustrating a prototype that starts plain and gets truer over time.",{"x":21,"y":21},1920,"https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&fit=max&h=800&q=95&w=800","https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&fit=max&h=1440&q=95&w=1440","https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&fit=max&h=2000&q=95&w=2000",{"srcSet":462,"webpSrcSet":10,"sizes":463,"src":464,"width":457,"height":97,"aspectRatio":465,"alt":455,"title":10,"base64":466,"bgColor":467},"https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&dpr=0.25&fit=max&h=2880&q=95&w=2880 480w,https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&dpr=0.5&fit=max&h=2880&q=95&w=2880 960w,https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&dpr=0.75&fit=max&h=2880&q=95&w=2880 1440w,https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&fit=max&h=2880&q=95&w=2880 1920w","(max-width: 1920px) 100vw, 1920px","https://www.datocms-assets.com/157026/1792003227-prototype-built-on-a-real-foundation-glass-ring-and-light-pulse.png?auto=format&fit=max&h=2880&q=95&w=2880",1.7777777777777777,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBg0TCBELDQkQDQ4NDg0HCRENDg0YFx8ZGBYTFhUaHysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHA0NHC8cFhw7Ly8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA4AGAMBIgACEQEDEQH/xAAZAAABBQAAAAAAAAAAAAAAAAAEAAEDBQf/xAAdEAACAQQDAAAAAAAAAAAAAAAAAgQBAxExEhMh/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwQC/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERAiH/2gAMAwEAAhEDEQA/ANJaRlhu70qnkNyJLd1m2Z6LlKhEqTQQBJrXIgnSxZUP/9k=","#db7832",1794251495875]