Background· 10 sites
Reference: Canvas image data, MDN contributors
How it works
A tiny cached texture adds film grain without regenerating pixels on every frame.In 5 steps.
Texture should support the image, not compete with the words. Generate a small monochrome tile once, repeat it over a decorative surface, and move the cached layer in discrete steps. Keep the copy above the grain and offer a static version.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Generate once
Fill a small image buffer with seeded luminance noise so the texture is repeatable and cheap to capture.
- 02
Cache the tile
Use the canvas as a data URL for a repeating background; never run random pixel generation in the frame loop.
- 03
Move only the overlay
Overscan the texture and translate it between a few deterministic offsets. This intentionally stepped texture is not smooth object motion.
- 04
Separate the reading layer
Keep text and controls above the grain. Reduced motion freezes the offsets while keeping the material.
- 05
Dispose cleanly
Call destroy() on unmount to disconnect observers, remove preference and visibility listeners and cancel the pending frame. The cached texture goes with the removed subtree.