Stopbath

I built Stopbath for small studios and agencies that are tired of looking like every other studio. The whole site works like a darkroom. Photos come up out of blank paper in a tray of liquid, shadows first, and the headline appears as the print darkens around it. Move the mouse and the water moves, and the letters bend with it.

It's real WebGL, written from scratch for this template, and you don't need to touch any code. Every print is a component with its settings in the panel: the photo, the words, how long it takes to develop.

What's inside

• 10 pages: Home, Work, Project, Services, Process, Studio, Notebook, Note, Contact and 404, all with tablet and phone layouts

• A contact sheet driven by your CMS. Frames start as negatives and turn positive when you scroll to them, and you can mark your favourites with a grease pencil from a CMS field

• A drying line where prints swing on a wire with the speed of the scroll

• Four timers that replace the usual "1, 2, 3" process steps, and actually run

• A closing section where visitors rub a blank sheet with the mouse until the photo and your call to action appear. It develops by itself on phones

• A contact form laid out like a lab ticket, and a 404 that got fogged

• 2 CMS collections (Work and Notebook) and 9 code components, with every setting in the panel

• 4 Agent Skills, so Framer's agent can rebrand it, add a project, write a note and check the site before launch

Prints load only when they get near the screen, and the resolution drops by itself on slower machines. If WebGL isn't available, or the visitor prefers reduced motion, they see the finished photograph instead.

Fonts: League Gothic, Fragment Mono and Reenie Beanie (Google Fonts) and Switzer (Fontshare). All free.

Images: Unsplash (free for commercial use), rendered in black and white. The studio, clients, people and results are fictional. No third-party logos are used.