Cool web interaction effects that Ian likes

Terminology

Canvas 2D

The browser's immediate-mode 2D drawing API, reached via canvas.getContext("2d"). Effects redraw the whole surface every frame inside a requestAnimationFrame loop.

WebGL / WebGL2

The browser's GPU-accelerated rendering API. Used here for effects that need per-pixel work — post-processing, raymarching, particle systems — that would be too slow on the CPU.

Shader

A small program that runs on the GPU. A vertex shader positions geometry; a fragment shader computes the colour of each pixel. Written in GLSL and compiled at page load.

SDF (signed distance field)

A function that returns the distance from any point to the nearest surface — negative inside, positive outside. Raymarchers step along a ray using that distance to find where it hits geometry, without any triangles.

Raymarching

Rendering by walking a ray forward in steps until it reaches a surface, using an SDF to decide how far each step can safely be. Lets a fragment shader draw solid 3D shapes with no mesh.

Dither

Deliberately adding a structured or random pattern when reducing colour or resolution, so that banding is broken up into texture. The ASCII-bar effect dithers a grayscale image down to glyph density.

Import map

A <script type="importmap"> block that maps bare module specifiers ("three") to real URLs. It lets a plain HTML file use ES module imports from a CDN with no bundler.

Conic gradient

A CSS gradient that sweeps around a centre point rather than along a line. Rotating one behind a mask is how the spinning-border effects get their moving rainbow edge.

@property

A CSS at-rule that registers a custom property with a type, so the browser can interpolate it. Registering --angle as <angle> is what makes a gradient rotation animatable in pure CSS.

PMREM

Prefiltered Mipmapped Radiance Environment Map. Three.js pre-blurs an environment map at several roughness levels so rough and glossy materials can both sample it cheaply for realistic reflections.

Tone mapping

Compressing high-dynamic-range light values into the displayable 0–1 range. ACESFilmicToneMapping is used here to keep bright highlights from clipping to flat white.

Seeded PRNG

A pseudo-random number generator started from a fixed seed, so it produces the same sequence on every page load. Keeps "random" layouts stable across reloads and screenshots.

Self-contained file

In this gallery: one .html document with all CSS and JavaScript inline and no external assets, so it runs when opened directly from disk. See skill.md.