Key Features
Authentic macOS 26 Styling: Emulates the current look of the Safari browser with pixel-perfect accuracy, including the signature floating tab bar and refined control buttons.
Versatile Presentation Tool: Perfect for framing high-resolution images of websites for portfolio showcases, pitch decks, or informative onboarding flows.
Built-in Media Support: Go beyond static images—simply select one of the other variants of the component to use Framer’s native video and animation elements to create live, breathing previews of your work.
Native Light & Dark Modes: Fully integrated with Framer’s color styles, allowing the frame to shift seamlessly between light and dark themes to match your project’s environment.
Total Aesthetic Control: Almost every detail is customizable. Fine-tune the background fill, stroke colors, and opacity levels to create a subtle glassmorphism effect, a solid background and stroke look, or a stroke only aesthetic that keeps the focus on your design.
Fully Responsive: Designed to scale effortlessly across different breakpoints, ensuring your mockups look stunning on mobile, tablet, and desktop views with the use of a condensed taskbar variable.
How to Use
Copy & Paste: Copy the “26 Safari Frame” component URL and paste it into your project’s design canvas in Framer.
Add Content: Using the component variables panel, add your image or insert a video directly into the content area.
Style: Create just 2 asset color styles and apply them to the appropriate variable to adjust the stroke and fill colors of the component. Adjustments can be made for light and dark modes (see blend mode note in variable).
Done: Watch your work come to life inside the most modern browser mockup available for Framer.
Payment Processing
Your purchase of this component will be executed through Polar.sh.
Once your payment has been successfully processed you should see (1. A thank you note and quick instructions on how to use the component,) and (2. The Component URL)
You will also receive a confirmation email from “doublearrm (via Polar)” detailing your purchase summary.
doublearrm
