finds.dev← search

// the find

jherr/depth-of-field

★ 710 · TypeScript · updated May 2026

Depth of field simulator

A small React/TypeScript single-page app that calculates and visualizes depth of field, hyperfocal distance, and near/far focus limits from aperture, focal length, and subject distance. Useful for photographers who want a quick on-the-web DoF calculator instead of a phone app or cheat sheet.

Small, readable codebase (Vite + React + TS) that's easy to fork and extend rather than wade through. Has actual test files for the main graphic component, the responsive layout, and the select styling, which is more test coverage than most hobby visualization tools bother with. GitHub Actions workflow deploys straight to Pages, so there's a working live demo with zero setup friction.

README gives zero insight into the optics math (circle of confusion assumptions, formulas used) or how accurate the output actually is against real lens behavior — you have to read the source to trust the numbers. No visible LICENSE file in the tree, which matters if anyone wants to reuse or embed this. Entire app logic lives in a couple of top-level files (App.tsx, PhotographyGraphic.tsx) with a single utils/units.ts, so there's not much architecture to learn from if you're hoping to use this as a reference for a bigger calculator-style app.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →