Web Effects Pack.
Fifteen film and print effects — burns, filmstock grades, crumpled paper, neon, a street light — running as real CSS/SVG/WebGL over live DOM instead of baked into a render.
What it is
The same kind of pack you'd buy for Premiere, After Effects or Resolve — film burns, filmstock looks, hand-drawn annotation — except nothing here is baked into a video file. Every effect is real CSS, SVG, Canvas and (where it genuinely earns its place) WebGL, compositing live over your own DOM, images and text. A burn transition isn't a clip you cut between two shots; it's a shader running over two elements on the page, scrubbed by the reader's scroll position.
Fifteen effects so far, each a single factory call over markup you already have, with zero runtime dependencies. The live gallery mounts the real effect inside every card, so what you see on the landing page is the thing, not a screenshot of it.
How I built it
Rule I set early: CSS and SVG first, WebGL only when an effect genuinely needs a per-pixel field generated every frame. Six of the fifteen cross that line, and each of those ships two interchangeable renderers behind one factory — the shader when a GPU is there, a CSS/SVG fallback that reproduces the look when it isn't.
Most of the work was in the physics rather than the plumbing. A crumpled sheet is a power diagram, so the paper effect evaluates a max-of-cones field per pixel; a smooth maximum rather than a hard one, because a hard max flips the normal over a single pixel and lights up as a 1px scratch. Bokeh places its discs on highlights actually detected in your image, so the defocus lands where the light is. The wiggly text displaces the glyphs' own pixels, which is why it works on any font, any script, without splitting a string into spans.
The other half was performance archaeology across engines. Gecko and WebKit re-rasterise a filtered element whenever a property on that same element changes, which turns an innocent opacity animation into a full filter re-render every frame — that one cost me three separate effects before I learned to keep per-frame writes off filtered layers. Everything is measured on a 90-step scroll scrub in Chromium, Firefox and WebKit, and the numbers live in each effect's README.