Jason Forrest Agency · R&D

Shader Playground

Rendering and animation experiments. Each one is a single self-contained HTML file with no build step and no dependencies — open the source and the whole technique is there.

Radial mirror and halftone breaking a field of coloured orbs
Instrument

Scroll Shader Lab

Drop an image or video and let the scroll break it. Six effects — planes, radial mirror, halftone, broken LCD, VHS, flow — each on its own slice of the page, each reacting to the picture's own light and colour.

Scroll position → effect chain → WebGL
Instrument

Wake

A particle field driven by the pointer — move to push it, click for a shockwave, shift-click to pin an attractor. Screened through halftone, RGB and freeze materials.

Pointer forces → particle field → screen
Instrument

Stipple

Takes your geometry — typed words, an uploaded SVG, or a CSV — and re-renders it as a field of marks. Twelve recipes from letterpress to scatterplot.

Source → sample → marks → material
Playground

Field Lab

Every parameter from the Cav Empt circle field, plus six primitives and five post-process finishes. Twelve presets that start at their look and deviate.

WebGL2 · instanced · no libraries
Teardown

Circle Field

What the Cav Empt site background actually is — instanced arcs run through a blur and an alpha threshold — with a seeded recreation and the four passes shown side by side.

Reverse-engineered from the live page
Rendering test

Terminator Ellipse

Beeswarm dots shaded as spheres by a single adjustable sun. Exact per-pixel canvas shading against a four-gradient SVG approximation.

SVG gradients vs. canvas ground truth
Review

Animating SVG on Scroll

Fourteen animation and physics frameworks compared for scroll-driven SVG, with four live demos — including a node-count stress test that finds where SVG breaks on your own machine.

GSAP · Motion · Rive · Lottie · Three.js · deck.gl