pmndrs · kvvasuu · Aug 11, 2026 · Aug 11, 2026 · Aug 13, 2026 · Aug 13, 2026
diff --git a/examples/autofocus/README.md b/examples/autofocus/README.md
@@ -0,0 +1,9 @@
+[![Static](https://img.shields.io/badge/example-%23646CFF.svg?logo=html5&logoColor=white)](https://pmndrs.github.io/examples/autofocus)
+[![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/examples/autofocus)
+[![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/examples/autofocus)
+
+```sh
+$ npx degit pmndrs/examples/examples/autofocus
+```
+
+![](thumbnail.webp)
diff --git a/examples/autofocus/index.html b/examples/autofocus/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/autofocus/package.json b/examples/autofocus/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@example/autofocus",
+  "version": "1.0.0",
+  "dependencies": {
+    "@pmndrs/assets": "^1.6.0",
+    "@react-three/drei": "10.7.8",
+    "@react-three/fiber": "9.6.1",
+    "@react-three/postprocessing": "^3.0.5",
+    "leva": "^0.10.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "suspend-react": "0.1.3",
+    "three": "0.165.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@types/three": "^0.165.0",
+    "@vitejs/plugin-react": "^6.0.4",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
+    "build": "tsc && vite build",
+    "build2": "tsc && e2e-build $npm_package_name",
+    "preview": "vite preview",
+    "test": "e2e-test $npm_package_name"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pmndrs/examples/tree/main/examples/autofocus"
+  }
+}
diff --git a/examples/autofocus/pmndrs.json b/examples/autofocus/pmndrs.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "../../schemas/pmndrs.schema.json",
+  "title": "Autofocus",
+  "description": "A depth-picking autofocus that follows a target or the pointer, driving @react-three/postprocessing's Autofocus depth-of-field blur.",
+  "tags": ["postprocessing", "autofocus", "depth-of-field"],
+  "authors": ["Antoine BERNIER"],
+  "source": "https://codesandbox.io/s/dfw6w4",
+  "libraries": [
+    "@react-three/drei",
+    "@react-three/fiber",
+    "@react-three/postprocessing",
+    "leva"
+  ],
+  "assets": []
+}
diff --git a/examples/autofocus/public/vite.svg b/examples/autofocus/public/vite.svg
diff --git a/examples/autofocus/src/App.tsx b/examples/autofocus/src/App.tsx
@@ -0,0 +1,118 @@
+import {
+  AccumulativeShadows,
+  CameraControls,
+  Center,
+  Environment,
+  RandomizedLight,
+  Resize,
+  useGLTF,
+} from "@react-three/drei";
+import { Canvas, type ThreeElements } from "@react-three/fiber";
+import {
+  Autofocus,
+  type AutofocusApi,
+  EffectComposer,
+} from "@react-three/postprocessing";
+import { button, folder, useControls } from "leva";
+import { memo, useRef } from "react";
+import { suspend } from "suspend-react";
+import * as THREE from "three";
+import { type GLTF } from "three-stdlib";
+
+const city = import("@pmndrs/assets/hdri/city.exr");
+const suzi = import("@pmndrs/assets/models/suzi.glb");
+
+export default function App() {
+  return (
+    <Canvas shadows camera={{ position: [-15, 1.2, 14], fov: 15 }}>
+      <color attach="background" args={["#303035"]} />
+      <Scene />
+    </Canvas>
+  );
+}
+
+function Scene() {
+  const autofocusRef = useRef<AutofocusApi>(null);
+
+  const { manual, ...autofocusConfig } = useControls({
+    target: { value: [-1, 1, 0.6], optional: true, disabled: true },
+    mouse: false,
+    debug: { value: 0.02, min: 0, max: 0.15, optional: true },
+    smoothTime: { value: 0.5, min: 0, max: 1 },
+    manual: false,
+    "update (manual only)": button(() => {
+      autofocusRef.current?.update(0, true);
+    }),
+    DepthOfField: folder(
+      {
+        focusRange: { min: 0, max: 0.05, value: 0.005, step: 0.001 },
+        bokehScale: { min: 0, max: 50, value: 8 },
+      },
+      { collapsed: true },
+    ),
+  });
+
+  return (
+    <group position-y={-0.5} position-x={-1}>
+      <Center top>
+        <Resize scale={3.5}>
+          <Suzi rotation={[-0.63, 0, 0]}>
+            <meshStandardMaterial color="#9d4b4b" />
+          </Suzi>
+        </Resize>
+      </Center>
+      <Center top position={[-3.5, 0, 4]}>
+        <mesh castShadow>
+          <sphereGeometry args={[0.5, 64, 64]} />
+          <meshStandardMaterial color="#9d4b4b" />
+        </mesh>
+      </Center>
+      <Center top position={[2.5, 0, 1]}>
+        <mesh castShadow rotation={[0, Math.PI / 4, 0]}>
+          <boxGeometry args={[0.7, 0.7, 0.7]} />
+          <meshStandardMaterial color="#9d4b4b" />
+        </mesh>
+      </Center>
+
+      <EffectComposer>
+        {/* AutofocusProps intersects DepthOfField's own inherited `ref` (Ref<DepthOfFieldEffect>)
+            with its own `ref?: Ref<AutofocusApi>`, which TS can't reconcile into one assignable type. */}
+        <Autofocus
+          ref={autofocusRef as never}
+          manual={manual}
+          {...autofocusConfig}
+        />
+      </EffectComposer>
+
+      <Shadows />
+      <CameraControls />
+      <Environment files={(suspend(city) as { default: string }).default} />
+    </group>
+  );
+}
+
+const Shadows = memo(() => (
+  <AccumulativeShadows
+    temporal
+    frames={100}
+    color="#9d4b4b"
+    colorBlend={0.5}
+    alphaTest={0.9}
+    scale={20}
+  >
+    <RandomizedLight amount={8} radius={4} position={[5, 5, -10]} />
+  </AccumulativeShadows>
+));
+
+type GLTFResult = GLTF & {
+  nodes: { mesh: THREE.Mesh };
+};
+
+function Suzi(props: ThreeElements["mesh"]) {
+  const { nodes } = useGLTF(
+    (suspend(suzi) as { default: string }).default,
+  ) as unknown as GLTFResult;
+  return (
+    <mesh castShadow receiveShadow geometry={nodes.mesh.geometry} {...props} />
+  );
+}
diff --git a/examples/autofocus/src/index.tsx b/examples/autofocus/src/index.tsx
@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(<App />);
diff --git a/examples/autofocus/src/styles.css b/examples/autofocus/src/styles.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #202020;
+}
diff --git a/examples/autofocus/src/vite-env.d.ts b/examples/autofocus/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/autofocus/thumbnail.webp b/examples/autofocus/thumbnail.webp
diff --git a/examples/autofocus/tsconfig.json b/examples/autofocus/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/autofocus/tsconfig.node.json b/examples/autofocus/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/autofocus/vite.config.ts b/examples/autofocus/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/examples/bloom/README.md b/examples/bloom/README.md
@@ -0,0 +1,9 @@
+[![Static](https://img.shields.io/badge/example-%23646CFF.svg?logo=html5&logoColor=white)](https://pmndrs.github.io/examples/bloom)
+[![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/examples/bloom)
+[![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/examples/bloom)
+
+```sh
+$ npx degit pmndrs/examples/examples/bloom
+```
+
+![](thumbnail.webp)
diff --git a/examples/bloom/index.html b/examples/bloom/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/bloom/package.json b/examples/bloom/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@example/bloom",
+  "version": "1.0.0",
+  "dependencies": {
+    "@react-three/drei": "10.7.8",
+    "@react-three/fiber": "9.6.1",
+    "@react-three/postprocessing": "^3.0.5",
+    "leva": "^0.10.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "three": "0.165.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@types/three": "^0.165.0",
+    "@vitejs/plugin-react": "^6.0.4",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
+    "build": "tsc && vite build",
+    "build2": "tsc && e2e-build $npm_package_name",
+    "preview": "vite preview",
+    "test": "e2e-test $npm_package_name"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pmndrs/examples/tree/main/examples/bloom"
+  }
+}
diff --git a/examples/bloom/pmndrs.json b/examples/bloom/pmndrs.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "../../schemas/pmndrs.schema.json",
+  "title": "Bloom",
+  "description": "A glass Suzanne model staged with drei's Stage helper, glowing with @react-three/postprocessing's Bloom under an orbiting light.",
+  "tags": ["postprocessing", "bloom"],
+  "authors": ["v 1 r t l"],
+  "source": "https://codesandbox.io/s/r9ujf",
+  "libraries": [
+    "@react-three/drei",
+    "@react-three/fiber",
+    "@react-three/postprocessing",
+    "leva"
+  ],
+  "assets": []
+}
diff --git a/examples/bloom/public/vite.svg b/examples/bloom/public/vite.svg