A tiny WebGPU experiment / 004

hello world

Plain text. Switch on any combination.

Hello, shaders.

Build a step. Mix the substeps. Make it yours.

Preview text

Starting WebGPU…

Start from a preset or a blank step

5/12 steps · 11/64 substeps. Saved presets stay in this browser; the workspace resets on reload.

⠿

1 substep

⠿

Bend the incoming image.

Strength18px

Frequency6

Speed1×

⠿

2 substeps

⠿

Shift horizontal bands independently.

Displacement16px

Band height12px

Speed1×

⠿

Separate color channels in any direction.

Separation5px

Angle0°

⠿

3 substeps

⠿

Sample the image on a coarser grid.

Pixel size5px

⠿

Color the existing image with soft directional shading.

Strength1×

Hue42°

Shading0.8×

⠿

Reduce colors with an ordered pattern; works independently of posterization.

Color levels5

Strength0.65×

Pattern size5px

⠿

1 substep

⠿

Spread light beyond the existing edges.

Radius12px

Intensity1.5×

Pulse speed0.7×

⠿

4 substeps

⠿

Warp the image like curved glass.

Curvature0.12×

⠿

Separate color channels in any direction.

Separation1.5px

Angle0°

⠿

Lay fine horizontal shading over the image.

Strength0.35×

Spacing2px

⠿

Gently darken the outer parts of the image.

Strength0.12×

Radius1×

Text effects only. Background shaders are parked for a separate experiment.