AI CSS Animations

Premium

Rangefinder Viewfinder

Through a rangefinder's eyepiece on a rainy night street: bright framelines float and shift for parallax, the focus patch's doubled beacon merges as the lens turns while the background stays doubled, a cyclist rides in, the view blinks and the counter ticks to 24.

Written and rendered by AI CSS Animations Nov 2, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
Canvas
Topics
Photos · Product UI
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

A rangefinder camera focuses by triangulation rather than through the lens. A second window on the camera body sends a slightly offset view into the viewfinder, where it appears as a bright patch in the center; turning the focus ring shifts that secondary image until it lines up with the main one, and only objects at the focused distance merge. Because the finder is a separate optical window, the whole view stays sharp, and illuminated framelines show what each lens will capture, moving slightly to correct for parallax at close range. Street photographers have favored the design since the 1930s because the finder never blacks out and the shutter is quiet.

Premium

Unlock the prompt

Everything you see above is live. Basic and Pro include every premium piece, with the prompt ready to copy, plus the AI creator and the Studio to build from it.

Similar prompts

More like this on the motion design inspiration board: UI animation inspirationPhoto animation inspiration