[{"data":1,"prerenderedAt":335},["ShallowReactive",2],{"navigation_docs":3,"-docs-getting-started-introduction":215,"-docs-getting-started-introduction-surround":332},[4,20,50,165,175,185],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-sprout",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Framework Guides","\u002Fdocs\u002Fframework-guides","docs\u002F2.framework-guides",[25,30,35,40,45],{"title":26,"path":27,"stem":28,"icon":29},"Vue and Nuxt","\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt","docs\u002F2.framework-guides\u002F1.vue-nuxt","i-simple-icons-vuedotjs",{"title":31,"path":32,"stem":33,"icon":34},"React and Next.js","\u002Fdocs\u002Fframework-guides\u002Freact-nextjs","docs\u002F2.framework-guides\u002F2.react-nextjs","i-simple-icons-react",{"title":36,"path":37,"stem":38,"icon":39},"Svelte and SvelteKit","\u002Fdocs\u002Fframework-guides\u002Fsvelte-sveltekit","docs\u002F2.framework-guides\u002F3.svelte-sveltekit","i-simple-icons-svelte",{"title":41,"path":42,"stem":43,"icon":44},"Web Components","\u002Fdocs\u002Fframework-guides\u002Fweb-components","docs\u002F2.framework-guides\u002F4.web-components","i-simple-icons-webcomponentsdotorg",{"title":46,"path":47,"stem":48,"icon":49},"Core","\u002Fdocs\u002Fframework-guides\u002Fcore","docs\u002F2.framework-guides\u002F5.core","i-lucide-braces",{"title":51,"path":52,"stem":53,"children":54,"page":6},"Examples","\u002Fdocs\u002Fexamples","docs\u002F3.examples",[55,100,135],{"title":56,"icon":6,"defaultOpen":6,"path":57,"stem":58,"children":59,"page":6},"Basic","\u002Fdocs\u002Fexamples\u002Fbasic","docs\u002F3.examples\u002F1.basic",[60,65,70,75,80,85,90,95],{"title":61,"path":62,"stem":63,"icon":64},"Simple","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsimple","docs\u002F3.examples\u002F1.basic\u002F1.simple","i-lucide-square",{"title":66,"path":67,"stem":68,"icon":69},"Snapping","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsnap","docs\u002F3.examples\u002F1.basic\u002F2.snap","i-lucide-magnet",{"title":71,"path":72,"stem":73,"icon":74},"Masonry","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fmasonry","docs\u002F3.examples\u002F1.basic\u002F3.masonry","i-lucide-grid-3x3",{"title":76,"path":77,"stem":78,"icon":79},"Right to Left","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fright-to-left","docs\u002F3.examples\u002F1.basic\u002F4.right-to-left","i-lucide-arrow-left-from-line",{"title":81,"path":82,"stem":83,"icon":84},"Sticky Slides","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsticky","docs\u002F3.examples\u002F1.basic\u002F5.sticky","i-lucide-pin",{"title":86,"path":87,"stem":88,"icon":89},"Buttons","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fbuttons","docs\u002F3.examples\u002F1.basic\u002F6.buttons","i-lucide-circle-arrow-right",{"title":91,"path":92,"stem":93,"icon":94},"Dots","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fdots","docs\u002F3.examples\u002F1.basic\u002F7.dots","i-lucide-rectangle-ellipsis",{"title":96,"path":97,"stem":98,"icon":99},"Thumbnails","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fthumbnails","docs\u002F3.examples\u002F1.basic\u002F8.thumbnails","i-lucide-layout-list",{"title":101,"icon":6,"defaultOpen":6,"path":102,"stem":103,"children":104,"page":6},"Advanced","\u002Fdocs\u002Fexamples\u002Fadvanced","docs\u002F3.examples\u002F2.advanced",[105,110,115,120,125,130],{"title":106,"path":107,"stem":108,"icon":109},"Cover Flow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcover-flow","docs\u002F3.examples\u002F2.advanced\u002F1.cover-flow","i-lucide-gallery-horizontal-end",{"title":111,"path":112,"stem":113,"icon":114},"Slideshow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fslideshow","docs\u002F3.examples\u002F2.advanced\u002F2.slideshow","i-lucide-presentation",{"title":116,"path":117,"stem":118,"icon":119},"Stories","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fstories","docs\u002F3.examples\u002F2.advanced\u002F2.stories","i-lucide-circle-fading-plus",{"title":121,"path":122,"stem":123,"icon":124},"Smart Stack","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fsmart-stack","docs\u002F3.examples\u002F2.advanced\u002F3.smart-stack","i-lucide-layers",{"title":126,"path":127,"stem":128,"icon":129},"Cards","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcards","docs\u002F3.examples\u002F2.advanced\u002F4.cards","i-lucide-images",{"title":131,"path":132,"stem":133,"icon":134},"Flipbook","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fflipbook","docs\u002F3.examples\u002F2.advanced\u002F5.flipbook","i-lucide-swatch-book",{"title":136,"icon":6,"defaultOpen":6,"path":137,"stem":138,"children":139,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[140,145,150,155,160],{"title":141,"path":142,"stem":143,"icon":144},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":146,"path":147,"stem":148,"icon":149},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":151,"path":152,"stem":153,"icon":154},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":156,"path":157,"stem":158,"icon":159},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":161,"path":162,"stem":163,"icon":164},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":166,"path":167,"stem":168,"children":169,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[170],{"title":171,"path":172,"stem":173,"icon":174},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":176,"path":177,"stem":178,"children":179,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[180],{"title":181,"path":182,"stem":183,"icon":184},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":186,"icon":6,"path":187,"stem":188,"children":189,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[190,195,200,205,210],{"title":191,"path":192,"stem":193,"icon":194},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":196,"path":197,"stem":198,"icon":199},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":201,"path":202,"stem":203,"icon":204},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":206,"path":207,"stem":208,"icon":209},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":211,"path":212,"stem":213,"icon":214},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",{"id":216,"title":11,"body":217,"description":323,"extension":324,"links":325,"meta":326,"navigation":327,"path":12,"seo":328,"stem":13,"__hash__":331},"docs\u002Fdocs\u002F1.getting-started\u002F1.introduction.md",{"type":218,"value":219,"toc":317},"minimark",[220,224,229,232,235,241,299,303],[221,222,223],"p",{},"Blossom Carousel is the first carousel library that builds on native browser scrolling instead of replacing it. It provides a small drag enhancement for pointer devices while maintaining the core interaction model, performance, and accessibility of a real scroll container.",[225,226,228],"h2",{"id":227},"why-blossom-carousel","Why Blossom Carousel?",[221,230,231],{},"Carousels have become a powerful and popular choice among the many ways to structure content hierarchy. They are one of the main means to create a spatial form of progressive disclosure by collapsing vertical real estate while inviting horizontal exploration. Their scrolling behavior makes them stand out especially on touch devices where swiping is such a natural gesture.",[221,233,234],{},"Web standards have evolved to a point where these swipable carousels feel incredibly native. However, horizontal scrolling on desktop lacks the intuitive drag interaction that makes touch-based carousels feel so natural. Blossom Carousel fills that gap with a custom, lightweight physics-based drag engine that works seamlessly on top of native scrolling.",[236,237,240],"note",{"color":238,"icon":239},"primary","i-lucide-lightbulb","Blossom's dragging engine syncs with your CSS configuration automatically.",[242,243,244,250,255,260,289,294],"card-group",{},[245,246,249],"card",{"icon":247,"title":248},"i-lucide-gauge","Native scrolling","Full browser performance, platform scrolling behavior, and accessibility from a real horizontal scroll container.",[245,251,254],{"icon":252,"title":253},"i-lucide-mouse-pointer-2","Dragging","Custom physics-based dragging for pointer input, layered on top of native scrolling instead of replacing it.",[245,256,259],{"icon":257,"title":258},"i-lucide-code-2","No abstraction","Use native web APIs directly. Blossom keeps your carousel as real markup, real CSS, and real scroll state.",[245,261,264,265,272,273,272,278,272,283,288],{"icon":262,"title":263},"i-lucide-sliders-horizontal","Configure with CSS","Works with native ",[266,267,271],"a",{"href":268,"rel":269},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FScroll_snap",[270],"nofollow","scroll snap",", ",[266,274,277],{"href":275,"rel":276},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FProperties\u002Fposition#sticky",[270],"position: sticky",[266,279,282],{"href":280,"rel":281},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FScroll-driven_animations",[270],"scroll-driven animations",[266,284,287],{"href":285,"rel":286},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FConditional_rules\u002FContainer_scroll-state_queries",[270],"scroll-state queries"," and more.",[245,290,293],{"icon":291,"title":292},"i-lucide-feather","0 KB on touch devices","Blossom only loads the drag enhancement when a fine pointer device is detected, so touch devices keep native scrolling untouched.",[245,295,298],{"icon":296,"title":297},"i-lucide-blocks","Works with major frameworks","Components are available for React, Vue, Svelte, and Web Components, with a framework-agnostic core package underneath.",[225,300,302],{"id":301},"next-steps","Next steps",[304,305,306,312],"ul",{},[307,308,309,311],"li",{},[266,310,16],{"href":17}," - Add Blossom Carousel to your project.",[307,313,314,316],{},[266,315,51],{"href":62}," - Explore practical implementations.",{"title":318,"searchDepth":319,"depth":319,"links":320},"",2,[321,322],{"id":227,"depth":319,"text":228},{"id":301,"depth":319,"text":302},"Blossom Carousel is draggable and scrollable and maintains all native browser behavior.","md",null,{},{"icon":14},{"title":329,"description":330},"Blossom Carousel introduction","Understand the native-first approach behind Blossom Carousel and why it builds on browser scrolling instead of replacing it.","THczEPTaOdHzL3lpNIbjVtbjojHoSr-P_VAkfbdxwmI",[325,333],{"title":16,"path":17,"stem":18,"description":334,"icon":19,"children":-1},"Install Blossom Carousel for Vue, React, Svelte, Web Components, or direct Core usage.",1780243958845]