react-postprocessing

# using npm
npm install postprocessing react-postprocessing
# using yarn
yarn add postprocessing react-postprocessing

What does it look like?

import React from 'react'
import { EffectComposer, DepthOfField, Bloom, Noise, Vignette } from 'react-postprocessing'
import { Canvas } from 'react-three-fiber'
function App() {
 return (
 <Canvas>
 {/* Your regular scene contents go here, like always ... */}
 <Suspense fallback={null}>
 <EffectComposer>
 <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
 <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
 <Noise opacity={0.02} />
 <Vignette eskil={false} offset={0.1} darkness={1.1} />
 </EffectComposer>
 </Suspense>
 </Canvas>
 )
}

Documentation