Adding Film Grain To Images in React with react-postprocessing

I’ve always been sort of obsessed with finding ways to add film grain to my websites. There are some great articles from Red Stapler and CSS-Tricks on doing it with CSS, but once you “see” the keyframe animation it sort of ruins the effect. Luckily we have another option (and many more) available thanks to the power of threejs, react-three-fiber and react-postprocessing.

This is the panel containing our image. Start by creating a mesh with a PlaneBufferGeometry and meshBasicMaterial. I’m also importing a few helpers from drei to make our code a little cleaner. useTexture is just a convenience hook for useLoader and textureLoader, while useAspect is making sure our image renders in the correct aspect ratio and meshBounds is limiting the bounds of our raycast to improve performance.

We can then build a simple canvas with the EffectComposer imported from react-postprocessing at the end, along with our desired effects inside. Our Panel will be passed in as children so that we can manipulate it directly from our page.

From there we can simply render the Canvas and Panel in our desired page as components.

Frontend Developer/UI Designer in Austin, TX