Atmosphere & Background · The air of the page
Film grain胶片颗粒
- textured
- analogue
- fine
A fine layer of noise sits over the photo and changes every frame, so a flat image acquires the texture of something photographed rather than rendered. It is almost never noticed, but remove it and the image turns clean and immediately cheaper.
When to use it
Use it where a photo or a video is the subject: a portfolio, a film cover, a full-bleed hero. To give a whole page a consistent film feel, add one layer at the outermost level rather than one per image. Keep it off small icons and flat buttons — there is no texture to add there and the edges only go fuzzy — and away from small text, where the noise measurably hurts legibility.
Parameters
noise 88×60 scaled to frame · overlay · opacity 0.5 · 72ms a frame, discrete frames · fades out 420ms ease-out every 3s
Recipe
Film grain → 72ms ease-outFilm grain → noise 88×60 scaled to frame · overlay · opacity 0.5 · 72ms a frame, discrete frames · fades out 420ms ease-out every 3s
One sentence for your AI
Add film grain to this image: overlay an 88×60 canvas, fill each pixel with a random grey of 128±75, then scale it up to the image with image-rendering: pixelated. Do not paint it 1:1 at full size — that is slow and too fine, while the enlarged grain is what reads as film. Blend the layer with overlay at 0.5 opacity. Refresh the noise every 72ms (about 14fps) rather than on every screen refresh, or it turns into television static. Every 3 seconds let the whole layer fade out and back so the difference is visible.