diff --git a/docs/effects/ascii.mdx b/docs/effects/ascii.mdx
new file mode 100644
index 0000000..8755efe
--- /dev/null
+++ b/docs/effects/ascii.mdx
@@ -0,0 +1,32 @@
+---
+title: ASCII
+nav: 1
+---
+
+Renders the scene as ASCII art, mapping pixel luminance to characters drawn onto a canvas-based character atlas. Adapted from [emilwidlund/ASCII](https://github.com/emilwidlund/ASCII).
+
+```jsx
+import { ASCII } from '@react-three/postprocessing'
+
+return (
+  <ASCII
+    font="arial" // font family used to draw the character atlas
+    characters=" .:,'-^=*+?!|0#X%WM@" // characters to sample from, in order of increasing "weight"
+    fontSize={54} // font size used to draw the character atlas
+    cellSize={16} // size of each character cell, in pixels
+    color="#ffffff" // character color
+    invert={false} // inverts which characters map to bright vs dark pixels
+  />
+)
+```
+
+## Props
+
+| Name       | Type    | Default                | Description                                                       |
+| ---------- | ------- | ----------------------- | ------------------------------------------------------------------ |
+| font       | String  | 'arial'                 | The font family used to draw the character atlas.                  |
+| characters | String  | ` .:,'-^=*+?!\|0#X%WM@` | The characters to sample from, ordered from "empty" to "dense".    |
+| fontSize   | Number  | 54                       | The font size used to draw the character atlas.                    |
+| cellSize   | Number  | 16                       | The size of each character cell, in pixels.                        |
+| color      | String  | '#ffffff'                | The color of the characters.                                       |
+| invert     | Boolean | false                    | Inverts which characters map to bright vs dark pixels.              |
diff --git a/docs/effects/color-depth.mdx b/docs/effects/color-depth.mdx
new file mode 100644
index 0000000..b6e2e6b
--- /dev/null
+++ b/docs/effects/color-depth.mdx
@@ -0,0 +1,23 @@
+---
+title: ColorDepth
+nav: 1
+---
+
+Reduces the color depth of the scene, uniformly across all color channels - a posterize-like effect.
+
+```jsx
+import { ColorDepth } from '@react-three/postprocessing'
+
+return (
+  <ColorDepth
+    bits={16} // the virtual color bit depth
+  />
+)
+```
+
+## Props
+
+| Name          | Type           | Default | Description                                                                                             |
+| ------------- | -------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| blendFunction | BlendFunction  |          | The blend function of this effect.                                                                       |
+| bits          | Number         | 16       | The virtual amount of color bits. Each color channel effectively uses a fourth of this total; alpha is unaffected. |
diff --git a/docs/effects/depth.mdx b/docs/effects/depth.mdx
new file mode 100644
index 0000000..f7c2a0a
--- /dev/null
+++ b/docs/effects/depth.mdx
@@ -0,0 +1,25 @@
+---
+title: Depth
+nav: 1
+---
+
+Visualizes the scene's depth buffer as grayscale - useful for debugging, or as an input for further custom effects.
+
+```jsx
+import { Depth } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <Depth
+    blendFunction={BlendFunction.SRC} // the blend function of this effect
+    inverted={false} // whether the depth should be inverted
+  />
+)
+```
+
+## Props
+
+| Name          | Type          | Default             | Description                            |
+| ------------- | ------------- | --------------------- | ---------------------------------------- |
+| blendFunction | BlendFunction | BlendFunction.SRC     | The blend function of this effect.      |
+| inverted      | Boolean       | false                  | Whether the depth should be inverted.   |
diff --git a/docs/effects/fxaa.mdx b/docs/effects/fxaa.mdx
new file mode 100644
index 0000000..d763e36
--- /dev/null
+++ b/docs/effects/fxaa.mdx
@@ -0,0 +1,31 @@
+---
+title: FXAA
+nav: 1
+---
+
+Fast Approximate Anti-Aliasing - a cheap, single-pass alternative to [SMAA](/effects/smaa) with lower visual quality but better performance.
+
+```jsx
+import { FXAA } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <FXAA
+    blendFunction={BlendFunction.SRC} // the blend function of this effect
+    minEdgeThreshold={0.0312} // the minimum edge detection threshold
+    maxEdgeThreshold={0.125} // the maximum edge detection threshold
+    subpixelQuality={0.75} // the subpixel blend quality
+    samples={12} // the maximum amount of edge detection samples
+  />
+)
+```
+
+## Props
+
+| Name              | Type          | Default            | Description                                            |
+| ----------------- | ------------- | -------------------- | -------------------------------------------------------- |
+| blendFunction     | BlendFunction | BlendFunction.SRC    | The blend function of this effect.                      |
+| minEdgeThreshold  | Number        | 0.0312               | The minimum edge detection threshold. Range [0.0, 1.0]. |
+| maxEdgeThreshold  | Number        | 0.125                 | The maximum edge detection threshold. Range [0.0, 1.0]. |
+| subpixelQuality   | Number        | 0.75                  | The subpixel blend quality. Range [0.0, 1.0].           |
+| samples           | Number        | 12                     | The maximum amount of edge detection samples.           |
diff --git a/docs/effects/lut.mdx b/docs/effects/lut.mdx
new file mode 100644
index 0000000..72e1ab6
--- /dev/null
+++ b/docs/effects/lut.mdx
@@ -0,0 +1,27 @@
+---
+title: LUT
+nav: 1
+---
+
+Applies 3D LUT-based color grading using a lookup texture (a `THREE.Texture` built from e.g. a `.cube` file or a data texture you construct yourself).
+
+```jsx
+import { LUT } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <LUT
+    lut={lutTexture} // the lookup texture
+    blendFunction={BlendFunction.SRC} // the blend function of this effect
+    tetrahedralInterpolation={false} // enables or disables tetrahedral interpolation
+  />
+)
+```
+
+## Props
+
+| Name                     | Type          | Default            | Description                                        |
+| ------------------------ | ------------- | -------------------- | ----------------------------------------------------- |
+| lut                      | Texture       |                       | The lookup texture. Required.                       |
+| blendFunction            | BlendFunction | BlendFunction.SRC    | The blend function of this effect.                  |
+| tetrahedralInterpolation | Boolean       | false                 | Enables or disables tetrahedral interpolation.      |
diff --git a/docs/effects/n8ao.mdx b/docs/effects/n8ao.mdx
new file mode 100644
index 0000000..b05dde6
--- /dev/null
+++ b/docs/effects/n8ao.mdx
@@ -0,0 +1,44 @@
+---
+title: N8AO
+nav: 1
+---
+
+A fast, high quality ambient occlusion effect, wrapping [N8python/n8ao](https://github.com/N8python/n8ao). Self-contained - unlike [SSAO](/effects/ssao), it does not need `enableNormalPass` on `<EffectComposer>`.
+
+```jsx
+import { N8AO } from '@react-three/postprocessing'
+
+return (
+  <N8AO
+    aoRadius={5} // ambient occlusion sampling radius
+    distanceFalloff={1} // distance falloff
+    intensity={1} // effect intensity
+    quality="performance" // 'performance' | 'low' | 'medium' | 'high' | 'ultra'
+    aoSamples={16} // amount of ambient occlusion samples per frame
+    denoiseSamples={4} // amount of denoise samples per frame
+    denoiseRadius={12} // denoise sampling radius
+    color={undefined} // tints the occlusion, defaults to black
+    halfRes={false} // renders the effect at half resolution
+    depthAwareUpsampling={true} // enables or disables depth-aware upsampling
+    screenSpaceRadius={false} // scales the sampling radius with distance from the camera
+    renderMode={0} // 0: Combined, 1: AO only, 2: No AO, 3: Split, 4: Split AO
+  />
+)
+```
+
+## Props
+
+| Name                 | Type                                                    | Default       | Description                                               |
+| -------------------- | ------------------------------------------------------- | ------------- | --------------------------------------------------------- |
+| aoRadius             | Number                                                  | 5             | The ambient occlusion sampling radius.                    |
+| distanceFalloff      | Number                                                  | 1             | The distance falloff.                                     |
+| intensity            | Number                                                  | 1             | The effect intensity.                                     |
+| quality              | 'performance' \| 'low' \| 'medium' \| 'high' \| 'ultra' | 'performance' | The quality preset.                                       |
+| aoSamples            | Number                                                  | 16            | The amount of ambient occlusion samples per frame.        |
+| denoiseSamples       | Number                                                  | 4             | The amount of denoise samples per frame.                  |
+| denoiseRadius        | Number                                                  | 12            | The denoise sampling radius.                              |
+| color                | Color                                                   | undefined     | Tints the occlusion. Defaults to black.                   |
+| halfRes              | Boolean                                                 | false         | Renders the effect at half resolution.                    |
+| depthAwareUpsampling | Boolean                                                 | true          | Enables or disables depth-aware upsampling.               |
+| screenSpaceRadius    | Boolean                                                 | false         | Scales the sampling radius with distance from the camera. |
+| renderMode           | 0 \| 1 \| 2 \| 3 \| 4                                   | 0             | 0: Combined, 1: AO only, 2: No AO, 3: Split, 4: Split AO. |
diff --git a/docs/effects/shockwave.mdx b/docs/effects/shockwave.mdx
new file mode 100644
index 0000000..68027bb
--- /dev/null
+++ b/docs/effects/shockwave.mdx
@@ -0,0 +1,38 @@
+---
+title: ShockWave
+nav: 1
+---
+
+An animated shockwave/distortion effect emanating from a point in 3D space. It doesn't trigger itself - call `explode()` on the effect's ref whenever you want the wave to fire.
+
+```jsx
+import { useRef } from 'react'
+import { ShockWave } from '@react-three/postprocessing'
+import type { ShockWaveEffect } from 'postprocessing'
+
+const ref = useRef<ShockWaveEffect>(null)
+
+return (
+  <>
+    <ShockWave
+      ref={ref}
+      position={[0, 0, 0]} // the world position of the shockwave
+      speed={2.0} // the animation speed
+      maxRadius={1.0} // the extent of the shockwave
+      waveSize={0.2} // the wave size
+      amplitude={0.05} // the distortion amplitude
+    />
+    <button onClick={() => ref.current?.explode()}>Explode</button>
+  </>
+)
+```
+
+## Props
+
+| Name      | Type    | Default | Description                        |
+| --------- | ------- | -------- | ------------------------------------- |
+| position  | Vector3 | (0,0,0)  | The world position of the shockwave. |
+| speed     | Number  | 2.0      | The animation speed.                 |
+| maxRadius | Number  | 1.0      | The extent of the shockwave.         |
+| waveSize  | Number  | 0.2      | The wave size.                       |
+| amplitude | Number  | 0.05     | The distortion amplitude.            |
diff --git a/docs/effects/texture.mdx b/docs/effects/texture.mdx
new file mode 100644
index 0000000..df556bd
--- /dev/null
+++ b/docs/effects/texture.mdx
@@ -0,0 +1,28 @@
+---
+title: Texture
+nav: 1
+---
+
+Blends a texture over the scene. Give it a URL via `textureSrc` and it loads (and suspends on) the texture itself - pass an already-loaded `THREE.Texture` via `texture` instead if you're loading it yourself.
+
+```jsx
+import { Texture } from '@react-three/postprocessing'
+
+return (
+  <Texture
+    textureSrc="/texture.png" // loads the texture for you
+    opacity={1} // opacity of the texture
+    aspectCorrection={false} // deprecated - adjust the texture's offset/repeat/center instead
+  />
+)
+```
+
+## Props
+
+| Name             | Type    | Default | Description                                                                        |
+| ----------------- | ------- | -------- | ------------------------------------------------------------------------------------- |
+| textureSrc        | String  |          | URL of the texture to load.                                                        |
+| texture           | Texture |          | An already-loaded texture - alternative to `textureSrc`.                           |
+| blendFunction     | BlendFunction |    | The blend function of this effect.                                                 |
+| opacity           | Number  | 1        | The opacity of the texture.                                                        |
+| aspectCorrection  | Boolean | false    | Deprecated. Adjust the texture's offset, repeat and center instead.                |
diff --git a/docs/effects/tilt-shift-2.mdx b/docs/effects/tilt-shift-2.mdx
new file mode 100644
index 0000000..0d811d8
--- /dev/null
+++ b/docs/effects/tilt-shift-2.mdx
@@ -0,0 +1,35 @@
+---
+title: TiltShift2
+nav: 1
+---
+
+An alternate tilt-shift implementation with direct control over the blurred band's start/end points and blur direction, instead of a single centered focus-area size. For the simpler, centered version, see [TiltShift](/effects/tilt-shift).
+
+```jsx
+import { TiltShift2 } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <TiltShift2
+    blendFunction={BlendFunction.NORMAL} // the blend function of this effect
+    blur={0.15} // the blur intensity, [0, 1] (can go beyond 1)
+    taper={0.5} // the size of the sharp/in-focus area, [0, 1] (can go beyond 1)
+    start={[0.5, 0.0]} // start point of the blur band, in screen-space percent [0, 1]
+    end={[0.5, 1.0]} // end point of the blur band, in screen-space percent [0, 1]
+    samples={10} // number of blur samples
+    direction={[1, 1]} // direction of the blur
+  />
+)
+```
+
+## Props
+
+| Name          | Type          | Default          | Description                                              |
+| ------------- | ------------- | ------------------ | ------------------------------------------------------------ |
+| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect.                      |
+| blur          | Number        | 0.15                | The blur intensity. Range [0, 1] (can exceed 1 for extra). |
+| taper         | Number        | 0.5                 | The size of the sharp/in-focus area. Range [0, 1] (can exceed 1). |
+| start         | [Number, Number] | [0.5, 0.0]        | Start point of the blur band, in screen-space percent.  |
+| end           | [Number, Number] | [0.5, 1.0]        | End point of the blur band, in screen-space percent.    |
+| samples       | Number        | 10                   | The number of blur samples.                              |
+| direction     | [Number, Number] | [1, 1]            | The direction of the blur.                                |
diff --git a/docs/effects/tilt-shift.mdx b/docs/effects/tilt-shift.mdx
new file mode 100644
index 0000000..b6820e4
--- /dev/null
+++ b/docs/effects/tilt-shift.mdx
@@ -0,0 +1,37 @@
+---
+title: TiltShift
+nav: 1
+---
+
+A tilt-shift blur effect, simulating a shallow depth of field along a band across the screen - the classic "miniature model" look. For a version with more direct control over the band's start/end/direction, see [TiltShift2](/effects/tilt-shift-2).
+
+```jsx
+import { TiltShift } from '@react-three/postprocessing'
+import { BlendFunction, KernelSize } from 'postprocessing'
+
+return (
+  <TiltShift
+    blendFunction={BlendFunction.ADD} // the blend function of this effect
+    offset={0.0} // the relative offset of the focus area
+    rotation={0.0} // the rotation of the focus area, in radians
+    focusArea={0.4} // the relative size of the focus area
+    feather={0.3} // the softness of the focus area edges
+    kernelSize={KernelSize.MEDIUM} // the blur kernel size
+    resolutionScale={0.5} // the resolution scale
+  />
+)
+```
+
+## Props
+
+| Name            | Type          | Default              | Description                             |
+| ---------------- | ------------- | ---------------------- | ------------------------------------------ |
+| blendFunction    | BlendFunction | BlendFunction.ADD      | The blend function of this effect.       |
+| offset           | Number        | 0.0                     | The relative offset of the focus area.   |
+| rotation         | Number        | 0.0                     | The rotation of the focus area, in radians. |
+| focusArea        | Number        | 0.4                     | The relative size of the focus area.     |
+| feather          | Number        | 0.3                     | The softness of the focus area edges.    |
+| kernelSize       | KernelSize    | KernelSize.MEDIUM       | The blur kernel size.                    |
+| resolutionScale  | Number        | 0.5                     | The resolution scale.                    |
+| resolutionX      | Number        | Resolution.AUTO_SIZE    | The horizontal resolution.               |
+| resolutionY      | Number        | Resolution.AUTO_SIZE    | The vertical resolution.                 |
diff --git a/docs/effects/water.mdx b/docs/effects/water.mdx
new file mode 100644
index 0000000..2bf05a0
--- /dev/null
+++ b/docs/effects/water.mdx
@@ -0,0 +1,25 @@
+---
+title: Water
+nav: 1
+---
+
+A screen-space water/heat-haze style distortion, animated over time.
+
+```jsx
+import { WaterEffect } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <WaterEffect
+    blendFunction={BlendFunction.NORMAL} // the blend function of this effect
+    factor={0} // the distortion strength
+  />
+)
+```
+
+## Props
+
+| Name          | Type          | Default              | Description                          |
+| ------------- | ------------- | ---------------------- | ---------------------------------------- |
+| blendFunction | BlendFunction | BlendFunction.NORMAL    | The blend function of this effect.   |
+| factor        | Number        | 0                       | The distortion strength.             |