50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/2560d2n15vwt0.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/139qrzcz9lv4a.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/29nnfbif7huoh.js","/creators-assets/_next/static/immutable/chunks/0wtdx5gy0autr.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/1jp3s4ouxoyr3.js","/creators-assets/_next/static/immutable/chunks/2ghns2teubdvo.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3ogkzi2dwy7m5.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2hnfu5uxkt8n0.js","/creators-assets/_next/static/immutable/chunks/0hkuwyfzgyt29.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/0_fhuyoczujnr.js","/creators-assets/_next/static/immutable/chunks/0b95zai6bhh8l.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2qhn_o-66b-q9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3lqafyeq6rldt.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/1zvmc9yy7z5jg.js"],"S"] 51:T61c,

Transform your Framer site with stunning 3D animated backgrounds powered by Vanta.js and Three.js.

10 Premium Effects

Choose from Waves, Birds, Fog, Clouds, Net, Cells, Dots, Rings, Globe, and Halo — each with unique visual appeal.

Fully Customizable

Adjust colors, speed, zoom, and effect-specific parameters
Fine-tune particle density, spacing, and movement
Control mouse, touch, and gyroscope interactions
Add custom content overlays with positioning controls

Perfect For…

Hero sections with immersive backgrounds
Landing pages that demand attention
Portfolio and agency websites
Product launches and special campaigns

Content Overlay System

Built-in content layer with flexible positioning (top, center, bottom), padding controls, opacity adjustment, and 12 CSS blend modes for creative effects.

Performance Optimized

Scripts load asynchronously with proper cleanup. Canvas preview shows gradient placeholder for faster editing workflow.

Mobile Responsive

All effects adapt seamlessly to any screen size with automatic mobile optimization.

No Code Required

Configure everything visually through Framer's property panel — no coding knowledge needed.

52:T7c1,

Browser Media Mockup - Detailed Description

Transform your presentations with professional browser mockups that showcase your digital work in stunning detail.

What It Does

Browser Media Mockup creates authentic browser interfaces for displaying videos and images. Whether you're presenting a website redesign, demonstrating a web application, or showcasing digital content, this component provides the realistic browser chrome that makes your work look professional and polished.

Key Features

Flexible Media Support

Video Display: Full support for .mp4 videos with playback controls
Image Display: High-quality image rendering with responsive optimization
Media Toggle: Switch between video and image modes instantly

Multiple Source Options

URL Input: Direct links to YouTube, Vimeo, or any hosted media
File Upload: Local file support with drag-and-drop functionality
CMS Integration: Seamless connection to Framer CMS for dynamic content

Authentic Browser UI

Traffic Light Buttons: Realistic macOS-style window controls with hover animations
URL Bar: Customizable address bar with lock icon and text truncation
Browser Themes: Choose from Light, Dark, or Safari styling options

Professional Customization

Video Controls: Toggle autoplay, muting, looping, and control visibility
Visual Polish: Adjustable corner radius and optional drop shadows
Responsive Design: Automatic scaling and text truncation for all screen sizes

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-cfdc48f3-559a-41d2-ad61-edbc7d3359fc-all:/unified/creator/cfdc48f3-559a-41d2-ad61-edbc7d3359fc/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cfdc48f3-559a-41d2-ad61-edbc7d3359fc:/unified/posts/?creator=cfdc48f3-559a-41d2-ad61-edbc7d3359fc&with=reposts":[{"data":[{"id":"019ed61a-0144-712d-b08a-c287919e06ee","title":null,"body":"

Hello 3.0 World!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello 3.0 World!"}]}]},"author":{"framerUserId":"cfdc48f3-559a-41d2-ad61-edbc7d3359fc","name":"Rob M","slug":"rob-m","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165838/avatar-X97e8LTsa5v38YfIe4gBsTj9XSlhgU.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T15:01:29.034Z","updatedAt":"2026-06-17T15:01:29.034Z"},{"id":"0199cf42-b3be-7e5c-8059-9b98d1ec9eaf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cfdc48f3-559a-41d2-ad61-edbc7d3359fc","name":"Rob M","slug":"rob-m","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165838/avatar-X97e8LTsa5v38YfIe4gBsTj9XSlhgU.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"HNkyXpUjEkwP9KP045rX","resolved":true,"title":"Vanta Backgrounds","body":"$51","bodyJson":null,"introduction":"10 animated 3D effects, zero code","slug":"vanta-backgrounds","author":{"framerUserId":"cfdc48f3-559a-41d2-ad61-edbc7d3359fc","name":"Rob M","slug":"rob-m","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165838/avatar-X97e8LTsa5v38YfIe4gBsTj9XSlhgU.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/HNkyXpUjEkwP9KP045rX/vanta-backgrounds-22JHVGWpjzFVmh1FAUCLDBrvB58FIm","metadata":{"tint":{"h":225,"s":62,"l":20},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-04T16:23:43.079Z","updatedAt":"2026-05-04T14:29:27.155Z","publishedAt":"2025-10-10T17:54:39.166Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://vantajs.framer.website/","price":"9","paymentUrl":"https://buy.stripe.com/28E4gy2Dq7nv5lo1vee3e09","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"5C9rjmcc0MybrHv6fwcD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-10T17:54:39.166Z","updatedAt":"2025-10-10T17:54:39.166Z"},{"id":"01990b2f-4d2e-7bc8-a71f-87fff08d6ae8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cfdc48f3-559a-41d2-ad61-edbc7d3359fc","name":"Rob M","slug":"rob-m","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165838/avatar-X97e8LTsa5v38YfIe4gBsTj9XSlhgU.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZwQDoa1OL09NdUapVyzB","resolved":true,"title":"Browser Media Mockup","body":"$52","bodyJson":null,"introduction":"Realistic browser mockup for any media","slug":"browser-media-mockup","author":{"framerUserId":"cfdc48f3-559a-41d2-ad61-edbc7d3359fc","name":"Rob M","slug":"rob-m","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165838/avatar-X97e8LTsa5v38YfIe4gBsTj9XSlhgU.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ZwQDoa1OL09NdUapVyzB/browser-media-mockup-f16MpbPvLlK0pjNp8QQ0nsIqvyNhA2","metadata":{"tint":{"h":34,"s":89,"l":44},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-21T16:00:05.960Z","updatedAt":"2026-05-04T14:34:18.416Z","publishedAt":"2025-09-02T16:07:53.390Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://golden-part-281815.framer.app/","price":"6","paymentUrl":"https://buy.stripe.com/eVqaEW1zm4bj5lofm4e3e0a","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"XJj2pVXxqx7p54pGXKGQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-02T16:07:53.390Z","updatedAt":"2025-09-02T16:07:53.390Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]