Web Effects Pack.
Fifteen film and print effects for web pages, including film burns, crumpled paper and neon. Built with CSS, SVG, Canvas and WebGL.
What it is
This is a pack of effects like the ones you'd use in Premiere, After Effects or Resolve, built for web pages. Film burns, filmstock looks and hand-drawn annotations run over your images and text. A burn transition uses a shader over two elements, with its progress controlled by scrolling.
There are fifteen effects, each added with a single factory call over existing markup, with zero runtime dependencies. Each card in the live gallery runs the effect.
How I built it
I used CSS and SVG wherever I could. Six effects need a per-pixel field generated every frame, so they use WebGL. Each also has a CSS/SVG fallback behind the same factory.
The paper effect initially produced bright, one-pixel scratches along its folds. It calculates a max-of-cones field per pixel; using a hard maximum flipped the surface normal too abruptly. A smooth maximum fixed that. Bokeh detects highlights in the image to place its discs. The wiggly text effect displaces the glyphs' pixels, so it can use any font or script without splitting the text into spans.
I also measured the effects in Chromium, Firefox and WebKit. Gecko and WebKit re-rasterise a filtered element when a property on that element changes. Animating opacity on the filtered layer triggered a full filter render every frame. I hit that problem in three effects before moving per-frame writes off those layers. The measurements use a 90-step scroll scrub, with results in each effect's README.