[{"data":1,"prerenderedAt":581},["ShallowReactive",2],{"navigation_docs":3,"blog-\u002Fblog\u002Fintroducing-blossom-carousel":215},[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":217,"body":218,"date":571,"description":572,"draft":6,"extension":573,"meta":574,"navigation":576,"path":577,"seo":578,"stem":579,"__hash__":580},"blog\u002Fblog\u002Fintroducing-blossom-carousel.md","Introducing Blossom Carousel",{"type":219,"value":220,"toc":564},"minimark",[221,225,228,231,234,239,242,245,248,251,254,258,261,264,267,270,273,296,299,302,409,413,416,419,422,426,429,518,525,560],[222,223,224],"p",{},"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, and their scrolling behavior makes them stand out especially on touch devices where swiping is such a natural gesture.",[222,226,227],{},"A scroll container works naturally with touch, but dragging with a mouse or trackpad is still something developers need to build themselves. Historically, carousel libraries solved this by taking over completely: replacing the browser's scrolling model with their own JavaScript-powered implementation.",[222,229,230],{},"That made sense when the platform lacked the primitives we have today.",[222,232,233],{},"But the web has changed.",[235,236,238],"h2",{"id":237},"the-current-state-of-carousels","The current state of carousels",[222,240,241],{},"A carousel is, at its core, simply a horizontal scroll container. Browsers know exceptionally well how to handle scrolling with smooth momentum, rubber-banding, keyboard navigation, touch handling and more. All of it ships for free inside the browser.",[222,243,244],{},"So it's strange that almost every carousel library throws all of that away. To make slides draggable, they stop scrolling entirely and slide a track around with CSS transforms instead.",[222,246,247],{},"Eventhough scrolling is the first casualty, the few libraries that try to win it back bolt scrolling on after the fact by intercepting the wheel, second-guessing every flick and nudge the browser would have handled for free. Either way you pay the same tax: motion that feels just slightly off, layout that fights the platform, and a bundle that grows with every edge case the browser already solved. And once scrolling is simulated, all its native capabilities are lost.",[222,249,250],{},"On top of that, because on touch devices dragging and scrolling is the same gesture many developers started rolling 2 different carousel solutions, one for touch and one for pointer devices.",[222,252,253],{},"The result is a strange split and we ended up with two different carousel implementations where one should be enough.",[235,255,257],{"id":256},"introducing-blossom","Introducing Blossom",[222,259,260],{},"Blossom is a carousel built on a real scroll container. Your slides are real markup, your layout is real CSS, and the scroll position is the real, native source of truth. On top of that, Blossom adds one thing: a lightweight, physics-based drag engine for pointer devices that hands off seamlessly to native scrolling.",[222,262,263],{},"Here it is. Drag it with a mouse, flick it on a trackpad, swipe it on a phone. Same component, works everywhere.",[265,266],"blog-simple",{},[222,268,269],{},"Because Blossom is built on a real scroll container, the browser's capabilities remain available.",[222,271,272],{},"That means features like these work naturally:",[274,275,276,284,290,293],"ul",{},[277,278,279,283],"li",{},[280,281,282],"code",{},"scroll-snap"," controls slide alignment",[277,285,286,289],{},[280,287,288],{},"position: sticky"," creates layered layouts",[277,291,292],{},"scroll-driven animations respond to real movement",[277,294,295],{},"scroll-state queries can react to scroll position",[222,297,298],{},"Blossom does not introduce another abstraction for these things. It lets the platform continue doing what it already does best.",[222,300,301],{},"Your CSS describes the experience. Blossom simply makes the interaction complete.",[303,304,305,321],"table",{},[306,307,308],"thead",{},[309,310,311,315,318],"tr",{},[312,313,314],"th",{},"Feature",[312,316,317],{},"Blossom Carousel",[312,319,320],{},"Traditional Carousel Libraries",[322,323,324,335,345,354,364,373,382,391,400],"tbody",{},[309,325,326,330,333],{},[327,328,329],"td",{},"Draggable",[327,331,332],{},"✅ Yes",[327,334,332],{},[309,336,337,340,342],{},[327,338,339],{},"Scrollable",[327,341,332],{},[327,343,344],{},"❌ No",[309,346,347,350,352],{},[327,348,349],{},"Navigation controls",[327,351,332],{},[327,353,332],{},[309,355,356,359,362],{},[327,357,358],{},"Cyclical scrolling",[327,360,361],{},"⚠️ Experimental",[327,363,332],{},[309,365,366,369,371],{},[327,367,368],{},"Position sticky",[327,370,332],{},[327,372,344],{},[309,374,375,378,380],{},[327,376,377],{},"CSS Scroll-driven animations",[327,379,332],{},[327,381,344],{},[309,383,384,387,389],{},[327,385,386],{},"Scroll-state queries",[327,388,332],{},[327,390,344],{},[309,392,393,396,398],{},[327,394,395],{},"Scroll-snap events",[327,397,332],{},[327,399,344],{},[309,401,402,405,407],{},[327,403,404],{},"Scroll event listeners",[327,406,332],{},[327,408,344],{},[235,410,412],{"id":411},"built-for-the-future-of-the-web","Built for the future of the web",[222,414,415],{},"The direction of the platform is moving toward more native carousel capabilities.",[222,417,418],{},"Browser vendors are already exploring ways to bring common carousel features directly into CSS and HTML, including native controls and more advanced scrolling behavior.",[222,420,421],{},"Blossom is designed around that same direction. Rather than fighting the platform, it follows it.\nThe future of carousels is not more JavaScript controlling more pixels. It is better primitives, composed together.",[235,423,425],{"id":424},"get-started","Get started",[222,427,428],{},"Blossom ships as first-class components for React, Vue, Svelte, and Web Components, all sharing one framework-agnostic core. Pick the package that matches your stack:",[430,431,433,459,474,489,504],"code-group",{"sync":432},"migration-code-style",[434,435,441],"pre",{"className":436,"code":437,"filename":438,"language":439,"meta":440,"style":440},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @blossom-carousel\u002Fvue\n","Vue","bash","",[280,442,443],{"__ignoreMap":440},[444,445,448,452,456],"span",{"class":446,"line":447},"line",1,[444,449,451],{"class":450},"sBMFI","npm",[444,453,455],{"class":454},"sfazB"," install",[444,457,458],{"class":454}," @blossom-carousel\u002Fvue\n",[434,460,463],{"className":436,"code":461,"filename":462,"language":439,"meta":440,"style":440},"npm install @blossom-carousel\u002Freact\n","React",[280,464,465],{"__ignoreMap":440},[444,466,467,469,471],{"class":446,"line":447},[444,468,451],{"class":450},[444,470,455],{"class":454},[444,472,473],{"class":454}," @blossom-carousel\u002Freact\n",[434,475,478],{"className":436,"code":476,"filename":477,"language":439,"meta":440,"style":440},"npm install @blossom-carousel\u002Fsvelte\n","Svelte",[280,479,480],{"__ignoreMap":440},[444,481,482,484,486],{"class":446,"line":447},[444,483,451],{"class":450},[444,485,455],{"class":454},[444,487,488],{"class":454}," @blossom-carousel\u002Fsvelte\n",[434,490,493],{"className":436,"code":491,"filename":492,"language":439,"meta":440,"style":440},"npm install @blossom-carousel\u002Fweb\n","Web",[280,494,495],{"__ignoreMap":440},[444,496,497,499,501],{"class":446,"line":447},[444,498,451],{"class":450},[444,500,455],{"class":454},[444,502,503],{"class":454}," @blossom-carousel\u002Fweb\n",[434,505,507],{"className":436,"code":506,"filename":46,"language":439,"meta":440,"style":440},"npm install @blossom-carousel\u002Fcore\n",[280,508,509],{"__ignoreMap":440},[444,510,511,513,515],{"class":446,"line":447},[444,512,451],{"class":450},[444,514,455],{"class":454},[444,516,517],{"class":454}," @blossom-carousel\u002Fcore\n",[222,519,520,521,524],{},"Install Blossom for your framework, copy an example or install the ",[522,523,181],"a",{"href":182}," to get started.",[526,527,528,548],"code-block",{},[434,529,532],{"className":436,"code":530,"filename":531,"language":439,"meta":440,"style":440},"npx skills add https:\u002F\u002Fwww.blossom-carousel.com\n","Terminal",[280,533,534],{"__ignoreMap":440},[444,535,536,539,542,545],{"class":446,"line":447},[444,537,538],{"class":450},"npx",[444,540,541],{"class":454}," skills",[444,543,544],{"class":454}," add",[444,546,547],{"class":454}," https:\u002F\u002Fwww.blossom-carousel.com\n",[274,549,550,555],{},[277,551,552,554],{},[522,553,16],{"href":17}," — add Blossom to your project in one command.",[277,556,557,559],{},[522,558,51],{"href":62}," — from a simple slider to cover flow, sticky stacks, and flipbooks.",[561,562,563],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":440,"searchDepth":565,"depth":565,"links":566},2,[567,568,569,570],{"id":237,"depth":565,"text":238},{"id":256,"depth":565,"text":257},{"id":411,"depth":565,"text":412},{"id":424,"depth":565,"text":425},"2025-06-19","A native-first carousel library that enhances the browser's own scrolling instead of replacing it—with physics-based drag, CSS-driven configuration and all progressively loaded only when needed.","md",{"image":575},"\u002Fimages\u002Fabstract\u002Fblossom03.png",true,"\u002Fblog\u002Fintroducing-blossom-carousel",{"title":217,"description":572},"blog\u002Fintroducing-blossom-carousel","o8xcSyD5uPjz3nDpr2r5AHcN6n8qiT6M4ZlJrPKLAiM",1783981854690]