--- title: "Glossary" description: "Definitions of the rendering and animation terms used across the cool-web-fx effect writeups." canonical: "https://fx.statico.io/glossary" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T18:42:10-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Glossary Terms used in the effect writeups, defined once so you don't have to infer them from context. ## 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. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups