[{"data":1,"prerenderedAt":7068},["ShallowReactive",2],{"navigation_docs":3,"blog-posts":220},[4,20,50,170,180,190],{"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,140],{"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,135],{"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,"path":137,"stem":138,"icon":139},"Custom Scrollbar","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcustom-scrollbar","docs\u002F3.examples\u002F2.advanced\u002F6.custom-scrollbar","i-lucide-line-squiggle",{"title":141,"icon":6,"defaultOpen":6,"path":142,"stem":143,"children":144,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[145,150,155,160,165],{"title":146,"path":147,"stem":148,"icon":149},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":151,"path":152,"stem":153,"icon":154},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":156,"path":157,"stem":158,"icon":159},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":161,"path":162,"stem":163,"icon":164},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":166,"path":167,"stem":168,"icon":169},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":171,"path":172,"stem":173,"children":174,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[175],{"title":176,"path":177,"stem":178,"icon":179},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[185],{"title":186,"path":187,"stem":188,"icon":189},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":191,"icon":6,"path":192,"stem":193,"children":194,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[195,200,205,210,215],{"title":196,"path":197,"stem":198,"icon":199},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":201,"path":202,"stem":203,"icon":204},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":206,"path":207,"stem":208,"icon":209},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":211,"path":212,"stem":213,"icon":214},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":216,"path":217,"stem":218,"icon":219},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",[221,5927,6733],{"id":222,"title":223,"body":224,"date":5918,"description":5919,"draft":6,"extension":5920,"meta":5921,"navigation":359,"path":5923,"seo":5924,"stem":5925,"__hash__":5926},"blog\u002Fblog\u002F2.flipbook-carousel.md","How to make a flipbook-style carousel with Blossom",{"type":225,"value":226,"toc":5907},"minimark",[227,252,257,260,273,293,296,303,306,310,313,550,748,751,754,758,768,848,851,854,858,865,930,940,947,1045,1055,1058,1061,1065,1072,1195,1202,1205,1531,1534,1537,1541,1551,1838,1848,1850,1853,1857,5840,5843,5846,5850,5862,5873,5877,5904],[228,229,230,231,235,236,240,241,247,248,251],"p",{},"A flipbook carousel looks like it needs a custom animation engine. It doesn't. The effect in our ",[232,233,234],"a",{"href":132},"flipbook example"," is built from three web platform features: ",[237,238,239],"strong",{},"scroll snap",", ",[237,242,243],{},[244,245,246],"code",{},"position: sticky"," and ",[237,249,250],{},"scroll-driven animations",". Blossom provides the native scrolling and a small overscroll hook for the page-turn at the edges.",[253,254,256],"h2",{"id":255},"what-were-building","What we're building",[258,259],"blog-flipbook",{},[261,262,263],"supports-view-timeline-support",{},[264,265,266,267],"caution",{},"View-timeline is not yet supported in this browser. Check browser compatibility at ",[232,268,272],{"href":269,"rel":270},"https:\u002F\u002Fcaniuse.com\u002F?search=scroll-snap-change",[271],"nofollow","caniuse.com",[274,275,276],"supports-view-timeline-safari-support",{},[264,277,278,279,282,283,286,287,292],{},"Safari's ",[244,280,281],{},"view-timeline"," implementation does not yet account for sticky offsets when calculating ",[244,284,285],{},"animation-range: contain",", so scroll-driven animations in this example appear incorrect. See ",[232,288,291],{"href":289,"rel":290},"https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=288913",[271],"WebKit bug 288913",".",[228,294,295],{},"As you scroll (or drag) through the carousel, cards fan out in 3D space, settle face-on in the center, then peel away behind the stack. Pull past the first or last card and the whole stack bends like you're forcing a page turn.",[228,297,298,299,302],{},"Blossom's role here is small but important: it gives you a real horizontal scroll container with optional drag on desktop, and an ",[244,300,301],{},"overscroll"," event when the user pulls beyond the scroll range. Everything else is CSS.",[228,304,305],{},"Let's build it up step by step. Each step below has a live demo, so you can see exactly what each layer adds.",[253,307,309],{"id":308},"step-1-set-up-the-scroll-container","Step 1: Set up the scroll container",[228,311,312],{},"Start with a horizontal grid where each slide takes the full viewport width of the carousel, and scroll snap locks to each page:",[314,315,320],"pre",{"className":316,"code":317,"language":318,"meta":319,"style":319},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  --card-width: 12rem;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 100%;\n  scroll-snap-type: x mandatory;\n\n  \u002F* Show one card with neighbors peeking on each side *\u002F\n  width: calc(var(--card-width) * 3);\n  padding-inline: var(--card-width);\n  box-sizing: border-box;\n}\n\n.slide {\n  width: var(--card-width);\n  aspect-ratio: 3 \u002F 4;\n}\n","css","",[244,321,322,337,354,361,375,388,401,414,419,426,461,478,491,497,502,512,527,545],{"__ignoreMap":319},[323,324,327,330,334],"span",{"class":325,"line":326},"line",1,[323,328,292],{"class":329},"sMK4o",[323,331,333],{"class":332},"sBMFI","carousel",[323,335,336],{"class":329}," {\n",[323,338,340,344,347,351],{"class":325,"line":339},2,[323,341,343],{"class":342},"sTEyZ","  --card-width",[323,345,346],{"class":329},":",[323,348,350],{"class":349},"sbssI"," 12rem",[323,352,353],{"class":329},";\n",[323,355,357],{"class":325,"line":356},3,[323,358,360],{"emptyLinePlaceholder":359},true,"\n",[323,362,364,368,370,373],{"class":325,"line":363},4,[323,365,367],{"class":366},"sqsOY","  display",[323,369,346],{"class":329},[323,371,372],{"class":342}," grid",[323,374,353],{"class":329},[323,376,378,381,383,386],{"class":325,"line":377},5,[323,379,380],{"class":366},"  grid-auto-flow",[323,382,346],{"class":329},[323,384,385],{"class":342}," column",[323,387,353],{"class":329},[323,389,391,394,396,399],{"class":325,"line":390},6,[323,392,393],{"class":366},"  grid-auto-columns",[323,395,346],{"class":329},[323,397,398],{"class":349}," 100%",[323,400,353],{"class":329},[323,402,404,407,409,412],{"class":325,"line":403},7,[323,405,406],{"class":366},"  scroll-snap-type",[323,408,346],{"class":329},[323,410,411],{"class":342}," x mandatory",[323,413,353],{"class":329},[323,415,417],{"class":325,"line":416},8,[323,418,360],{"emptyLinePlaceholder":359},[323,420,422],{"class":325,"line":421},9,[323,423,425],{"class":424},"sHwdD","  \u002F* Show one card with neighbors peeking on each side *\u002F\n",[323,427,429,432,434,438,441,444,446,449,452,455,458],{"class":325,"line":428},10,[323,430,431],{"class":366},"  width",[323,433,346],{"class":329},[323,435,437],{"class":436},"s2Zo4"," calc",[323,439,440],{"class":329},"(",[323,442,443],{"class":436},"var",[323,445,440],{"class":329},[323,447,448],{"class":342},"--card-width",[323,450,451],{"class":329},")",[323,453,454],{"class":329}," *",[323,456,457],{"class":349}," 3",[323,459,460],{"class":329},");\n",[323,462,464,467,469,472,474,476],{"class":325,"line":463},11,[323,465,466],{"class":366},"  padding-inline",[323,468,346],{"class":329},[323,470,471],{"class":436}," var",[323,473,440],{"class":329},[323,475,448],{"class":342},[323,477,460],{"class":329},[323,479,481,484,486,489],{"class":325,"line":480},12,[323,482,483],{"class":366},"  box-sizing",[323,485,346],{"class":329},[323,487,488],{"class":342}," border-box",[323,490,353],{"class":329},[323,492,494],{"class":325,"line":493},13,[323,495,496],{"class":329},"}\n",[323,498,500],{"class":325,"line":499},14,[323,501,360],{"emptyLinePlaceholder":359},[323,503,505,507,510],{"class":325,"line":504},15,[323,506,292],{"class":329},[323,508,509],{"class":332},"slide",[323,511,336],{"class":329},[323,513,515,517,519,521,523,525],{"class":325,"line":514},16,[323,516,431],{"class":366},[323,518,346],{"class":329},[323,520,471],{"class":436},[323,522,440],{"class":329},[323,524,448],{"class":342},[323,526,460],{"class":329},[323,528,530,533,535,537,540,543],{"class":325,"line":529},17,[323,531,532],{"class":366},"  aspect-ratio",[323,534,346],{"class":329},[323,536,457],{"class":349},[323,538,539],{"class":342}," \u002F ",[323,541,542],{"class":349},"4",[323,544,353],{"class":329},[323,546,548],{"class":325,"line":547},18,[323,549,496],{"class":329},[314,551,555],{"className":552,"code":553,"language":554,"meta":319,"style":319},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBlossomCarousel class=\"carousel\">\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C!-- ... -->\n\u003C\u002FBlossomCarousel>\n","html",[244,556,557,584,604,629,638,656,678,686,704,726,734,739],{"__ignoreMap":319},[323,558,559,562,566,570,573,576,579,581],{"class":325,"line":326},[323,560,561],{"class":329},"\u003C",[323,563,565],{"class":564},"swJcz","BlossomCarousel",[323,567,569],{"class":568},"spNyl"," class",[323,571,572],{"class":329},"=",[323,574,575],{"class":329},"\"",[323,577,333],{"class":578},"sfazB",[323,580,575],{"class":329},[323,582,583],{"class":329},">\n",[323,585,586,589,592,594,596,598,600,602],{"class":325,"line":339},[323,587,588],{"class":329},"  \u003C",[323,590,591],{"class":564},"div",[323,593,569],{"class":568},[323,595,572],{"class":329},[323,597,575],{"class":329},[323,599,509],{"class":578},[323,601,575],{"class":329},[323,603,583],{"class":329},[323,605,606,609,611,613,615,617,620,622,625,627],{"class":325,"line":356},[323,607,608],{"class":329},"    \u003C",[323,610,591],{"class":564},[323,612,569],{"class":568},[323,614,572],{"class":329},[323,616,575],{"class":329},[323,618,619],{"class":578},"card",[323,621,575],{"class":329},[323,623,624],{"class":329},">\u003C\u002F",[323,626,591],{"class":564},[323,628,583],{"class":329},[323,630,631,634,636],{"class":325,"line":363},[323,632,633],{"class":329},"  \u003C\u002F",[323,635,591],{"class":564},[323,637,583],{"class":329},[323,639,640,642,644,646,648,650,652,654],{"class":325,"line":377},[323,641,588],{"class":329},[323,643,591],{"class":564},[323,645,569],{"class":568},[323,647,572],{"class":329},[323,649,575],{"class":329},[323,651,509],{"class":578},[323,653,575],{"class":329},[323,655,583],{"class":329},[323,657,658,660,662,664,666,668,670,672,674,676],{"class":325,"line":390},[323,659,608],{"class":329},[323,661,591],{"class":564},[323,663,569],{"class":568},[323,665,572],{"class":329},[323,667,575],{"class":329},[323,669,619],{"class":578},[323,671,575],{"class":329},[323,673,624],{"class":329},[323,675,591],{"class":564},[323,677,583],{"class":329},[323,679,680,682,684],{"class":325,"line":403},[323,681,633],{"class":329},[323,683,591],{"class":564},[323,685,583],{"class":329},[323,687,688,690,692,694,696,698,700,702],{"class":325,"line":416},[323,689,588],{"class":329},[323,691,591],{"class":564},[323,693,569],{"class":568},[323,695,572],{"class":329},[323,697,575],{"class":329},[323,699,509],{"class":578},[323,701,575],{"class":329},[323,703,583],{"class":329},[323,705,706,708,710,712,714,716,718,720,722,724],{"class":325,"line":421},[323,707,608],{"class":329},[323,709,591],{"class":564},[323,711,569],{"class":568},[323,713,572],{"class":329},[323,715,575],{"class":329},[323,717,619],{"class":578},[323,719,575],{"class":329},[323,721,624],{"class":329},[323,723,591],{"class":564},[323,725,583],{"class":329},[323,727,728,730,732],{"class":325,"line":428},[323,729,633],{"class":329},[323,731,591],{"class":564},[323,733,583],{"class":329},[323,735,736],{"class":325,"line":463},[323,737,738],{"class":424},"  \u003C!-- ... -->\n",[323,740,741,744,746],{"class":325,"line":480},[323,742,743],{"class":329},"\u003C\u002F",[323,745,565],{"class":564},[323,747,583],{"class":329},[749,750],"blog-flipbook-step1",{},[228,752,753],{},"Nothing fancy yet, just a snapping horizontal scroller. Each column is as wide as the carousel itself, which is why you see so much space between the cards. That will make sense in the next step.",[253,755,757],{"id":756},"step-2-sticky-stacking","Step 2: Sticky stacking",[228,759,760,761,763,764,767],{},"Now make each slide ",[244,762,246],{}," with negative inset offsets. This keeps every card pinned to the same visual slot as you scroll, so cards ",[237,765,766],{},"stack on top of each other"," instead of sliding side by side like a normal carousel:",[314,769,771],{"className":316,"code":770,"language":318,"meta":319,"style":319},".slide {\n  position: sticky;\n  left: calc(var(--card-width) * -1);\n  right: calc(var(--card-width) * -1);\n}\n",[244,772,773,781,793,819,844],{"__ignoreMap":319},[323,774,775,777,779],{"class":325,"line":326},[323,776,292],{"class":329},[323,778,509],{"class":332},[323,780,336],{"class":329},[323,782,783,786,788,791],{"class":325,"line":339},[323,784,785],{"class":366},"  position",[323,787,346],{"class":329},[323,789,790],{"class":342}," sticky",[323,792,353],{"class":329},[323,794,795,798,800,802,804,806,808,810,812,814,817],{"class":325,"line":356},[323,796,797],{"class":366},"  left",[323,799,346],{"class":329},[323,801,437],{"class":436},[323,803,440],{"class":329},[323,805,443],{"class":436},[323,807,440],{"class":329},[323,809,448],{"class":342},[323,811,451],{"class":329},[323,813,454],{"class":329},[323,815,816],{"class":349}," -1",[323,818,460],{"class":329},[323,820,821,824,826,828,830,832,834,836,838,840,842],{"class":325,"line":363},[323,822,823],{"class":366},"  right",[323,825,346],{"class":329},[323,827,437],{"class":436},[323,829,440],{"class":329},[323,831,443],{"class":436},[323,833,440],{"class":329},[323,835,448],{"class":342},[323,837,451],{"class":329},[323,839,454],{"class":329},[323,841,816],{"class":349},[323,843,460],{"class":329},[323,845,846],{"class":325,"line":377},[323,847,496],{"class":329},[849,850],"blog-flipbook-step2",{},[228,852,853],{},"The grid still advances one full column per snap point, but sticky positioning pulls each card back into the center frame. Every card now passes through the same region as you scroll, which is exactly the setup we need to animate them in 3D.",[253,855,857],{"id":856},"step-3-scroll-driven-animations","Step 3: Scroll-driven animations",[228,859,860,861,864],{},"Attach a ",[237,862,863],{},"view timeline"," to each slide so its animation progress tracks how far that slide has traveled through the scrollport:",[314,866,868],{"className":316,"code":867,"language":318,"meta":319,"style":319},".slide {\n  view-timeline: --cards inline;\n  animation: stack-cards linear both;\n  animation-timeline: --cards;\n  animation-range: contain;\n}\n",[244,869,870,878,890,902,914,926],{"__ignoreMap":319},[323,871,872,874,876],{"class":325,"line":326},[323,873,292],{"class":329},[323,875,509],{"class":332},[323,877,336],{"class":329},[323,879,880,883,885,888],{"class":325,"line":339},[323,881,882],{"class":342},"  view-timeline",[323,884,346],{"class":329},[323,886,887],{"class":342}," --cards inline",[323,889,353],{"class":329},[323,891,892,895,897,900],{"class":325,"line":356},[323,893,894],{"class":366},"  animation",[323,896,346],{"class":329},[323,898,899],{"class":342}," stack-cards linear both",[323,901,353],{"class":329},[323,903,904,907,909,912],{"class":325,"line":363},[323,905,906],{"class":342},"  animation-timeline",[323,908,346],{"class":329},[323,910,911],{"class":342}," --cards",[323,913,353],{"class":329},[323,915,916,919,921,924],{"class":325,"line":377},[323,917,918],{"class":342},"  animation-range",[323,920,346],{"class":329},[323,922,923],{"class":342}," contain",[323,925,353],{"class":329},[323,927,928],{"class":325,"line":390},[323,929,496],{"class":329},[228,931,932,933,936,937,939],{},"The named timeline ",[244,934,935],{},"--cards"," is scoped to each slide's journey through the carousel, and ",[244,938,285],{}," runs the animation for the full time the slide is visible in the scrollport.",[228,941,942,943,946],{},"This first animation only manages ",[237,944,945],{},"stacking order",", in other words which card sits on top as it moves through the center:",[314,948,950],{"className":316,"code":949,"language":318,"meta":319,"style":319},"@keyframes stack-cards {\n  0% {\n    z-index: calc(sibling-count() - sibling-index());\n  }\n  50% {\n    z-index: 1000;\n  }\n  100% {\n    z-index: sibling-index();\n  }\n}\n",[244,951,952,964,971,992,997,1004,1015,1019,1026,1037,1041],{"__ignoreMap":319},[323,953,954,958,962],{"class":325,"line":326},[323,955,957],{"class":956},"s7zQu","@keyframes",[323,959,961],{"class":960},"sHdIc"," stack-cards",[323,963,336],{"class":329},[323,965,966,969],{"class":325,"line":339},[323,967,968],{"class":332},"  0%",[323,970,336],{"class":329},[323,972,973,976,978,980,982,985,987,990],{"class":325,"line":356},[323,974,975],{"class":366},"    z-index",[323,977,346],{"class":329},[323,979,437],{"class":436},[323,981,440],{"class":329},[323,983,984],{"class":342},"sibling-count(",[323,986,451],{"class":329},[323,988,989],{"class":342}," - sibling-index())",[323,991,353],{"class":329},[323,993,994],{"class":325,"line":363},[323,995,996],{"class":329},"  }\n",[323,998,999,1002],{"class":325,"line":377},[323,1000,1001],{"class":332},"  50%",[323,1003,336],{"class":329},[323,1005,1006,1008,1010,1013],{"class":325,"line":390},[323,1007,975],{"class":366},[323,1009,346],{"class":329},[323,1011,1012],{"class":349}," 1000",[323,1014,353],{"class":329},[323,1016,1017],{"class":325,"line":403},[323,1018,996],{"class":329},[323,1020,1021,1024],{"class":325,"line":416},[323,1022,1023],{"class":332},"  100%",[323,1025,336],{"class":329},[323,1027,1028,1030,1032,1035],{"class":325,"line":421},[323,1029,975],{"class":366},[323,1031,346],{"class":329},[323,1033,1034],{"class":342}," sibling-index()",[323,1036,353],{"class":329},[323,1038,1039],{"class":325,"line":428},[323,1040,996],{"class":329},[323,1042,1043],{"class":325,"line":463},[323,1044,496],{"class":329},[228,1046,1047,1050,1051,1054],{},[244,1048,1049],{},"sibling-index()"," is a CSS function that returns each slide's index among its siblings. Cards entering from the left start on top, the active card peaks at ",[244,1052,1053],{},"z-index: 1000"," in the middle, and cards exiting sink behind the stack.",[1056,1057],"blog-flipbook-step3",{},[228,1059,1060],{},"It still looks static, but scroll slowly and watch the cards swap places. The stacking order is now correct, we just need the cards to actually move.",[253,1062,1064],{"id":1063},"step-4-3d-card-rotation","Step 4: 3D card rotation",[228,1066,1067,1068,1071],{},"The visible flip happens on an inner ",[244,1069,1070],{},".card"," element. Separating the sticky wrapper from the rotating card keeps the scroll and transform concerns isolated:",[314,1073,1075],{"className":316,"code":1074,"language":318,"meta":319,"style":319},".slide {\n  perspective: 1200px;\n\n  & .card {\n    width: 100%;\n    height: 100%;\n    transform-style: preserve-3d;\n\n    animation: rotate-cards linear both;\n    animation-timeline: --cards;\n    animation-range: contain -50% contain 150%;\n  }\n}\n",[244,1076,1077,1085,1097,1101,1106,1117,1128,1140,1144,1156,1167,1187,1191],{"__ignoreMap":319},[323,1078,1079,1081,1083],{"class":325,"line":326},[323,1080,292],{"class":329},[323,1082,509],{"class":332},[323,1084,336],{"class":329},[323,1086,1087,1090,1092,1095],{"class":325,"line":339},[323,1088,1089],{"class":366},"  perspective",[323,1091,346],{"class":329},[323,1093,1094],{"class":349}," 1200px",[323,1096,353],{"class":329},[323,1098,1099],{"class":325,"line":356},[323,1100,360],{"emptyLinePlaceholder":359},[323,1102,1103],{"class":325,"line":363},[323,1104,1105],{"class":342},"  & .card {\n",[323,1107,1108,1111,1113,1115],{"class":325,"line":377},[323,1109,1110],{"class":366},"    width",[323,1112,346],{"class":329},[323,1114,398],{"class":349},[323,1116,353],{"class":329},[323,1118,1119,1122,1124,1126],{"class":325,"line":390},[323,1120,1121],{"class":366},"    height",[323,1123,346],{"class":329},[323,1125,398],{"class":349},[323,1127,353],{"class":329},[323,1129,1130,1133,1135,1138],{"class":325,"line":403},[323,1131,1132],{"class":366},"    transform-style",[323,1134,346],{"class":329},[323,1136,1137],{"class":342}," preserve-3d",[323,1139,353],{"class":329},[323,1141,1142],{"class":325,"line":416},[323,1143,360],{"emptyLinePlaceholder":359},[323,1145,1146,1149,1151,1154],{"class":325,"line":421},[323,1147,1148],{"class":366},"    animation",[323,1150,346],{"class":329},[323,1152,1153],{"class":342}," rotate-cards linear both",[323,1155,353],{"class":329},[323,1157,1158,1161,1163,1165],{"class":325,"line":428},[323,1159,1160],{"class":342},"    animation-timeline",[323,1162,346],{"class":329},[323,1164,911],{"class":342},[323,1166,353],{"class":329},[323,1168,1169,1172,1174,1177,1180,1182,1185],{"class":325,"line":463},[323,1170,1171],{"class":342},"    animation-range",[323,1173,346],{"class":329},[323,1175,1176],{"class":342}," contain ",[323,1178,1179],{"class":349},"-50%",[323,1181,1176],{"class":342},[323,1183,1184],{"class":349},"150%",[323,1186,353],{"class":329},[323,1188,1189],{"class":325,"line":480},[323,1190,996],{"class":329},[323,1192,1193],{"class":325,"line":493},[323,1194,496],{"class":342},[228,1196,1197,1198,1201],{},"The wider animation range (",[244,1199,1200],{},"contain -50% contain 150%",") starts the rotation slightly before the slide enters and finishes slightly after it leaves, so the motion feels continuous rather than clipped.",[228,1203,1204],{},"The keyframes move each card through a 3D arc: offset to the side, rotated on the Y axis, flat in the center, then mirrored on the way out:",[314,1206,1208],{"className":316,"code":1207,"language":318,"meta":319,"style":319},"@keyframes rotate-cards {\n  0% {\n    transform: translateX(-100%) translateZ(-200px) rotateY(-35deg);\n  }\n  25% {\n    transform: translateX(-80%) translateZ(-100px) rotateY(-35deg);\n  }\n  37.5% {\n    transform: translateX(-15%) translateZ(-100px) rotateY(-20deg);\n  }\n  50% {\n    transform: translateX(0%) translateZ(0px) rotateY(0deg);\n  }\n  62.5% {\n    transform: translateX(15%) translateZ(-100px) rotateY(20deg);\n  }\n  75% {\n    transform: translateX(80%) translateZ(-100px) rotateY(35deg);\n  }\n  100% {\n    transform: translateX(100%) translateZ(-200px) rotateY(35deg);\n  }\n}\n",[244,1209,1210,1219,1225,1262,1266,1273,1305,1309,1316,1348,1352,1358,1391,1395,1402,1434,1438,1445,1477,1482,1489,1521,1526],{"__ignoreMap":319},[323,1211,1212,1214,1217],{"class":325,"line":326},[323,1213,957],{"class":956},[323,1215,1216],{"class":960}," rotate-cards",[323,1218,336],{"class":329},[323,1220,1221,1223],{"class":325,"line":339},[323,1222,968],{"class":332},[323,1224,336],{"class":329},[323,1226,1227,1230,1232,1235,1237,1240,1242,1245,1247,1250,1252,1255,1257,1260],{"class":325,"line":356},[323,1228,1229],{"class":366},"    transform",[323,1231,346],{"class":329},[323,1233,1234],{"class":436}," translateX",[323,1236,440],{"class":329},[323,1238,1239],{"class":349},"-100%",[323,1241,451],{"class":329},[323,1243,1244],{"class":436}," translateZ",[323,1246,440],{"class":329},[323,1248,1249],{"class":349},"-200px",[323,1251,451],{"class":329},[323,1253,1254],{"class":436}," rotateY",[323,1256,440],{"class":329},[323,1258,1259],{"class":349},"-35deg",[323,1261,460],{"class":329},[323,1263,1264],{"class":325,"line":363},[323,1265,996],{"class":329},[323,1267,1268,1271],{"class":325,"line":377},[323,1269,1270],{"class":332},"  25%",[323,1272,336],{"class":329},[323,1274,1275,1277,1279,1281,1283,1286,1288,1290,1292,1295,1297,1299,1301,1303],{"class":325,"line":390},[323,1276,1229],{"class":366},[323,1278,346],{"class":329},[323,1280,1234],{"class":436},[323,1282,440],{"class":329},[323,1284,1285],{"class":349},"-80%",[323,1287,451],{"class":329},[323,1289,1244],{"class":436},[323,1291,440],{"class":329},[323,1293,1294],{"class":349},"-100px",[323,1296,451],{"class":329},[323,1298,1254],{"class":436},[323,1300,440],{"class":329},[323,1302,1259],{"class":349},[323,1304,460],{"class":329},[323,1306,1307],{"class":325,"line":403},[323,1308,996],{"class":329},[323,1310,1311,1314],{"class":325,"line":416},[323,1312,1313],{"class":332},"  37.5%",[323,1315,336],{"class":329},[323,1317,1318,1320,1322,1324,1326,1329,1331,1333,1335,1337,1339,1341,1343,1346],{"class":325,"line":421},[323,1319,1229],{"class":366},[323,1321,346],{"class":329},[323,1323,1234],{"class":436},[323,1325,440],{"class":329},[323,1327,1328],{"class":349},"-15%",[323,1330,451],{"class":329},[323,1332,1244],{"class":436},[323,1334,440],{"class":329},[323,1336,1294],{"class":349},[323,1338,451],{"class":329},[323,1340,1254],{"class":436},[323,1342,440],{"class":329},[323,1344,1345],{"class":349},"-20deg",[323,1347,460],{"class":329},[323,1349,1350],{"class":325,"line":428},[323,1351,996],{"class":329},[323,1353,1354,1356],{"class":325,"line":463},[323,1355,1001],{"class":332},[323,1357,336],{"class":329},[323,1359,1360,1362,1364,1366,1368,1371,1373,1375,1377,1380,1382,1384,1386,1389],{"class":325,"line":480},[323,1361,1229],{"class":366},[323,1363,346],{"class":329},[323,1365,1234],{"class":436},[323,1367,440],{"class":329},[323,1369,1370],{"class":349},"0%",[323,1372,451],{"class":329},[323,1374,1244],{"class":436},[323,1376,440],{"class":329},[323,1378,1379],{"class":349},"0px",[323,1381,451],{"class":329},[323,1383,1254],{"class":436},[323,1385,440],{"class":329},[323,1387,1388],{"class":349},"0deg",[323,1390,460],{"class":329},[323,1392,1393],{"class":325,"line":493},[323,1394,996],{"class":329},[323,1396,1397,1400],{"class":325,"line":499},[323,1398,1399],{"class":332},"  62.5%",[323,1401,336],{"class":329},[323,1403,1404,1406,1408,1410,1412,1415,1417,1419,1421,1423,1425,1427,1429,1432],{"class":325,"line":504},[323,1405,1229],{"class":366},[323,1407,346],{"class":329},[323,1409,1234],{"class":436},[323,1411,440],{"class":329},[323,1413,1414],{"class":349},"15%",[323,1416,451],{"class":329},[323,1418,1244],{"class":436},[323,1420,440],{"class":329},[323,1422,1294],{"class":349},[323,1424,451],{"class":329},[323,1426,1254],{"class":436},[323,1428,440],{"class":329},[323,1430,1431],{"class":349},"20deg",[323,1433,460],{"class":329},[323,1435,1436],{"class":325,"line":514},[323,1437,996],{"class":329},[323,1439,1440,1443],{"class":325,"line":529},[323,1441,1442],{"class":332},"  75%",[323,1444,336],{"class":329},[323,1446,1447,1449,1451,1453,1455,1458,1460,1462,1464,1466,1468,1470,1472,1475],{"class":325,"line":547},[323,1448,1229],{"class":366},[323,1450,346],{"class":329},[323,1452,1234],{"class":436},[323,1454,440],{"class":329},[323,1456,1457],{"class":349},"80%",[323,1459,451],{"class":329},[323,1461,1244],{"class":436},[323,1463,440],{"class":329},[323,1465,1294],{"class":349},[323,1467,451],{"class":329},[323,1469,1254],{"class":436},[323,1471,440],{"class":329},[323,1473,1474],{"class":349},"35deg",[323,1476,460],{"class":329},[323,1478,1480],{"class":325,"line":1479},19,[323,1481,996],{"class":329},[323,1483,1485,1487],{"class":325,"line":1484},20,[323,1486,1023],{"class":332},[323,1488,336],{"class":329},[323,1490,1492,1494,1496,1498,1500,1503,1505,1507,1509,1511,1513,1515,1517,1519],{"class":325,"line":1491},21,[323,1493,1229],{"class":366},[323,1495,346],{"class":329},[323,1497,1234],{"class":436},[323,1499,440],{"class":329},[323,1501,1502],{"class":349},"100%",[323,1504,451],{"class":329},[323,1506,1244],{"class":436},[323,1508,440],{"class":329},[323,1510,1249],{"class":349},[323,1512,451],{"class":329},[323,1514,1254],{"class":436},[323,1516,440],{"class":329},[323,1518,1474],{"class":349},[323,1520,460],{"class":329},[323,1522,1524],{"class":325,"line":1523},22,[323,1525,996],{"class":329},[323,1527,1529],{"class":325,"line":1528},23,[323,1530,496],{"class":329},[1532,1533],"blog-flipbook-step4",{},[228,1535,1536],{},"There's the flipbook. Feel free to tweak the translate and rotate values to change how dramatic the fan feels. The symmetry around the 50% keyframe keeps the motion balanced in both scroll directions.",[253,1538,1540],{"id":1539},"step-5-overscroll-page-turn","Step 5: Overscroll page turn",[228,1542,1543,1544,1547,1548,1550],{},"Scroll-driven animations handle everything within the scroll range. For the rubber-band ",[237,1545,1546],{},"page turn"," when the user drags past the first or last card, listen to Blossom's ",[244,1549,301],{}," event:",[314,1552,1556],{"className":1553,"code":1554,"language":1555,"meta":319,"style":319},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function handleOverscroll(event: CustomEvent) {\n  event.preventDefault();\n  const overscroll = event.detail.left;\n\n  Array.from(event.target.children).forEach((child) => {\n    const translate = `translateX(${overscroll * 0.5}px)`;\n    const rotate = `rotateY(${(overscroll \u002F event.target.clientWidth) * -90}deg)`;\n    child.style.transform = `${translate} ${rotate}`;\n  });\n}\n\ncarousel.addEventListener('overscroll', handleOverscroll);\n","js",[244,1557,1558,1580,1595,1621,1625,1670,1709,1759,1795,1804,1808,1812],{"__ignoreMap":319},[323,1559,1560,1563,1566,1568,1571,1573,1576,1578],{"class":325,"line":326},[323,1561,1562],{"class":568},"function",[323,1564,1565],{"class":436}," handleOverscroll",[323,1567,440],{"class":329},[323,1569,1570],{"class":960},"event",[323,1572,346],{"class":329},[323,1574,1575],{"class":332}," CustomEvent",[323,1577,451],{"class":329},[323,1579,336],{"class":329},[323,1581,1582,1585,1587,1590,1593],{"class":325,"line":339},[323,1583,1584],{"class":342},"  event",[323,1586,292],{"class":329},[323,1588,1589],{"class":436},"preventDefault",[323,1591,1592],{"class":564},"()",[323,1594,353],{"class":329},[323,1596,1597,1600,1603,1606,1609,1611,1614,1616,1619],{"class":325,"line":356},[323,1598,1599],{"class":568},"  const",[323,1601,1602],{"class":342}," overscroll",[323,1604,1605],{"class":329}," =",[323,1607,1608],{"class":342}," event",[323,1610,292],{"class":329},[323,1612,1613],{"class":342},"detail",[323,1615,292],{"class":329},[323,1617,1618],{"class":342},"left",[323,1620,353],{"class":329},[323,1622,1623],{"class":325,"line":363},[323,1624,360],{"emptyLinePlaceholder":359},[323,1626,1627,1630,1632,1635,1637,1639,1641,1644,1646,1649,1651,1653,1656,1658,1660,1663,1665,1668],{"class":325,"line":377},[323,1628,1629],{"class":342},"  Array",[323,1631,292],{"class":329},[323,1633,1634],{"class":436},"from",[323,1636,440],{"class":564},[323,1638,1570],{"class":342},[323,1640,292],{"class":329},[323,1642,1643],{"class":342},"target",[323,1645,292],{"class":329},[323,1647,1648],{"class":342},"children",[323,1650,451],{"class":564},[323,1652,292],{"class":329},[323,1654,1655],{"class":436},"forEach",[323,1657,440],{"class":564},[323,1659,440],{"class":329},[323,1661,1662],{"class":960},"child",[323,1664,451],{"class":329},[323,1666,1667],{"class":568}," =>",[323,1669,336],{"class":329},[323,1671,1672,1675,1678,1680,1683,1686,1689,1692,1695,1698,1701,1704,1707],{"class":325,"line":390},[323,1673,1674],{"class":568},"    const",[323,1676,1677],{"class":342}," translate",[323,1679,1605],{"class":329},[323,1681,1682],{"class":329}," `",[323,1684,1685],{"class":578},"translateX(",[323,1687,1688],{"class":329},"${",[323,1690,1691],{"class":342},"overscroll ",[323,1693,1694],{"class":329},"*",[323,1696,1697],{"class":349}," 0.5",[323,1699,1700],{"class":329},"}",[323,1702,1703],{"class":578},"px)",[323,1705,1706],{"class":329},"`",[323,1708,353],{"class":329},[323,1710,1711,1713,1716,1718,1720,1723,1725,1728,1731,1733,1735,1737,1739,1742,1744,1747,1750,1752,1755,1757],{"class":325,"line":403},[323,1712,1674],{"class":568},[323,1714,1715],{"class":342}," rotate",[323,1717,1605],{"class":329},[323,1719,1682],{"class":329},[323,1721,1722],{"class":578},"rotateY(",[323,1724,1688],{"class":329},[323,1726,1727],{"class":342},"(overscroll ",[323,1729,1730],{"class":329},"\u002F",[323,1732,1608],{"class":342},[323,1734,292],{"class":329},[323,1736,1643],{"class":342},[323,1738,292],{"class":329},[323,1740,1741],{"class":342},"clientWidth) ",[323,1743,1694],{"class":329},[323,1745,1746],{"class":329}," -",[323,1748,1749],{"class":349},"90",[323,1751,1700],{"class":329},[323,1753,1754],{"class":578},"deg)",[323,1756,1706],{"class":329},[323,1758,353],{"class":329},[323,1760,1761,1764,1766,1769,1771,1774,1776,1779,1782,1784,1787,1790,1793],{"class":325,"line":416},[323,1762,1763],{"class":342},"    child",[323,1765,292],{"class":329},[323,1767,1768],{"class":342},"style",[323,1770,292],{"class":329},[323,1772,1773],{"class":342},"transform",[323,1775,1605],{"class":329},[323,1777,1778],{"class":329}," `${",[323,1780,1781],{"class":342},"translate",[323,1783,1700],{"class":329},[323,1785,1786],{"class":329}," ${",[323,1788,1789],{"class":342},"rotate",[323,1791,1792],{"class":329},"}`",[323,1794,353],{"class":329},[323,1796,1797,1800,1802],{"class":325,"line":421},[323,1798,1799],{"class":329},"  }",[323,1801,451],{"class":564},[323,1803,353],{"class":329},[323,1805,1806],{"class":325,"line":428},[323,1807,496],{"class":329},[323,1809,1810],{"class":325,"line":463},[323,1811,360],{"emptyLinePlaceholder":359},[323,1813,1814,1816,1818,1821,1823,1826,1828,1830,1833,1836],{"class":325,"line":480},[323,1815,333],{"class":342},[323,1817,292],{"class":329},[323,1819,1820],{"class":436},"addEventListener",[323,1822,440],{"class":342},[323,1824,1825],{"class":329},"'",[323,1827,301],{"class":578},[323,1829,1825],{"class":329},[323,1831,1832],{"class":329},",",[323,1834,1835],{"class":342}," handleOverscroll)",[323,1837,353],{"class":329},[228,1839,1840,1843,1844,1847],{},[244,1841,1842],{},"event.detail.left"," is the horizontal overscroll distance in pixels, positive when pulling right and negative when pulling left. We apply it directly as a transform on each slide. The ",[244,1845,1846],{},".prevent"," modifier tells Blossom to skip its default rubber-band effect so our custom one takes over.",[258,1849],{},[228,1851,1852],{},"Drag past the first or last card to see it. Note that this only runs when the drag engine is active (desktop with a fine pointer). Touch users still get native scroll at the edges, which is usually enough.",[253,1854,1856],{"id":1855},"putting-it-together","Putting it together",[1858,1859,1861,2798,3877,4802],"code-group",{"sync":1860},"migration-code-style",[314,1862,1867],{"className":1863,"code":1864,"filename":1865,"language":1866,"meta":319,"style":319},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nfunction handleOverscroll(event: CustomEvent) {\n  const overscroll = event.detail.left;\n\n  Array.from(event.target.children).forEach((child) => {\n    const translate = `translateX(${overscroll * 0.5}px)`;\n    const rotate = `rotateY(${(overscroll \u002F event.target.clientWidth) * -90}deg)`;\n    child.style.transform = `${translate} ${rotate}`;\n  });\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBlossomCarousel class=\"carousel\" @overscroll.prevent=\"handleOverscroll\">\n    \u003Cdiv v-for=\"i in 10\" :key=\"i\" class=\"slide\">\n      \u003Cdiv class=\"card\">{{ i }}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FBlossomCarousel>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.carousel {\n  --card-width: 12rem;\n}\n\n.slide {\n  view-timeline: --cards inline;\n  animation: stack-cards linear both;\n  animation-timeline: --cards;\n  animation-range: contain;\n\n  & .card {\n    animation: rotate-cards linear both;\n    animation-timeline: --cards;\n    animation-range: contain -50% contain 150%;\n  }\n}\n\n@keyframes stack-cards {\n  0% {\n    z-index: calc(sibling-count() - sibling-index());\n  }\n  50% {\n    z-index: 1000;\n  }\n  100% {\n    z-index: sibling-index();\n  }\n}\n\n@keyframes rotate-cards {\n  0% {\n    transform: translateX(-100%) translateZ(-200px) rotateY(-35deg);\n  }\n  25% {\n    transform: translateX(-80%) translateZ(-100px) rotateY(-35deg);\n  }\n  37.5% {\n    transform: translateX(-15%) translateZ(-100px) rotateY(-20deg);\n  }\n  50% {\n    transform: translateX(0%) translateZ(0px) rotateY(0deg);\n  }\n  62.5% {\n    transform: translateX(15%) translateZ(-100px) rotateY(20deg);\n  }\n  75% {\n    transform: translateX(80%) translateZ(-100px) rotateY(35deg);\n  }\n  100% {\n    transform: translateX(100%) translateZ(-200px) rotateY(35deg);\n  }\n}\n\u003C\u002Fstyle>\n","Vue","vue",[244,1868,1869,1881,1899,1919,1923,1961,1989,2031,2059,2067,2071,2079,2083,2092,2122,2164,2193,2202,2210,2218,2222,2233,2241,2251,2256,2261,2270,2281,2292,2303,2314,2319,2324,2335,2346,2363,2368,2373,2378,2387,2394,2413,2418,2425,2436,2441,2448,2459,2464,2469,2474,2483,2490,2521,2526,2533,2564,2569,2576,2607,2612,2619,2650,2655,2662,2693,2698,2705,2736,2741,2748,2779,2784,2789],{"__ignoreMap":319},[323,1870,1871,1873,1876,1879],{"class":325,"line":326},[323,1872,561],{"class":329},[323,1874,1875],{"class":564},"script",[323,1877,1878],{"class":568}," setup",[323,1880,583],{"class":329},[323,1882,1883,1885,1887,1889,1891,1893,1895,1897],{"class":325,"line":339},[323,1884,1562],{"class":568},[323,1886,1565],{"class":436},[323,1888,440],{"class":329},[323,1890,1570],{"class":960},[323,1892,346],{"class":329},[323,1894,1575],{"class":332},[323,1896,451],{"class":329},[323,1898,336],{"class":329},[323,1900,1901,1903,1905,1907,1909,1911,1913,1915,1917],{"class":325,"line":356},[323,1902,1599],{"class":568},[323,1904,1602],{"class":342},[323,1906,1605],{"class":329},[323,1908,1608],{"class":342},[323,1910,292],{"class":329},[323,1912,1613],{"class":342},[323,1914,292],{"class":329},[323,1916,1618],{"class":342},[323,1918,353],{"class":329},[323,1920,1921],{"class":325,"line":363},[323,1922,360],{"emptyLinePlaceholder":359},[323,1924,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945,1947,1949,1951,1953,1955,1957,1959],{"class":325,"line":377},[323,1926,1629],{"class":342},[323,1928,292],{"class":329},[323,1930,1634],{"class":436},[323,1932,440],{"class":564},[323,1934,1570],{"class":342},[323,1936,292],{"class":329},[323,1938,1643],{"class":342},[323,1940,292],{"class":329},[323,1942,1648],{"class":342},[323,1944,451],{"class":564},[323,1946,292],{"class":329},[323,1948,1655],{"class":436},[323,1950,440],{"class":564},[323,1952,440],{"class":329},[323,1954,1662],{"class":960},[323,1956,451],{"class":329},[323,1958,1667],{"class":568},[323,1960,336],{"class":329},[323,1962,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987],{"class":325,"line":390},[323,1964,1674],{"class":568},[323,1966,1677],{"class":342},[323,1968,1605],{"class":329},[323,1970,1682],{"class":329},[323,1972,1685],{"class":578},[323,1974,1688],{"class":329},[323,1976,1691],{"class":342},[323,1978,1694],{"class":329},[323,1980,1697],{"class":349},[323,1982,1700],{"class":329},[323,1984,1703],{"class":578},[323,1986,1706],{"class":329},[323,1988,353],{"class":329},[323,1990,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029],{"class":325,"line":403},[323,1992,1674],{"class":568},[323,1994,1715],{"class":342},[323,1996,1605],{"class":329},[323,1998,1682],{"class":329},[323,2000,1722],{"class":578},[323,2002,1688],{"class":329},[323,2004,1727],{"class":342},[323,2006,1730],{"class":329},[323,2008,1608],{"class":342},[323,2010,292],{"class":329},[323,2012,1643],{"class":342},[323,2014,292],{"class":329},[323,2016,1741],{"class":342},[323,2018,1694],{"class":329},[323,2020,1746],{"class":329},[323,2022,1749],{"class":349},[323,2024,1700],{"class":329},[323,2026,1754],{"class":578},[323,2028,1706],{"class":329},[323,2030,353],{"class":329},[323,2032,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057],{"class":325,"line":416},[323,2034,1763],{"class":342},[323,2036,292],{"class":329},[323,2038,1768],{"class":342},[323,2040,292],{"class":329},[323,2042,1773],{"class":342},[323,2044,1605],{"class":329},[323,2046,1778],{"class":329},[323,2048,1781],{"class":342},[323,2050,1700],{"class":329},[323,2052,1786],{"class":329},[323,2054,1789],{"class":342},[323,2056,1792],{"class":329},[323,2058,353],{"class":329},[323,2060,2061,2063,2065],{"class":325,"line":421},[323,2062,1799],{"class":329},[323,2064,451],{"class":564},[323,2066,353],{"class":329},[323,2068,2069],{"class":325,"line":428},[323,2070,496],{"class":329},[323,2072,2073,2075,2077],{"class":325,"line":463},[323,2074,743],{"class":329},[323,2076,1875],{"class":564},[323,2078,583],{"class":329},[323,2080,2081],{"class":325,"line":480},[323,2082,360],{"emptyLinePlaceholder":359},[323,2084,2085,2087,2090],{"class":325,"line":493},[323,2086,561],{"class":329},[323,2088,2089],{"class":564},"template",[323,2091,583],{"class":329},[323,2093,2094,2096,2098,2100,2102,2104,2106,2108,2111,2113,2115,2118,2120],{"class":325,"line":499},[323,2095,588],{"class":329},[323,2097,565],{"class":564},[323,2099,569],{"class":568},[323,2101,572],{"class":329},[323,2103,575],{"class":329},[323,2105,333],{"class":578},[323,2107,575],{"class":329},[323,2109,2110],{"class":568}," @overscroll.prevent",[323,2112,572],{"class":329},[323,2114,575],{"class":329},[323,2116,2117],{"class":578},"handleOverscroll",[323,2119,575],{"class":329},[323,2121,583],{"class":329},[323,2123,2124,2126,2128,2131,2133,2135,2138,2140,2143,2145,2147,2150,2152,2154,2156,2158,2160,2162],{"class":325,"line":504},[323,2125,608],{"class":329},[323,2127,591],{"class":564},[323,2129,2130],{"class":568}," v-for",[323,2132,572],{"class":329},[323,2134,575],{"class":329},[323,2136,2137],{"class":578},"i in 10",[323,2139,575],{"class":329},[323,2141,2142],{"class":568}," :key",[323,2144,572],{"class":329},[323,2146,575],{"class":329},[323,2148,2149],{"class":578},"i",[323,2151,575],{"class":329},[323,2153,569],{"class":568},[323,2155,572],{"class":329},[323,2157,575],{"class":329},[323,2159,509],{"class":578},[323,2161,575],{"class":329},[323,2163,583],{"class":329},[323,2165,2166,2169,2171,2173,2175,2177,2179,2181,2184,2187,2189,2191],{"class":325,"line":514},[323,2167,2168],{"class":329},"      \u003C",[323,2170,591],{"class":564},[323,2172,569],{"class":568},[323,2174,572],{"class":329},[323,2176,575],{"class":329},[323,2178,619],{"class":578},[323,2180,575],{"class":329},[323,2182,2183],{"class":329},">",[323,2185,2186],{"class":342},"{{ i }}",[323,2188,743],{"class":329},[323,2190,591],{"class":564},[323,2192,583],{"class":329},[323,2194,2195,2198,2200],{"class":325,"line":529},[323,2196,2197],{"class":329},"    \u003C\u002F",[323,2199,591],{"class":564},[323,2201,583],{"class":329},[323,2203,2204,2206,2208],{"class":325,"line":547},[323,2205,633],{"class":329},[323,2207,565],{"class":564},[323,2209,583],{"class":329},[323,2211,2212,2214,2216],{"class":325,"line":1479},[323,2213,743],{"class":329},[323,2215,2089],{"class":564},[323,2217,583],{"class":329},[323,2219,2220],{"class":325,"line":1484},[323,2221,360],{"emptyLinePlaceholder":359},[323,2223,2224,2226,2228,2231],{"class":325,"line":1491},[323,2225,561],{"class":329},[323,2227,1768],{"class":564},[323,2229,2230],{"class":568}," scoped",[323,2232,583],{"class":329},[323,2234,2235,2237,2239],{"class":325,"line":1523},[323,2236,292],{"class":329},[323,2238,333],{"class":332},[323,2240,336],{"class":329},[323,2242,2243,2245,2247,2249],{"class":325,"line":1528},[323,2244,343],{"class":342},[323,2246,346],{"class":329},[323,2248,350],{"class":349},[323,2250,353],{"class":329},[323,2252,2254],{"class":325,"line":2253},24,[323,2255,496],{"class":329},[323,2257,2259],{"class":325,"line":2258},25,[323,2260,360],{"emptyLinePlaceholder":359},[323,2262,2264,2266,2268],{"class":325,"line":2263},26,[323,2265,292],{"class":329},[323,2267,509],{"class":332},[323,2269,336],{"class":329},[323,2271,2273,2275,2277,2279],{"class":325,"line":2272},27,[323,2274,882],{"class":342},[323,2276,346],{"class":329},[323,2278,887],{"class":342},[323,2280,353],{"class":329},[323,2282,2284,2286,2288,2290],{"class":325,"line":2283},28,[323,2285,894],{"class":366},[323,2287,346],{"class":329},[323,2289,899],{"class":342},[323,2291,353],{"class":329},[323,2293,2295,2297,2299,2301],{"class":325,"line":2294},29,[323,2296,906],{"class":342},[323,2298,346],{"class":329},[323,2300,911],{"class":342},[323,2302,353],{"class":329},[323,2304,2306,2308,2310,2312],{"class":325,"line":2305},30,[323,2307,918],{"class":342},[323,2309,346],{"class":329},[323,2311,923],{"class":342},[323,2313,353],{"class":329},[323,2315,2317],{"class":325,"line":2316},31,[323,2318,360],{"emptyLinePlaceholder":359},[323,2320,2322],{"class":325,"line":2321},32,[323,2323,1105],{"class":342},[323,2325,2327,2329,2331,2333],{"class":325,"line":2326},33,[323,2328,1148],{"class":366},[323,2330,346],{"class":329},[323,2332,1153],{"class":342},[323,2334,353],{"class":329},[323,2336,2338,2340,2342,2344],{"class":325,"line":2337},34,[323,2339,1160],{"class":342},[323,2341,346],{"class":329},[323,2343,911],{"class":342},[323,2345,353],{"class":329},[323,2347,2349,2351,2353,2355,2357,2359,2361],{"class":325,"line":2348},35,[323,2350,1171],{"class":342},[323,2352,346],{"class":329},[323,2354,1176],{"class":342},[323,2356,1179],{"class":349},[323,2358,1176],{"class":342},[323,2360,1184],{"class":349},[323,2362,353],{"class":329},[323,2364,2366],{"class":325,"line":2365},36,[323,2367,996],{"class":329},[323,2369,2371],{"class":325,"line":2370},37,[323,2372,496],{"class":342},[323,2374,2376],{"class":325,"line":2375},38,[323,2377,360],{"emptyLinePlaceholder":359},[323,2379,2381,2383,2385],{"class":325,"line":2380},39,[323,2382,957],{"class":956},[323,2384,961],{"class":960},[323,2386,336],{"class":329},[323,2388,2390,2392],{"class":325,"line":2389},40,[323,2391,968],{"class":332},[323,2393,336],{"class":329},[323,2395,2397,2399,2401,2403,2405,2407,2409,2411],{"class":325,"line":2396},41,[323,2398,975],{"class":366},[323,2400,346],{"class":329},[323,2402,437],{"class":436},[323,2404,440],{"class":329},[323,2406,984],{"class":342},[323,2408,451],{"class":329},[323,2410,989],{"class":342},[323,2412,353],{"class":329},[323,2414,2416],{"class":325,"line":2415},42,[323,2417,996],{"class":329},[323,2419,2421,2423],{"class":325,"line":2420},43,[323,2422,1001],{"class":332},[323,2424,336],{"class":329},[323,2426,2428,2430,2432,2434],{"class":325,"line":2427},44,[323,2429,975],{"class":366},[323,2431,346],{"class":329},[323,2433,1012],{"class":349},[323,2435,353],{"class":329},[323,2437,2439],{"class":325,"line":2438},45,[323,2440,996],{"class":329},[323,2442,2444,2446],{"class":325,"line":2443},46,[323,2445,1023],{"class":332},[323,2447,336],{"class":329},[323,2449,2451,2453,2455,2457],{"class":325,"line":2450},47,[323,2452,975],{"class":366},[323,2454,346],{"class":329},[323,2456,1034],{"class":342},[323,2458,353],{"class":329},[323,2460,2462],{"class":325,"line":2461},48,[323,2463,996],{"class":329},[323,2465,2467],{"class":325,"line":2466},49,[323,2468,496],{"class":329},[323,2470,2472],{"class":325,"line":2471},50,[323,2473,360],{"emptyLinePlaceholder":359},[323,2475,2477,2479,2481],{"class":325,"line":2476},51,[323,2478,957],{"class":956},[323,2480,1216],{"class":960},[323,2482,336],{"class":329},[323,2484,2486,2488],{"class":325,"line":2485},52,[323,2487,968],{"class":332},[323,2489,336],{"class":329},[323,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519],{"class":325,"line":2492},53,[323,2494,1229],{"class":366},[323,2496,346],{"class":329},[323,2498,1234],{"class":436},[323,2500,440],{"class":329},[323,2502,1239],{"class":349},[323,2504,451],{"class":329},[323,2506,1244],{"class":436},[323,2508,440],{"class":329},[323,2510,1249],{"class":349},[323,2512,451],{"class":329},[323,2514,1254],{"class":436},[323,2516,440],{"class":329},[323,2518,1259],{"class":349},[323,2520,460],{"class":329},[323,2522,2524],{"class":325,"line":2523},54,[323,2525,996],{"class":329},[323,2527,2529,2531],{"class":325,"line":2528},55,[323,2530,1270],{"class":332},[323,2532,336],{"class":329},[323,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562],{"class":325,"line":2535},56,[323,2537,1229],{"class":366},[323,2539,346],{"class":329},[323,2541,1234],{"class":436},[323,2543,440],{"class":329},[323,2545,1285],{"class":349},[323,2547,451],{"class":329},[323,2549,1244],{"class":436},[323,2551,440],{"class":329},[323,2553,1294],{"class":349},[323,2555,451],{"class":329},[323,2557,1254],{"class":436},[323,2559,440],{"class":329},[323,2561,1259],{"class":349},[323,2563,460],{"class":329},[323,2565,2567],{"class":325,"line":2566},57,[323,2568,996],{"class":329},[323,2570,2572,2574],{"class":325,"line":2571},58,[323,2573,1313],{"class":332},[323,2575,336],{"class":329},[323,2577,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605],{"class":325,"line":2578},59,[323,2580,1229],{"class":366},[323,2582,346],{"class":329},[323,2584,1234],{"class":436},[323,2586,440],{"class":329},[323,2588,1328],{"class":349},[323,2590,451],{"class":329},[323,2592,1244],{"class":436},[323,2594,440],{"class":329},[323,2596,1294],{"class":349},[323,2598,451],{"class":329},[323,2600,1254],{"class":436},[323,2602,440],{"class":329},[323,2604,1345],{"class":349},[323,2606,460],{"class":329},[323,2608,2610],{"class":325,"line":2609},60,[323,2611,996],{"class":329},[323,2613,2615,2617],{"class":325,"line":2614},61,[323,2616,1001],{"class":332},[323,2618,336],{"class":329},[323,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648],{"class":325,"line":2621},62,[323,2623,1229],{"class":366},[323,2625,346],{"class":329},[323,2627,1234],{"class":436},[323,2629,440],{"class":329},[323,2631,1370],{"class":349},[323,2633,451],{"class":329},[323,2635,1244],{"class":436},[323,2637,440],{"class":329},[323,2639,1379],{"class":349},[323,2641,451],{"class":329},[323,2643,1254],{"class":436},[323,2645,440],{"class":329},[323,2647,1388],{"class":349},[323,2649,460],{"class":329},[323,2651,2653],{"class":325,"line":2652},63,[323,2654,996],{"class":329},[323,2656,2658,2660],{"class":325,"line":2657},64,[323,2659,1399],{"class":332},[323,2661,336],{"class":329},[323,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689,2691],{"class":325,"line":2664},65,[323,2666,1229],{"class":366},[323,2668,346],{"class":329},[323,2670,1234],{"class":436},[323,2672,440],{"class":329},[323,2674,1414],{"class":349},[323,2676,451],{"class":329},[323,2678,1244],{"class":436},[323,2680,440],{"class":329},[323,2682,1294],{"class":349},[323,2684,451],{"class":329},[323,2686,1254],{"class":436},[323,2688,440],{"class":329},[323,2690,1431],{"class":349},[323,2692,460],{"class":329},[323,2694,2696],{"class":325,"line":2695},66,[323,2697,996],{"class":329},[323,2699,2701,2703],{"class":325,"line":2700},67,[323,2702,1442],{"class":332},[323,2704,336],{"class":329},[323,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732,2734],{"class":325,"line":2707},68,[323,2709,1229],{"class":366},[323,2711,346],{"class":329},[323,2713,1234],{"class":436},[323,2715,440],{"class":329},[323,2717,1457],{"class":349},[323,2719,451],{"class":329},[323,2721,1244],{"class":436},[323,2723,440],{"class":329},[323,2725,1294],{"class":349},[323,2727,451],{"class":329},[323,2729,1254],{"class":436},[323,2731,440],{"class":329},[323,2733,1474],{"class":349},[323,2735,460],{"class":329},[323,2737,2739],{"class":325,"line":2738},69,[323,2740,996],{"class":329},[323,2742,2744,2746],{"class":325,"line":2743},70,[323,2745,1023],{"class":332},[323,2747,336],{"class":329},[323,2749,2751,2753,2755,2757,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777],{"class":325,"line":2750},71,[323,2752,1229],{"class":366},[323,2754,346],{"class":329},[323,2756,1234],{"class":436},[323,2758,440],{"class":329},[323,2760,1502],{"class":349},[323,2762,451],{"class":329},[323,2764,1244],{"class":436},[323,2766,440],{"class":329},[323,2768,1249],{"class":349},[323,2770,451],{"class":329},[323,2772,1254],{"class":436},[323,2774,440],{"class":329},[323,2776,1474],{"class":349},[323,2778,460],{"class":329},[323,2780,2782],{"class":325,"line":2781},72,[323,2783,996],{"class":329},[323,2785,2787],{"class":325,"line":2786},73,[323,2788,496],{"class":329},[323,2790,2792,2794,2796],{"class":325,"line":2791},74,[323,2793,743],{"class":329},[323,2795,1768],{"class":564},[323,2797,583],{"class":329},[314,2799,2804],{"className":2800,"code":2801,"filename":2802,"language":2803,"meta":319,"style":319},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function handleOverscroll(event: CustomEvent\u003C{ left: number }>) {\n  const overscroll = event.detail.left;\n\n  Array.from(event.target.children).forEach((child) => {\n    const translate = `translateX(${overscroll * 0.5}px)`;\n    const rotate = `rotateY(${(overscroll \u002F event.target.clientWidth) * -90}deg)`;\n    child.style.transform = `${translate} ${rotate}`;\n  });\n}\n\nreturn (\n  \u003CBlossomCarousel\n    ref={carousel}\n    className=\"carousel\"\n    onOverscroll={(event) =>\n      handleOverscroll(event as CustomEvent\u003C{ left: number }>)\n    }\n  >\n    {Array.from({ length: 10 }, (_, index) => (\n      \u003Cdiv key={index} className=\"slide\">\n        \u003Cdiv className=\"card\">{index + 1}\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    ))}\n  \u003C\u002FBlossomCarousel>\n);\n\n\u003Cstyle>\n.carousel {\n  --card-width: 12rem;\n}\n\n.slide {\n  view-timeline: --cards inline;\n  animation: stack-cards linear both;\n  animation-timeline: --cards;\n  animation-range: contain;\n\n  & .card {\n    animation: rotate-cards linear both;\n    animation-timeline: --cards;\n    animation-range: contain -50% contain 150%;\n  }\n}\n\n@keyframes stack-cards {\n  0% {\n    z-index: calc(sibling-count() - sibling-index());\n  }\n  50% {\n    z-index: 1000;\n  }\n  100% {\n    z-index: sibling-index();\n  }\n}\n\n@keyframes rotate-cards {\n  0% {\n    transform: translateX(-100%) translateZ(-200px) rotateY(-35deg);\n  }\n  25% {\n    transform: translateX(-80%) translateZ(-100px) rotateY(-35deg);\n  }\n  37.5% {\n    transform: translateX(-15%) translateZ(-100px) rotateY(-20deg);\n  }\n  50% {\n    transform: translateX(0%) translateZ(0px) rotateY(0deg);\n  }\n  62.5% {\n    transform: translateX(15%) translateZ(-100px) rotateY(20deg);\n  }\n  75% {\n    transform: translateX(80%) translateZ(-100px) rotateY(35deg);\n  }\n  100% {\n    transform: translateX(100%) translateZ(-200px) rotateY(35deg);\n  }\n}\n\u003C\u002Fstyle>\n","React","tsx",[244,2805,2806,2836,2856,2860,2898,2926,2968,2996,3004,3008,3012,3020,3027,3039,3053,3068,3095,3100,3105,3150,3180,3217,3226,3233,3241,3247,3251,3259,3267,3280,3284,3288,3295,3311,3321,3334,3343,3347,3360,3372,3384,3410,3414,3418,3422,3429,3438,3472,3476,3485,3497,3501,3510,3527,3531,3535,3539,3546,3554,3594,3598,3607,3643,3647,3656,3692,3696,3704,3731,3735,3744,3773,3777,3786,3815,3820,3829,3858,3863,3868],{"__ignoreMap":319},[323,2807,2808,2810,2812,2814,2816,2818,2820,2823,2826,2828,2831,2834],{"class":325,"line":326},[323,2809,1562],{"class":568},[323,2811,1565],{"class":436},[323,2813,440],{"class":329},[323,2815,1570],{"class":960},[323,2817,346],{"class":329},[323,2819,1575],{"class":332},[323,2821,2822],{"class":329},"\u003C{",[323,2824,2825],{"class":564}," left",[323,2827,346],{"class":329},[323,2829,2830],{"class":332}," number",[323,2832,2833],{"class":329}," }>)",[323,2835,336],{"class":329},[323,2837,2838,2840,2842,2844,2846,2848,2850,2852,2854],{"class":325,"line":339},[323,2839,1599],{"class":568},[323,2841,1602],{"class":342},[323,2843,1605],{"class":329},[323,2845,1608],{"class":342},[323,2847,292],{"class":329},[323,2849,1613],{"class":342},[323,2851,292],{"class":329},[323,2853,1618],{"class":342},[323,2855,353],{"class":329},[323,2857,2858],{"class":325,"line":356},[323,2859,360],{"emptyLinePlaceholder":359},[323,2861,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896],{"class":325,"line":363},[323,2863,1629],{"class":342},[323,2865,292],{"class":329},[323,2867,1634],{"class":436},[323,2869,440],{"class":564},[323,2871,1570],{"class":342},[323,2873,292],{"class":329},[323,2875,1643],{"class":342},[323,2877,292],{"class":329},[323,2879,1648],{"class":342},[323,2881,451],{"class":564},[323,2883,292],{"class":329},[323,2885,1655],{"class":436},[323,2887,440],{"class":564},[323,2889,440],{"class":329},[323,2891,1662],{"class":960},[323,2893,451],{"class":329},[323,2895,1667],{"class":568},[323,2897,336],{"class":329},[323,2899,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924],{"class":325,"line":377},[323,2901,1674],{"class":568},[323,2903,1677],{"class":342},[323,2905,1605],{"class":329},[323,2907,1682],{"class":329},[323,2909,1685],{"class":578},[323,2911,1688],{"class":329},[323,2913,1691],{"class":342},[323,2915,1694],{"class":329},[323,2917,1697],{"class":349},[323,2919,1700],{"class":329},[323,2921,1703],{"class":578},[323,2923,1706],{"class":329},[323,2925,353],{"class":329},[323,2927,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966],{"class":325,"line":390},[323,2929,1674],{"class":568},[323,2931,1715],{"class":342},[323,2933,1605],{"class":329},[323,2935,1682],{"class":329},[323,2937,1722],{"class":578},[323,2939,1688],{"class":329},[323,2941,1727],{"class":342},[323,2943,1730],{"class":329},[323,2945,1608],{"class":342},[323,2947,292],{"class":329},[323,2949,1643],{"class":342},[323,2951,292],{"class":329},[323,2953,1741],{"class":342},[323,2955,1694],{"class":329},[323,2957,1746],{"class":329},[323,2959,1749],{"class":349},[323,2961,1700],{"class":329},[323,2963,1754],{"class":578},[323,2965,1706],{"class":329},[323,2967,353],{"class":329},[323,2969,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994],{"class":325,"line":403},[323,2971,1763],{"class":342},[323,2973,292],{"class":329},[323,2975,1768],{"class":342},[323,2977,292],{"class":329},[323,2979,1773],{"class":342},[323,2981,1605],{"class":329},[323,2983,1778],{"class":329},[323,2985,1781],{"class":342},[323,2987,1700],{"class":329},[323,2989,1786],{"class":329},[323,2991,1789],{"class":342},[323,2993,1792],{"class":329},[323,2995,353],{"class":329},[323,2997,2998,3000,3002],{"class":325,"line":416},[323,2999,1799],{"class":329},[323,3001,451],{"class":564},[323,3003,353],{"class":329},[323,3005,3006],{"class":325,"line":421},[323,3007,496],{"class":329},[323,3009,3010],{"class":325,"line":428},[323,3011,360],{"emptyLinePlaceholder":359},[323,3013,3014,3017],{"class":325,"line":463},[323,3015,3016],{"class":956},"return",[323,3018,3019],{"class":342}," (\n",[323,3021,3022,3024],{"class":325,"line":480},[323,3023,588],{"class":329},[323,3025,3026],{"class":332},"BlossomCarousel\n",[323,3028,3029,3032,3035,3037],{"class":325,"line":493},[323,3030,3031],{"class":568},"    ref",[323,3033,3034],{"class":329},"={",[323,3036,333],{"class":342},[323,3038,496],{"class":329},[323,3040,3041,3044,3046,3048,3050],{"class":325,"line":499},[323,3042,3043],{"class":568},"    className",[323,3045,572],{"class":329},[323,3047,575],{"class":329},[323,3049,333],{"class":578},[323,3051,3052],{"class":329},"\"\n",[323,3054,3055,3058,3061,3063,3065],{"class":325,"line":504},[323,3056,3057],{"class":568},"    onOverscroll",[323,3059,3060],{"class":329},"={(",[323,3062,1570],{"class":960},[323,3064,451],{"class":329},[323,3066,3067],{"class":568}," =>\n",[323,3069,3070,3073,3076,3079,3081,3083,3085,3087,3089,3092],{"class":325,"line":514},[323,3071,3072],{"class":436},"      handleOverscroll",[323,3074,3075],{"class":342},"(event ",[323,3077,3078],{"class":956},"as",[323,3080,1575],{"class":332},[323,3082,2822],{"class":329},[323,3084,2825],{"class":564},[323,3086,346],{"class":329},[323,3088,2830],{"class":332},[323,3090,3091],{"class":329}," }>",[323,3093,3094],{"class":342},")\n",[323,3096,3097],{"class":325,"line":529},[323,3098,3099],{"class":329},"    }\n",[323,3101,3102],{"class":325,"line":547},[323,3103,3104],{"class":329},"  >\n",[323,3106,3107,3110,3113,3115,3117,3119,3122,3125,3127,3130,3133,3136,3139,3141,3144,3146,3148],{"class":325,"line":1479},[323,3108,3109],{"class":329},"    {",[323,3111,3112],{"class":342},"Array",[323,3114,292],{"class":329},[323,3116,1634],{"class":436},[323,3118,440],{"class":342},[323,3120,3121],{"class":329},"{",[323,3123,3124],{"class":564}," length",[323,3126,346],{"class":329},[323,3128,3129],{"class":349}," 10",[323,3131,3132],{"class":329}," },",[323,3134,3135],{"class":329}," (",[323,3137,3138],{"class":960},"_",[323,3140,1832],{"class":329},[323,3142,3143],{"class":960}," index",[323,3145,451],{"class":329},[323,3147,1667],{"class":568},[323,3149,3019],{"class":342},[323,3151,3152,3154,3156,3159,3161,3164,3167,3170,3172,3174,3176,3178],{"class":325,"line":1484},[323,3153,2168],{"class":329},[323,3155,591],{"class":564},[323,3157,3158],{"class":568}," key",[323,3160,3034],{"class":329},[323,3162,3163],{"class":342},"index",[323,3165,3166],{"class":329},"} ",[323,3168,3169],{"class":568},"className",[323,3171,572],{"class":329},[323,3173,575],{"class":329},[323,3175,509],{"class":578},[323,3177,575],{"class":329},[323,3179,583],{"class":329},[323,3181,3182,3185,3187,3190,3192,3194,3196,3198,3201,3204,3207,3210,3213,3215],{"class":325,"line":1491},[323,3183,3184],{"class":329},"        \u003C",[323,3186,591],{"class":564},[323,3188,3189],{"class":568}," className",[323,3191,572],{"class":329},[323,3193,575],{"class":329},[323,3195,619],{"class":578},[323,3197,575],{"class":329},[323,3199,3200],{"class":329},">{",[323,3202,3203],{"class":342},"index ",[323,3205,3206],{"class":329},"+",[323,3208,3209],{"class":349}," 1",[323,3211,3212],{"class":329},"}\u003C\u002F",[323,3214,591],{"class":564},[323,3216,583],{"class":329},[323,3218,3219,3222,3224],{"class":325,"line":1523},[323,3220,3221],{"class":329},"      \u003C\u002F",[323,3223,591],{"class":564},[323,3225,583],{"class":329},[323,3227,3228,3231],{"class":325,"line":1528},[323,3229,3230],{"class":342},"    ))",[323,3232,496],{"class":329},[323,3234,3235,3237,3239],{"class":325,"line":2253},[323,3236,633],{"class":329},[323,3238,565],{"class":332},[323,3240,583],{"class":329},[323,3242,3243,3245],{"class":325,"line":2258},[323,3244,451],{"class":342},[323,3246,353],{"class":329},[323,3248,3249],{"class":325,"line":2263},[323,3250,360],{"emptyLinePlaceholder":359},[323,3252,3253,3255,3257],{"class":325,"line":2272},[323,3254,561],{"class":329},[323,3256,1768],{"class":564},[323,3258,583],{"class":329},[323,3260,3261,3264],{"class":325,"line":2283},[323,3262,3263],{"class":342},".carousel ",[323,3265,3266],{"class":329},"{\n",[323,3268,3269,3272,3274,3277],{"class":325,"line":2294},[323,3270,3271],{"class":329},"  --",[323,3273,619],{"class":342},[323,3275,3276],{"class":329},"-",[323,3278,3279],{"class":342},"width: 12rem;\n",[323,3281,3282],{"class":325,"line":2305},[323,3283,496],{"class":329},[323,3285,3286],{"class":325,"line":2316},[323,3287,360],{"emptyLinePlaceholder":359},[323,3289,3290,3293],{"class":325,"line":2321},[323,3291,3292],{"class":342},".slide ",[323,3294,3266],{"class":329},[323,3296,3297,3300,3302,3305,3308],{"class":325,"line":2326},[323,3298,3299],{"class":342},"  view",[323,3301,3276],{"class":329},[323,3303,3304],{"class":342},"timeline: ",[323,3306,3307],{"class":329},"--",[323,3309,3310],{"class":342},"cards inline;\n",[323,3312,3313,3316,3318],{"class":325,"line":2337},[323,3314,3315],{"class":342},"  animation: stack",[323,3317,3276],{"class":329},[323,3319,3320],{"class":342},"cards linear both;\n",[323,3322,3323,3325,3327,3329,3331],{"class":325,"line":2348},[323,3324,894],{"class":342},[323,3326,3276],{"class":329},[323,3328,3304],{"class":342},[323,3330,3307],{"class":329},[323,3332,3333],{"class":342},"cards;\n",[323,3335,3336,3338,3340],{"class":325,"line":2365},[323,3337,894],{"class":342},[323,3339,3276],{"class":329},[323,3341,3342],{"class":342},"range: contain;\n",[323,3344,3345],{"class":325,"line":2370},[323,3346,360],{"emptyLinePlaceholder":359},[323,3348,3349,3352,3355,3358],{"class":325,"line":2375},[323,3350,3351],{"class":329},"  &",[323,3353,3354],{"class":329}," .",[323,3356,3357],{"class":342},"card ",[323,3359,3266],{"class":329},[323,3361,3362,3364,3366,3368,3370],{"class":325,"line":2380},[323,3363,1148],{"class":564},[323,3365,346],{"class":329},[323,3367,1715],{"class":342},[323,3369,3276],{"class":329},[323,3371,3320],{"class":342},[323,3373,3374,3376,3378,3380,3382],{"class":325,"line":2389},[323,3375,1148],{"class":342},[323,3377,3276],{"class":329},[323,3379,3304],{"class":342},[323,3381,3307],{"class":329},[323,3383,3333],{"class":342},[323,3385,3386,3388,3390,3393,3395,3398,3401,3403,3406,3408],{"class":325,"line":2396},[323,3387,1148],{"class":342},[323,3389,3276],{"class":329},[323,3391,3392],{"class":342},"range: contain ",[323,3394,3276],{"class":329},[323,3396,3397],{"class":349},"50",[323,3399,3400],{"class":329},"%",[323,3402,1176],{"class":342},[323,3404,3405],{"class":349},"150",[323,3407,3400],{"class":329},[323,3409,353],{"class":342},[323,3411,3412],{"class":325,"line":2415},[323,3413,996],{"class":329},[323,3415,3416],{"class":325,"line":2420},[323,3417,496],{"class":329},[323,3419,3420],{"class":325,"line":2427},[323,3421,360],{"emptyLinePlaceholder":359},[323,3423,3424,3427],{"class":325,"line":2438},[323,3425,3426],{"class":342},"@keyframes stack-cards ",[323,3428,3266],{"class":329},[323,3430,3431,3434,3436],{"class":325,"line":2443},[323,3432,3433],{"class":349},"  0",[323,3435,3400],{"class":329},[323,3437,336],{"class":329},[323,3439,3440,3443,3445,3447,3449,3452,3454,3457,3460,3462,3465,3467,3469],{"class":325,"line":2450},[323,3441,3442],{"class":342},"    z-",[323,3444,3163],{"class":564},[323,3446,346],{"class":329},[323,3448,437],{"class":436},[323,3450,3451],{"class":342},"(sibling",[323,3453,3276],{"class":329},[323,3455,3456],{"class":436},"count",[323,3458,3459],{"class":342},"() ",[323,3461,3276],{"class":329},[323,3463,3464],{"class":342}," sibling",[323,3466,3276],{"class":329},[323,3468,3163],{"class":436},[323,3470,3471],{"class":342},"());\n",[323,3473,3474],{"class":325,"line":2461},[323,3475,996],{"class":329},[323,3477,3478,3481,3483],{"class":325,"line":2466},[323,3479,3480],{"class":349},"  50",[323,3482,3400],{"class":329},[323,3484,336],{"class":329},[323,3486,3487,3489,3491,3493,3495],{"class":325,"line":2471},[323,3488,3442],{"class":342},[323,3490,3163],{"class":564},[323,3492,346],{"class":329},[323,3494,1012],{"class":349},[323,3496,353],{"class":342},[323,3498,3499],{"class":325,"line":2476},[323,3500,996],{"class":329},[323,3502,3503,3506,3508],{"class":325,"line":2485},[323,3504,3505],{"class":349},"  100",[323,3507,3400],{"class":329},[323,3509,336],{"class":329},[323,3511,3512,3514,3516,3518,3520,3522,3524],{"class":325,"line":2492},[323,3513,3442],{"class":342},[323,3515,3163],{"class":564},[323,3517,346],{"class":329},[323,3519,3464],{"class":342},[323,3521,3276],{"class":329},[323,3523,3163],{"class":436},[323,3525,3526],{"class":342},"();\n",[323,3528,3529],{"class":325,"line":2523},[323,3530,996],{"class":329},[323,3532,3533],{"class":325,"line":2528},[323,3534,496],{"class":329},[323,3536,3537],{"class":325,"line":2535},[323,3538,360],{"emptyLinePlaceholder":359},[323,3540,3541,3544],{"class":325,"line":2566},[323,3542,3543],{"class":342},"@keyframes rotate-cards ",[323,3545,3266],{"class":329},[323,3547,3548,3550,3552],{"class":325,"line":2571},[323,3549,3433],{"class":349},[323,3551,3400],{"class":329},[323,3553,336],{"class":329},[323,3555,3556,3558,3560,3562,3564,3566,3569,3571,3574,3577,3579,3581,3584,3587,3589,3591],{"class":325,"line":2578},[323,3557,1229],{"class":564},[323,3559,346],{"class":329},[323,3561,1234],{"class":436},[323,3563,440],{"class":342},[323,3565,3276],{"class":329},[323,3567,3568],{"class":349},"100",[323,3570,3400],{"class":329},[323,3572,3573],{"class":342},") ",[323,3575,3576],{"class":436},"translateZ",[323,3578,440],{"class":342},[323,3580,3276],{"class":329},[323,3582,3583],{"class":342},"200px) ",[323,3585,3586],{"class":436},"rotateY",[323,3588,440],{"class":342},[323,3590,3276],{"class":329},[323,3592,3593],{"class":342},"35deg);\n",[323,3595,3596],{"class":325,"line":2609},[323,3597,996],{"class":329},[323,3599,3600,3603,3605],{"class":325,"line":2614},[323,3601,3602],{"class":349},"  25",[323,3604,3400],{"class":329},[323,3606,336],{"class":329},[323,3608,3609,3611,3613,3615,3617,3619,3622,3624,3626,3628,3630,3632,3635,3637,3639,3641],{"class":325,"line":2621},[323,3610,1229],{"class":564},[323,3612,346],{"class":329},[323,3614,1234],{"class":436},[323,3616,440],{"class":342},[323,3618,3276],{"class":329},[323,3620,3621],{"class":349},"80",[323,3623,3400],{"class":329},[323,3625,3573],{"class":342},[323,3627,3576],{"class":436},[323,3629,440],{"class":342},[323,3631,3276],{"class":329},[323,3633,3634],{"class":342},"100px) ",[323,3636,3586],{"class":436},[323,3638,440],{"class":342},[323,3640,3276],{"class":329},[323,3642,3593],{"class":342},[323,3644,3645],{"class":325,"line":2652},[323,3646,996],{"class":329},[323,3648,3649,3652,3654],{"class":325,"line":2657},[323,3650,3651],{"class":349},"  37.5",[323,3653,3400],{"class":329},[323,3655,336],{"class":329},[323,3657,3658,3660,3662,3664,3666,3668,3671,3673,3675,3677,3679,3681,3683,3685,3687,3689],{"class":325,"line":2664},[323,3659,1229],{"class":564},[323,3661,346],{"class":329},[323,3663,1234],{"class":436},[323,3665,440],{"class":342},[323,3667,3276],{"class":329},[323,3669,3670],{"class":349},"15",[323,3672,3400],{"class":329},[323,3674,3573],{"class":342},[323,3676,3576],{"class":436},[323,3678,440],{"class":342},[323,3680,3276],{"class":329},[323,3682,3634],{"class":342},[323,3684,3586],{"class":436},[323,3686,440],{"class":342},[323,3688,3276],{"class":329},[323,3690,3691],{"class":342},"20deg);\n",[323,3693,3694],{"class":325,"line":2695},[323,3695,996],{"class":329},[323,3697,3698,3700,3702],{"class":325,"line":2700},[323,3699,3480],{"class":349},[323,3701,3400],{"class":329},[323,3703,336],{"class":329},[323,3705,3706,3708,3710,3712,3714,3717,3719,3721,3723,3726,3728],{"class":325,"line":2707},[323,3707,1229],{"class":564},[323,3709,346],{"class":329},[323,3711,1234],{"class":436},[323,3713,440],{"class":342},[323,3715,3716],{"class":349},"0",[323,3718,3400],{"class":329},[323,3720,3573],{"class":342},[323,3722,3576],{"class":436},[323,3724,3725],{"class":342},"(0px) ",[323,3727,3586],{"class":436},[323,3729,3730],{"class":342},"(0deg);\n",[323,3732,3733],{"class":325,"line":2738},[323,3734,996],{"class":329},[323,3736,3737,3740,3742],{"class":325,"line":2743},[323,3738,3739],{"class":349},"  62.5",[323,3741,3400],{"class":329},[323,3743,336],{"class":329},[323,3745,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3766,3768,3770],{"class":325,"line":2750},[323,3747,1229],{"class":564},[323,3749,346],{"class":329},[323,3751,1234],{"class":436},[323,3753,440],{"class":342},[323,3755,3670],{"class":349},[323,3757,3400],{"class":329},[323,3759,3573],{"class":342},[323,3761,3576],{"class":436},[323,3763,440],{"class":342},[323,3765,3276],{"class":329},[323,3767,3634],{"class":342},[323,3769,3586],{"class":436},[323,3771,3772],{"class":342},"(20deg);\n",[323,3774,3775],{"class":325,"line":2781},[323,3776,996],{"class":329},[323,3778,3779,3782,3784],{"class":325,"line":2786},[323,3780,3781],{"class":349},"  75",[323,3783,3400],{"class":329},[323,3785,336],{"class":329},[323,3787,3788,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812],{"class":325,"line":2791},[323,3789,1229],{"class":564},[323,3791,346],{"class":329},[323,3793,1234],{"class":436},[323,3795,440],{"class":342},[323,3797,3621],{"class":349},[323,3799,3400],{"class":329},[323,3801,3573],{"class":342},[323,3803,3576],{"class":436},[323,3805,440],{"class":342},[323,3807,3276],{"class":329},[323,3809,3634],{"class":342},[323,3811,3586],{"class":436},[323,3813,3814],{"class":342},"(35deg);\n",[323,3816,3818],{"class":325,"line":3817},75,[323,3819,996],{"class":329},[323,3821,3823,3825,3827],{"class":325,"line":3822},76,[323,3824,3505],{"class":349},[323,3826,3400],{"class":329},[323,3828,336],{"class":329},[323,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856],{"class":325,"line":3831},77,[323,3833,1229],{"class":564},[323,3835,346],{"class":329},[323,3837,1234],{"class":436},[323,3839,440],{"class":342},[323,3841,3568],{"class":349},[323,3843,3400],{"class":329},[323,3845,3573],{"class":342},[323,3847,3576],{"class":436},[323,3849,440],{"class":342},[323,3851,3276],{"class":329},[323,3853,3583],{"class":342},[323,3855,3586],{"class":436},[323,3857,3814],{"class":342},[323,3859,3861],{"class":325,"line":3860},78,[323,3862,996],{"class":329},[323,3864,3866],{"class":325,"line":3865},79,[323,3867,496],{"class":329},[323,3869,3871,3873,3875],{"class":325,"line":3870},80,[323,3872,743],{"class":329},[323,3874,1768],{"class":564},[323,3876,583],{"class":329},[314,3878,3883],{"className":3879,"code":3880,"filename":3881,"language":3882,"meta":319,"style":319},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript>\n  function handleOverscroll(event) {\n    event.preventDefault();\n    const overscroll = event.detail.left;\n\n    Array.from(event.target.children).forEach((child) => {\n      const translate = `translateX(${overscroll * 0.5}px)`;\n      const rotate = `rotateY(${(overscroll \u002F event.target.clientWidth) * -90}deg)`;\n      child.style.transform = `${translate} ${rotate}`;\n    });\n  }\n\n  const slides = Array.from({ length: 10 }, (_, index) => index + 1);\n\u003C\u002Fscript>\n\n\u003CBlossomCarousel class=\"carousel\" onoverscroll={handleOverscroll}>\n  {#each slides as slide (slide)}\n    \u003Cdiv class=\"slide\">\n      \u003Cdiv class=\"card\">{slide}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  {\u002Feach}\n\u003C\u002FBlossomCarousel>\n\n\u003Cstyle>\n.carousel {\n  --card-width: 12rem;\n}\n\n.slide {\n  view-timeline: --cards inline;\n  animation: stack-cards linear both;\n  animation-timeline: --cards;\n  animation-range: contain;\n\n  & .card {\n    animation: rotate-cards linear both;\n    animation-timeline: --cards;\n    animation-range: contain -50% contain 150%;\n  }\n}\n\n@keyframes stack-cards {\n  0% {\n    z-index: calc(sibling-count() - sibling-index());\n  }\n  50% {\n    z-index: 1000;\n  }\n  100% {\n    z-index: sibling-index();\n  }\n}\n\n@keyframes rotate-cards {\n  0% {\n    transform: translateX(-100%) translateZ(-200px) rotateY(-35deg);\n  }\n  25% {\n    transform: translateX(-80%) translateZ(-100px) rotateY(-35deg);\n  }\n  37.5% {\n    transform: translateX(-15%) translateZ(-100px) rotateY(-20deg);\n  }\n  50% {\n    transform: translateX(0%) translateZ(0px) rotateY(0deg);\n  }\n  62.5% {\n    transform: translateX(15%) translateZ(-100px) rotateY(20deg);\n  }\n  75% {\n    transform: translateX(80%) translateZ(-100px) rotateY(35deg);\n  }\n  100% {\n    transform: translateX(100%) translateZ(-200px) rotateY(35deg);\n  }\n}\n\u003C\u002Fstyle>\n","Svelte","svelte",[244,3884,3885,3893,3908,3921,3941,3945,3984,4013,4055,4084,4093,4097,4101,4152,4160,4164,4190,4207,4225,4251,4259,4268,4276,4280,4288,4296,4306,4310,4314,4322,4332,4342,4352,4362,4366,4370,4380,4390,4406,4410,4414,4418,4426,4432,4450,4454,4460,4470,4474,4480,4490,4494,4498,4502,4510,4516,4546,4550,4556,4586,4590,4596,4626,4630,4636,4666,4670,4676,4706,4710,4716,4746,4750,4756,4786,4790,4794],{"__ignoreMap":319},[323,3886,3887,3889,3891],{"class":325,"line":326},[323,3888,561],{"class":329},[323,3890,1875],{"class":564},[323,3892,583],{"class":329},[323,3894,3895,3898,3900,3902,3904,3906],{"class":325,"line":339},[323,3896,3897],{"class":568},"  function",[323,3899,1565],{"class":436},[323,3901,440],{"class":329},[323,3903,1570],{"class":960},[323,3905,451],{"class":329},[323,3907,336],{"class":329},[323,3909,3910,3913,3915,3917,3919],{"class":325,"line":356},[323,3911,3912],{"class":342},"    event",[323,3914,292],{"class":329},[323,3916,1589],{"class":436},[323,3918,1592],{"class":564},[323,3920,353],{"class":329},[323,3922,3923,3925,3927,3929,3931,3933,3935,3937,3939],{"class":325,"line":363},[323,3924,1674],{"class":568},[323,3926,1602],{"class":342},[323,3928,1605],{"class":329},[323,3930,1608],{"class":342},[323,3932,292],{"class":329},[323,3934,1613],{"class":342},[323,3936,292],{"class":329},[323,3938,1618],{"class":342},[323,3940,353],{"class":329},[323,3942,3943],{"class":325,"line":377},[323,3944,360],{"emptyLinePlaceholder":359},[323,3946,3947,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968,3970,3972,3974,3976,3978,3980,3982],{"class":325,"line":390},[323,3948,3949],{"class":342},"    Array",[323,3951,292],{"class":329},[323,3953,1634],{"class":436},[323,3955,440],{"class":564},[323,3957,1570],{"class":342},[323,3959,292],{"class":329},[323,3961,1643],{"class":342},[323,3963,292],{"class":329},[323,3965,1648],{"class":342},[323,3967,451],{"class":564},[323,3969,292],{"class":329},[323,3971,1655],{"class":436},[323,3973,440],{"class":564},[323,3975,440],{"class":329},[323,3977,1662],{"class":960},[323,3979,451],{"class":329},[323,3981,1667],{"class":568},[323,3983,336],{"class":329},[323,3985,3986,3989,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009,4011],{"class":325,"line":403},[323,3987,3988],{"class":568},"      const",[323,3990,1677],{"class":342},[323,3992,1605],{"class":329},[323,3994,1682],{"class":329},[323,3996,1685],{"class":578},[323,3998,1688],{"class":329},[323,4000,1691],{"class":342},[323,4002,1694],{"class":329},[323,4004,1697],{"class":349},[323,4006,1700],{"class":329},[323,4008,1703],{"class":578},[323,4010,1706],{"class":329},[323,4012,353],{"class":329},[323,4014,4015,4017,4019,4021,4023,4025,4027,4029,4031,4033,4035,4037,4039,4041,4043,4045,4047,4049,4051,4053],{"class":325,"line":416},[323,4016,3988],{"class":568},[323,4018,1715],{"class":342},[323,4020,1605],{"class":329},[323,4022,1682],{"class":329},[323,4024,1722],{"class":578},[323,4026,1688],{"class":329},[323,4028,1727],{"class":342},[323,4030,1730],{"class":329},[323,4032,1608],{"class":342},[323,4034,292],{"class":329},[323,4036,1643],{"class":342},[323,4038,292],{"class":329},[323,4040,1741],{"class":342},[323,4042,1694],{"class":329},[323,4044,1746],{"class":329},[323,4046,1749],{"class":349},[323,4048,1700],{"class":329},[323,4050,1754],{"class":578},[323,4052,1706],{"class":329},[323,4054,353],{"class":329},[323,4056,4057,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082],{"class":325,"line":421},[323,4058,4059],{"class":342},"      child",[323,4061,292],{"class":329},[323,4063,1768],{"class":342},[323,4065,292],{"class":329},[323,4067,1773],{"class":342},[323,4069,1605],{"class":329},[323,4071,1778],{"class":329},[323,4073,1781],{"class":342},[323,4075,1700],{"class":329},[323,4077,1786],{"class":329},[323,4079,1789],{"class":342},[323,4081,1792],{"class":329},[323,4083,353],{"class":329},[323,4085,4086,4089,4091],{"class":325,"line":428},[323,4087,4088],{"class":329},"    }",[323,4090,451],{"class":564},[323,4092,353],{"class":329},[323,4094,4095],{"class":325,"line":463},[323,4096,996],{"class":329},[323,4098,4099],{"class":325,"line":480},[323,4100,360],{"emptyLinePlaceholder":359},[323,4102,4103,4105,4108,4110,4113,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4144,4146,4148,4150],{"class":325,"line":493},[323,4104,1599],{"class":568},[323,4106,4107],{"class":342}," slides ",[323,4109,572],{"class":329},[323,4111,4112],{"class":342}," Array",[323,4114,292],{"class":329},[323,4116,1634],{"class":436},[323,4118,440],{"class":342},[323,4120,3121],{"class":329},[323,4122,3124],{"class":564},[323,4124,346],{"class":329},[323,4126,3129],{"class":349},[323,4128,3132],{"class":329},[323,4130,3135],{"class":329},[323,4132,3138],{"class":960},[323,4134,1832],{"class":329},[323,4136,3143],{"class":960},[323,4138,451],{"class":329},[323,4140,1667],{"class":568},[323,4142,4143],{"class":342}," index ",[323,4145,3206],{"class":329},[323,4147,3209],{"class":349},[323,4149,451],{"class":342},[323,4151,353],{"class":329},[323,4153,4154,4156,4158],{"class":325,"line":499},[323,4155,743],{"class":329},[323,4157,1875],{"class":564},[323,4159,583],{"class":329},[323,4161,4162],{"class":325,"line":504},[323,4163,360],{"emptyLinePlaceholder":359},[323,4165,4166,4168,4170,4172,4174,4176,4178,4180,4183,4185,4187],{"class":325,"line":514},[323,4167,561],{"class":329},[323,4169,565],{"class":332},[323,4171,569],{"class":568},[323,4173,572],{"class":329},[323,4175,575],{"class":329},[323,4177,333],{"class":578},[323,4179,575],{"class":329},[323,4181,4182],{"class":568}," onoverscroll",[323,4184,3034],{"class":329},[323,4186,2117],{"class":342},[323,4188,4189],{"class":329},"}>\n",[323,4191,4192,4195,4198,4200,4202,4205],{"class":325,"line":529},[323,4193,4194],{"class":329},"  {#",[323,4196,4197],{"class":956},"each",[323,4199,4107],{"class":342},[323,4201,3078],{"class":956},[323,4203,4204],{"class":342}," slide (slide)",[323,4206,496],{"class":329},[323,4208,4209,4211,4213,4215,4217,4219,4221,4223],{"class":325,"line":547},[323,4210,608],{"class":329},[323,4212,591],{"class":564},[323,4214,569],{"class":568},[323,4216,572],{"class":329},[323,4218,575],{"class":329},[323,4220,509],{"class":578},[323,4222,575],{"class":329},[323,4224,583],{"class":329},[323,4226,4227,4229,4231,4233,4235,4237,4239,4241,4243,4245,4247,4249],{"class":325,"line":1479},[323,4228,2168],{"class":329},[323,4230,591],{"class":564},[323,4232,569],{"class":568},[323,4234,572],{"class":329},[323,4236,575],{"class":329},[323,4238,619],{"class":578},[323,4240,575],{"class":329},[323,4242,3200],{"class":329},[323,4244,509],{"class":342},[323,4246,3212],{"class":329},[323,4248,591],{"class":564},[323,4250,583],{"class":329},[323,4252,4253,4255,4257],{"class":325,"line":1484},[323,4254,2197],{"class":329},[323,4256,591],{"class":564},[323,4258,583],{"class":329},[323,4260,4261,4264,4266],{"class":325,"line":1491},[323,4262,4263],{"class":329},"  {\u002F",[323,4265,4197],{"class":956},[323,4267,496],{"class":329},[323,4269,4270,4272,4274],{"class":325,"line":1523},[323,4271,743],{"class":329},[323,4273,565],{"class":332},[323,4275,583],{"class":329},[323,4277,4278],{"class":325,"line":1528},[323,4279,360],{"emptyLinePlaceholder":359},[323,4281,4282,4284,4286],{"class":325,"line":2253},[323,4283,561],{"class":329},[323,4285,1768],{"class":564},[323,4287,583],{"class":329},[323,4289,4290,4292,4294],{"class":325,"line":2258},[323,4291,292],{"class":329},[323,4293,333],{"class":332},[323,4295,336],{"class":329},[323,4297,4298,4300,4302,4304],{"class":325,"line":2263},[323,4299,343],{"class":342},[323,4301,346],{"class":329},[323,4303,350],{"class":349},[323,4305,353],{"class":329},[323,4307,4308],{"class":325,"line":2272},[323,4309,496],{"class":329},[323,4311,4312],{"class":325,"line":2283},[323,4313,360],{"emptyLinePlaceholder":359},[323,4315,4316,4318,4320],{"class":325,"line":2294},[323,4317,292],{"class":329},[323,4319,509],{"class":332},[323,4321,336],{"class":329},[323,4323,4324,4326,4328,4330],{"class":325,"line":2305},[323,4325,882],{"class":342},[323,4327,346],{"class":329},[323,4329,887],{"class":342},[323,4331,353],{"class":329},[323,4333,4334,4336,4338,4340],{"class":325,"line":2316},[323,4335,894],{"class":366},[323,4337,346],{"class":329},[323,4339,899],{"class":342},[323,4341,353],{"class":329},[323,4343,4344,4346,4348,4350],{"class":325,"line":2321},[323,4345,906],{"class":342},[323,4347,346],{"class":329},[323,4349,911],{"class":342},[323,4351,353],{"class":329},[323,4353,4354,4356,4358,4360],{"class":325,"line":2326},[323,4355,918],{"class":342},[323,4357,346],{"class":329},[323,4359,923],{"class":342},[323,4361,353],{"class":329},[323,4363,4364],{"class":325,"line":2337},[323,4365,360],{"emptyLinePlaceholder":359},[323,4367,4368],{"class":325,"line":2348},[323,4369,1105],{"class":342},[323,4371,4372,4374,4376,4378],{"class":325,"line":2365},[323,4373,1148],{"class":366},[323,4375,346],{"class":329},[323,4377,1153],{"class":342},[323,4379,353],{"class":329},[323,4381,4382,4384,4386,4388],{"class":325,"line":2370},[323,4383,1160],{"class":342},[323,4385,346],{"class":329},[323,4387,911],{"class":342},[323,4389,353],{"class":329},[323,4391,4392,4394,4396,4398,4400,4402,4404],{"class":325,"line":2375},[323,4393,1171],{"class":342},[323,4395,346],{"class":329},[323,4397,1176],{"class":342},[323,4399,1179],{"class":349},[323,4401,1176],{"class":342},[323,4403,1184],{"class":349},[323,4405,353],{"class":329},[323,4407,4408],{"class":325,"line":2380},[323,4409,996],{"class":329},[323,4411,4412],{"class":325,"line":2389},[323,4413,496],{"class":342},[323,4415,4416],{"class":325,"line":2396},[323,4417,360],{"emptyLinePlaceholder":359},[323,4419,4420,4422,4424],{"class":325,"line":2415},[323,4421,957],{"class":956},[323,4423,961],{"class":960},[323,4425,336],{"class":329},[323,4427,4428,4430],{"class":325,"line":2420},[323,4429,968],{"class":332},[323,4431,336],{"class":329},[323,4433,4434,4436,4438,4440,4442,4444,4446,4448],{"class":325,"line":2427},[323,4435,975],{"class":366},[323,4437,346],{"class":329},[323,4439,437],{"class":436},[323,4441,440],{"class":329},[323,4443,984],{"class":342},[323,4445,451],{"class":329},[323,4447,989],{"class":342},[323,4449,353],{"class":329},[323,4451,4452],{"class":325,"line":2438},[323,4453,996],{"class":329},[323,4455,4456,4458],{"class":325,"line":2443},[323,4457,1001],{"class":332},[323,4459,336],{"class":329},[323,4461,4462,4464,4466,4468],{"class":325,"line":2450},[323,4463,975],{"class":366},[323,4465,346],{"class":329},[323,4467,1012],{"class":349},[323,4469,353],{"class":329},[323,4471,4472],{"class":325,"line":2461},[323,4473,996],{"class":329},[323,4475,4476,4478],{"class":325,"line":2466},[323,4477,1023],{"class":332},[323,4479,336],{"class":329},[323,4481,4482,4484,4486,4488],{"class":325,"line":2471},[323,4483,975],{"class":366},[323,4485,346],{"class":329},[323,4487,1034],{"class":342},[323,4489,353],{"class":329},[323,4491,4492],{"class":325,"line":2476},[323,4493,996],{"class":329},[323,4495,4496],{"class":325,"line":2485},[323,4497,496],{"class":329},[323,4499,4500],{"class":325,"line":2492},[323,4501,360],{"emptyLinePlaceholder":359},[323,4503,4504,4506,4508],{"class":325,"line":2523},[323,4505,957],{"class":956},[323,4507,1216],{"class":960},[323,4509,336],{"class":329},[323,4511,4512,4514],{"class":325,"line":2528},[323,4513,968],{"class":332},[323,4515,336],{"class":329},[323,4517,4518,4520,4522,4524,4526,4528,4530,4532,4534,4536,4538,4540,4542,4544],{"class":325,"line":2535},[323,4519,1229],{"class":366},[323,4521,346],{"class":329},[323,4523,1234],{"class":436},[323,4525,440],{"class":329},[323,4527,1239],{"class":349},[323,4529,451],{"class":329},[323,4531,1244],{"class":436},[323,4533,440],{"class":329},[323,4535,1249],{"class":349},[323,4537,451],{"class":329},[323,4539,1254],{"class":436},[323,4541,440],{"class":329},[323,4543,1259],{"class":349},[323,4545,460],{"class":329},[323,4547,4548],{"class":325,"line":2566},[323,4549,996],{"class":329},[323,4551,4552,4554],{"class":325,"line":2571},[323,4553,1270],{"class":332},[323,4555,336],{"class":329},[323,4557,4558,4560,4562,4564,4566,4568,4570,4572,4574,4576,4578,4580,4582,4584],{"class":325,"line":2578},[323,4559,1229],{"class":366},[323,4561,346],{"class":329},[323,4563,1234],{"class":436},[323,4565,440],{"class":329},[323,4567,1285],{"class":349},[323,4569,451],{"class":329},[323,4571,1244],{"class":436},[323,4573,440],{"class":329},[323,4575,1294],{"class":349},[323,4577,451],{"class":329},[323,4579,1254],{"class":436},[323,4581,440],{"class":329},[323,4583,1259],{"class":349},[323,4585,460],{"class":329},[323,4587,4588],{"class":325,"line":2609},[323,4589,996],{"class":329},[323,4591,4592,4594],{"class":325,"line":2614},[323,4593,1313],{"class":332},[323,4595,336],{"class":329},[323,4597,4598,4600,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620,4622,4624],{"class":325,"line":2621},[323,4599,1229],{"class":366},[323,4601,346],{"class":329},[323,4603,1234],{"class":436},[323,4605,440],{"class":329},[323,4607,1328],{"class":349},[323,4609,451],{"class":329},[323,4611,1244],{"class":436},[323,4613,440],{"class":329},[323,4615,1294],{"class":349},[323,4617,451],{"class":329},[323,4619,1254],{"class":436},[323,4621,440],{"class":329},[323,4623,1345],{"class":349},[323,4625,460],{"class":329},[323,4627,4628],{"class":325,"line":2652},[323,4629,996],{"class":329},[323,4631,4632,4634],{"class":325,"line":2657},[323,4633,1001],{"class":332},[323,4635,336],{"class":329},[323,4637,4638,4640,4642,4644,4646,4648,4650,4652,4654,4656,4658,4660,4662,4664],{"class":325,"line":2664},[323,4639,1229],{"class":366},[323,4641,346],{"class":329},[323,4643,1234],{"class":436},[323,4645,440],{"class":329},[323,4647,1370],{"class":349},[323,4649,451],{"class":329},[323,4651,1244],{"class":436},[323,4653,440],{"class":329},[323,4655,1379],{"class":349},[323,4657,451],{"class":329},[323,4659,1254],{"class":436},[323,4661,440],{"class":329},[323,4663,1388],{"class":349},[323,4665,460],{"class":329},[323,4667,4668],{"class":325,"line":2695},[323,4669,996],{"class":329},[323,4671,4672,4674],{"class":325,"line":2700},[323,4673,1399],{"class":332},[323,4675,336],{"class":329},[323,4677,4678,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698,4700,4702,4704],{"class":325,"line":2707},[323,4679,1229],{"class":366},[323,4681,346],{"class":329},[323,4683,1234],{"class":436},[323,4685,440],{"class":329},[323,4687,1414],{"class":349},[323,4689,451],{"class":329},[323,4691,1244],{"class":436},[323,4693,440],{"class":329},[323,4695,1294],{"class":349},[323,4697,451],{"class":329},[323,4699,1254],{"class":436},[323,4701,440],{"class":329},[323,4703,1431],{"class":349},[323,4705,460],{"class":329},[323,4707,4708],{"class":325,"line":2738},[323,4709,996],{"class":329},[323,4711,4712,4714],{"class":325,"line":2743},[323,4713,1442],{"class":332},[323,4715,336],{"class":329},[323,4717,4718,4720,4722,4724,4726,4728,4730,4732,4734,4736,4738,4740,4742,4744],{"class":325,"line":2750},[323,4719,1229],{"class":366},[323,4721,346],{"class":329},[323,4723,1234],{"class":436},[323,4725,440],{"class":329},[323,4727,1457],{"class":349},[323,4729,451],{"class":329},[323,4731,1244],{"class":436},[323,4733,440],{"class":329},[323,4735,1294],{"class":349},[323,4737,451],{"class":329},[323,4739,1254],{"class":436},[323,4741,440],{"class":329},[323,4743,1474],{"class":349},[323,4745,460],{"class":329},[323,4747,4748],{"class":325,"line":2781},[323,4749,996],{"class":329},[323,4751,4752,4754],{"class":325,"line":2786},[323,4753,1023],{"class":332},[323,4755,336],{"class":329},[323,4757,4758,4760,4762,4764,4766,4768,4770,4772,4774,4776,4778,4780,4782,4784],{"class":325,"line":2791},[323,4759,1229],{"class":366},[323,4761,346],{"class":329},[323,4763,1234],{"class":436},[323,4765,440],{"class":329},[323,4767,1502],{"class":349},[323,4769,451],{"class":329},[323,4771,1244],{"class":436},[323,4773,440],{"class":329},[323,4775,1249],{"class":349},[323,4777,451],{"class":329},[323,4779,1254],{"class":436},[323,4781,440],{"class":329},[323,4783,1474],{"class":349},[323,4785,460],{"class":329},[323,4787,4788],{"class":325,"line":3817},[323,4789,996],{"class":329},[323,4791,4792],{"class":325,"line":3822},[323,4793,496],{"class":329},[323,4795,4796,4798,4800],{"class":325,"line":3831},[323,4797,743],{"class":329},[323,4799,1768],{"class":564},[323,4801,583],{"class":329},[314,4803,4806],{"className":552,"code":4804,"filename":4805,"language":554,"meta":319,"style":319},"\u003Cblossom-carousel class=\"carousel\">\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">1\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">2\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\n    \u003Cdiv class=\"card\">3\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C!-- ... -->\n\u003C\u002Fblossom-carousel>\n\n\u003Cscript type=\"module\">\n  import \"@blossom-carousel\u002Fweb\";\n\n  const carousel = document.querySelector(\".carousel\");\n\n  carousel.addEventListener(\"overscroll\", (event) => {\n    event.preventDefault();\n    const overscroll = event.detail.left;\n\n    Array.from(carousel.children).forEach((child) => {\n      const translate = `translateX(${overscroll * 0.5}px)`;\n      const rotate = `rotateY(${(overscroll \u002F carousel.clientWidth) * -90}deg)`;\n      child.style.transform = `${translate} ${rotate}`;\n    });\n  });\n\u003C\u002Fscript>\n\n\u003Cstyle>\n  .carousel {\n    --card-width: 12rem;\n  }\n\n  .slide {\n    view-timeline: --cards inline;\n    animation: stack-cards linear both;\n    animation-timeline: --cards;\n    animation-range: contain;\n\n    & .card {\n      animation: rotate-cards linear both;\n      animation-timeline: --cards;\n      animation-range: contain -50% contain 150%;\n    }\n  }\n\n  @keyframes stack-cards {\n    0% {\n      z-index: calc(sibling-count() - sibling-index());\n    }\n    50% {\n      z-index: 1000;\n    }\n    100% {\n      z-index: sibling-index();\n    }\n  }\n\n  @keyframes rotate-cards {\n    0% {\n      transform: translateX(-100%) translateZ(-200px) rotateY(-35deg);\n    }\n    25% {\n      transform: translateX(-80%) translateZ(-100px) rotateY(-35deg);\n    }\n    37.5% {\n      transform: translateX(-15%) translateZ(-100px) rotateY(-20deg);\n    }\n    50% {\n      transform: translateX(0%) translateZ(0px) rotateY(0deg);\n    }\n    62.5% {\n      transform: translateX(15%) translateZ(-100px) rotateY(20deg);\n    }\n    75% {\n      transform: translateX(80%) translateZ(-100px) rotateY(35deg);\n    }\n    100% {\n      transform: translateX(100%) translateZ(-200px) rotateY(35deg);\n    }\n  }\n\u003C\u002Fstyle>\n","Web",[244,4807,4808,4827,4845,4872,4880,4898,4925,4933,4951,4978,4986,4990,4998,5002,5022,5037,5041,5071,5075,5104,5116,5136,5140,5174,5202,5241,5269,5277,5285,5293,5297,5305,5314,5325,5329,5333,5341,5352,5362,5372,5382,5386,5391,5402,5413,5430,5434,5438,5442,5451,5458,5477,5481,5488,5498,5502,5509,5519,5523,5527,5531,5539,5545,5576,5580,5587,5617,5621,5628,5658,5662,5668,5698,5702,5709,5739,5743,5750,5780,5784,5790,5821,5826,5831],{"__ignoreMap":319},[323,4809,4810,4812,4815,4817,4819,4821,4823,4825],{"class":325,"line":326},[323,4811,561],{"class":329},[323,4813,4814],{"class":564},"blossom-carousel",[323,4816,569],{"class":568},[323,4818,572],{"class":329},[323,4820,575],{"class":329},[323,4822,333],{"class":578},[323,4824,575],{"class":329},[323,4826,583],{"class":329},[323,4828,4829,4831,4833,4835,4837,4839,4841,4843],{"class":325,"line":339},[323,4830,588],{"class":329},[323,4832,591],{"class":564},[323,4834,569],{"class":568},[323,4836,572],{"class":329},[323,4838,575],{"class":329},[323,4840,509],{"class":578},[323,4842,575],{"class":329},[323,4844,583],{"class":329},[323,4846,4847,4849,4851,4853,4855,4857,4859,4861,4863,4866,4868,4870],{"class":325,"line":356},[323,4848,608],{"class":329},[323,4850,591],{"class":564},[323,4852,569],{"class":568},[323,4854,572],{"class":329},[323,4856,575],{"class":329},[323,4858,619],{"class":578},[323,4860,575],{"class":329},[323,4862,2183],{"class":329},[323,4864,4865],{"class":342},"1",[323,4867,743],{"class":329},[323,4869,591],{"class":564},[323,4871,583],{"class":329},[323,4873,4874,4876,4878],{"class":325,"line":363},[323,4875,633],{"class":329},[323,4877,591],{"class":564},[323,4879,583],{"class":329},[323,4881,4882,4884,4886,4888,4890,4892,4894,4896],{"class":325,"line":377},[323,4883,588],{"class":329},[323,4885,591],{"class":564},[323,4887,569],{"class":568},[323,4889,572],{"class":329},[323,4891,575],{"class":329},[323,4893,509],{"class":578},[323,4895,575],{"class":329},[323,4897,583],{"class":329},[323,4899,4900,4902,4904,4906,4908,4910,4912,4914,4916,4919,4921,4923],{"class":325,"line":390},[323,4901,608],{"class":329},[323,4903,591],{"class":564},[323,4905,569],{"class":568},[323,4907,572],{"class":329},[323,4909,575],{"class":329},[323,4911,619],{"class":578},[323,4913,575],{"class":329},[323,4915,2183],{"class":329},[323,4917,4918],{"class":342},"2",[323,4920,743],{"class":329},[323,4922,591],{"class":564},[323,4924,583],{"class":329},[323,4926,4927,4929,4931],{"class":325,"line":403},[323,4928,633],{"class":329},[323,4930,591],{"class":564},[323,4932,583],{"class":329},[323,4934,4935,4937,4939,4941,4943,4945,4947,4949],{"class":325,"line":416},[323,4936,588],{"class":329},[323,4938,591],{"class":564},[323,4940,569],{"class":568},[323,4942,572],{"class":329},[323,4944,575],{"class":329},[323,4946,509],{"class":578},[323,4948,575],{"class":329},[323,4950,583],{"class":329},[323,4952,4953,4955,4957,4959,4961,4963,4965,4967,4969,4972,4974,4976],{"class":325,"line":421},[323,4954,608],{"class":329},[323,4956,591],{"class":564},[323,4958,569],{"class":568},[323,4960,572],{"class":329},[323,4962,575],{"class":329},[323,4964,619],{"class":578},[323,4966,575],{"class":329},[323,4968,2183],{"class":329},[323,4970,4971],{"class":342},"3",[323,4973,743],{"class":329},[323,4975,591],{"class":564},[323,4977,583],{"class":329},[323,4979,4980,4982,4984],{"class":325,"line":428},[323,4981,633],{"class":329},[323,4983,591],{"class":564},[323,4985,583],{"class":329},[323,4987,4988],{"class":325,"line":463},[323,4989,738],{"class":424},[323,4991,4992,4994,4996],{"class":325,"line":480},[323,4993,743],{"class":329},[323,4995,4814],{"class":564},[323,4997,583],{"class":329},[323,4999,5000],{"class":325,"line":493},[323,5001,360],{"emptyLinePlaceholder":359},[323,5003,5004,5006,5008,5011,5013,5015,5018,5020],{"class":325,"line":499},[323,5005,561],{"class":329},[323,5007,1875],{"class":564},[323,5009,5010],{"class":568}," type",[323,5012,572],{"class":329},[323,5014,575],{"class":329},[323,5016,5017],{"class":578},"module",[323,5019,575],{"class":329},[323,5021,583],{"class":329},[323,5023,5024,5027,5030,5033,5035],{"class":325,"line":504},[323,5025,5026],{"class":956},"  import",[323,5028,5029],{"class":329}," \"",[323,5031,5032],{"class":578},"@blossom-carousel\u002Fweb",[323,5034,575],{"class":329},[323,5036,353],{"class":329},[323,5038,5039],{"class":325,"line":514},[323,5040,360],{"emptyLinePlaceholder":359},[323,5042,5043,5045,5048,5050,5053,5055,5058,5060,5062,5065,5067,5069],{"class":325,"line":529},[323,5044,1599],{"class":568},[323,5046,5047],{"class":342}," carousel ",[323,5049,572],{"class":329},[323,5051,5052],{"class":342}," document",[323,5054,292],{"class":329},[323,5056,5057],{"class":436},"querySelector",[323,5059,440],{"class":342},[323,5061,575],{"class":329},[323,5063,5064],{"class":578},".carousel",[323,5066,575],{"class":329},[323,5068,451],{"class":342},[323,5070,353],{"class":329},[323,5072,5073],{"class":325,"line":547},[323,5074,360],{"emptyLinePlaceholder":359},[323,5076,5077,5080,5082,5084,5086,5088,5090,5092,5094,5096,5098,5100,5102],{"class":325,"line":1479},[323,5078,5079],{"class":342},"  carousel",[323,5081,292],{"class":329},[323,5083,1820],{"class":436},[323,5085,440],{"class":342},[323,5087,575],{"class":329},[323,5089,301],{"class":578},[323,5091,575],{"class":329},[323,5093,1832],{"class":329},[323,5095,3135],{"class":329},[323,5097,1570],{"class":960},[323,5099,451],{"class":329},[323,5101,1667],{"class":568},[323,5103,336],{"class":329},[323,5105,5106,5108,5110,5112,5114],{"class":325,"line":1484},[323,5107,3912],{"class":342},[323,5109,292],{"class":329},[323,5111,1589],{"class":436},[323,5113,1592],{"class":564},[323,5115,353],{"class":329},[323,5117,5118,5120,5122,5124,5126,5128,5130,5132,5134],{"class":325,"line":1491},[323,5119,1674],{"class":568},[323,5121,1602],{"class":342},[323,5123,1605],{"class":329},[323,5125,1608],{"class":342},[323,5127,292],{"class":329},[323,5129,1613],{"class":342},[323,5131,292],{"class":329},[323,5133,1618],{"class":342},[323,5135,353],{"class":329},[323,5137,5138],{"class":325,"line":1523},[323,5139,360],{"emptyLinePlaceholder":359},[323,5141,5142,5144,5146,5148,5150,5152,5154,5156,5158,5160,5162,5164,5166,5168,5170,5172],{"class":325,"line":1528},[323,5143,3949],{"class":342},[323,5145,292],{"class":329},[323,5147,1634],{"class":436},[323,5149,440],{"class":564},[323,5151,333],{"class":342},[323,5153,292],{"class":329},[323,5155,1648],{"class":342},[323,5157,451],{"class":564},[323,5159,292],{"class":329},[323,5161,1655],{"class":436},[323,5163,440],{"class":564},[323,5165,440],{"class":329},[323,5167,1662],{"class":960},[323,5169,451],{"class":329},[323,5171,1667],{"class":568},[323,5173,336],{"class":329},[323,5175,5176,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196,5198,5200],{"class":325,"line":2253},[323,5177,3988],{"class":568},[323,5179,1677],{"class":342},[323,5181,1605],{"class":329},[323,5183,1682],{"class":329},[323,5185,1685],{"class":578},[323,5187,1688],{"class":329},[323,5189,1691],{"class":342},[323,5191,1694],{"class":329},[323,5193,1697],{"class":349},[323,5195,1700],{"class":329},[323,5197,1703],{"class":578},[323,5199,1706],{"class":329},[323,5201,353],{"class":329},[323,5203,5204,5206,5208,5210,5212,5214,5216,5218,5220,5223,5225,5227,5229,5231,5233,5235,5237,5239],{"class":325,"line":2258},[323,5205,3988],{"class":568},[323,5207,1715],{"class":342},[323,5209,1605],{"class":329},[323,5211,1682],{"class":329},[323,5213,1722],{"class":578},[323,5215,1688],{"class":329},[323,5217,1727],{"class":342},[323,5219,1730],{"class":329},[323,5221,5222],{"class":342}," carousel",[323,5224,292],{"class":329},[323,5226,1741],{"class":342},[323,5228,1694],{"class":329},[323,5230,1746],{"class":329},[323,5232,1749],{"class":349},[323,5234,1700],{"class":329},[323,5236,1754],{"class":578},[323,5238,1706],{"class":329},[323,5240,353],{"class":329},[323,5242,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265,5267],{"class":325,"line":2263},[323,5244,4059],{"class":342},[323,5246,292],{"class":329},[323,5248,1768],{"class":342},[323,5250,292],{"class":329},[323,5252,1773],{"class":342},[323,5254,1605],{"class":329},[323,5256,1778],{"class":329},[323,5258,1781],{"class":342},[323,5260,1700],{"class":329},[323,5262,1786],{"class":329},[323,5264,1789],{"class":342},[323,5266,1792],{"class":329},[323,5268,353],{"class":329},[323,5270,5271,5273,5275],{"class":325,"line":2272},[323,5272,4088],{"class":329},[323,5274,451],{"class":564},[323,5276,353],{"class":329},[323,5278,5279,5281,5283],{"class":325,"line":2283},[323,5280,1799],{"class":329},[323,5282,451],{"class":342},[323,5284,353],{"class":329},[323,5286,5287,5289,5291],{"class":325,"line":2294},[323,5288,743],{"class":329},[323,5290,1875],{"class":564},[323,5292,583],{"class":329},[323,5294,5295],{"class":325,"line":2305},[323,5296,360],{"emptyLinePlaceholder":359},[323,5298,5299,5301,5303],{"class":325,"line":2316},[323,5300,561],{"class":329},[323,5302,1768],{"class":564},[323,5304,583],{"class":329},[323,5306,5307,5310,5312],{"class":325,"line":2321},[323,5308,5309],{"class":329},"  .",[323,5311,333],{"class":332},[323,5313,336],{"class":329},[323,5315,5316,5319,5321,5323],{"class":325,"line":2326},[323,5317,5318],{"class":342},"    --card-width",[323,5320,346],{"class":329},[323,5322,350],{"class":349},[323,5324,353],{"class":329},[323,5326,5327],{"class":325,"line":2337},[323,5328,996],{"class":329},[323,5330,5331],{"class":325,"line":2348},[323,5332,360],{"emptyLinePlaceholder":359},[323,5334,5335,5337,5339],{"class":325,"line":2365},[323,5336,5309],{"class":329},[323,5338,509],{"class":332},[323,5340,336],{"class":329},[323,5342,5343,5346,5348,5350],{"class":325,"line":2370},[323,5344,5345],{"class":342},"    view-timeline",[323,5347,346],{"class":329},[323,5349,887],{"class":342},[323,5351,353],{"class":329},[323,5353,5354,5356,5358,5360],{"class":325,"line":2375},[323,5355,1148],{"class":366},[323,5357,346],{"class":329},[323,5359,899],{"class":342},[323,5361,353],{"class":329},[323,5363,5364,5366,5368,5370],{"class":325,"line":2380},[323,5365,1160],{"class":342},[323,5367,346],{"class":329},[323,5369,911],{"class":342},[323,5371,353],{"class":329},[323,5373,5374,5376,5378,5380],{"class":325,"line":2389},[323,5375,1171],{"class":342},[323,5377,346],{"class":329},[323,5379,923],{"class":342},[323,5381,353],{"class":329},[323,5383,5384],{"class":325,"line":2396},[323,5385,360],{"emptyLinePlaceholder":359},[323,5387,5388],{"class":325,"line":2415},[323,5389,5390],{"class":342},"    & .card {\n",[323,5392,5393,5396,5398,5400],{"class":325,"line":2420},[323,5394,5395],{"class":366},"      animation",[323,5397,346],{"class":329},[323,5399,1153],{"class":342},[323,5401,353],{"class":329},[323,5403,5404,5407,5409,5411],{"class":325,"line":2427},[323,5405,5406],{"class":342},"      animation-timeline",[323,5408,346],{"class":329},[323,5410,911],{"class":342},[323,5412,353],{"class":329},[323,5414,5415,5418,5420,5422,5424,5426,5428],{"class":325,"line":2438},[323,5416,5417],{"class":342},"      animation-range",[323,5419,346],{"class":329},[323,5421,1176],{"class":342},[323,5423,1179],{"class":349},[323,5425,1176],{"class":342},[323,5427,1184],{"class":349},[323,5429,353],{"class":329},[323,5431,5432],{"class":325,"line":2443},[323,5433,3099],{"class":329},[323,5435,5436],{"class":325,"line":2450},[323,5437,996],{"class":342},[323,5439,5440],{"class":325,"line":2461},[323,5441,360],{"emptyLinePlaceholder":359},[323,5443,5444,5447,5449],{"class":325,"line":2466},[323,5445,5446],{"class":956},"  @keyframes",[323,5448,961],{"class":960},[323,5450,336],{"class":329},[323,5452,5453,5456],{"class":325,"line":2471},[323,5454,5455],{"class":332},"    0%",[323,5457,336],{"class":329},[323,5459,5460,5463,5465,5467,5469,5471,5473,5475],{"class":325,"line":2476},[323,5461,5462],{"class":366},"      z-index",[323,5464,346],{"class":329},[323,5466,437],{"class":436},[323,5468,440],{"class":329},[323,5470,984],{"class":342},[323,5472,451],{"class":329},[323,5474,989],{"class":342},[323,5476,353],{"class":329},[323,5478,5479],{"class":325,"line":2485},[323,5480,3099],{"class":329},[323,5482,5483,5486],{"class":325,"line":2492},[323,5484,5485],{"class":332},"    50%",[323,5487,336],{"class":329},[323,5489,5490,5492,5494,5496],{"class":325,"line":2523},[323,5491,5462],{"class":366},[323,5493,346],{"class":329},[323,5495,1012],{"class":349},[323,5497,353],{"class":329},[323,5499,5500],{"class":325,"line":2528},[323,5501,3099],{"class":329},[323,5503,5504,5507],{"class":325,"line":2535},[323,5505,5506],{"class":332},"    100%",[323,5508,336],{"class":329},[323,5510,5511,5513,5515,5517],{"class":325,"line":2566},[323,5512,5462],{"class":366},[323,5514,346],{"class":329},[323,5516,1034],{"class":342},[323,5518,353],{"class":329},[323,5520,5521],{"class":325,"line":2571},[323,5522,3099],{"class":329},[323,5524,5525],{"class":325,"line":2578},[323,5526,996],{"class":329},[323,5528,5529],{"class":325,"line":2609},[323,5530,360],{"emptyLinePlaceholder":359},[323,5532,5533,5535,5537],{"class":325,"line":2614},[323,5534,5446],{"class":956},[323,5536,1216],{"class":960},[323,5538,336],{"class":329},[323,5540,5541,5543],{"class":325,"line":2621},[323,5542,5455],{"class":332},[323,5544,336],{"class":329},[323,5546,5547,5550,5552,5554,5556,5558,5560,5562,5564,5566,5568,5570,5572,5574],{"class":325,"line":2652},[323,5548,5549],{"class":366},"      transform",[323,5551,346],{"class":329},[323,5553,1234],{"class":436},[323,5555,440],{"class":329},[323,5557,1239],{"class":349},[323,5559,451],{"class":329},[323,5561,1244],{"class":436},[323,5563,440],{"class":329},[323,5565,1249],{"class":349},[323,5567,451],{"class":329},[323,5569,1254],{"class":436},[323,5571,440],{"class":329},[323,5573,1259],{"class":349},[323,5575,460],{"class":329},[323,5577,5578],{"class":325,"line":2657},[323,5579,3099],{"class":329},[323,5581,5582,5585],{"class":325,"line":2664},[323,5583,5584],{"class":332},"    25%",[323,5586,336],{"class":329},[323,5588,5589,5591,5593,5595,5597,5599,5601,5603,5605,5607,5609,5611,5613,5615],{"class":325,"line":2695},[323,5590,5549],{"class":366},[323,5592,346],{"class":329},[323,5594,1234],{"class":436},[323,5596,440],{"class":329},[323,5598,1285],{"class":349},[323,5600,451],{"class":329},[323,5602,1244],{"class":436},[323,5604,440],{"class":329},[323,5606,1294],{"class":349},[323,5608,451],{"class":329},[323,5610,1254],{"class":436},[323,5612,440],{"class":329},[323,5614,1259],{"class":349},[323,5616,460],{"class":329},[323,5618,5619],{"class":325,"line":2700},[323,5620,3099],{"class":329},[323,5622,5623,5626],{"class":325,"line":2707},[323,5624,5625],{"class":332},"    37.5%",[323,5627,336],{"class":329},[323,5629,5630,5632,5634,5636,5638,5640,5642,5644,5646,5648,5650,5652,5654,5656],{"class":325,"line":2738},[323,5631,5549],{"class":366},[323,5633,346],{"class":329},[323,5635,1234],{"class":436},[323,5637,440],{"class":329},[323,5639,1328],{"class":349},[323,5641,451],{"class":329},[323,5643,1244],{"class":436},[323,5645,440],{"class":329},[323,5647,1294],{"class":349},[323,5649,451],{"class":329},[323,5651,1254],{"class":436},[323,5653,440],{"class":329},[323,5655,1345],{"class":349},[323,5657,460],{"class":329},[323,5659,5660],{"class":325,"line":2743},[323,5661,3099],{"class":329},[323,5663,5664,5666],{"class":325,"line":2750},[323,5665,5485],{"class":332},[323,5667,336],{"class":329},[323,5669,5670,5672,5674,5676,5678,5680,5682,5684,5686,5688,5690,5692,5694,5696],{"class":325,"line":2781},[323,5671,5549],{"class":366},[323,5673,346],{"class":329},[323,5675,1234],{"class":436},[323,5677,440],{"class":329},[323,5679,1370],{"class":349},[323,5681,451],{"class":329},[323,5683,1244],{"class":436},[323,5685,440],{"class":329},[323,5687,1379],{"class":349},[323,5689,451],{"class":329},[323,5691,1254],{"class":436},[323,5693,440],{"class":329},[323,5695,1388],{"class":349},[323,5697,460],{"class":329},[323,5699,5700],{"class":325,"line":2786},[323,5701,3099],{"class":329},[323,5703,5704,5707],{"class":325,"line":2791},[323,5705,5706],{"class":332},"    62.5%",[323,5708,336],{"class":329},[323,5710,5711,5713,5715,5717,5719,5721,5723,5725,5727,5729,5731,5733,5735,5737],{"class":325,"line":3817},[323,5712,5549],{"class":366},[323,5714,346],{"class":329},[323,5716,1234],{"class":436},[323,5718,440],{"class":329},[323,5720,1414],{"class":349},[323,5722,451],{"class":329},[323,5724,1244],{"class":436},[323,5726,440],{"class":329},[323,5728,1294],{"class":349},[323,5730,451],{"class":329},[323,5732,1254],{"class":436},[323,5734,440],{"class":329},[323,5736,1431],{"class":349},[323,5738,460],{"class":329},[323,5740,5741],{"class":325,"line":3822},[323,5742,3099],{"class":329},[323,5744,5745,5748],{"class":325,"line":3831},[323,5746,5747],{"class":332},"    75%",[323,5749,336],{"class":329},[323,5751,5752,5754,5756,5758,5760,5762,5764,5766,5768,5770,5772,5774,5776,5778],{"class":325,"line":3860},[323,5753,5549],{"class":366},[323,5755,346],{"class":329},[323,5757,1234],{"class":436},[323,5759,440],{"class":329},[323,5761,1457],{"class":349},[323,5763,451],{"class":329},[323,5765,1244],{"class":436},[323,5767,440],{"class":329},[323,5769,1294],{"class":349},[323,5771,451],{"class":329},[323,5773,1254],{"class":436},[323,5775,440],{"class":329},[323,5777,1474],{"class":349},[323,5779,460],{"class":329},[323,5781,5782],{"class":325,"line":3865},[323,5783,3099],{"class":329},[323,5785,5786,5788],{"class":325,"line":3870},[323,5787,5506],{"class":332},[323,5789,336],{"class":329},[323,5791,5793,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819],{"class":325,"line":5792},81,[323,5794,5549],{"class":366},[323,5796,346],{"class":329},[323,5798,1234],{"class":436},[323,5800,440],{"class":329},[323,5802,1502],{"class":349},[323,5804,451],{"class":329},[323,5806,1244],{"class":436},[323,5808,440],{"class":329},[323,5810,1249],{"class":349},[323,5812,451],{"class":329},[323,5814,1254],{"class":436},[323,5816,440],{"class":329},[323,5818,1474],{"class":349},[323,5820,460],{"class":329},[323,5822,5824],{"class":325,"line":5823},82,[323,5825,3099],{"class":329},[323,5827,5829],{"class":325,"line":5828},83,[323,5830,996],{"class":329},[323,5832,5834,5836,5838],{"class":325,"line":5833},84,[323,5835,743],{"class":329},[323,5837,1768],{"class":564},[323,5839,583],{"class":329},[228,5841,5842],{},"All of the layout and animation logic lives in CSS. Blossom doesn't know it's a flipbook, it just scrolls and allows it to be dragged.",[5844,5845],"hr",{},[253,5847,5849],{"id":5848},"browser-support","Browser support",[228,5851,5852,5853,5855,5856,5861],{},"Scroll-driven animations with ",[244,5854,281],{}," require a modern browser. Check ",[232,5857,5860],{"href":5858,"rel":5859},"https:\u002F\u002Fcaniuse.com\u002F?search=view-timeline",[271],"caniuse"," for current support.",[228,5863,278,5864,282,5866,5868,5869,5872],{},[244,5865,281],{},[244,5867,285],{},", so the animation timing may look off in Safari until ",[232,5870,291],{"href":289,"rel":5871},[271]," is resolved.",[253,5874,5876],{"id":5875},"explore-further","Explore further",[5878,5879,5880,5887,5893],"ul",{},[5881,5882,5883,5886],"li",{},[232,5884,5885],{"href":132},"Flipbook example"," has the full source with CSS and Tailwind variants",[5881,5888,5889,5892],{},[232,5890,5891],{"href":107},"Cover flow example"," is another scroll-driven 3D pattern",[5881,5894,5895,5899,5900,5903],{},[232,5896,5898],{"href":5897},"\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt#overscroll-api","Overscroll API"," documents what ",[244,5901,5902],{},"event.detail"," exposes",[1768,5905,5906],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":319,"searchDepth":339,"depth":339,"links":5908},[5909,5910,5911,5912,5913,5914,5915,5916,5917],{"id":255,"depth":339,"text":256},{"id":308,"depth":339,"text":309},{"id":756,"depth":339,"text":757},{"id":856,"depth":339,"text":857},{"id":1063,"depth":339,"text":1064},{"id":1539,"depth":339,"text":1540},{"id":1855,"depth":339,"text":1856},{"id":5848,"depth":339,"text":5849},{"id":5875,"depth":339,"text":5876},"2026-06-27","A step-by-step tutorial for building a 3D flipbook carousel with scroll-driven animations, sticky stacking, and Blossom's overscroll API.","md",{"image":5922},"\u002Fimages\u002Fabstract\u002Fblossom05.png","\u002Fblog\u002Fflipbook-carousel",{"title":223,"description":5919},"blog\u002F2.flipbook-carousel","yThmgy9wzWLCIAe91ASLktIuqvfDFxlDv81DTtppivc",{"id":5928,"title":5929,"body":5930,"date":6725,"description":6726,"draft":6,"extension":5920,"meta":6727,"navigation":359,"path":6729,"seo":6730,"stem":6731,"__hash__":6732},"blog\u002Fblog\u002F1.navigation-controls-invoker-commands.md","Navigation controls with the Invoker Commands API",{"type":225,"value":5931,"toc":6720},[5932,5950,5953,5963,6162,6169,6173,6183,6199,6206,6258,6268,6274,6283,6287,6294,6301,6304,6311,6315,6318,6352,6361,6450,6688,6690,6695,6717],[228,5933,5934,5935,240,5938,5941,5942,5945,5946,5949],{},"Blossom Carousel now ships first-class navigation controls through ",[244,5936,5937],{},"\u003CBlossomPrev>",[244,5939,5940],{},"\u003CBlossomNext>",", and ",[244,5943,5944],{},"\u003CBlossomDots>"," — with ",[244,5947,5948],{},"\u003CBlossomDot>"," for fully custom dot buttons. These components work across the Vue, React, Svelte, and Web Components packages, and they can live anywhere in your layout.",[5951,5952],"blog-navigation-controls",{},[228,5954,5955,5956,539,5959,5962],{},"Link them to a carousel with a simple ",[244,5957,5958],{},"id",[244,5960,5961],{},"for"," pairing and Blossom handles the rest. No template ref, no layout constraints and no imperative API.",[314,5964,5966],{"className":552,"code":5965,"language":554,"meta":319,"style":319},"\u003CBlossomCarousel id=\"gallery\" class=\"carousel\">\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 01\u003C\u002Fdiv>\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 02\u003C\u002Fdiv>\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 03\u003C\u002Fdiv>\n  ...\n\u003C\u002FBlossomCarousel>\n\n\u003CBlossomPrev for=\"gallery\" \u002F>\n\u003CBlossomDots for=\"gallery\" \u002F>\n\u003CBlossomNext for=\"gallery\" \u002F>\n",[244,5967,5968,5998,6028,6057,6086,6091,6099,6103,6124,6143],{"__ignoreMap":319},[323,5969,5970,5972,5974,5977,5979,5981,5984,5986,5988,5990,5992,5994,5996],{"class":325,"line":326},[323,5971,561],{"class":329},[323,5973,565],{"class":564},[323,5975,5976],{"class":568}," id",[323,5978,572],{"class":329},[323,5980,575],{"class":329},[323,5982,5983],{"class":578},"gallery",[323,5985,575],{"class":329},[323,5987,569],{"class":568},[323,5989,572],{"class":329},[323,5991,575],{"class":329},[323,5993,333],{"class":578},[323,5995,575],{"class":329},[323,5997,583],{"class":329},[323,5999,6000,6002,6004,6007,6009,6011,6013,6015,6017,6019,6022,6024,6026],{"class":325,"line":339},[323,6001,588],{"class":329},[323,6003,591],{"class":564},[323,6005,6006],{"class":568}," data-blossom-slide",[323,6008,569],{"class":568},[323,6010,572],{"class":329},[323,6012,575],{"class":329},[323,6014,509],{"class":578},[323,6016,575],{"class":329},[323,6018,2183],{"class":329},[323,6020,6021],{"class":342},"Slide 01",[323,6023,743],{"class":329},[323,6025,591],{"class":564},[323,6027,583],{"class":329},[323,6029,6030,6032,6034,6036,6038,6040,6042,6044,6046,6048,6051,6053,6055],{"class":325,"line":356},[323,6031,588],{"class":329},[323,6033,591],{"class":564},[323,6035,6006],{"class":568},[323,6037,569],{"class":568},[323,6039,572],{"class":329},[323,6041,575],{"class":329},[323,6043,509],{"class":578},[323,6045,575],{"class":329},[323,6047,2183],{"class":329},[323,6049,6050],{"class":342},"Slide 02",[323,6052,743],{"class":329},[323,6054,591],{"class":564},[323,6056,583],{"class":329},[323,6058,6059,6061,6063,6065,6067,6069,6071,6073,6075,6077,6080,6082,6084],{"class":325,"line":363},[323,6060,588],{"class":329},[323,6062,591],{"class":564},[323,6064,6006],{"class":568},[323,6066,569],{"class":568},[323,6068,572],{"class":329},[323,6070,575],{"class":329},[323,6072,509],{"class":578},[323,6074,575],{"class":329},[323,6076,2183],{"class":329},[323,6078,6079],{"class":342},"Slide 03",[323,6081,743],{"class":329},[323,6083,591],{"class":564},[323,6085,583],{"class":329},[323,6087,6088],{"class":325,"line":377},[323,6089,6090],{"class":342},"  ...\n",[323,6092,6093,6095,6097],{"class":325,"line":390},[323,6094,743],{"class":329},[323,6096,565],{"class":564},[323,6098,583],{"class":329},[323,6100,6101],{"class":325,"line":403},[323,6102,360],{"emptyLinePlaceholder":359},[323,6104,6105,6107,6110,6113,6115,6117,6119,6121],{"class":325,"line":416},[323,6106,561],{"class":329},[323,6108,6109],{"class":564},"BlossomPrev",[323,6111,6112],{"class":568}," for",[323,6114,572],{"class":329},[323,6116,575],{"class":329},[323,6118,5983],{"class":578},[323,6120,575],{"class":329},[323,6122,6123],{"class":329}," \u002F>\n",[323,6125,6126,6128,6131,6133,6135,6137,6139,6141],{"class":325,"line":421},[323,6127,561],{"class":329},[323,6129,6130],{"class":564},"BlossomDots",[323,6132,6112],{"class":568},[323,6134,572],{"class":329},[323,6136,575],{"class":329},[323,6138,5983],{"class":578},[323,6140,575],{"class":329},[323,6142,6123],{"class":329},[323,6144,6145,6147,6150,6152,6154,6156,6158,6160],{"class":325,"line":428},[323,6146,561],{"class":329},[323,6148,6149],{"class":564},"BlossomNext",[323,6151,6112],{"class":568},[323,6153,572],{"class":329},[323,6155,575],{"class":329},[323,6157,5983],{"class":578},[323,6159,575],{"class":329},[323,6161,6123],{"class":329},[228,6163,6164,6165,6168],{},"Mark each slide with ",[244,6166,6167],{},"data-blossom-slide"," so dot navigation knows which elements to track. You choose how you want to build your slides markup—flat, nested or grouped—and you decide which elements you want to be tracked.",[253,6170,6172],{"id":6171},"how-they-work","How they work",[228,6174,6175,6176,6179,6180,346],{},"Under the hood, each control is a native ",[244,6177,6178],{},"\u003Cbutton type=\"button\">"," wired to the browser's ",[237,6181,6182],{},"Invoker Commands API",[5878,6184,6185,6193],{},[5881,6186,6187,6190,6191],{},[244,6188,6189],{},"commandfor"," points at the carousel's ",[244,6192,5958],{},[5881,6194,6195,6198],{},[244,6196,6197],{},"command"," names the action to perform",[228,6200,6201,6202,6205],{},"Blossom uses custom commands in the ",[244,6203,6204],{},"--blossom-*"," namespace:",[6207,6208,6209,6222],"table",{},[6210,6211,6212],"thead",{},[6213,6214,6215,6219],"tr",{},[6216,6217,6218],"th",{},"Control",[6216,6220,6221],{},"Command",[6223,6224,6225,6235,6244],"tbody",{},[6213,6226,6227,6230],{},[6228,6229,6109],"td",{},[6228,6231,6232],{},[244,6233,6234],{},"--blossom-prev",[6213,6236,6237,6239],{},[6228,6238,6149],{},[6228,6240,6241],{},[244,6242,6243],{},"--blossom-next",[6213,6245,6246,6253],{},[6228,6247,6248,6249,451],{},"BlossomDot (slide ",[6250,6251,6252],"em",{},"n",[6228,6254,6255],{},[244,6256,6257],{},"--blossom-goto-{index}",[228,6259,6260,6261,6263,6264,6267],{},"When you click a control, the browser dispatches a ",[244,6262,6197],{}," event on the target carousel. Blossom listens for that event and scrolls the container using native ",[244,6265,6266],{},"Element.scrollIntoView({ behavior: 'smooth', inline: … })",", with full awareness of scroll snap alignment, scroll padding, and RTL direction.",[228,6269,6270,6271,292],{},"If no snap targets are found, it falls back to a proportional ",[244,6272,6273],{},"scrollBy()",[228,6275,6276,6277,6279,6280,6282],{},"The controls and carousel stay decoupled and layout independent. As long as ",[244,6278,5961],{}," matches the carousel's ",[244,6281,5958],{}," it works.",[253,6284,6286],{"id":6285},"why-invoker-commands","Why Invoker Commands",[228,6288,6289,6290,6293],{},"Blossom is built on a simple idea: ",[237,6291,6292],{},"enhance native scrolling, don't replace it."," Navigation controls had to follow the same rules and for Blossom to feel like a native element it has to be able to exist on its own.",[228,6295,6296,6297,6300],{},"Most carousel libraries expose imperative APIs — grab a ref, call ",[244,6298,6299],{},".next()",", wire up click handlers in JavaScript or force a template ref around the carousel and controls to create a local scope. These patterns work, but it couples your controls to your component tree and to Blossom's runtime. Invoker Commands invert that: the button declares what it wants to do, the carousel responds.",[228,6302,6303],{},"The absense of an imperative API also means controls work even when Blossom's drag engine isn't loaded. On touch devices, where Blossom skips the drag bundle entirely, Blossom's navigation controls still scroll the carousel through native behavior.",[228,6305,6306,6307,6310],{},"Since Invoker Commands only reached Baseline in early 2026, Blossom still includes a lightweight fallback for browsers without native ",[244,6308,6309],{},"commandForElement"," support.",[253,6312,6314],{"id":6313},"what-you-dont-have-to-think-about","What you don't have to think about",[228,6316,6317],{},"The navigation layer handles the details:",[5878,6319,6320,6326,6336,6346],{},[5881,6321,6322,6325],{},[237,6323,6324],{},"Disabled state"," — prev\u002Fnext buttons disable automatically at the first and last slide",[5881,6327,6328,6331,6332,6335],{},[237,6329,6330],{},"Active dot tracking"," — BlossomDots observes scroll position and sets ",[244,6333,6334],{},"data-active"," on the current dot",[5881,6337,6338,6341,6342,6345],{},[237,6339,6340],{},"RTL"," — scroll direction is respected when ",[244,6343,6344],{},"direction: rtl"," is set on the carousel",[5881,6347,6348,6351],{},[237,6349,6350],{},"Scroll snap"," — navigation finds snap-aligned pages and scrolls to the correct inline position",[228,6353,6354,6355,6357,6358,6360],{},"Default dots can be themed with CSS custom properties on ",[244,6356,5944],{}," or any ancestor. For fully custom dot UI, provide a default slot and render ",[244,6359,5948],{}," for each slide — Blossom wires up the button and navigation for you.",[314,6362,6364],{"className":316,"code":6363,"language":318,"meta":319,"style":319},"\u002F* defaults *\u002F\n{\n  --blossom-dot-size: 0.625rem;\n  --blossom-dot-radius: 50%;\n  --blossom-dot-color: currentColor;\n  --blossom-dot-opacity: 0.35;\n  --blossom-dot-hover-opacity: 0.6;\n  --blossom-dot-active-opacity: 1;\n}\n",[244,6365,6366,6371,6375,6387,6399,6411,6423,6435,6446],{"__ignoreMap":319},[323,6367,6368],{"class":325,"line":326},[323,6369,6370],{"class":424},"\u002F* defaults *\u002F\n",[323,6372,6373],{"class":325,"line":339},[323,6374,3266],{"class":329},[323,6376,6377,6380,6382,6385],{"class":325,"line":356},[323,6378,6379],{"class":342},"  --blossom-dot-size",[323,6381,346],{"class":329},[323,6383,6384],{"class":349}," 0.625rem",[323,6386,353],{"class":329},[323,6388,6389,6392,6394,6397],{"class":325,"line":363},[323,6390,6391],{"class":342},"  --blossom-dot-radius",[323,6393,346],{"class":329},[323,6395,6396],{"class":349}," 50%",[323,6398,353],{"class":329},[323,6400,6401,6404,6406,6409],{"class":325,"line":377},[323,6402,6403],{"class":342},"  --blossom-dot-color",[323,6405,346],{"class":329},[323,6407,6408],{"class":342}," currentColor",[323,6410,353],{"class":329},[323,6412,6413,6416,6418,6421],{"class":325,"line":390},[323,6414,6415],{"class":342},"  --blossom-dot-opacity",[323,6417,346],{"class":329},[323,6419,6420],{"class":349}," 0.35",[323,6422,353],{"class":329},[323,6424,6425,6428,6430,6433],{"class":325,"line":403},[323,6426,6427],{"class":342},"  --blossom-dot-hover-opacity",[323,6429,346],{"class":329},[323,6431,6432],{"class":349}," 0.6",[323,6434,353],{"class":329},[323,6436,6437,6440,6442,6444],{"class":325,"line":416},[323,6438,6439],{"class":342},"  --blossom-dot-active-opacity",[323,6441,346],{"class":329},[323,6443,3209],{"class":349},[323,6445,353],{"class":329},[323,6447,6448],{"class":325,"line":421},[323,6449,496],{"class":329},[314,6451,6453],{"className":552,"code":6452,"language":554,"meta":319,"style":319},"\u003C!-- using a slotted svg icon -->\n\u003CBlossomPrev for=\"gallery\">\n  \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n    \u003Cpath d=\"m12 19-7-7 7-7\" \u002F>\n    \u003Cpath d=\"M19 12H5\" \u002F>\n  \u003C\u002Fsvg>\n\u003C\u002FBlossomPrev>\n\n\u003C!-- Thumbnail navigation with BlossomDot -->\n\u003CBlossomDots for=\"gallery\" v-slot=\"{ index, active }\">\n  \u003CBlossomDot :data-active=\"active\" :aria-label=\"`Photo ${index + 1}`\">\n    \u003Cimg :src=\"thumbnails[index]\" \u002F>\n  \u003C\u002FBlossomDot>\n\u003C\u002FBlossomDots>\n",[244,6454,6455,6460,6478,6523,6544,6563,6571,6579,6583,6588,6618,6651,6672,6680],{"__ignoreMap":319},[323,6456,6457],{"class":325,"line":326},[323,6458,6459],{"class":424},"\u003C!-- using a slotted svg icon -->\n",[323,6461,6462,6464,6466,6468,6470,6472,6474,6476],{"class":325,"line":339},[323,6463,561],{"class":329},[323,6465,6109],{"class":564},[323,6467,6112],{"class":568},[323,6469,572],{"class":329},[323,6471,575],{"class":329},[323,6473,5983],{"class":578},[323,6475,575],{"class":329},[323,6477,583],{"class":329},[323,6479,6480,6482,6485,6488,6490,6492,6495,6497,6500,6502,6504,6507,6509,6512,6514,6516,6519,6521],{"class":325,"line":356},[323,6481,588],{"class":329},[323,6483,6484],{"class":564},"svg",[323,6486,6487],{"class":568}," viewBox",[323,6489,572],{"class":329},[323,6491,575],{"class":329},[323,6493,6494],{"class":578},"0 0 24 24",[323,6496,575],{"class":329},[323,6498,6499],{"class":568}," fill",[323,6501,572],{"class":329},[323,6503,575],{"class":329},[323,6505,6506],{"class":578},"none",[323,6508,575],{"class":329},[323,6510,6511],{"class":568}," stroke",[323,6513,572],{"class":329},[323,6515,575],{"class":329},[323,6517,6518],{"class":578},"currentColor",[323,6520,575],{"class":329},[323,6522,583],{"class":329},[323,6524,6525,6527,6530,6533,6535,6537,6540,6542],{"class":325,"line":363},[323,6526,608],{"class":329},[323,6528,6529],{"class":564},"path",[323,6531,6532],{"class":568}," d",[323,6534,572],{"class":329},[323,6536,575],{"class":329},[323,6538,6539],{"class":578},"m12 19-7-7 7-7",[323,6541,575],{"class":329},[323,6543,6123],{"class":329},[323,6545,6546,6548,6550,6552,6554,6556,6559,6561],{"class":325,"line":377},[323,6547,608],{"class":329},[323,6549,6529],{"class":564},[323,6551,6532],{"class":568},[323,6553,572],{"class":329},[323,6555,575],{"class":329},[323,6557,6558],{"class":578},"M19 12H5",[323,6560,575],{"class":329},[323,6562,6123],{"class":329},[323,6564,6565,6567,6569],{"class":325,"line":390},[323,6566,633],{"class":329},[323,6568,6484],{"class":564},[323,6570,583],{"class":329},[323,6572,6573,6575,6577],{"class":325,"line":403},[323,6574,743],{"class":329},[323,6576,6109],{"class":564},[323,6578,583],{"class":329},[323,6580,6581],{"class":325,"line":416},[323,6582,360],{"emptyLinePlaceholder":359},[323,6584,6585],{"class":325,"line":421},[323,6586,6587],{"class":424},"\u003C!-- Thumbnail navigation with BlossomDot -->\n",[323,6589,6590,6592,6594,6596,6598,6600,6602,6604,6607,6609,6611,6614,6616],{"class":325,"line":428},[323,6591,561],{"class":329},[323,6593,6130],{"class":564},[323,6595,6112],{"class":568},[323,6597,572],{"class":329},[323,6599,575],{"class":329},[323,6601,5983],{"class":578},[323,6603,575],{"class":329},[323,6605,6606],{"class":568}," v-slot",[323,6608,572],{"class":329},[323,6610,575],{"class":329},[323,6612,6613],{"class":578},"{ index, active }",[323,6615,575],{"class":329},[323,6617,583],{"class":329},[323,6619,6620,6622,6625,6628,6630,6632,6635,6637,6640,6642,6644,6647,6649],{"class":325,"line":463},[323,6621,588],{"class":329},[323,6623,6624],{"class":564},"BlossomDot",[323,6626,6627],{"class":568}," :data-active",[323,6629,572],{"class":329},[323,6631,575],{"class":329},[323,6633,6634],{"class":578},"active",[323,6636,575],{"class":329},[323,6638,6639],{"class":568}," :aria-label",[323,6641,572],{"class":329},[323,6643,575],{"class":329},[323,6645,6646],{"class":578},"`Photo ${index + 1}`",[323,6648,575],{"class":329},[323,6650,583],{"class":329},[323,6652,6653,6655,6658,6661,6663,6665,6668,6670],{"class":325,"line":480},[323,6654,608],{"class":329},[323,6656,6657],{"class":564},"img",[323,6659,6660],{"class":568}," :src",[323,6662,572],{"class":329},[323,6664,575],{"class":329},[323,6666,6667],{"class":578},"thumbnails[index]",[323,6669,575],{"class":329},[323,6671,6123],{"class":329},[323,6673,6674,6676,6678],{"class":325,"line":493},[323,6675,633],{"class":329},[323,6677,6624],{"class":564},[323,6679,583],{"class":329},[323,6681,6682,6684,6686],{"class":325,"line":499},[323,6683,743],{"class":329},[323,6685,6130],{"class":564},[323,6687,583],{"class":329},[5844,6689],{},[228,6691,6692],{},[237,6693,6694],{},"Explore further:",[5878,6696,6697,6703,6709],{},[5881,6698,6699,6702],{},[232,6700,6701],{"href":87},"Buttons example"," — prev\u002Fnext controls with CSS and Tailwind",[5881,6704,6705,6708],{},[232,6706,6707],{"href":92},"Dots example"," — dot navigation and custom dot UI",[5881,6710,6711,6714,6715],{},[232,6712,6713],{"href":97},"Thumbnails example"," — thumbnail navigation with ",[244,6716,5948],{},[1768,6718,6719],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":319,"searchDepth":339,"depth":339,"links":6721},[6722,6723,6724],{"id":6171,"depth":339,"text":6172},{"id":6285,"depth":339,"text":6286},{"id":6313,"depth":339,"text":6314},"2026-06-17","How BlossomPrev, BlossomNext, BlossomDots, and BlossomDot use declarative browser commands to navigate native scroll containers without refs or imperative APIs.",{"image":6728},"\u002Fimages\u002Fabstract\u002Fblossom04.png","\u002Fblog\u002Fnavigation-controls-invoker-commands",{"title":5929,"description":6726},"blog\u002F1.navigation-controls-invoker-commands","abPfZRfJ26S6qwvpYzt9RJuun4y0ho_bN0RFn1NVMyE",{"id":6734,"title":6735,"body":6736,"date":7060,"description":7061,"draft":6,"extension":5920,"meta":7062,"navigation":359,"path":7064,"seo":7065,"stem":7066,"__hash__":7067},"blog\u002Fblog\u002Fintroducing-blossom-carousel.md","Introducing Blossom Carousel",{"type":225,"value":6737,"toc":7054},[6738,6741,6744,6747,6750,6754,6757,6760,6763,6766,6769,6773,6776,6779,6782,6785,6788,6807,6810,6813,6914,6918,6921,6924,6927,6931,6934,7010,7016,7051],[228,6739,6740],{},"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.",[228,6742,6743],{},"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.",[228,6745,6746],{},"That made sense when the platform lacked the primitives we have today.",[228,6748,6749],{},"But the web has changed.",[253,6751,6753],{"id":6752},"the-current-state-of-carousels","The current state of carousels",[228,6755,6756],{},"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.",[228,6758,6759],{},"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.",[228,6761,6762],{},"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.",[228,6764,6765],{},"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.",[228,6767,6768],{},"The result is a strange split and we ended up with two different carousel implementations where one should be enough.",[253,6770,6772],{"id":6771},"introducing-blossom","Introducing Blossom",[228,6774,6775],{},"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.",[228,6777,6778],{},"Here it is. Drag it with a mouse, flick it on a trackpad, swipe it on a phone. Same component, works everywhere.",[6780,6781],"blog-simple",{},[228,6783,6784],{},"Because Blossom is built on a real scroll container, the browser's capabilities remain available.",[228,6786,6787],{},"That means features like these work naturally:",[5878,6789,6790,6796,6801,6804],{},[5881,6791,6792,6795],{},[244,6793,6794],{},"scroll-snap"," controls slide alignment",[5881,6797,6798,6800],{},[244,6799,246],{}," creates layered layouts",[5881,6802,6803],{},"scroll-driven animations respond to real movement",[5881,6805,6806],{},"scroll-state queries can react to scroll position",[228,6808,6809],{},"Blossom does not introduce another abstraction for these things. It lets the platform continue doing what it already does best.",[228,6811,6812],{},"Your CSS describes the experience. Blossom simply makes the interaction complete.",[6207,6814,6815,6828],{},[6210,6816,6817],{},[6213,6818,6819,6822,6825],{},[6216,6820,6821],{},"Feature",[6216,6823,6824],{},"Blossom Carousel",[6216,6826,6827],{},"Traditional Carousel Libraries",[6223,6829,6830,6840,6850,6859,6869,6878,6887,6896,6905],{},[6213,6831,6832,6835,6838],{},[6228,6833,6834],{},"Draggable",[6228,6836,6837],{},"✅ Yes",[6228,6839,6837],{},[6213,6841,6842,6845,6847],{},[6228,6843,6844],{},"Scrollable",[6228,6846,6837],{},[6228,6848,6849],{},"❌ No",[6213,6851,6852,6855,6857],{},[6228,6853,6854],{},"Navigation controls",[6228,6856,6837],{},[6228,6858,6837],{},[6213,6860,6861,6864,6867],{},[6228,6862,6863],{},"Cyclical scrolling",[6228,6865,6866],{},"⚠️ Experimental",[6228,6868,6837],{},[6213,6870,6871,6874,6876],{},[6228,6872,6873],{},"Position sticky",[6228,6875,6837],{},[6228,6877,6849],{},[6213,6879,6880,6883,6885],{},[6228,6881,6882],{},"CSS Scroll-driven animations",[6228,6884,6837],{},[6228,6886,6849],{},[6213,6888,6889,6892,6894],{},[6228,6890,6891],{},"Scroll-state queries",[6228,6893,6837],{},[6228,6895,6849],{},[6213,6897,6898,6901,6903],{},[6228,6899,6900],{},"Scroll-snap events",[6228,6902,6837],{},[6228,6904,6849],{},[6213,6906,6907,6910,6912],{},[6228,6908,6909],{},"Scroll event listeners",[6228,6911,6837],{},[6228,6913,6849],{},[253,6915,6917],{"id":6916},"built-for-the-future-of-the-web","Built for the future of the web",[228,6919,6920],{},"The direction of the platform is moving toward more native carousel capabilities.",[228,6922,6923],{},"Browser vendors are already exploring ways to bring common carousel features directly into CSS and HTML, including native controls and more advanced scrolling behavior.",[228,6925,6926],{},"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.",[253,6928,6930],{"id":6929},"get-started","Get started",[228,6932,6933],{},"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:",[1858,6935,6936,6954,6968,6982,6996],{"sync":1860},[314,6937,6941],{"className":6938,"code":6939,"filename":1865,"language":6940,"meta":319,"style":319},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @blossom-carousel\u002Fvue\n","bash",[244,6942,6943],{"__ignoreMap":319},[323,6944,6945,6948,6951],{"class":325,"line":326},[323,6946,6947],{"class":332},"npm",[323,6949,6950],{"class":578}," install",[323,6952,6953],{"class":578}," @blossom-carousel\u002Fvue\n",[314,6955,6957],{"className":6938,"code":6956,"filename":2802,"language":6940,"meta":319,"style":319},"npm install @blossom-carousel\u002Freact\n",[244,6958,6959],{"__ignoreMap":319},[323,6960,6961,6963,6965],{"class":325,"line":326},[323,6962,6947],{"class":332},[323,6964,6950],{"class":578},[323,6966,6967],{"class":578}," @blossom-carousel\u002Freact\n",[314,6969,6971],{"className":6938,"code":6970,"filename":3881,"language":6940,"meta":319,"style":319},"npm install @blossom-carousel\u002Fsvelte\n",[244,6972,6973],{"__ignoreMap":319},[323,6974,6975,6977,6979],{"class":325,"line":326},[323,6976,6947],{"class":332},[323,6978,6950],{"class":578},[323,6980,6981],{"class":578}," @blossom-carousel\u002Fsvelte\n",[314,6983,6985],{"className":6938,"code":6984,"filename":4805,"language":6940,"meta":319,"style":319},"npm install @blossom-carousel\u002Fweb\n",[244,6986,6987],{"__ignoreMap":319},[323,6988,6989,6991,6993],{"class":325,"line":326},[323,6990,6947],{"class":332},[323,6992,6950],{"class":578},[323,6994,6995],{"class":578}," @blossom-carousel\u002Fweb\n",[314,6997,6999],{"className":6938,"code":6998,"filename":46,"language":6940,"meta":319,"style":319},"npm install @blossom-carousel\u002Fcore\n",[244,7000,7001],{"__ignoreMap":319},[323,7002,7003,7005,7007],{"class":325,"line":326},[323,7004,6947],{"class":332},[323,7006,6950],{"class":578},[323,7008,7009],{"class":578}," @blossom-carousel\u002Fcore\n",[228,7011,7012,7013,7015],{},"Install Blossom for your framework, copy an example or install the ",[232,7014,186],{"href":187}," to get started.",[7017,7018,7019,7039],"code-block",{},[314,7020,7023],{"className":6938,"code":7021,"filename":7022,"language":6940,"meta":319,"style":319},"npx skills add https:\u002F\u002Fwww.blossom-carousel.com\n","Terminal",[244,7024,7025],{"__ignoreMap":319},[323,7026,7027,7030,7033,7036],{"class":325,"line":326},[323,7028,7029],{"class":332},"npx",[323,7031,7032],{"class":578}," skills",[323,7034,7035],{"class":578}," add",[323,7037,7038],{"class":578}," https:\u002F\u002Fwww.blossom-carousel.com\n",[5878,7040,7041,7046],{},[5881,7042,7043,7045],{},[232,7044,16],{"href":17}," — add Blossom to your project in one command.",[5881,7047,7048,7050],{},[232,7049,51],{"href":62}," — from a simple slider to cover flow, sticky stacks, and flipbooks.",[1768,7052,7053],{},"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":319,"searchDepth":339,"depth":339,"links":7055},[7056,7057,7058,7059],{"id":6752,"depth":339,"text":6753},{"id":6771,"depth":339,"text":6772},{"id":6916,"depth":339,"text":6917},{"id":6929,"depth":339,"text":6930},"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.",{"image":7063},"\u002Fimages\u002Fabstract\u002Fblossom03.png","\u002Fblog\u002Fintroducing-blossom-carousel",{"title":6735,"description":7061},"blog\u002Fintroducing-blossom-carousel","o8xcSyD5uPjz3nDpr2r5AHcN6n8qiT6M4ZlJrPKLAiM",1784896615279]