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