[Feature Request] Add support for browser/window frames in recording editor

[Drake669]

I’d like the ability to add a browser or window frame to a recording during the editing process. This would help make recordings look more polished and provide better visual context, especially for demos, tutorials, or walkthroughs.

Problem / Motivation

Currently, recordings appear as plain screen captures without any framing. This can make them feel less structured and sometimes unclear, particularly when the content is meant to simulate a browser experience or highlight UI interactions.

Additionally, I don’t always want to record my entire screen just to achieve this effect. In many cases, I may have other tabs or applications open that I don’t want to be visible in the recording. This makes it difficult to create clean, focused recordings without exposing unrelated content.

Adding a browser/window frame would:

• Improve the visual presentation of recordings
• Provide clearer context (e.g. showing that content is within a browser or app window)
• Allow users to simulate a clean browser or app environment without recording their full screen
• Make recordings more suitable for sharing externally (docs, tutorials, marketing, etc.)

Proposed Solution

Introduce an option in the recording editor that allows users to apply a browser or window-style frame to their recording.

This could include:

• A toggle or setting to enable/disable the frame
• Multiple frame styles (e.g. browser frame, desktop window frame)
• Basic customization options such as:
• Window title
• URL bar (for browser frame)
• Light/dark styles

Ideally, this feature would be accessible within the editing sidebar for recordings.

Reference

[linear]

CAP-670

[tembo]

There's an existing open issue requesting similar functionality: #1246 - Features: Browser Frame and Click Animation, which was tracked internally as CAP-526. You might want to follow that issue or add your use cases there to consolidate the discussion.

From a technical perspective, the codebase already has solid infrastructure for this kind of feature. The existing BackgroundConfiguration in crates/project/src/configuration.rs manages padding, rounding, shadows, and borders - a window frame could potentially be added as a new configuration option alongside these. The screenshot editor already implements similar visual enhancement popovers (border, shadow, padding controls in apps/desktop/src/routes/screenshot-editor/popovers/) that follow a consistent pattern and could serve as a template.

The rendering pipeline in crates/rendering/ uses a composable layer system that would need extending to draw frame chrome (title bar, traffic lights/buttons, URL bar). The UI configuration updates flow through Specta-generated TypeScript bindings, so both Rust types and the frontend would need coordinated changes.