[{"data":1,"prerenderedAt":1576},["ShallowReactive",2],{"featured-components":3},[4,273,460,710,978,1285],{"id":5,"title":6,"body":7,"categories":239,"component_copy_url":243,"createdAt":244,"description":224,"download_url":245,"extension":246,"featured":247,"features":248,"hasGradient":254,"iframe":243,"image":255,"isFree":254,"isNew":247,"lemonsqueezy_variant_id":224,"meta":256,"navigation":247,"path":258,"polar_product_id":259,"polar_sandbox_product_id":245,"previewImage":260,"price":261,"published":254,"robots":245,"seo":262,"slug":263,"stem":264,"tagline":265,"tags":266,"__hash__":272},"components/components/CMSGalleryLightbox.md","CMS Gallery Lightbox",{"type":8,"value":9,"toc":223},"minimark",[10,15,24,28,34,40,46,52,56,62,68,74,85,89,94,99,121,125,128,133,148,153,164,169,177,181,187,193,199,203,209,213,216,220],[11,12,14],"h2",{"id":13},"transform-your-cms-collections","Transform Your CMS Collections",[16,17,18,19,23],"p",{},"A CMS masonry gallery component with built-in ",[20,21,22],"strong",{},"GLightbox"," support, interactive hover effects, and smart image extraction. It effortlessly transforms raw CMS data or custom Framer gallery components into a stunning, fully responsive masonry grid.",[11,25,27],{"id":26},"features","Features",[16,29,30,33],{},[20,31,32],{},"Smart Image Extraction","\nDrop any custom component (like a custom 2x3 grid) into the slot, and this component will intelligently extract, deduplicate, and natively render all images into a seamless masonry layout.",[16,35,36,39],{},[20,37,38],{},"Masonry & Grid Layouts","\nToggle between an automatic responsive masonry layout (perfect for varying image heights) or a clean, fixed-height Grid layout with customizable image fit settings.",[16,41,42,45],{},[20,43,44],{},"GLightbox Integration","\nClick-to-open lightbox for CMS images and videos, complete with fully customizable captions powered by your CMS text fields.",[16,47,48,51],{},[20,49,50],{},"Hover Effects","\nScale, fade, slide, and bounce animations with customizable overlay colors, icons, and background blur effects.",[11,53,55],{"id":54},"use-cases","Use Cases",[16,57,58,61],{},[20,59,60],{},"Portfolio Galleries"," — Display your creative work with a dynamic masonry layout and professional lightbox experience.",[16,63,64,67],{},[20,65,66],{},"Photography Showcases"," — Build a stunning, Pinterest-style photography grid that effortlessly scales across devices.",[16,69,70,73],{},[20,71,72],{},"Video Galleries"," — Showcase your video content natively within a lightbox from your CMS URLs.",[16,75,76],{},[77,78],"img",{"alt":79,"className":80,"src":84},"CMS Gallery Lightbox Preview",[81,82,83],"w-full","mb-6","rounded-[20px]","/framerhub/img/components/control/cms-gallery-lightbox.jpg",[11,86,88],{"id":87},"how-to-use","How to Use",[90,91,93],"h3",{"id":92},"installation","Installation",[16,95,96],{},[20,97,98],{},"VIDEO PLACEHOLDER: Installation Tutorial",[100,101,102,106,109,112,115,118],"ol",{},[103,104,105],"li",{},"Log in to your account at framerhub.io",[103,107,108],{},"Navigate to framerhub.io/dashboard",[103,110,111],{},"Find CMS Gallery Lightbox in your Recent Purchases",[103,113,114],{},"Click the \"Copy\" button",[103,116,117],{},"Open your Framer project",[103,119,120],{},"Paste the component anywhere on your canvas (Cmd/Ctrl + V)",[90,122,124],{"id":123},"customization","Customization",[16,126,127],{},"Connect your Framer CMS collection to the component slot.",[16,129,130],{},[20,131,132],{},"Layout Settings",[134,135,136,139,142,145],"ul",{},[103,137,138],{},"Toggle between Masonry and Grid Layouts",[103,140,141],{},"Adjust Image Height and Fit (in Grid mode)",[103,143,144],{},"Adjust Columns and Gap",[103,146,147],{},"Customize Item Border Radius and Shadow Intensity",[16,149,150],{},[20,151,152],{},"Lightbox & Hover",[134,154,155,158,161],{},[103,156,157],{},"Enable or disable the Lightbox",[103,159,160],{},"Enable hover effects and select animations (Scale, Fade, Slide, Bounce)",[103,162,163],{},"Customize the overlay color, icon type (Zoom, Plus, View), icon size, and icon colors",[16,165,166],{},[20,167,168],{},"Captions",[134,170,171,174],{},[103,172,173],{},"Toggle Show Caption to display image information inside the lightbox",[103,175,176],{},"Adjust Caption Font, Color, Background, Padding, and Margin directly from the properties panel",[90,178,180],{"id":179},"quick-tips","Quick Tips",[16,182,183,186],{},[20,184,185],{},"Custom Components"," — If you use a custom component variant inside the CMS slot, the Lightbox will automatically extract all its images and render them seamlessly into the masonry grid while ignoring hidden responsive variants.",[16,188,189,192],{},[20,190,191],{},"Best Performance"," — Optimize your CMS images before uploading them for faster load times.",[16,194,195,198],{},[20,196,197],{},"Layout Sizing"," — Ensure your container is sized appropriately to allow the masonry layout to render columns correctly on all breakpoints.",[11,200,202],{"id":201},"license","License",[16,204,205,208],{},[20,206,207],{},"Single Use License"," — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[11,210,212],{"id":211},"refund-policy","Refund Policy",[16,214,215],{},"Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!",[11,217,219],{"id":218},"why-designers-love-this","Why Designers Love This",[16,221,222],{},"It turns standard CMS collections into highly engaging, interactive portfolios instantly, complete with a built-in lightbox experience that usually requires complex external libraries and custom code overrides.",{"title":224,"searchDepth":225,"depth":225,"links":226},"",2,[227,228,229,230,236,237,238],{"id":13,"depth":225,"text":14},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":231},[232,234,235],{"id":92,"depth":233,"text":93},3,{"id":123,"depth":233,"text":124},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":211,"depth":225,"text":212},{"id":218,"depth":225,"text":219},[240,241,242],"CMS","Gallery","Slider","https://foolish-llama-484220.framer.app/","2026-06-02T00:00:00.000Z",null,"md",true,[249,250,251,252,253],"Native Masonry & Grid Layouts","Smart Image Extraction (Supports Custom Components)","GLightbox Integration (Images & Video)","Interactive Hover Effects (Scale, Fade, Slide, Bounce)","Customizable Captions",false,"/framerhub/img/components/cms-gallery-lightbox.jpg",{"variants":257},1,"/components/cmsgallerylightbox","66985f2b-8ae1-4b4a-93e6-59c00f1c8bca","/framerhub/img/components/large/cms-gallery-lightbox.jpg",18,{"title":6,"description":224},"cms-gallery-lightbox","components/CMSGalleryLightbox","A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects.",[267,242,268,269,270,271],"Masonry","Grid","Images","Video","Lightbox","_S9TZnTmsq25eQe02pa39FKNVSceBS75Ove-BQO2fRs",{"id":274,"title":275,"body":276,"categories":435,"component_copy_url":438,"createdAt":439,"description":224,"download_url":245,"extension":246,"featured":247,"features":440,"hasGradient":254,"iframe":438,"image":446,"isFree":254,"isNew":247,"lemonsqueezy_variant_id":224,"meta":447,"navigation":247,"path":448,"polar_product_id":449,"polar_sandbox_product_id":245,"previewImage":330,"price":450,"published":247,"robots":245,"seo":451,"slug":280,"stem":452,"tagline":453,"tags":454,"__hash__":459},"components/components/DelphiTunnel.md","DelphiTunnel",{"type":8,"value":277,"toc":422},[278,281,284,286,292,298,304,310,312,318,324,331,333,335,339,354,356,359,364,375,380,388,390,395,401,407,409,413,415,417,419],[11,279,275],{"id":280},"delphitunnel",[16,282,283],{},"Build the digital version of you to scale your expertise and availability, infinitely. DelphiTunnel is a robust infinite 3D tunnel background that showcases your images in a looping environment.",[11,285,27],{"id":26},[16,287,288,291],{},[20,289,290],{},"Infinite 3D Looping","\nOptimized continuous scrolling that loops your images infinitely.",[16,293,294,297],{},[20,295,296],{},"Interactive Mouse Scrolling","\nAllows users to infinitely scroll through the tunnel seamlessly when hovering over it with their mouse or touch dragging.",[16,299,300,303],{},[20,301,302],{},"Randomized Grid Snapping","\nRandomly distribute your images across the tunnel walls while keeping them perfectly aligned and snapped to the grid.",[16,305,306,309],{},[20,307,308],{},"Device Quality Detection","\nAuto-detects the user's device and adjusts the renderer settings so your site never lags on low-end hardware.",[11,311,55],{"id":54},[16,313,314,317],{},[20,315,316],{},"Hero Backgrounds"," — Perfect for impactful headers or portfolio landing pages.",[16,319,320,323],{},[20,321,322],{},"Immersive Galleries"," — Display an abstract collection of photos as the user scrolls.",[16,325,326],{},[77,327],{"alt":328,"className":329,"src":330},"DelphiTunnel Preview",[81,82,83],"/framerhub/img/components/large/delphitunnel.jpg",[11,332,88],{"id":87},[90,334,93],{"id":92},[16,336,337],{},[20,338,98],{},[100,340,341,343,345,348,350,352],{},[103,342,105],{},[103,344,108],{},[103,346,347],{},"Find DelphiTunnel in your Recent Purchases",[103,349,114],{},[103,351,117],{},[103,353,120],{},[90,355,124],{"id":123},[16,357,358],{},"Easily adjust everything from colors to scroll speed.",[16,360,361],{},[20,362,363],{},"Colors",[134,365,366,369,372],{},[103,367,368],{},"Background Color",[103,370,371],{},"Line Color",[103,373,374],{},"Line Opacity",[16,376,377],{},[20,378,379],{},"Behavior",[134,381,382,385],{},[103,383,384],{},"Speed",[103,386,387],{},"Images (Upload your own)",[90,389,180],{"id":179},[16,391,392,394],{},[20,393,191],{}," — Keep the Quality set to \"Auto\" so mobile devices get smooth framerates.",[16,396,397,400],{},[20,398,399],{},"Color Combinations"," — Dark backgrounds with low-opacity lines create the most immersive futuristic feel.",[16,402,403,406],{},[20,404,405],{},"Layering"," — Place text inside a Framer Stack positioned absolutely over the tunnel to create a stunning hero section.",[11,408,202],{"id":201},[16,410,411,208],{},[20,412,207],{},[11,414,212],{"id":211},[16,416,215],{},[11,418,219],{"id":218},[16,420,421],{},"It brings a complex WebGL 3D effect natively into Framer without needing any coding skills.",{"title":224,"searchDepth":225,"depth":225,"links":423},[424,425,426,427,432,433,434],{"id":280,"depth":225,"text":275},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":428},[429,430,431],{"id":92,"depth":233,"text":93},{"id":123,"depth":233,"text":124},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":211,"depth":225,"text":212},{"id":218,"depth":225,"text":219},[436,437],"3D","Backgrounds","https://high-balance-378453.framer.app/","2026-06-01T00:00:00.000Z",[441,442,443,444,445],"Fully customizable colors and grid","Built with Three.js and GSAP for fluid 60fps animations","Auto-quality detection for mobile devices","Interactive infinite hover scrolling","Randomized grid positioning","/framerhub/img/components/delphitunnel.jpg",{"variants":257},"/components/delphitunnel","423a947b-4e84-460a-ba59-5bf71c00c07a",14,{"title":275,"description":224},"components/DelphiTunnel","An infinite 3D image tunnel for your Framer sites.",[436,455,456,457,458],"Tunnel","GSAP","Three.js","Infinite","mAdpOF_T-KaYg3t8ZT-UPJyYsFy4uz-gsWjXxiQMCJY",{"id":461,"title":462,"body":463,"categories":682,"component_copy_url":683,"createdAt":684,"description":224,"download_url":245,"extension":246,"featured":247,"features":685,"hasGradient":254,"iframe":694,"image":695,"isFree":254,"isNew":254,"lemonsqueezy_variant_id":696,"meta":697,"navigation":247,"path":698,"polar_product_id":699,"polar_sandbox_product_id":245,"previewImage":700,"price":450,"published":247,"robots":245,"seo":701,"slug":702,"stem":703,"tagline":704,"tags":705,"__hash__":709},"components/components/cms-gallery-slider.md","CMS Gallery Slider",{"type":8,"value":464,"toc":669},[465,469,472,474,480,486,492,498,500,506,512,518,524,531,533,535,550,552,557,568,573,587,592,609,614,625,627,633,639,645,651,653,657,659,661,663,666],[11,466,468],{"id":467},"versatile-gallery-slider-for-framer","Versatile Gallery Slider for Framer",[16,470,471],{},"A flexible gallery slider component that seamlessly integrates with Framer CMS or works standalone with custom images. Perfect for product galleries, portfolios, and image showcases with smooth animations and fully customizable controls.",[11,473,27],{"id":26},[16,475,476,479],{},[20,477,478],{},"Dual Gallery Modes","\nSwitch between CMS Gallery mode (connect directly to your CMS gallery field) or Normal Gallery mode (add images manually) with a simple toggle.",[16,481,482,485],{},[20,483,484],{},"Smart Thumbnail Navigation","\nPosition thumbnails on any side (bottom, top, left, right) with automatic responsive behavior—side thumbnails switch to bottom on mobile. Auto-scrolling keeps the active thumbnail visible.",[16,487,488,491],{},[20,489,490],{},"Smooth Transitions","\nChoose from 5 transition types: Slide, Fade, Scale, Slide+Scale, or Slide+Fade. Control animation speed and direction (horizontal/vertical) for the perfect effect.",[16,493,494,497],{},[20,495,496],{},"Custom Arrows","\nFully customizable navigation arrows with hover effects, custom icons support, and precise positioning controls.",[11,499,55],{"id":54},[16,501,502,505],{},[20,503,504],{},"Product Pages"," — Showcase multiple product images with thumbnail previews for e-commerce sites.",[16,507,508,511],{},[20,509,510],{},"Portfolios"," — Display project galleries with smooth transitions and professional presentation.",[16,513,514,517],{},[20,515,516],{},"Real Estate Listings"," — Present property photos with intuitive navigation.",[16,519,520,523],{},[20,521,522],{},"Blog Galleries"," — Enhance articles with connected CMS image galleries.",[16,525,526],{},[77,527],{"alt":528,"className":529,"src":530},"CMS Gallery Slider Preview",[81,82,83],"/framerhub/img/components/control/cms-gallery-slider.jpg",[11,532,88],{"id":87},[90,534,93],{"id":92},[100,536,537,539,541,544,546,548],{},[103,538,105],{},[103,540,108],{},[103,542,543],{},"Find CMS Gallery Slider in your Recent Purchases",[103,545,114],{},[103,547,117],{},[103,549,120],{},[90,551,124],{"id":123},[16,553,554],{},[20,555,556],{},"Gallery Source",[134,558,559,562,565],{},[103,560,561],{},"Toggle between \"CMS\" and \"Normal\" modes",[103,563,564],{},"For CMS: Connect your CMS Gallery component to the slot",[103,566,567],{},"For Normal: Add images directly to the Gallery Images array",[16,569,570],{},[20,571,572],{},"Large Image Settings",[134,574,575,578,581,584],{},[103,576,577],{},"Width/Height: Set dimensions (%, px, vh supported)",[103,579,580],{},"Object Fit: Cover, Contain, Fill, None, Scale Down",[103,582,583],{},"Border Radius: Round the image corners",[103,585,586],{},"Animation: Speed, direction, and transition type",[16,588,589],{},[20,590,591],{},"Thumbnail Settings",[134,593,594,597,600,603,606],{},[103,595,596],{},"Position: Bottom, Top, Left, Right",[103,598,599],{},"Size & Gap: Control thumbnail dimensions",[103,601,602],{},"Opacity: Active vs inactive states",[103,604,605],{},"Animation: Scale, Lift, Glow, or Scale+Lift hover effects",[103,607,608],{},"Border & Background: Full styling control",[16,610,611],{},[20,612,613],{},"Arrow Controls",[134,615,616,619,622],{},[103,617,618],{},"Size, position, and border radius",[103,620,621],{},"Colors for normal and hover states",[103,623,624],{},"Upload custom arrow icons",[90,626,180],{"id":179},[16,628,629,632],{},[20,630,631],{},"Responsive Thumbnails"," — Left/right positioned thumbnails automatically move to bottom on screens smaller than the breakpoint (default 768px).",[16,634,635,638],{},[20,636,637],{},"CMS Connection"," — When using CMS mode, connect a CMS Gallery component to the slot. The main image becomes the first slide.",[16,640,641,644],{},[20,642,643],{},"Performance"," — Use appropriately sized images. The component handles display sizing, but source images affect load time.",[16,646,647,650],{},[20,648,649],{},"Transition Combos"," — Slide+Fade and Slide+Scale offer the most dynamic transitions for showcasing products.",[11,652,202],{"id":201},[16,654,655,208],{},[20,656,207],{},[11,658,212],{"id":211},[16,660,215],{},[11,662,219],{"id":218},[16,664,665],{},"Zero code required to create stunning, CMS-connected product galleries. Every aspect is customizable through Framer's properties panel—from thumbnail animations to arrow styling—making it perfect for e-commerce and portfolio sites where image presentation matters.",[667,668],"hr",{},{"title":224,"searchDepth":225,"depth":225,"links":670},[671,672,673,674,679,680,681],{"id":467,"depth":225,"text":468},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":675},[676,677,678],{"id":92,"depth":233,"text":93},{"id":123,"depth":233,"text":124},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":211,"depth":225,"text":212},{"id":218,"depth":225,"text":219},[240,241,242],"https://framer.com/m/CMSGallerySlider-9ZLu.js","2025-12-01T00:00:00.000Z",[686,687,688,689,690,691,692,693],"Works with CMS Gallery fields or standard image arrays","Smooth animations with five transition styles (Slide, Fade, Scale, combinations)","Four thumbnail positions (Top, Bottom, Left, Right) with auto-responsive behavior","Customizable navigation arrows with hover effects","Full control over thumbnail styling, spacing, and animations","Auto-scroll to active thumbnail for seamless browsing","Performance-optimized with smooth 60fps transitions","No coding required","https://extended-founders-035096.framer.app/","/framerhub/img/components/cms-gallery-slider.jpg","PLACEHOLDER",{"variants":257},"/components/cms-gallery-slider","994e5edf-ce19-4c37-be45-9426eda111e7","/framerhub/img/components/large/cms-gallery-slider.jpg",{"title":462,"description":224},"cms-gallery-slider","components/cms-gallery-slider","Transform CMS galleries into smooth, animated sliders with customizable thumbnails and navigation. ",[706,242,240,241,707,269,708],"Interactive","Product","Animation","N5pMswFT8UdQL4WBvYjcx2SLzkvJJB9WKt8wxh2oTq0",{"id":711,"title":712,"body":713,"categories":951,"component_copy_url":952,"createdAt":684,"description":224,"download_url":245,"extension":246,"featured":247,"features":953,"hasGradient":254,"iframe":962,"image":963,"isFree":254,"isNew":254,"lemonsqueezy_variant_id":964,"meta":965,"navigation":247,"path":966,"polar_product_id":967,"polar_sandbox_product_id":245,"previewImage":968,"price":969,"published":247,"robots":245,"seo":970,"slug":971,"stem":972,"tagline":973,"tags":974,"__hash__":977},"components/components/cms-masonry-lightbox.md","CMS Masonry Lightbox",{"type":8,"value":714,"toc":939},[715,719,722,725,727,733,739,745,751,757,759,764,770,776,782,788,795,797,799,802,817,821,826,840,845,856,862,876,881,895,898,900,906,912,918,923,925,929,931,934,937],[11,716,718],{"id":717},"beautiful-masonry-galleries-from-your-cms","Beautiful Masonry Galleries from Your CMS",[16,720,721],{},"Turn any CMS collection into a professional masonry gallery with lightbox preview and category filtering. Perfect for portfolios, product showcases, and media libraries.",[16,723,724],{},"Built for designers who need production-ready galleries without touching code.",[11,726,27],{"id":26},[16,728,729,732],{},[20,730,731],{},"Auto-Adapting Masonry Layout","\nConnect any CMS collection and watch it transform into a Pinterest-style masonry grid. Supports 1-12 columns with custom gap spacing.",[16,734,735,738],{},[20,736,737],{},"Built-In Lightbox","\nClick any image or video to open an elegant full-screen lightbox. Automatically detects media types and handles both images and videos seamlessly.",[16,740,741,744],{},[20,742,743],{},"Smart Category Filtering","\nAdd filter pills that automatically sync with your CMS categories. Choose single-select or multi-select modes. Fully customizable pill colors, fonts, and spacing.",[16,746,747,750],{},[20,748,749],{},"Customizable Hover Effects","\nFour hover animations (scale, fade, slide, bounce) with adjustable overlay colors, icons, and shadow intensity for polished interactions.",[16,752,753,756],{},[20,754,755],{},"Flexible Grid Control","\nAdjust columns, gaps, and shadows from the properties panel. Everything responds instantly without code.",[11,758,55],{"id":54},[16,760,761,763],{},[20,762,60],{}," — Showcase design work with category filters that let visitors browse by project type",[16,765,766,769],{},[20,767,768],{},"Product Showcases"," — Display product images with lightbox zoom for detailed views and filtering by category",[16,771,772,775],{},[20,773,774],{},"Photography Sites"," — Create stunning image galleries with masonry layouts that adapt to different image sizes",[16,777,778,781],{},[20,779,780],{},"Case Study Libraries"," — Organize client work with filterable categories and quick preview capabilities",[16,783,784,787],{},[20,785,786],{},"Media Archives"," — Build searchable collections of images and videos with elegant lightbox playback",[16,789,790],{},[77,791],{"alt":792,"className":793,"src":794},"CMS Masonry Lightbox Preview",[81,82,83],"/framerhub/img/components/control/cms-masonry-lightbox.jpg",[11,796,88],{"id":87},[90,798,93],{"id":92},[16,800,801],{},"After purchasing from FramerHub:",[100,803,804,806,808,811,813,815],{},[103,805,105],{},[103,807,108],{},[103,809,810],{},"Find CMS Masonry Lightbox in your Recent Purchases",[103,812,114],{},[103,814,117],{},[103,816,120],{},[90,818,820],{"id":819},"setup","Setup",[16,822,823],{},[20,824,825],{},"Connect Your CMS",[100,827,828,831,834,837],{},[103,829,830],{},"Drag the component onto your canvas",[103,832,833],{},"In the properties panel, click \"Connect CMS\"",[103,835,836],{},"Select your CMS collection",[103,838,839],{},"The masonry layout appears automatically",[16,841,842],{},[20,843,844],{},"Configure Layout",[134,846,847,850,853],{},[103,848,849],{},"Set your preferred number of columns (1-12)",[103,851,852],{},"Adjust gap spacing between items",[103,854,855],{},"Choose shadow intensity for depth",[16,857,858,861],{},[20,859,860],{},"Enable Lightbox"," (optional)",[134,863,864,867,870,873],{},[103,865,866],{},"Toggle \"Enable Lightbox\" in the properties panel",[103,868,869],{},"Specify your CMS image field name (default: \"image\")",[103,871,872],{},"Specify your CMS video field name (default: \"video\")",[103,874,875],{},"Customize hover effects and overlay styles",[16,877,878,861],{},[20,879,880],{},"Add Category Filtering",[100,882,883,886,889,892],{},[103,884,885],{},"Paste the CMSMasonboxFilter component above your gallery",[103,887,888],{},"Set the \"Category Field\" to match your CMS field name",[103,890,891],{},"Choose single or multi-select mode",[103,893,894],{},"Customize pill colors, fonts, and spacing",[16,896,897],{},"Both components automatically sync using a \"Store Key\"—no manual connection needed.",[90,899,180],{"id":179},[16,901,902,905],{},[20,903,904],{},"Column Strategy"," — Use 3-4 columns on desktop, 2 on tablet, 1 on mobile for best readability",[16,907,908,911],{},[20,909,910],{},"Field Names"," — Make sure your image/video field names match exactly what you set in the properties panel",[16,913,914,917],{},[20,915,916],{},"Filter Setup"," — If your CMS uses a different field name for categories, update both components to match",[16,919,920,922],{},[20,921,643],{}," — For large collections (90+ items), consider using CMS pagination limits",[11,924,202],{"id":201},[16,926,927,208],{},[20,928,207],{},[11,930,219],{"id":218},[16,932,933],{},"Connect your CMS and get a polished masonry gallery in seconds. No wrestling with layouts or writing filter logic—just paste, connect, and customize through Framer's properties panel.",[16,935,936],{},"Perfect for agencies building portfolio sites and freelancers delivering client galleries without custom development.",[667,938],{},{"title":224,"searchDepth":225,"depth":225,"links":940},[941,942,943,944,949,950],{"id":717,"depth":225,"text":718},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":945},[946,947,948],{"id":92,"depth":233,"text":93},{"id":819,"depth":233,"text":820},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":218,"depth":225,"text":219},[240,241,242],"https://framer.com/m/CMSMasonbox-AyOFkb.js",[954,955,956,957,958,959,960,961],"Auto-adapting masonry layout for any CMS collection","Built-in lightbox for images and videos","Category filtering with single or multi-select","Customizable hover effects and transitions","Fully responsive grid (1-12 columns)","Custom category pill styling","Works with any CMS field structure","Zero coding required","https://stupendous-area-590212.framer.app/","/framerhub/img/components/cms-masonry-lightbox.jpg","1014395",{},"/components/cms-masonry-lightbox","3d5cae4f-dbc2-4dac-9deb-e2c36bdd7aae","/framerhub/img/components/large/cms-masonry-lightbox.jpg",29,{"title":712,"description":224},"cms-masonry-lightbox","components/cms-masonry-lightbox","Transform your CMS collections into beautiful masonry galleries with built-in lightbox and filtering—no code required.",[240,267,241,271,975,976,268,269],"Filter","Portfolio","Dg6kcVqsoSjhQF-jpJI3hd6LeDtruetYYY1RrWyYWyA",{"id":979,"title":980,"body":981,"categories":1252,"component_copy_url":1255,"createdAt":1256,"description":224,"download_url":245,"extension":246,"featured":247,"features":1257,"hasGradient":254,"iframe":1266,"image":1267,"isFree":254,"isNew":254,"lemonsqueezy_variant_id":1268,"meta":1269,"navigation":247,"path":1270,"polar_product_id":1271,"polar_sandbox_product_id":245,"previewImage":1272,"price":1273,"published":247,"robots":245,"seo":1274,"slug":1275,"stem":1276,"tagline":1277,"tags":1278,"__hash__":1284},"components/components/exit-popup.md","Exist Popup",{"type":8,"value":982,"toc":1240},[983,987,990,992,998,1004,1010,1016,1022,1024,1030,1036,1042,1048,1055,1057,1059,1063,1078,1084,1089,1106,1111,1128,1133,1150,1154,1162,1167,1193,1195,1201,1206,1212,1218,1220,1223,1225,1227,1229,1232,1234],[11,984,986],{"id":985},"exitpopup-smart-popup-component","ExitPopup — Smart Popup Component",[16,988,989],{},"Create engaging popups that appear exactly when you want them. Perfect for announcements, newsletter signups, exit offers, and promotional messages.",[11,991,27],{"id":26},[16,993,994,997],{},[20,995,996],{},"Multiple Trigger Modes","\nChoose when your popup appears: after a time delay, when users try to leave (exit intent), or after scrolling a certain distance.",[16,999,1000,1003],{},[20,1001,1002],{},"Auto-Close with Progress","\nAutomatically dismiss popups after a set duration with an optional progress bar that pauses on hover.",[16,1005,1006,1009],{},[20,1007,1008],{},"Flexible Positioning","\nDisplay as a centered overlay with backdrop or position in any corner of the screen.",[16,1011,1012,1015],{},[20,1013,1014],{},"Smooth Animations","\nFour animation styles: Fade, Zoom, Slide Up, and Slide Down with customizable speed.",[16,1017,1018,1021],{},[20,1019,1020],{},"Slot-Based Content","\nConnect any Framer design as popup content — full creative freedom.",[11,1023,55],{"id":54},[16,1025,1026,1029],{},[20,1027,1028],{},"Newsletter Signup"," — Capture emails with a timed popup after visitors engage with content.",[16,1031,1032,1035],{},[20,1033,1034],{},"Exit Intent Offer"," — Show special discounts when visitors try to leave.",[16,1037,1038,1041],{},[20,1039,1040],{},"Announcements"," — Display important updates in corner positions without blocking content.",[16,1043,1044,1047],{},[20,1045,1046],{},"Cookie Consent"," — Auto-closing notification with progress indicator.",[16,1049,1050],{},[77,1051],{"alt":1052,"className":1053,"src":1054},"Exist Popup Preview",[81,82,83],"/framerhub/img/components/control/exit-popup.jpg",[11,1056,88],{"id":87},[90,1058,93],{"id":92},[16,1060,1061],{},[20,1062,98],{},[100,1064,1065,1067,1069,1072,1074,1076],{},[103,1066,105],{},[103,1068,108],{},[103,1070,1071],{},"Find ExitPopup in your Recent Purchases",[103,1073,114],{},[103,1075,117],{},[103,1077,120],{},[16,1079,1080,1083],{},[20,1081,1082],{},"Popup Content","\nConnect your popup design by dragging a frame into the slot.",[16,1085,1086],{},[20,1087,1088],{},"When to Show (Trigger Settings)",[134,1090,1091,1094,1097,1100,1103],{},[103,1092,1093],{},"Trigger: After Time Delay, Exit Intent, or After Scrolling",[103,1095,1096],{},"Delay: Wait time before showing (0-30 seconds)",[103,1098,1099],{},"Exit Intent Sensitivity: Distance from top to trigger",[103,1101,1102],{},"Scroll Distance: How far to scroll before popup appears",[103,1104,1105],{},"Exit Warning: Show when visitor tries to leave the page",[16,1107,1108],{},[20,1109,1110],{},"Auto-Close",[134,1112,1113,1116,1119,1122,1125],{},[103,1114,1115],{},"Enable: Close popup automatically after duration",[103,1117,1118],{},"Duration: Time before auto-close (1-60 seconds)",[103,1120,1121],{},"Progress Bar: Show countdown indicator",[103,1123,1124],{},"Bar Position: Top or Bottom",[103,1126,1127],{},"Bar Color: Customize progress color",[16,1129,1130],{},[20,1131,1132],{},"Position",[134,1134,1135,1138,1141,1144,1147],{},[103,1136,1137],{},"Style: Center Overlay or Corner Position",[103,1139,1140],{},"Corner: Top Left, Top Right, Bottom Left, Bottom Right, Center",[103,1142,1143],{},"Edge Space: Distance from screen edges",[103,1145,1146],{},"Show Backdrop: Dark background behind popup",[103,1148,1149],{},"Backdrop Color: Overlay color",[16,1151,1152],{},[20,1153,708],{},[134,1155,1156,1159],{},[103,1157,1158],{},"Style: Fade, Zoom, Slide Up, Slide Down",[103,1160,1161],{},"Speed: Animation duration (0.1-2 seconds)",[16,1163,1164],{},[20,1165,1166],{},"Close Button",[134,1168,1169,1172,1175,1178,1181,1184,1187,1190],{},[103,1170,1171],{},"Show Close Button: Display X button",[103,1173,1174],{},"Hide if Auto-Close: Hide when using auto-close",[103,1176,1177],{},"Position: Inside or Outside popup",[103,1179,1180],{},"Distance: Spacing from corner",[103,1182,1183],{},"Size: Button size",[103,1185,1186],{},"Icon Size: X icon size",[103,1188,1189],{},"Icon Color: X icon color",[103,1191,1192],{},"Background: Button background color",[90,1194,180],{"id":179},[16,1196,1197,1200],{},[20,1198,1199],{},"Exit Intent"," — Works best on desktop. Set sensitivity to 10px for reliable triggering when cursor moves toward browser controls.",[16,1202,1203,1205],{},[20,1204,1110],{}," — Enable progress bar so users know the popup will dismiss. The timer pauses on hover for better UX.",[16,1207,1208,1211],{},[20,1209,1210],{},"Corner Positioning"," — Great for non-intrusive announcements. Use Bottom Right for cookie notices.",[16,1213,1214,1217],{},[20,1215,1216],{},"Slot Content"," — Design your popup as a separate frame, then connect it. This gives you full control over layout and styling.",[11,1219,202],{"id":201},[16,1221,1222],{},"Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[11,1224,212],{"id":211},[16,1226,215],{},[11,1228,219],{"id":218},[16,1230,1231],{},"ExitPopup combines powerful trigger options with intuitive controls. No coding required — just connect your design and configure when it appears. The auto-close feature with pause-on-hover provides a polished user experience that feels native to modern websites.",[667,1233],{},[16,1235,1236,1239],{},[20,1237,1238],{},"Need Help?"," Visit framerhub.io/support for documentation and video tutorials.",{"title":224,"searchDepth":225,"depth":225,"links":1241},[1242,1243,1244,1245,1249,1250,1251],{"id":985,"depth":225,"text":986},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":1246},[1247,1248],{"id":92,"depth":233,"text":93},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":211,"depth":225,"text":212},{"id":218,"depth":225,"text":219},[1253,1254,240],"Overlays","Scroll","https://framer.com/m/Existpopup-cJBW.js","2025-12-06T00:00:00.000Z",[1258,1259,1260,1261,1262,1263,1264,1265],"Three smart trigger modes (exit intent, scroll depth, timed)","Exit warning to prevent accidental tab closes","Optional auto-close with progress bar","Four smooth animations (fade, zoom, slide)","Center overlay or corner positioning","Fully customizable colors and styling","Drop in your own content with content slot","Works in any Framer project","https://existpopup.framer.website/demo","/framerhub/img/components/exist-popup.jpg","1112682",{"variants":233},"/components/exit-popup","821f260d-9aa0-4fa7-9a02-8c2b04cbe524","/framerhub/img/components/large/exist-popup.jpg",15,{"title":980,"description":224},"exist-popup","components/exit-popup","Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment.",[1279,1280,1199,1281,1282,708,1283],"Popup","Modal","Conversion","Lead Capture","Interaction","u48WLSy0pW1z0UDB-DDbY6I2-SHh6xifRVd4Aex41bQ",{"id":1286,"title":1287,"body":1288,"categories":1545,"component_copy_url":1546,"createdAt":1547,"description":224,"download_url":245,"extension":246,"featured":247,"features":1548,"hasGradient":254,"iframe":1557,"image":1558,"isFree":254,"isNew":254,"lemonsqueezy_variant_id":1559,"meta":1560,"navigation":247,"path":1561,"polar_product_id":1562,"polar_sandbox_product_id":245,"previewImage":1563,"price":1564,"published":247,"robots":245,"seo":1565,"slug":1566,"stem":1567,"tagline":1568,"tags":1569,"__hash__":1575},"components/components/interactive-particles.md","Interactive Particles",{"type":8,"value":1289,"toc":1532},[1290,1294,1297,1300,1302,1308,1314,1320,1326,1332,1338,1340,1346,1352,1358,1364,1370,1377,1379,1381,1383,1398,1400,1403,1408,1422,1427,1438,1443,1457,1461,1469,1473,1484,1486,1492,1498,1504,1510,1512,1516,1518,1520,1524,1527,1530],[11,1291,1293],{"id":1292},"interactive-image-particles-for-framer","Interactive Image Particles for Framer",[16,1295,1296],{},"Turn any image into a living, breathing particle field. Your images respond naturally to mouse movement and touch with smooth 3D depth effects.",[16,1298,1299],{},"Perfect for hero sections, portfolio showcases, and anywhere you want to make images unforgettable.",[11,1301,27],{"id":26},[16,1303,1304,1307],{},[20,1305,1306],{},"Image-to-Particle Conversion","\nUpload any image and watch it transform into thousands of interactive particles that maintain the original composition.",[16,1309,1310,1313],{},[20,1311,1312],{},"Interactive Touch Effects","\nParticles respond smoothly to mouse and touch input with organic ripple effects that create depth and engagement.",[16,1315,1316,1319],{},[20,1317,1318],{},"Multiple Particle Shapes","\nChoose from circle, square, soft-square, star, or hexagon shapes to match your design aesthetic.",[16,1321,1322,1325],{},[20,1323,1324],{},"Flexible Color Modes","\nDisplay in full color to preserve original imagery, or switch to black & white with four contrast presets (Natural, Balanced, Soft, Bright).",[16,1327,1328,1331],{},[20,1329,1330],{},"3D Depth Control","\nAdjust depth and spread to create subtle or dramatic 3D effects. Particles float at different layers, creating natural parallax.",[16,1333,1334,1337],{},[20,1335,1336],{},"Performance Optimization","\nBuilt-in quality controls let you balance visual impact with smooth performance across all devices.",[11,1339,55],{"id":54},[16,1341,1342,1345],{},[20,1343,1344],{},"Hero Images"," — Transform static hero images into interactive experiences that capture attention instantly",[16,1347,1348,1351],{},[20,1349,1350],{},"Portfolio Showcases"," — Display work samples with particle effects that invite exploration and engagement",[16,1353,1354,1357],{},[20,1355,1356],{},"About Pages"," — Add personality to team photos or founder images with subtle interactive motion",[16,1359,1360,1363],{},[20,1361,1362],{},"Product Highlights"," — Make product images memorable with touch-responsive particle animations",[16,1365,1366,1369],{},[20,1367,1368],{},"Brand Identity"," — Turn logos or brand imagery into distinctive interactive elements",[16,1371,1372],{},[77,1373],{"alt":1374,"className":1375,"src":1376},"Interactive Particles Preview",[81,82,83],"/framerhub/img/components/control/interactive-particles.jpg",[11,1378,88],{"id":87},[90,1380,93],{"id":92},[16,1382,801],{},[100,1384,1385,1387,1389,1392,1394,1396],{},[103,1386,105],{},[103,1388,108],{},[103,1390,1391],{},"Find Interactive Particles in your Recent Purchases",[103,1393,114],{},[103,1395,117],{},[103,1397,120],{},[90,1399,124],{"id":123},[16,1401,1402],{},"All settings are accessible through Framer's properties panel:",[16,1404,1405],{},[20,1406,1407],{},"Image Setup",[134,1409,1410,1413,1416,1419],{},[103,1411,1412],{},"Upload your image",[103,1414,1415],{},"Choose image fit (Fill, Cover, Contain, Scale Down)",[103,1417,1418],{},"Select style: Full Color or Black & White",[103,1420,1421],{},"Adjust contrast preset (for Black & White mode)",[16,1423,1424],{},[20,1425,1426],{},"Particle Appearance",[134,1428,1429,1432,1435],{},[103,1430,1431],{},"Select particle shape (5 options)",[103,1433,1434],{},"Set particle size",[103,1436,1437],{},"Adjust detail level (brightness threshold)",[16,1439,1440],{},[20,1441,1442],{},"Motion & Effects",[134,1444,1445,1448,1451,1454],{},[103,1446,1447],{},"Toggle entrance animation on/off",[103,1449,1450],{},"Control 3D depth intensity",[103,1452,1453],{},"Adjust particle spread",[103,1455,1456],{},"Freeze movement option for static look",[16,1458,1459],{},[20,1460,1283],{},[134,1462,1463,1466],{},[103,1464,1465],{},"Set touch interaction size",[103,1467,1468],{},"Control touch strength (displacement intensity)",[16,1470,1471],{},[20,1472,643],{},[134,1474,1475,1478,1481],{},[103,1476,1477],{},"Adjust max resolution (lower = faster)",[103,1479,1480],{},"Set sampling rate (1=high quality, 4=faster)",[103,1482,1483],{},"Control minimum brightness size",[90,1485,180],{"id":179},[16,1487,1488,1491],{},[20,1489,1490],{},"Best Images"," — High-contrast images with clear subjects work best. Portraits, logos, and silhouettes create strong effects",[16,1493,1494,1497],{},[20,1495,1496],{},"Performance Balance"," — Start with default settings. If performance lags, reduce max resolution to 200 and increase sampling to 2",[16,1499,1500,1503],{},[20,1501,1502],{},"Color Choice"," — Black & White mode often creates cleaner, more professional effects. Use \"Natural\" contrast for best results",[16,1505,1506,1509],{},[20,1507,1508],{},"Subtle is Better"," — Keep 3D depth around 4.0 and spread around 2.0 for natural-looking effects",[11,1511,202],{"id":201},[16,1513,1514,208],{},[20,1515,207],{},[11,1517,212],{"id":211},[16,1519,215],{},[11,1521,1523],{"id":1522},"why-designers-choose-this","Why Designers Choose This",[16,1525,1526],{},"Static images are forgettable. Interactive particles make them memorable. Upload any image and instantly create an experience that engages visitors through natural mouse and touch interaction.",[16,1528,1529],{},"No complex setup, no coding. Just add your image, adjust the look, and deploy. Perfect for agencies delivering premium sites and freelancers who want portfolio pieces that stand out.",[667,1531],{},{"title":224,"searchDepth":225,"depth":225,"links":1533},[1534,1535,1536,1537,1542,1543,1544],{"id":1292,"depth":225,"text":1293},{"id":26,"depth":225,"text":27},{"id":54,"depth":225,"text":55},{"id":87,"depth":225,"text":88,"children":1538},[1539,1540,1541],{"id":92,"depth":233,"text":93},{"id":123,"depth":233,"text":124},{"id":179,"depth":233,"text":180},{"id":201,"depth":225,"text":202},{"id":211,"depth":225,"text":212},{"id":1522,"depth":225,"text":1523},[706],"https://framer.com/m/InteractiveParticles-mH0A.js","2025-02-15T00:00:00.000Z",[1549,1550,1551,1552,1553,1554,1555,1556],"Converts any image into interactive particles","Mouse and touch interaction with ripple effects","Five particle shapes (circle, square, soft-square, star, hexagon)","Full color or black & white modes","Adjustable 3D depth and particle spread","Performance-optimized with quality controls","Optional entrance animation","Works in any section or layout","https://luxurious-centre-360676.framer.app/","/framerhub/img/components/interactive-particles.jpg","1117038",{},"/components/interactive-particles","ca5062e5-e7cb-4055-bb56-31862ee51ab1","/framerhub/img/components/large/interactive-particles.jpg",9,{"title":1287,"description":224},"interactive-particles","components/interactive-particles","Transform any image into an interactive 3D particle field that responds to mouse movement and touch.",[706,436,1570,708,1571,1572,1573,1574],"Particles","Image","Mouse","Effects","Touch","tEefz8CCcxx1kVQnK28Yryc9Wo9E8j-vnYpXJ3DhdCk",1788538917414]