A camera UI is the viewfinder interface of a phone camera app — a live preview with a framing grid, top controls for flash and HDR, a mode selector, and the shutter, gallery, and flip-camera buttons. This snippet recreates a faithful one inside a CSS phone frame, with tap-to-focus, a capture flash, mode switching, and a camera-flip animation, in HTML, CSS, and vanilla JavaScript with no dependency.

Tap-to-focus anywhere

Tapping the viewfinder reads the pointer position relative to the preview and drops a yellow focus square there, animated with a cmFocus keyframe that overshoots then settles and fades — exactly the focus-lock affordance every camera app uses. The square is repositioned via left/top and the animation is restarted with the void offsetWidth reflow trick so it fires on every tap. Taps on the top controls are ignored so you don't focus when toggling flash.

The capture flash

Pressing the shutter fires a full-screen white overlay that quickly peaks and fades (cmFx keyframe), mimicking the brief flash of taking a photo, while the shutter button's inner disc scales down on press for tactile feedback. It's a convincing capture moment built from a single animated overlay.

The rule-of-thirds grid

The framing grid is drawn with two layered linear-gradient backgrounds sized at 33.33% — thin lines at each third — over the preview, the composition guide real cameras overlay. No SVG or extra elements; it's one element with a gradient.

Mode selector and flip

The mode strip (Photo, Video, Portrait, Pano, Time-lapse) is a horizontally-scrollable row where tapping moves a yellow .on highlight, the standard camera mode picker. The flip-camera button rotates 180° on tap via a CSS transition, suggesting the front/back switch. All interactions are class toggles routed through small handlers.

Reusing it

Replace the gradient preview with a real <video> element streaming getUserMedia, and the UI becomes a working camera. Wire the shutter to a canvas capture, the modes to real capture settings, and the flip to switching video tracks. Or keep it as a presentational mockup inside a phone mockup for app shots.

Step by step

How to Use

1
Paste HTML, CSS, and JSA camera viewfinder renders inside a phone frame.
2
Tap the previewA focus square drops where you tap and settles.
3
Press the shutterA white flash fires like taking a photo.
4
Switch modesTap Photo, Video, or Portrait to move the highlight.
5
Toggle flash and flipFlash highlights and the flip button rotates.
6
Make it liveSwap the preview for a getUserMedia video stream.

Real-world uses

Common Use Cases

Camera app concepts

Mock a viewfinder inside a phone mockup.

Photo and video tools

Pair with an image filter editor.

Scanner and capture UIs

Reuse the frame for a QR code generator scanner.

AR and effects apps

Overlay controls beside a drawing canvas.

Marketing shots

Frame a camera app in a bento grid.

Learning live camera

A reference UI to wrap a getUserMedia stream.

Got questions?

Frequently Asked Questions

A pointerdown on the viewfinder reads the tap position relative to the preview's bounding rect and sets the focus square's left and top to that point. The square plays a keyframe that overshoots, settles, and fades, restarted each time with the void offsetWidth reflow trick. Taps on the top control bar are ignored so toggling flash doesn't drop a focus square.

The shutter click fires a full-screen white overlay whose keyframe quickly rises to near-full opacity and fades back to zero, imitating a camera flash. The shutter button's inner disc also scales down on press for feedback. It's a single animated element, so there's no heavy effect or library involved.

It's one element with two layered linear-gradient backgrounds sized at 33.33%, producing thin lines at each third both horizontally and vertically — the rule-of-thirds composition guide. Using gradients means no SVG and no extra DOM, and you can change the line opacity or spacing with a couple of values.

Yes. Replace the gradient preview with a <video> element playing a getUserMedia stream, and the UI becomes functional. Wire the shutter to draw the current frame to a canvas, the modes to capture settings, and the flip button to switch between front and back video tracks. The controls are already in place.

Render the controls and modes from state, with the active mode and flash as flags. Handle tap-to-focus by setting focus coordinates in state and animating via a key change. For a real camera, attach a getUserMedia stream to a video ref in a mount effect. Tailwind styles the grid (arbitrary gradient utilities), shutter, and mode strip.

Loading…