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