code

Building a Real-Time Dithering Shader | Codrops

A <n>Real-Time Dithering Shader</n> by <n>Anderson Mancini</n> for <n>Codrops</n> on an <n>Astronaut helmet</n> 3D model.

Design a sleek, eye-catching visual with dots

When code transforms into art.
When minimalism dances with light.

✨Prompt in comment

Gemmarium [510]
float i,d,s,n,l,m=1.;for(mat2 R=mat2(cos(sin(t/2.)*.785+vec4(0,33,11,0)));i++<1e2;){vec3

Shadertoy

Dissolve effect. Made with @threejs TSL. Inspired by @0xJatinChopra's codrops article (). Can be used with any mesh really :)

Live:

Source code:

for(float i,d,s;i++<1e2;){vec3 p=vec3((FC.xy*2.-r.xy)/r.y*d*rotate2D(t),d-9.);p.xz*=rotate2D(t);d+=s=.012+.07*abs(max(sin(length(floor(p*3.)+dot(sin(p),cos(p.yzx)/.4))),length(p)-4.)-i/1e2);o+=max(1.3*sin(vec4(1,2,3,1)+i*.5)/s,-length(p*p));}o=tanh(o*o/8e5); #つぶやきGLSL

Playing with the shader is fun. Just did some experiment based on @Jaenam97's work.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float t = iTime / 2.0;
    float i = 0.0;
    float d = 0.0;
    float s = 0.0;
    vec3 r = iResolution;
    vec3 p = vec3(0.0);

<n>Expression Experiments in After Effects</n> by motion designer <n>Nigina</n>.

All my demos in one place! 

I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come!

Check it out:

#threejs #webgl #creativecoding #portfolio

Introducing the dither plugin
A CSS-only package to create dither effects

I built a video recording lib on top of r3f/mediabunny

<VideoCanvas fps={60}>
    <MyScene />
</VideoCanvas>

await blob = videoCanvas.record({ 
    mode: "realtime", 
    duration: 30,
    size: "2x"
})

Jitter Shader

Digital artwork by <n>Chase Davis</n>, created using <n>Three.js</n>.

generate this generate that 
generate some threejs bump

Stormy Torus [480] 
float i,d,w,s,n,m=1.;for(mat2 R=mat2(cos(sin(t/2.)*.785+vec4(0,33,11,0)));i++<1e2;){vec3 k,p=vec3((FC.xy*2.-r.xy)/r.y*d,d-10.);p.xz*=R;if(p.y<-6.3){p.y

in the audience, scratchin an itch:
responsive #CSS scroll animation

try it!

<n>Blackhole Surfing on the GPU</n>, a work of <n>shader art</n> by <n>Xor</n>.

"Accretion"
for(float z,d,i;i++<2e1;){vec3 p=z*normalize(FC.rgb*2.-r.xyx);p=vec3(atan(p.y/.2,p.x)*2.,p.z/3.,length(p.xy)-5.-z*.2);for(d=1.;d<7.;d++)p+=sin(p.yzx*d+t+.3*i)/d;z+=d=length(vec4(.4*cos(p)-.4,p.z));o+=(cos(p.x+i*.4+z+vec4(6,1,2,0))+1.)/d;}o=tanh(o*o/4e2);

Weekend project! I built a real time stock performance visualizer using my latest #glsl shader (WebGL + Typescript).  

It fetches real time stock data, like % change, and uses it to control the shader. Negative changes make the scene more turbulent and chaotic, while positive

adding a stroke on the text to increase legibility

can use `-webkit-text-stroke` to add stroke

use `paint-order: stroke` so the stroke is drawn behind the text

left is with `paint-order`, right is without

ssgi + ssr + bloom on the physics/spheres demo. last time i posted this one it only ssr and bloom, but global illumination gives it something special.

demo (+code) below ↓

A UI for a pixelation effect by developer <n>Jhey</n>.

you can jus' kinda pixelate things, with svg

feFlood + feTile + feMorphology 👨‍🍳

So like promised, I've tested GPT-5
And here my thoughts:

In 25 messages with ChatGPT-5 l've vibe coded a "point cloud memories" prototype using very complicated webgl effects pushing gpt 5 to it's limits.

I got 8 errors in total but after a back and forth l've managed to do

A public domain illustration of <n>spacetime curvature</n>, a concept from General Relativity.

thoughts on the go
-
i have alot of random thoughts while i’m on the go that i want to save. i wanted a way to enter my thoughts into my phone and be able to just put my phone away as quickly as possible. so i set up back tap on my phone to trigger a @gather_do app intent. i just

Abracadabra 🪄 
#define t (t+fract(1e4*sin(dot(FC.xy,vec2(137,-13))))/6e1) 
#define S smoothstep
float i,d,s,m,l,x=abs(mod(t/4.,2.)-1.),a=x<.5?-(exp2(12.*x-6.)*sin((20.*x-11.125)*1.396))/2.:(exp2(-12.*x+6.)*sin((20.*x-11.125)*1.396))/2.+1.;vec3

I pasted the @threejs code from the previous 3D scene in Grok 4 from @xai and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

Assets · Kenney

30,000+ SVG Icons for Web & UI – Manage, Browse, and Download

The <n>Liquid Glass with CSS and SVG</n> web playground by developer <n>Andreas Storm</n>.

<n>Treehaus</n>, a creative residency on Cape Cod by <n>COLLINS</n>. Photo by <n>Dami Dina</n>.

One of my favourite little details in the new COLLINS website is this responsive border-radius.

--margin: calc((100% - var(--max-width)) / 2);
border-radius: clamp(1rem, calc(1.5rem - var(--margin)), 1.5rem);