# AutoFocus Component

> Free component for R3F · 2024 · Components, WebGL

Canonical page: https://andersonmancini.dev/projects/autofocus-component

A free **autofocus depth-of-field** component for **React Three Fiber** — smooth camera focus transitions that follow a target mesh or point in the scene.

Drop it into any Canvas and get cinematic DOF without wiring post-processing passes by hand. Focus distance, bokeh strength and transition speed stay easy to tune while you iterate on layout and animation.

Built for product shots, character close-ups and any scene where focus should feel intentional rather than static.

## Technical details

- React Three Fiber
- WebGL
- Depth of Field
- Autofocus
- Post Processing
- Three.js

## Links

- [Open the live project](https://autofocusdof.vercel.app/)

## More projects

- Previous in Components: [Confetti component](https://andersonmancini.dev/projects/confetti-component.md)
- Next in Components: [Holographic material](https://andersonmancini.dev/projects/holographic-material.md)