[{"data":1,"prerenderedAt":1810},["ShallowReactive",2],{"featured-components":3},[4,360,626,897,1258,1561],{"id":5,"title":6,"body":7,"categories":327,"component_copy_url":331,"createdAt":332,"description":316,"download_url":333,"extension":334,"featured":335,"features":336,"hasGradient":343,"iframe":344,"image":345,"isFree":343,"lemonsqueezy_variant_id":316,"meta":346,"navigation":335,"path":348,"polar_product_id":349,"previewImage":350,"price":351,"published":335,"robots":333,"seo":352,"slug":353,"stem":354,"tagline":355,"tags":356,"__hash__":359},"components/components/SwiperCarousel.md","Swiper Carousel",{"type":8,"value":9,"toc":315},"minimark",[10,15,19,23,30,36,42,48,54,65,69,75,81,87,93,99,104,114,119,133,138,155,160,171,176,190,195,209,214,228,233,247,252,260,265,271,277,283,289,293,299,303,306,309],[11,12,14],"h2",{"id":13},"the-ultimate-carousel-for-framer","The Ultimate Carousel for Framer",[16,17,18],"p",{},"Transform your Framer projects with the most powerful carousel component available. Powered by Swiper.js, this component gives designers complete control over every aspect of their carousel – no code required.",[11,20,22],{"id":21},"features","Features",[16,24,25,29],{},[26,27,28],"strong",{},"5 Stunning Effects","\nChoose from Slide, Fade, Coverflow, Flip, or Cards effects. Each effect comes with its own customization options to perfect the look.",[16,31,32,35],{},[26,33,34],{},"Complete Navigation Control","\nAdd navigation arrows, pagination bullets (or fraction/progress bar), and scrollbar. Customize colors and sizes to match your design.",[16,37,38,41],{},[26,39,40],{},"Smart Autoplay","\nSet your carousel to auto-advance with customizable timing. Pause on hover keeps users in control.",[16,43,44,47],{},[26,45,46],{},"Multiple Interaction Modes","\nEnable keyboard navigation, mousewheel scrolling, and touch/drag functionality.",[16,49,50,53],{},[26,51,52],{},"Slot-Based Content","\nConnect any frame or component to the carousel slots for total design flexibility. Support for multiple slides per view and custom gap settings.",[16,55,56],{},[57,58],"img",{"alt":59,"className":60,"src":64},"swiper Caroisel",[61,62,63],"w-full","mb-6","rounded-[20px]","/framerhub/img/components/control/swiper-carousel.jpg",[11,66,68],{"id":67},"use-cases","Use Cases",[16,70,71,74],{},[26,72,73],{},"Hero Sections"," — Create eye-catching homepage heroes with the Fade or Slide effects.",[16,76,77,80],{},[26,78,79],{},"Product Galleries"," — Showcase products with the Coverflow effect for that premium feel.",[16,82,83,86],{},[26,84,85],{},"Testimonials"," — Display customer reviews with the elegant Fade effect.",[16,88,89,92],{},[26,90,91],{},"Portfolio"," — Show off your work with the playful Cards effect.",[16,94,95,98],{},[26,96,97],{},"Image Galleries"," — Full-screen image viewing with customizable transitions.",[16,100,101],{},[26,102,103],{},"Slides",[105,106,107,111],"ul",{},[108,109,110],"li",{},"Connect your frames to the Slide Content slot",[108,112,113],{},"Add/remove slides by adding/removing frames from the connection",[16,115,116],{},[26,117,118],{},"Layout",[105,120,121,124,127,130],{},[108,122,123],{},"Direction: Horizontal or Vertical scrolling",[108,125,126],{},"Slides Per View: Show multiple slides at once",[108,128,129],{},"Gap: Space between slides",[108,131,132],{},"Center Slides: Center the active slide",[16,134,135],{},[26,136,137],{},"Effects",[105,139,140,143,146,149,152],{},[108,141,142],{},"Slide: Classic sliding transition",[108,144,145],{},"Fade: Smooth crossfade between slides",[108,147,148],{},"Coverflow: Album cover-style effect",[108,150,151],{},"Flip: 3D card flip",[108,153,154],{},"Cards: Stacked cards effect",[16,156,157],{},[26,158,159],{},"Navigation",[105,161,162,165,168],{},[108,163,164],{},"Show/hide navigation arrows",[108,166,167],{},"Customize arrow color, size, background, and hover effects",[108,169,170],{},"Support for custom SVG or image arrows",[16,172,173],{},[26,174,175],{},"Pagination",[105,177,178,181,184,187],{},[108,179,180],{},"Bullets: Clickable dots",[108,182,183],{},"Fraction: Shows \"1 / 4\" style",[108,185,186],{},"Progress Bar: Animated progress line",[108,188,189],{},"None: Hide pagination",[16,191,192],{},[26,193,194],{},"Autoplay",[105,196,197,200,203,206],{},[108,198,199],{},"Enable/disable auto-advance",[108,201,202],{},"Set delay between slides",[108,204,205],{},"Pause when mouse hovers",[108,207,208],{},"Reverse direction option",[16,210,211],{},[26,212,213],{},"Behavior",[105,215,216,219,222,225],{},[108,217,218],{},"Loop: Infinite scrolling",[108,220,221],{},"Transition Speed: Control animation duration",[108,223,224],{},"Free Mode: Slides move freely without snapping",[108,226,227],{},"Rewind: Jump back to first slide at the end (when loop is off)",[16,229,230],{},[26,231,232],{},"Interaction",[105,234,235,238,241,244],{},[108,236,237],{},"Touch/Drag: Enable or disable swiping",[108,239,240],{},"Keyboard: Use arrow keys to navigate",[108,242,243],{},"Mousewheel: Scroll to change slides",[108,245,246],{},"Grab Cursor: Visually indicate draggable state",[16,248,249],{},[26,250,251],{},"Styling",[105,253,254,257],{},[108,255,256],{},"Slide Radius: Round slide corners (px)",[108,258,259],{},"Full control over pagination and scrollbar colors",[261,262,264],"h3",{"id":263},"quick-tips","Quick Tips",[16,266,267,270],{},[26,268,269],{},"Tip 1"," — For the best Coverflow effect, set \"Slides Per View\" to 3 and enable \"Center Slides\".",[16,272,273,276],{},[26,274,275],{},"Tip 2"," — Use the Cards effect with 1 slide per view for a stack of overlapping cards.",[16,278,279,282],{},[26,280,281],{},"Tip 3"," — Enable \"Free Mode\" with \"Sticky\" for a satisfying snap-to-slide behavior while dragging.",[16,284,285,288],{},[26,286,287],{},"Tip 4"," — Set \"Transition Speed\" to 800-1000ms for a more cinematic, smooth feeling.",[11,290,292],{"id":291},"license","License",[16,294,295,298],{},[26,296,297],{},"Single Use License"," — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[11,300,302],{"id":301},"why-designers-love-this","Why Designers Love This",[16,304,305],{},"This isn't just another carousel – it's THE carousel. With 5 powerful effects, complete navigation options, and pixel-perfect customization, you'll never need another slider component. Every control is designed with designers in mind: no code, no confusion, just beautiful results.",[307,308],"hr",{},[16,310,311,314],{},[26,312,313],{},"Need Help?"," Visit framerhub.io/support for documentation and video tutorials.",{"title":316,"searchDepth":317,"depth":317,"links":318},"",2,[319,320,321,325,326],{"id":13,"depth":317,"text":14},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68,"children":322},[323],{"id":263,"depth":324,"text":264},3,{"id":291,"depth":317,"text":292},{"id":301,"depth":317,"text":302},[328,329,330],"CMS","Gallery","Slider","https://framer.com/m/SwiperCarousel-LvCbMY.js@cFKgBVvyimUfhWcPo88p","2025-12-01T00:00:00.000Z",null,"md",true,[337,338,339,340,341,342],"5 transition effects (Slide, Fade, Coverflow, Flip, Cards)","Autoplay with pause-on-hover","Navigation arrows, pagination bullets, and scrollbar","Keyboard and mousewheel navigation","Free mode and loop capabilities","Fully customizable styling",false,"https://dedicated-subtasks-170577.framer.app/","/framerhub/img/components/swiper-carousel.jpg",{"variants":347},5,"/components/swipercarousel","1297f8a4-e158-4b99-af0b-4ed84b001f70","/framerhub/img/components/large/swiper-carousel.jpg",18,{"title":6,"description":316},"swiper-carousel","components/SwiperCarousel","The ultimate carousel component with stunning effects and total control.",[330,357,358,329,328,137],"Carousel","Swiper","EISCdRx0amyC9rAHacTHR3RGVttmdGU_WhY4xEnfYwQ",{"id":361,"title":362,"body":363,"categories":596,"component_copy_url":597,"createdAt":332,"description":316,"download_url":333,"extension":334,"featured":335,"features":598,"hasGradient":343,"iframe":607,"image":608,"isFree":343,"lemonsqueezy_variant_id":609,"meta":610,"navigation":335,"path":612,"polar_product_id":613,"previewImage":614,"price":615,"published":335,"robots":333,"seo":616,"slug":617,"stem":618,"tagline":619,"tags":620,"__hash__":625},"components/components/cms-gallery-slider.md","CMS Gallery Slider",{"type":8,"value":364,"toc":583},[365,369,372,374,380,386,392,398,400,406,412,418,424,431,435,439,460,464,469,480,485,499,504,521,526,537,539,545,551,557,563,565,569,573,576,578,581],[11,366,368],{"id":367},"versatile-gallery-slider-for-framer","Versatile Gallery Slider for Framer",[16,370,371],{},"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,373,22],{"id":21},[16,375,376,379],{},[26,377,378],{},"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,381,382,385],{},[26,383,384],{},"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,387,388,391],{},[26,389,390],{},"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,393,394,397],{},[26,395,396],{},"Custom Arrows","\nFully customizable navigation arrows with hover effects, custom icons support, and precise positioning controls.",[11,399,68],{"id":67},[16,401,402,405],{},[26,403,404],{},"Product Pages"," — Showcase multiple product images with thumbnail previews for e-commerce sites.",[16,407,408,411],{},[26,409,410],{},"Portfolios"," — Display project galleries with smooth transitions and professional presentation.",[16,413,414,417],{},[26,415,416],{},"Real Estate Listings"," — Present property photos with intuitive navigation.",[16,419,420,423],{},[26,421,422],{},"Blog Galleries"," — Enhance articles with connected CMS image galleries.",[16,425,426],{},[57,427],{"alt":428,"className":429,"src":430},"CMS Gallery Slider Preview",[61,62,63],"/framerhub/img/components/control/cms-gallery-slider.jpg",[11,432,434],{"id":433},"how-to-use","How to Use",[261,436,438],{"id":437},"installation","Installation",[440,441,442,445,448,451,454,457],"ol",{},[108,443,444],{},"Log in to your account at framerhub.io",[108,446,447],{},"Navigate to framerhub.io/dashboard",[108,449,450],{},"Find CMS Gallery Slider in your Recent Purchases",[108,452,453],{},"Click the \"Copy\" button",[108,455,456],{},"Open your Framer project",[108,458,459],{},"Paste the component anywhere on your canvas (Cmd/Ctrl + V)",[261,461,463],{"id":462},"customization","Customization",[16,465,466],{},[26,467,468],{},"Gallery Source",[105,470,471,474,477],{},[108,472,473],{},"Toggle between \"CMS\" and \"Normal\" modes",[108,475,476],{},"For CMS: Connect your CMS Gallery component to the slot",[108,478,479],{},"For Normal: Add images directly to the Gallery Images array",[16,481,482],{},[26,483,484],{},"Large Image Settings",[105,486,487,490,493,496],{},[108,488,489],{},"Width/Height: Set dimensions (%, px, vh supported)",[108,491,492],{},"Object Fit: Cover, Contain, Fill, None, Scale Down",[108,494,495],{},"Border Radius: Round the image corners",[108,497,498],{},"Animation: Speed, direction, and transition type",[16,500,501],{},[26,502,503],{},"Thumbnail Settings",[105,505,506,509,512,515,518],{},[108,507,508],{},"Position: Bottom, Top, Left, Right",[108,510,511],{},"Size & Gap: Control thumbnail dimensions",[108,513,514],{},"Opacity: Active vs inactive states",[108,516,517],{},"Animation: Scale, Lift, Glow, or Scale+Lift hover effects",[108,519,520],{},"Border & Background: Full styling control",[16,522,523],{},[26,524,525],{},"Arrow Controls",[105,527,528,531,534],{},[108,529,530],{},"Size, position, and border radius",[108,532,533],{},"Colors for normal and hover states",[108,535,536],{},"Upload custom arrow icons",[261,538,264],{"id":263},[16,540,541,544],{},[26,542,543],{},"Responsive Thumbnails"," — Left/right positioned thumbnails automatically move to bottom on screens smaller than the breakpoint (default 768px).",[16,546,547,550],{},[26,548,549],{},"CMS Connection"," — When using CMS mode, connect a CMS Gallery component to the slot. The main image becomes the first slide.",[16,552,553,556],{},[26,554,555],{},"Performance"," — Use appropriately sized images. The component handles display sizing, but source images affect load time.",[16,558,559,562],{},[26,560,561],{},"Transition Combos"," — Slide+Fade and Slide+Scale offer the most dynamic transitions for showcasing products.",[11,564,292],{"id":291},[16,566,567,298],{},[26,568,297],{},[11,570,572],{"id":571},"refund-policy","Refund Policy",[16,574,575],{},"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,577,302],{"id":301},[16,579,580],{},"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.",[307,582],{},{"title":316,"searchDepth":317,"depth":317,"links":584},[585,586,587,588,593,594,595],{"id":367,"depth":317,"text":368},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68},{"id":433,"depth":317,"text":434,"children":589},[590,591,592],{"id":437,"depth":324,"text":438},{"id":462,"depth":324,"text":463},{"id":263,"depth":324,"text":264},{"id":291,"depth":317,"text":292},{"id":571,"depth":317,"text":572},{"id":301,"depth":317,"text":302},[328,329,330],"https://framer.com/m/CMSGallerySlider-9ZLu.js",[599,600,601,602,603,604,605,606],"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":611},1,"/components/cms-gallery-slider","994e5edf-ce19-4c37-be45-9426eda111e7","/framerhub/img/components/large/cms-gallery-slider.jpg",14,{"title":362,"description":316},"cms-gallery-slider","components/cms-gallery-slider","Transform CMS galleries into smooth, animated sliders with customizable thumbnails and navigation. ",[621,330,328,329,622,623,624],"Interactive","Product","Images","Animation","Fg9JkULuwTb-ae5OBL-ekW6VJsbvcBeCe3djNaYotLA",{"id":627,"title":628,"body":629,"categories":868,"component_copy_url":869,"createdAt":332,"description":316,"download_url":333,"extension":334,"featured":335,"features":870,"hasGradient":343,"iframe":879,"image":880,"isFree":343,"lemonsqueezy_variant_id":881,"meta":882,"navigation":335,"path":883,"polar_product_id":884,"previewImage":885,"price":886,"published":335,"robots":333,"seo":887,"slug":888,"stem":889,"tagline":890,"tags":891,"__hash__":896},"components/components/cms-masonry-lightbox.md","CMS Masonry Lightbox",{"type":8,"value":630,"toc":856},[631,635,638,641,643,649,655,661,667,673,675,681,687,693,699,705,712,714,716,719,734,738,743,757,762,773,779,793,798,812,815,817,823,829,835,840,842,846,848,851,854],[11,632,634],{"id":633},"beautiful-masonry-galleries-from-your-cms","Beautiful Masonry Galleries from Your CMS",[16,636,637],{},"Turn any CMS collection into a professional masonry gallery with lightbox preview and category filtering. Perfect for portfolios, product showcases, and media libraries.",[16,639,640],{},"Built for designers who need production-ready galleries without touching code.",[11,642,22],{"id":21},[16,644,645,648],{},[26,646,647],{},"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,650,651,654],{},[26,652,653],{},"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,656,657,660],{},[26,658,659],{},"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,662,663,666],{},[26,664,665],{},"Customizable Hover Effects","\nFour hover animations (scale, fade, slide, bounce) with adjustable overlay colors, icons, and shadow intensity for polished interactions.",[16,668,669,672],{},[26,670,671],{},"Flexible Grid Control","\nAdjust columns, gaps, and shadows from the properties panel. Everything responds instantly without code.",[11,674,68],{"id":67},[16,676,677,680],{},[26,678,679],{},"Portfolio Galleries"," — Showcase design work with category filters that let visitors browse by project type",[16,682,683,686],{},[26,684,685],{},"Product Showcases"," — Display product images with lightbox zoom for detailed views and filtering by category",[16,688,689,692],{},[26,690,691],{},"Photography Sites"," — Create stunning image galleries with masonry layouts that adapt to different image sizes",[16,694,695,698],{},[26,696,697],{},"Case Study Libraries"," — Organize client work with filterable categories and quick preview capabilities",[16,700,701,704],{},[26,702,703],{},"Media Archives"," — Build searchable collections of images and videos with elegant lightbox playback",[16,706,707],{},[57,708],{"alt":709,"className":710,"src":711},"CMS Masonry Lightbox Preview",[61,62,63],"/framerhub/img/components/control/cms-masonry-lightbox.jpg",[11,713,434],{"id":433},[261,715,438],{"id":437},[16,717,718],{},"After purchasing from FramerHub:",[440,720,721,723,725,728,730,732],{},[108,722,444],{},[108,724,447],{},[108,726,727],{},"Find CMS Masonry Lightbox in your Recent Purchases",[108,729,453],{},[108,731,456],{},[108,733,459],{},[261,735,737],{"id":736},"setup","Setup",[16,739,740],{},[26,741,742],{},"Connect Your CMS",[440,744,745,748,751,754],{},[108,746,747],{},"Drag the component onto your canvas",[108,749,750],{},"In the properties panel, click \"Connect CMS\"",[108,752,753],{},"Select your CMS collection",[108,755,756],{},"The masonry layout appears automatically",[16,758,759],{},[26,760,761],{},"Configure Layout",[105,763,764,767,770],{},[108,765,766],{},"Set your preferred number of columns (1-12)",[108,768,769],{},"Adjust gap spacing between items",[108,771,772],{},"Choose shadow intensity for depth",[16,774,775,778],{},[26,776,777],{},"Enable Lightbox"," (optional)",[105,780,781,784,787,790],{},[108,782,783],{},"Toggle \"Enable Lightbox\" in the properties panel",[108,785,786],{},"Specify your CMS image field name (default: \"image\")",[108,788,789],{},"Specify your CMS video field name (default: \"video\")",[108,791,792],{},"Customize hover effects and overlay styles",[16,794,795,778],{},[26,796,797],{},"Add Category Filtering",[440,799,800,803,806,809],{},[108,801,802],{},"Paste the CMSMasonboxFilter component above your gallery",[108,804,805],{},"Set the \"Category Field\" to match your CMS field name",[108,807,808],{},"Choose single or multi-select mode",[108,810,811],{},"Customize pill colors, fonts, and spacing",[16,813,814],{},"Both components automatically sync using a \"Store Key\"—no manual connection needed.",[261,816,264],{"id":263},[16,818,819,822],{},[26,820,821],{},"Column Strategy"," — Use 3-4 columns on desktop, 2 on tablet, 1 on mobile for best readability",[16,824,825,828],{},[26,826,827],{},"Field Names"," — Make sure your image/video field names match exactly what you set in the properties panel",[16,830,831,834],{},[26,832,833],{},"Filter Setup"," — If your CMS uses a different field name for categories, update both components to match",[16,836,837,839],{},[26,838,555],{}," — For large collections (90+ items), consider using CMS pagination limits",[11,841,292],{"id":291},[16,843,844,298],{},[26,845,297],{},[11,847,302],{"id":301},[16,849,850],{},"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,852,853],{},"Perfect for agencies building portfolio sites and freelancers delivering client galleries without custom development.",[307,855],{},{"title":316,"searchDepth":317,"depth":317,"links":857},[858,859,860,861,866,867],{"id":633,"depth":317,"text":634},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68},{"id":433,"depth":317,"text":434,"children":862},[863,864,865],{"id":437,"depth":324,"text":438},{"id":736,"depth":324,"text":737},{"id":263,"depth":324,"text":264},{"id":291,"depth":317,"text":292},{"id":301,"depth":317,"text":302},[328,329,330],"https://framer.com/m/CMSMasonbox-BeG8.js",[871,872,873,874,875,876,877,878],"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":628,"description":316},"cms-masonry-lightbox","components/cms-masonry-lightbox","Transform your CMS collections into beautiful masonry galleries with built-in lightbox and filtering—no code required.",[328,892,329,893,894,91,895,623],"Masonry","Lightbox","Filter","Grid","CZWHLOoMLC18SfhcGS-0ROCN3GcXLivUwinK2BR6rJU",{"id":898,"title":899,"body":900,"categories":1233,"component_copy_url":1234,"createdAt":1235,"description":316,"download_url":333,"extension":334,"featured":335,"features":1236,"hasGradient":343,"iframe":1243,"image":1244,"isFree":343,"lemonsqueezy_variant_id":316,"meta":1245,"navigation":335,"path":1246,"polar_product_id":1247,"previewImage":1248,"price":347,"published":335,"robots":333,"seo":1249,"slug":1250,"stem":1251,"tagline":1252,"tags":1253,"__hash__":1257},"components/components/curve-text-svg.md","Curved Text SVG",{"type":8,"value":901,"toc":1221},[902,906,909,911,917,923,929,935,941,947,949,955,961,967,973,980,982,984,989,1004,1009,1040,1045,1065,1069,1089,1093,1131,1135,1161,1163,1176,1182,1187,1193,1199,1201,1206,1208,1210,1212,1215,1217],[11,903,905],{"id":904},"make-your-text-follow-any-path","Make Your Text Follow Any Path",[16,907,908],{},"Transform ordinary text into captivating curved typography. The Curved Text SVG component lets you animate text along any SVG path—from simple waves to custom shapes—creating eye-catching headlines, logos, and decorative elements.",[11,910,22],{"id":21},[16,912,913,916],{},[26,914,915],{},"Multiple Path Presets","\nChoose from Circle, Ellipse, Wave, Arc, or Straight Line presets that automatically adapt to your component's dimensions.",[16,918,919,922],{},[26,920,921],{},"Custom SVG Path Support","\nUse your own SVG path data for complete creative control. Perfect for brand logos, unique shapes, and custom designs.",[16,924,925,928],{},[26,926,927],{},"Smooth GSAP Animation","\nButter-smooth text scrolling powered by GSAP. Seamlessly loops without any visible jumps or stutters.",[16,930,931,934],{},[26,932,933],{},"Full Typography Control","\nExtended font controls including family, size, weight, letter spacing, and more—all accessible directly in Framer's properties panel.",[16,936,937,940],{},[26,938,939],{},"Visual Effects","\nAdd depth with configurable text shadow, blur effects, and opacity adjustments.",[16,942,943,946],{},[26,944,945],{},"Background Arc","\nAdd a customizable background stroke behind your text path with color, opacity, thickness, and end cap style options (Round, Flat, Square).",[11,948,68],{"id":67},[16,950,951,954],{},[26,952,953],{},"Hero Headlines"," — Create attention-grabbing curved text for landing page headers",[16,956,957,960],{},[26,958,959],{},"Logo Animations"," — Animate brand text along custom paths for dynamic logos",[16,962,963,966],{},[26,964,965],{},"Decorative Elements"," — Add visual interest with text following waves or arcs",[16,968,969,972],{},[26,970,971],{},"Ticker/Marquee"," — Seamless looping text animation along circular or elliptical paths",[16,974,975],{},[57,976],{"alt":977,"className":978,"src":979},"Curved Text SVG Preview",[61,62,63],"/framerhub/img/components/control/curved-text-svg.jpg",[11,981,434],{"id":433},[261,983,438],{"id":437},[16,985,986],{},[26,987,988],{},"VIDEO PLACEHOLDER: Installation Tutorial",[440,990,991,993,995,998,1000,1002],{},[108,992,444],{},[108,994,447],{},[108,996,997],{},"Find Curved Text SVG in your Recent Purchases",[108,999,453],{},[108,1001,456],{},[108,1003,459],{},[16,1005,1006],{},[26,1007,1008],{},"Text & Path",[105,1010,1011,1022,1028,1034],{},[108,1012,1013,1016,1017,1021],{},[26,1014,1015],{},"Text",": Your content with optional separator (use ",[1018,1019,1020],"code",{},"•"," or emoji for seamless loops)",[108,1023,1024,1027],{},[26,1025,1026],{},"Path Shape",": Choose from presets or select \"Custom\" for your own path",[108,1029,1030,1033],{},[26,1031,1032],{},"Custom Path",": Enter SVG path data (when Custom is selected)",[108,1035,1036,1039],{},[26,1037,1038],{},"ViewBox",": Set the coordinate system for custom paths",[16,1041,1042],{},[26,1043,1044],{},"Typography",[105,1046,1047,1053,1059],{},[108,1048,1049,1052],{},[26,1050,1051],{},"Font",": Full font family, size, weight, and letter spacing control",[108,1054,1055,1058],{},[26,1056,1057],{},"Color",": Text fill color",[108,1060,1061,1064],{},[26,1062,1063],{},"Rotation",": Rotate the entire text path",[16,1066,1067],{},[26,1068,624],{},[105,1070,1071,1077,1083],{},[108,1072,1073,1076],{},[26,1074,1075],{},"Animate",": Enable/disable animation",[108,1078,1079,1082],{},[26,1080,1081],{},"Duration",": Speed of text movement (1-60 seconds)",[108,1084,1085,1088],{},[26,1086,1087],{},"Reverse",": Change animation direction",[16,1090,1091],{},[26,1092,945],{},[105,1094,1095,1101,1107,1113,1119,1125],{},[108,1096,1097,1100],{},[26,1098,1099],{},"Show Background",": Toggle the background arc visibility",[108,1102,1103,1106],{},[26,1104,1105],{},"BG Color",": Background arc color",[108,1108,1109,1112],{},[26,1110,1111],{},"BG Opacity",": Background arc transparency",[108,1114,1115,1118],{},[26,1116,1117],{},"BG Thickness",": Width of the background stroke",[108,1120,1121,1124],{},[26,1122,1123],{},"BG End Cap",": Shape of arc ends (Round, Flat, Square)",[108,1126,1127,1130],{},[26,1128,1129],{},"Text Y Offset",": Vertical adjustment to center text on the arc",[16,1132,1133],{},[26,1134,137],{},[105,1136,1137,1143,1149,1155],{},[108,1138,1139,1142],{},[26,1140,1141],{},"Opacity",": Text transparency (0-1)",[108,1144,1145,1148],{},[26,1146,1147],{},"Blur",": Add blur effect to text",[108,1150,1151,1154],{},[26,1152,1153],{},"Shadow Blur",": Text shadow intensity",[108,1156,1157,1160],{},[26,1158,1159],{},"Shadow Color",": Color of the text shadow",[261,1162,264],{"id":263},[16,1164,1165,1168,1169,1171,1172,1175],{},[26,1166,1167],{},"Seamless Loops"," — Add a separator like ",[1018,1170,1020],{}," or ",[1018,1173,1174],{},"😁"," at the end of your text for smooth continuous animation.",[16,1177,1178,1181],{},[26,1179,1180],{},"Custom Paths"," — Generate SVG paths at svg-editor.griffen.codes or export from Figma/Illustrator.",[16,1183,1184,1186],{},[26,1185,555],{}," — Keep path complexity reasonable. Simpler paths render faster.",[16,1188,1189,1192],{},[26,1190,1191],{},"Responsive Design"," — The component automatically adapts preset paths to fill its container.",[16,1194,1195,1198],{},[26,1196,1197],{},"Debug Mode"," — Enable \"Show Path\" to visualize the path while designing.",[11,1200,292],{"id":291},[16,1202,1203,1205],{},[26,1204,297],{}," — Use in unlimited client projects with full commercial rights. No redistribution.",[11,1207,572],{"id":571},[16,1209,575],{},[11,1211,302],{"id":301},[16,1213,1214],{},"Curved text effects add instant visual impact without complex workarounds. This component brings that creative freedom to Framer with no code required—just drag, drop, and customize.",[307,1216],{},[16,1218,1219,314],{},[26,1220,313],{},{"title":316,"searchDepth":317,"depth":317,"links":1222},[1223,1224,1225,1226,1230,1231,1232],{"id":904,"depth":317,"text":905},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68},{"id":433,"depth":317,"text":434,"children":1227},[1228,1229],{"id":437,"depth":324,"text":438},{"id":263,"depth":324,"text":264},{"id":291,"depth":317,"text":292},{"id":571,"depth":317,"text":572},{"id":301,"depth":317,"text":302},[1044,624],"https://framer.com/m/CurveTextSvg-LY3f.js","2025-12-11T00:00:00.000Z",[1237,1238,1239,1240,1241,1242],"Multiple preset path shapes (Circle, Ellipse, Wave, Arc, Line)","Custom SVG path support","GSAP-powered smooth animation","Extended font controls with full typography customization","Text effects (shadow, blur, opacity)","Background arc with customizable end caps","https://ordinary-cylinder-513685.framer.app/","/framerhub/img/components/curved-text-svg.jpg",{"variants":611},"/components/curve-text-svg","ebea7447-8464-4472-afd6-27305e13bc2f","/framerhub/img/components/large/curved-text-svg.jpg",{"title":899,"description":316},"curved-text-svg","components/curve-text-svg","Animate text along any SVG path with smooth GSAP-powered motion.",[1015,1254,1255,1256,624,1044],"SVG","Path","Curve","bVJvsKQGPuwy-CXNjsI1rh-EktZR8jUZvsPOteSlU8Q",{"id":1259,"title":1260,"body":1261,"categories":1529,"component_copy_url":1532,"createdAt":1533,"description":316,"download_url":333,"extension":334,"featured":335,"features":1534,"hasGradient":343,"iframe":1543,"image":1544,"isFree":343,"lemonsqueezy_variant_id":1545,"meta":1546,"navigation":335,"path":1547,"polar_product_id":1548,"previewImage":1549,"price":1550,"published":335,"robots":333,"seo":1551,"slug":1552,"stem":1553,"tagline":1554,"tags":1555,"__hash__":1560},"components/components/exit-popup.md","Exist Popup",{"type":8,"value":1262,"toc":1517},[1263,1267,1270,1272,1278,1284,1290,1296,1301,1303,1309,1315,1321,1327,1334,1336,1338,1342,1357,1363,1368,1385,1390,1407,1412,1429,1433,1441,1446,1472,1474,1480,1485,1491,1497,1499,1502,1504,1506,1508,1511,1513],[11,1264,1266],{"id":1265},"exitpopup-smart-popup-component","ExitPopup — Smart Popup Component",[16,1268,1269],{},"Create engaging popups that appear exactly when you want them. Perfect for announcements, newsletter signups, exit offers, and promotional messages.",[11,1271,22],{"id":21},[16,1273,1274,1277],{},[26,1275,1276],{},"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,1279,1280,1283],{},[26,1281,1282],{},"Auto-Close with Progress","\nAutomatically dismiss popups after a set duration with an optional progress bar that pauses on hover.",[16,1285,1286,1289],{},[26,1287,1288],{},"Flexible Positioning","\nDisplay as a centered overlay with backdrop or position in any corner of the screen.",[16,1291,1292,1295],{},[26,1293,1294],{},"Smooth Animations","\nFour animation styles: Fade, Zoom, Slide Up, and Slide Down with customizable speed.",[16,1297,1298,1300],{},[26,1299,52],{},"\nConnect any Framer design as popup content — full creative freedom.",[11,1302,68],{"id":67},[16,1304,1305,1308],{},[26,1306,1307],{},"Newsletter Signup"," — Capture emails with a timed popup after visitors engage with content.",[16,1310,1311,1314],{},[26,1312,1313],{},"Exit Intent Offer"," — Show special discounts when visitors try to leave.",[16,1316,1317,1320],{},[26,1318,1319],{},"Announcements"," — Display important updates in corner positions without blocking content.",[16,1322,1323,1326],{},[26,1324,1325],{},"Cookie Consent"," — Auto-closing notification with progress indicator.",[16,1328,1329],{},[57,1330],{"alt":1331,"className":1332,"src":1333},"Exist Popup Preview",[61,62,63],"/framerhub/img/components/control/exit-popup.jpg",[11,1335,434],{"id":433},[261,1337,438],{"id":437},[16,1339,1340],{},[26,1341,988],{},[440,1343,1344,1346,1348,1351,1353,1355],{},[108,1345,444],{},[108,1347,447],{},[108,1349,1350],{},"Find ExitPopup in your Recent Purchases",[108,1352,453],{},[108,1354,456],{},[108,1356,459],{},[16,1358,1359,1362],{},[26,1360,1361],{},"Popup Content","\nConnect your popup design by dragging a frame into the slot.",[16,1364,1365],{},[26,1366,1367],{},"When to Show (Trigger Settings)",[105,1369,1370,1373,1376,1379,1382],{},[108,1371,1372],{},"Trigger: After Time Delay, Exit Intent, or After Scrolling",[108,1374,1375],{},"Delay: Wait time before showing (0-30 seconds)",[108,1377,1378],{},"Exit Intent Sensitivity: Distance from top to trigger",[108,1380,1381],{},"Scroll Distance: How far to scroll before popup appears",[108,1383,1384],{},"Exit Warning: Show when visitor tries to leave the page",[16,1386,1387],{},[26,1388,1389],{},"Auto-Close",[105,1391,1392,1395,1398,1401,1404],{},[108,1393,1394],{},"Enable: Close popup automatically after duration",[108,1396,1397],{},"Duration: Time before auto-close (1-60 seconds)",[108,1399,1400],{},"Progress Bar: Show countdown indicator",[108,1402,1403],{},"Bar Position: Top or Bottom",[108,1405,1406],{},"Bar Color: Customize progress color",[16,1408,1409],{},[26,1410,1411],{},"Position",[105,1413,1414,1417,1420,1423,1426],{},[108,1415,1416],{},"Style: Center Overlay or Corner Position",[108,1418,1419],{},"Corner: Top Left, Top Right, Bottom Left, Bottom Right, Center",[108,1421,1422],{},"Edge Space: Distance from screen edges",[108,1424,1425],{},"Show Backdrop: Dark background behind popup",[108,1427,1428],{},"Backdrop Color: Overlay color",[16,1430,1431],{},[26,1432,624],{},[105,1434,1435,1438],{},[108,1436,1437],{},"Style: Fade, Zoom, Slide Up, Slide Down",[108,1439,1440],{},"Speed: Animation duration (0.1-2 seconds)",[16,1442,1443],{},[26,1444,1445],{},"Close Button",[105,1447,1448,1451,1454,1457,1460,1463,1466,1469],{},[108,1449,1450],{},"Show Close Button: Display X button",[108,1452,1453],{},"Hide if Auto-Close: Hide when using auto-close",[108,1455,1456],{},"Position: Inside or Outside popup",[108,1458,1459],{},"Distance: Spacing from corner",[108,1461,1462],{},"Size: Button size",[108,1464,1465],{},"Icon Size: X icon size",[108,1467,1468],{},"Icon Color: X icon color",[108,1470,1471],{},"Background: Button background color",[261,1473,264],{"id":263},[16,1475,1476,1479],{},[26,1477,1478],{},"Exit Intent"," — Works best on desktop. Set sensitivity to 10px for reliable triggering when cursor moves toward browser controls.",[16,1481,1482,1484],{},[26,1483,1389],{}," — Enable progress bar so users know the popup will dismiss. The timer pauses on hover for better UX.",[16,1486,1487,1490],{},[26,1488,1489],{},"Corner Positioning"," — Great for non-intrusive announcements. Use Bottom Right for cookie notices.",[16,1492,1493,1496],{},[26,1494,1495],{},"Slot Content"," — Design your popup as a separate frame, then connect it. This gives you full control over layout and styling.",[11,1498,292],{"id":291},[16,1500,1501],{},"Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[11,1503,572],{"id":571},[16,1505,575],{},[11,1507,302],{"id":301},[16,1509,1510],{},"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.",[307,1512],{},[16,1514,1515,314],{},[26,1516,313],{},{"title":316,"searchDepth":317,"depth":317,"links":1518},[1519,1520,1521,1522,1526,1527,1528],{"id":1265,"depth":317,"text":1266},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68},{"id":433,"depth":317,"text":434,"children":1523},[1524,1525],{"id":437,"depth":324,"text":438},{"id":263,"depth":324,"text":264},{"id":291,"depth":317,"text":292},{"id":571,"depth":317,"text":572},{"id":301,"depth":317,"text":302},[1530,1531,328],"Overlays","Scroll","https://framer.com/m/Existpopup-cJBW.js","2025-12-06T00:00:00.000Z",[1535,1536,1537,1538,1539,1540,1541,1542],"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":324},"/components/exit-popup","821f260d-9aa0-4fa7-9a02-8c2b04cbe524","/framerhub/img/components/large/exist-popup.jpg",15,{"title":1260,"description":316},"exist-popup","components/exit-popup","Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment.",[1556,1557,1478,1558,1559,624,232],"Popup","Modal","Conversion","Lead Capture","OhBZztpiYh3vvwKdhGCjMqKDJChBuOqPHLwGXhoDvSc",{"id":1562,"title":1563,"body":1564,"categories":1780,"component_copy_url":1782,"createdAt":1783,"description":316,"download_url":333,"extension":334,"featured":335,"features":1784,"hasGradient":343,"iframe":1791,"image":1792,"isFree":335,"lemonsqueezy_variant_id":316,"meta":1793,"navigation":335,"path":1795,"polar_product_id":1796,"previewImage":1797,"price":1798,"published":335,"robots":333,"seo":1799,"slug":1568,"stem":1800,"tagline":1801,"tags":1802,"__hash__":1809},"components/components/hyperspeed.md","Warp Drive",{"type":8,"value":1565,"toc":1767},[1566,1569,1572,1574,1602,1608,1614,1620,1626,1628,1634,1640,1646,1652,1659,1661,1663,1667,1682,1684,1687,1692,1712,1717,1728,1730,1735,1741,1746,1752,1754,1758,1760,1762,1764],[11,1567,1563],{"id":1568},"warp-drive",[16,1570,1571],{},"Engage your warp engines. This stunning 3D component creates a high-speed tunnel effect, complete with rushing car lights and road markings. Perfect for futuristic themes, speed-related content, or just a really cool hero background.",[11,1573,22],{"id":21},[16,1575,1576,1579,1580,1584,1585,1584,1588,1584,1591,1584,1594,1597,1598,1601],{},[26,1577,1578],{},"6 Distinct Presets","\nSwitch instantly between different visual styles—",[1581,1582,1583],"em",{},"Turbulent Pulse",", ",[1581,1586,1587],{},"Mountain Drift",[1581,1589,1590],{},"Axis Swing",[1581,1592,1593],{},"Endless Run",[1581,1595,1596],{},"Solar Flare",", and ",[1581,1599,1600],{},"Deep Current","—each with unique distortion patterns and color moods.",[16,1603,1604,1607],{},[26,1605,1606],{},"Interactive Speed Boost","\nUsers can click or touch the component to trigger a \"boost,\" momentarily accelerating the warp speed and widening the field of view for a satisfying interactive moment.",[16,1609,1610,1613],{},[26,1611,1612],{},"Customizable Colors","\nWhile the presets look great out of the box, you can override individual colors for background, road, car lights, and side sticks to match your specific brand guidelines.",[16,1615,1616,1619],{},[26,1617,1618],{},"Random Color Mode","\nEnable randomized colors for each session to create unique, ever-changing visual experiences.",[16,1621,1622,1625],{},[26,1623,1624],{},"Post-Processing Effects","\nBuilt-in bloom and SMAA anti-aliasing effects create a polished, cinematic look.",[11,1627,68],{"id":67},[16,1629,1630,1633],{},[26,1631,1632],{},"Hero Backgrounds"," — Create immersive landing pages that capture attention with dynamic motion.",[16,1635,1636,1639],{},[26,1637,1638],{},"Gaming & Tech Sites"," — Perfect for conveying speed, technology, and futuristic themes.",[16,1641,1642,1645],{},[26,1643,1644],{},"Loading Screens"," — Keep users engaged during loading with mesmerizing visuals.",[16,1647,1648,1651],{},[26,1649,1650],{},"Music & Event Pages"," — Add energy to entertainment websites with pulsing light effects.",[16,1653,1654],{},[57,1655],{"alt":1656,"className":1657,"src":1658},"Warp Drive Preview",[61,62,63],"/framerhub/img/components/control/warp-drive.jpg",[11,1660,434],{"id":433},[261,1662,438],{"id":437},[16,1664,1665],{},[26,1666,988],{},[440,1668,1669,1671,1673,1676,1678,1680],{},[108,1670,444],{},[108,1672,447],{},[108,1674,1675],{},"Find Warp Drive in your Recent Purchases",[108,1677,453],{},[108,1679,456],{},[108,1681,459],{},[261,1683,463],{"id":462},[16,1685,1686],{},"Choose your preferred preset from the dropdown, then customize further with these options:",[16,1688,1689],{},[26,1690,1691],{},"Presets",[105,1693,1694,1697,1700,1703,1706,1709],{},[108,1695,1696],{},"Turbulent Pulse — Chaotic, energetic movements",[108,1698,1699],{},"Mountain Drift — Smooth, rolling distortion",[108,1701,1702],{},"Axis Swing — Side-to-side motion",[108,1704,1705],{},"Endless Run — Long sweeping curves",[108,1707,1708],{},"Solar Flare — Warm, orange-tinted energy",[108,1710,1711],{},"Deep Current — Diving into the tunnel",[16,1713,1714],{},[26,1715,1716],{},"Color Overrides",[105,1718,1719,1722,1725],{},[108,1720,1721],{},"Background, Road, and Island colors",[108,1723,1724],{},"Left and Right Car lights (3 colors each for variety)",[108,1726,1727],{},"Side light sticks (3 colors)",[261,1729,264],{"id":263},[16,1731,1732,1734],{},[26,1733,555],{}," — The component uses WebGL with post-processing. For mobile, consider testing performance on target devices.",[16,1736,1737,1740],{},[26,1738,1739],{},"Layering"," — Place content above the component. White text with subtle shadows provides best readability on dark tunnel backgrounds.",[16,1742,1743,1745],{},[26,1744,232],{}," — Click/touch to boost speed. Great for encouraging user engagement.",[16,1747,1748,1751],{},[26,1749,1750],{},"Full Screen"," — Looks best at full viewport width. Use as a hero section background.",[11,1753,292],{"id":291},[16,1755,1756,298],{},[26,1757,297],{},[11,1759,572],{"id":571},[16,1761,575],{},[11,1763,302],{"id":301},[16,1765,1766],{},"WarpDrive transforms ordinary pages into immersive experiences. The combination of dynamic 3D animation, interactive speed boost, and fully customizable colors means you can create unique hero sections that truly stand out. The six carefully crafted presets give you instant variety, while the color override system ensures perfect brand alignment.",{"title":316,"searchDepth":317,"depth":317,"links":1768},[1769,1770,1771,1772,1777,1778,1779],{"id":1568,"depth":317,"text":1563},{"id":21,"depth":317,"text":22},{"id":67,"depth":317,"text":68},{"id":433,"depth":317,"text":434,"children":1773},[1774,1775,1776],{"id":437,"depth":324,"text":438},{"id":462,"depth":324,"text":463},{"id":263,"depth":324,"text":264},{"id":291,"depth":317,"text":292},{"id":571,"depth":317,"text":572},{"id":301,"depth":317,"text":302},[624,1781],"WebGL","https://framer.com/m/WarpDrive-Zjxt.js","2025-12-27T00:00:00.000Z",[1785,1786,1787,1788,1789,1790],"6 Unique visual presets with distinct distortion patterns","Interactive speed-up on click/touch","Dynamic 3D car light trails","Customizable color palettes","Random color generation mode","Post-processing effects (Bloom, SMAA)","https://bisque-mindset-324221.framer.app/","/framerhub/img/components/warp-drive.jpg",{"variants":1794},6,"/components/hyperspeed","5a3a0359-0c0e-45dc-9f15-73aac7a237eb","/framerhub/img/components/large/warp-drive.jpg",0,{"title":1563,"description":316},"components/hyperspeed","Hyperspeed tunnel effect with dynamic car lights and distortion.",[1803,1804,1805,1806,1807,1781,1808],"Hyperspeed","3D","Tunnel","Car Lights","Space","Three.js","4pAafYFF7R4k-nEdrYYAHS7MtCLEBCOBNG4ABzHfSLI",1776235893114]