Framing a screenshot in a recognizable browser chrome or a styled border instantly elevates its perceived quality. Betterflow offers a complete set of device frames — from pixel-perfect browser mockups with live URL bars to artistic options like Arc frames, photograph borders, and clean outlines — all configurable through the right-side control panel.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/betterspacx/app/llms.txt
Use this file to discover all available pages before exploring further.
Browser Mockups
Safari Light
Faithful macOS Safari toolbar in light mode. Displays traffic-light window controls and a URL bar rendered with the font and sizing of the real browser.
Safari Dark
Identical to Safari Light but with a dark toolbar and dark-mode traffic-light colors — ideal for dark-themed UI screenshots.
Chrome Light / Dark
Google Chrome mockup in both light and dark variants, including the characteristic tab strip and address bar.
Arc Browser
The Arc browser frame features Arc’s distinctive sidebar layout and space-themed aesthetic, perfect for showcasing macOS productivity apps.
Custom URL
All browser mockups support a custom URL string in the address bar. Type any URL and it renders inside the toolbar in real time — great for showing a live-looking product screenshot.
Header Size
Browser mockups expose an adjustable header size control. Increasing the header size makes the toolbar proportionally taller, which works well at larger canvas dimensions or when you want the mockup to feel more prominent relative to the screenshot content.Frame Styles
Beyond browser mockups, Betterflow includes several flat frame styles that wrap the image without simulating a specific browser:| Style | Description |
|---|---|
| Arc Light / Dark | Arc browser-inspired frame with a clean rounded border — available in light and dark variants |
| macOS Light / Dark | macOS window chrome with traffic-light controls — mirrors the Safari mockup aesthetic |
| Windows Light / Dark | Windows-style title bar with minimize/maximize/close controls |
| Photograph | Classic photo border with a wider bottom margin — perfect for travel and lifestyle photography |
Border Controls
TheBorderControls component exposes fine-grained control over the frame around your screenshot:
Frame Style
Choose from Arc Light, Arc Dark, macOS Light, macOS Dark, Windows Light, Windows Dark, or Photograph. Each applies a distinct visual treatment matching the named operating system or aesthetic.
Frame Size
A numeric slider controls the frame thickness in pixels. Only available for Arc-style frames.
Opacity
The frame opacity slider adjusts the transparency of the frame overlay. Defaults to 50% for Arc Light and 70% for other frame types.
Shadow Customization
Every frame and border can have an independent drop shadow. TheShadowControls component provides:
Blur Radius
Controls how soft or hard the shadow edge appears. Higher values create the diffuse shadows common in modern UI design.
X / Y Offset
Shift the shadow horizontally and vertically. A slight downward offset with no horizontal shift creates a natural ground shadow.
Spread
Expands or contracts the shadow beyond the element boundary. Negative spread values create inset-like effects.
Color & Opacity
Full color picker plus opacity slider. Shadows can be colored (e.g. a tinted purple shadow for neon aesthetics) or kept as the classic semi-transparent black.
Shadow configuration is stored separately from the frame style, so you can apply the same custom shadow to any frame type — including browser mockups, photograph frames, and plain borders alike.