How to Add a Flip Clock to OBS as a Stream Overlay

Can you add a flip clock to OBS?

Yes. The clock is an ordinary webpage, so OBS can show it by capturing the browser window or by displaying the address directly in a browser source. No capture card is involved; the only choice is which method suits your layout and how much interface you want cropped.

Method 1: window capture of a fullscreen clock

1. Open the clock in a normal browser window on the streaming machine, and pick a dark skin on the aesthetic page so the overlay blends with the scene.
2. Press F to enter fullscreen on that browser window. The site header and controls fade on their own after a few idle seconds.
3. In OBS, add a source and choose Window Capture, then point it at that browser window.
4. Move and scale the source where you want the clock in the scene.

The clock runs live inside the capture: digits fold every second, and it is always the true local time. Press Escape on the browser to stop the fullscreen whenever needed.

Method 2: OBS browser source

1. In OBS, add a source of type Browser and set the URL to flipclockai.com.
2. Match the source size to what you need — a 400 by 220 source suits a corner overlay; 1920 by 1080 gives a full scene.
3. Enable the option to refresh the browser when the scene becomes active, so the clock starts fresh and in sync when you switch scenes.

One honest limitation: an OBS browser source never enters fullscreen, so the clock keeps its site header and side controls. Crop the source in OBS (on Windows, hold Alt and drag the source edges; on macOS, Option drag) to cut the interface and keep the digits, or use the window capture method above, which fades everything but the clock.

A skin that reads on stream

Dark, high contrast skins survive stream compression best: Mono, Classic Black, or Terminal hold their digit shapes even at low bitrate, while translucent Glass reads well over busy backgrounds. If digits must stay legible at overlay size, preview the skin at the final on-stream size before the broadcast, not at fullscreen.

There is currently no URL parameter to pick a skin or hide the interface on load, so set the skin once on that machine's browser and it stays saved for future sessions.

Alternatives when you need a countdown

The clock shows local time, which suits just chatting, study, and coding sessions. For a running countdown overlay, point the same capture at the timer page and start a preset, or use the pomodoro page for work-break cycles on camera — both show the same flip styling.

Flip countdown timer · Pomodoro session timer · Skins

Performance notes

The page is lightweight: one font, CSS animation, no video playback, so window capture adds very little overhead compared with a game capture. If you stream on one machine and the browser source feels heavy, prefer window capture of an already fullscreen window, which lets the browser optimize rendering off the main scene path.

obsproject.com — download OBS · Open the flip clock · All guides