[{"data":1,"prerenderedAt":1723},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-advanced-cover-flow":215,"-docs-examples-advanced-cover-flow-surround":1691,"$fSoLL_rMNAyGHq0-li8uxHUy71Ra9oqZfietPONPwFOc":1696},[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":106,"body":217,"description":1682,"extension":1683,"links":1684,"meta":1685,"navigation":1686,"path":107,"seo":1687,"stem":108,"__hash__":1690},"docs\u002Fdocs\u002F3.examples\u002F2.advanced\u002F1.cover-flow.md",{"type":218,"value":219,"toc":1680},"minimark",[220,234,237,1676],[221,222,223],"supports-view-timeline-support",{},[224,225,226,227],"caution",{},"View-timeline is not yet supported in this browser. Check browser compatibility at ",[228,229,233],"a",{"href":230,"rel":231},"https:\u002F\u002Fcaniuse.com\u002F?search=scroll-snap-change",[232],"nofollow","caniuse.com",[235,236],"example-cover-flow",{},[238,239,241,1165],"tabs",{"sync":240},"example-code-style",[242,243,245],"tabs-item",{"label":244},"CSS",[246,247,248,963],"code-group",{},[249,250,256],"pre",{"className":251,"code":252,"filename":253,"language":254,"meta":255,"style":255},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  padding-inline: calc(50% - 50px);\n  scroll-snap-type: x mandatory;\n}\n\nul {\n  white-space: nowrap;\n  transform-style: preserve-3d;\n}\n\nli {\n  display: inline-block;\n  position: relative;\n  width: 100px;\n  aspect-ratio: 1 \u002F 2;\n  transform-style: preserve-3d;\n  scroll-snap-align: center;\n\n  view-timeline: --slide inline calc(50% - 140px);\n}\n\n.slide {\n  perspective: 500px;\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 200%;\n  aspect-ratio: 1;\n  transform-style: preserve-3d;\n\n  animation: linear slide-cover both;\n  animation-timeline: --slide;\n  animation-range: contain;\n}\n\n.card {\n  width: 100%;\n  height: 100%;\n\n  animation: linear rotate-cover both;\n  animation-timeline: --slide;\n  animation-range: contain;\n}\n\n@keyframes rotate-cover {\n  0% {\n    transform: rotateY(-55deg);\n  }\n  50% {\n    transform: rotateY(0deg);\n  }\n  100% {\n    transform: rotateY(55deg);\n  }\n}\n\n@keyframes slide-cover {\n  0% {\n    transform: translateX(30%);\n  }\n  50% {\n    transform: translateX(0) scale(1.2);\n  }\n  100% {\n    transform: translateX(-30%);\n  }\n}\n",".css","css","",[257,258,259,275,305,320,326,333,341,354,367,372,377,385,398,411,424,443,454,467,472,497,502,507,517,530,542,555,568,580,591,602,607,620,633,646,651,656,666,678,690,695,707,718,729,734,739,752,760,778,784,792,808,813,821,837,842,847,852,862,869,886,891,898,925,930,937,953,958],"code",{"__ignoreMap":255},[260,261,264,268,272],"span",{"class":262,"line":263},"line",1,[260,265,267],{"class":266},"sMK4o",".",[260,269,271],{"class":270},"sBMFI","carousel",[260,273,274],{"class":266}," {\n",[260,276,278,282,285,289,292,296,299,302],{"class":262,"line":277},2,[260,279,281],{"class":280},"sqsOY","  padding-inline",[260,283,284],{"class":266},":",[260,286,288],{"class":287},"s2Zo4"," calc",[260,290,291],{"class":266},"(",[260,293,295],{"class":294},"sbssI","50%",[260,297,298],{"class":266}," -",[260,300,301],{"class":294}," 50px",[260,303,304],{"class":266},");\n",[260,306,308,311,313,317],{"class":262,"line":307},3,[260,309,310],{"class":280},"  scroll-snap-type",[260,312,284],{"class":266},[260,314,316],{"class":315},"sTEyZ"," x mandatory",[260,318,319],{"class":266},";\n",[260,321,323],{"class":262,"line":322},4,[260,324,325],{"class":266},"}\n",[260,327,329],{"class":262,"line":328},5,[260,330,332],{"emptyLinePlaceholder":331},true,"\n",[260,334,336,339],{"class":262,"line":335},6,[260,337,338],{"class":270},"ul",[260,340,274],{"class":266},[260,342,344,347,349,352],{"class":262,"line":343},7,[260,345,346],{"class":280},"  white-space",[260,348,284],{"class":266},[260,350,351],{"class":315}," nowrap",[260,353,319],{"class":266},[260,355,357,360,362,365],{"class":262,"line":356},8,[260,358,359],{"class":280},"  transform-style",[260,361,284],{"class":266},[260,363,364],{"class":315}," preserve-3d",[260,366,319],{"class":266},[260,368,370],{"class":262,"line":369},9,[260,371,325],{"class":266},[260,373,375],{"class":262,"line":374},10,[260,376,332],{"emptyLinePlaceholder":331},[260,378,380,383],{"class":262,"line":379},11,[260,381,382],{"class":270},"li",[260,384,274],{"class":266},[260,386,388,391,393,396],{"class":262,"line":387},12,[260,389,390],{"class":280},"  display",[260,392,284],{"class":266},[260,394,395],{"class":315}," inline-block",[260,397,319],{"class":266},[260,399,401,404,406,409],{"class":262,"line":400},13,[260,402,403],{"class":280},"  position",[260,405,284],{"class":266},[260,407,408],{"class":315}," relative",[260,410,319],{"class":266},[260,412,414,417,419,422],{"class":262,"line":413},14,[260,415,416],{"class":280},"  width",[260,418,284],{"class":266},[260,420,421],{"class":294}," 100px",[260,423,319],{"class":266},[260,425,427,430,432,435,438,441],{"class":262,"line":426},15,[260,428,429],{"class":280},"  aspect-ratio",[260,431,284],{"class":266},[260,433,434],{"class":294}," 1",[260,436,437],{"class":315}," \u002F ",[260,439,440],{"class":294},"2",[260,442,319],{"class":266},[260,444,446,448,450,452],{"class":262,"line":445},16,[260,447,359],{"class":280},[260,449,284],{"class":266},[260,451,364],{"class":315},[260,453,319],{"class":266},[260,455,457,460,462,465],{"class":262,"line":456},17,[260,458,459],{"class":280},"  scroll-snap-align",[260,461,284],{"class":266},[260,463,464],{"class":315}," center",[260,466,319],{"class":266},[260,468,470],{"class":262,"line":469},18,[260,471,332],{"emptyLinePlaceholder":331},[260,473,475,478,480,483,486,488,490,492,495],{"class":262,"line":474},19,[260,476,477],{"class":315},"  view-timeline",[260,479,284],{"class":266},[260,481,482],{"class":315}," --slide inline ",[260,484,485],{"class":287},"calc",[260,487,291],{"class":266},[260,489,295],{"class":294},[260,491,298],{"class":266},[260,493,494],{"class":294}," 140px",[260,496,304],{"class":266},[260,498,500],{"class":262,"line":499},20,[260,501,325],{"class":266},[260,503,505],{"class":262,"line":504},21,[260,506,332],{"emptyLinePlaceholder":331},[260,508,510,512,515],{"class":262,"line":509},22,[260,511,267],{"class":266},[260,513,514],{"class":270},"slide",[260,516,274],{"class":266},[260,518,520,523,525,528],{"class":262,"line":519},23,[260,521,522],{"class":280},"  perspective",[260,524,284],{"class":266},[260,526,527],{"class":294}," 500px",[260,529,319],{"class":266},[260,531,533,535,537,540],{"class":262,"line":532},24,[260,534,403],{"class":280},[260,536,284],{"class":266},[260,538,539],{"class":315}," absolute",[260,541,319],{"class":266},[260,543,545,548,550,553],{"class":262,"line":544},25,[260,546,547],{"class":280},"  top",[260,549,284],{"class":266},[260,551,552],{"class":294}," 0",[260,554,319],{"class":266},[260,556,558,561,563,566],{"class":262,"line":557},26,[260,559,560],{"class":280},"  left",[260,562,284],{"class":266},[260,564,565],{"class":294}," -50%",[260,567,319],{"class":266},[260,569,571,573,575,578],{"class":262,"line":570},27,[260,572,416],{"class":280},[260,574,284],{"class":266},[260,576,577],{"class":294}," 200%",[260,579,319],{"class":266},[260,581,583,585,587,589],{"class":262,"line":582},28,[260,584,429],{"class":280},[260,586,284],{"class":266},[260,588,434],{"class":294},[260,590,319],{"class":266},[260,592,594,596,598,600],{"class":262,"line":593},29,[260,595,359],{"class":280},[260,597,284],{"class":266},[260,599,364],{"class":315},[260,601,319],{"class":266},[260,603,605],{"class":262,"line":604},30,[260,606,332],{"emptyLinePlaceholder":331},[260,608,610,613,615,618],{"class":262,"line":609},31,[260,611,612],{"class":280},"  animation",[260,614,284],{"class":266},[260,616,617],{"class":315}," linear slide-cover both",[260,619,319],{"class":266},[260,621,623,626,628,631],{"class":262,"line":622},32,[260,624,625],{"class":315},"  animation-timeline",[260,627,284],{"class":266},[260,629,630],{"class":315}," --slide",[260,632,319],{"class":266},[260,634,636,639,641,644],{"class":262,"line":635},33,[260,637,638],{"class":315},"  animation-range",[260,640,284],{"class":266},[260,642,643],{"class":315}," contain",[260,645,319],{"class":266},[260,647,649],{"class":262,"line":648},34,[260,650,325],{"class":266},[260,652,654],{"class":262,"line":653},35,[260,655,332],{"emptyLinePlaceholder":331},[260,657,659,661,664],{"class":262,"line":658},36,[260,660,267],{"class":266},[260,662,663],{"class":270},"card",[260,665,274],{"class":266},[260,667,669,671,673,676],{"class":262,"line":668},37,[260,670,416],{"class":280},[260,672,284],{"class":266},[260,674,675],{"class":294}," 100%",[260,677,319],{"class":266},[260,679,681,684,686,688],{"class":262,"line":680},38,[260,682,683],{"class":280},"  height",[260,685,284],{"class":266},[260,687,675],{"class":294},[260,689,319],{"class":266},[260,691,693],{"class":262,"line":692},39,[260,694,332],{"emptyLinePlaceholder":331},[260,696,698,700,702,705],{"class":262,"line":697},40,[260,699,612],{"class":280},[260,701,284],{"class":266},[260,703,704],{"class":315}," linear rotate-cover both",[260,706,319],{"class":266},[260,708,710,712,714,716],{"class":262,"line":709},41,[260,711,625],{"class":315},[260,713,284],{"class":266},[260,715,630],{"class":315},[260,717,319],{"class":266},[260,719,721,723,725,727],{"class":262,"line":720},42,[260,722,638],{"class":315},[260,724,284],{"class":266},[260,726,643],{"class":315},[260,728,319],{"class":266},[260,730,732],{"class":262,"line":731},43,[260,733,325],{"class":266},[260,735,737],{"class":262,"line":736},44,[260,738,332],{"emptyLinePlaceholder":331},[260,740,742,746,750],{"class":262,"line":741},45,[260,743,745],{"class":744},"s7zQu","@keyframes",[260,747,749],{"class":748},"sHdIc"," rotate-cover",[260,751,274],{"class":266},[260,753,755,758],{"class":262,"line":754},46,[260,756,757],{"class":270},"  0%",[260,759,274],{"class":266},[260,761,763,766,768,771,773,776],{"class":262,"line":762},47,[260,764,765],{"class":280},"    transform",[260,767,284],{"class":266},[260,769,770],{"class":287}," rotateY",[260,772,291],{"class":266},[260,774,775],{"class":294},"-55deg",[260,777,304],{"class":266},[260,779,781],{"class":262,"line":780},48,[260,782,783],{"class":266},"  }\n",[260,785,787,790],{"class":262,"line":786},49,[260,788,789],{"class":270},"  50%",[260,791,274],{"class":266},[260,793,795,797,799,801,803,806],{"class":262,"line":794},50,[260,796,765],{"class":280},[260,798,284],{"class":266},[260,800,770],{"class":287},[260,802,291],{"class":266},[260,804,805],{"class":294},"0deg",[260,807,304],{"class":266},[260,809,811],{"class":262,"line":810},51,[260,812,783],{"class":266},[260,814,816,819],{"class":262,"line":815},52,[260,817,818],{"class":270},"  100%",[260,820,274],{"class":266},[260,822,824,826,828,830,832,835],{"class":262,"line":823},53,[260,825,765],{"class":280},[260,827,284],{"class":266},[260,829,770],{"class":287},[260,831,291],{"class":266},[260,833,834],{"class":294},"55deg",[260,836,304],{"class":266},[260,838,840],{"class":262,"line":839},54,[260,841,783],{"class":266},[260,843,845],{"class":262,"line":844},55,[260,846,325],{"class":266},[260,848,850],{"class":262,"line":849},56,[260,851,332],{"emptyLinePlaceholder":331},[260,853,855,857,860],{"class":262,"line":854},57,[260,856,745],{"class":744},[260,858,859],{"class":748}," slide-cover",[260,861,274],{"class":266},[260,863,865,867],{"class":262,"line":864},58,[260,866,757],{"class":270},[260,868,274],{"class":266},[260,870,872,874,876,879,881,884],{"class":262,"line":871},59,[260,873,765],{"class":280},[260,875,284],{"class":266},[260,877,878],{"class":287}," translateX",[260,880,291],{"class":266},[260,882,883],{"class":294},"30%",[260,885,304],{"class":266},[260,887,889],{"class":262,"line":888},60,[260,890,783],{"class":266},[260,892,894,896],{"class":262,"line":893},61,[260,895,789],{"class":270},[260,897,274],{"class":266},[260,899,901,903,905,907,909,912,915,918,920,923],{"class":262,"line":900},62,[260,902,765],{"class":280},[260,904,284],{"class":266},[260,906,878],{"class":287},[260,908,291],{"class":266},[260,910,911],{"class":294},"0",[260,913,914],{"class":266},")",[260,916,917],{"class":287}," scale",[260,919,291],{"class":266},[260,921,922],{"class":294},"1.2",[260,924,304],{"class":266},[260,926,928],{"class":262,"line":927},63,[260,929,783],{"class":266},[260,931,933,935],{"class":262,"line":932},64,[260,934,818],{"class":270},[260,936,274],{"class":266},[260,938,940,942,944,946,948,951],{"class":262,"line":939},65,[260,941,765],{"class":280},[260,943,284],{"class":266},[260,945,878],{"class":287},[260,947,291],{"class":266},[260,949,950],{"class":294},"-30%",[260,952,304],{"class":266},[260,954,956],{"class":262,"line":955},66,[260,957,783],{"class":266},[260,959,961],{"class":262,"line":960},67,[260,962,325],{"class":266},[249,964,969],{"className":965,"code":966,"filename":967,"language":968,"meta":255,"style":255},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBlossomCarousel class=\"carousel\">\n  \u003Cul>\n    \u003Cli>\n      \u003Cdiv class=\"slide\">\n        \u003Cdiv class=\"card\">\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli>\n      \u003Cdiv class=\"slide\">\n        \u003Cdiv class=\"card\">\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    ...\n  \u003C\u002Ful>\n\u003C\u002FBlossomCarousel>\n",".html","html",[257,970,971,998,1007,1016,1036,1060,1069,1078,1086,1104,1126,1134,1142,1147,1156],{"__ignoreMap":255},[260,972,973,976,980,984,987,990,993,995],{"class":262,"line":263},[260,974,975],{"class":266},"\u003C",[260,977,979],{"class":978},"swJcz","BlossomCarousel",[260,981,983],{"class":982},"spNyl"," class",[260,985,986],{"class":266},"=",[260,988,989],{"class":266},"\"",[260,991,271],{"class":992},"sfazB",[260,994,989],{"class":266},[260,996,997],{"class":266},">\n",[260,999,1000,1003,1005],{"class":262,"line":277},[260,1001,1002],{"class":266},"  \u003C",[260,1004,338],{"class":978},[260,1006,997],{"class":266},[260,1008,1009,1012,1014],{"class":262,"line":307},[260,1010,1011],{"class":266},"    \u003C",[260,1013,382],{"class":978},[260,1015,997],{"class":266},[260,1017,1018,1021,1024,1026,1028,1030,1032,1034],{"class":262,"line":322},[260,1019,1020],{"class":266},"      \u003C",[260,1022,1023],{"class":978},"div",[260,1025,983],{"class":982},[260,1027,986],{"class":266},[260,1029,989],{"class":266},[260,1031,514],{"class":992},[260,1033,989],{"class":266},[260,1035,997],{"class":266},[260,1037,1038,1041,1043,1045,1047,1049,1051,1053,1056,1058],{"class":262,"line":328},[260,1039,1040],{"class":266},"        \u003C",[260,1042,1023],{"class":978},[260,1044,983],{"class":982},[260,1046,986],{"class":266},[260,1048,989],{"class":266},[260,1050,663],{"class":992},[260,1052,989],{"class":266},[260,1054,1055],{"class":266},">\u003C\u002F",[260,1057,1023],{"class":978},[260,1059,997],{"class":266},[260,1061,1062,1065,1067],{"class":262,"line":335},[260,1063,1064],{"class":266},"      \u003C\u002F",[260,1066,1023],{"class":978},[260,1068,997],{"class":266},[260,1070,1071,1074,1076],{"class":262,"line":343},[260,1072,1073],{"class":266},"    \u003C\u002F",[260,1075,382],{"class":978},[260,1077,997],{"class":266},[260,1079,1080,1082,1084],{"class":262,"line":356},[260,1081,1011],{"class":266},[260,1083,382],{"class":978},[260,1085,997],{"class":266},[260,1087,1088,1090,1092,1094,1096,1098,1100,1102],{"class":262,"line":369},[260,1089,1020],{"class":266},[260,1091,1023],{"class":978},[260,1093,983],{"class":982},[260,1095,986],{"class":266},[260,1097,989],{"class":266},[260,1099,514],{"class":992},[260,1101,989],{"class":266},[260,1103,997],{"class":266},[260,1105,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124],{"class":262,"line":374},[260,1107,1040],{"class":266},[260,1109,1023],{"class":978},[260,1111,983],{"class":982},[260,1113,986],{"class":266},[260,1115,989],{"class":266},[260,1117,663],{"class":992},[260,1119,989],{"class":266},[260,1121,1055],{"class":266},[260,1123,1023],{"class":978},[260,1125,997],{"class":266},[260,1127,1128,1130,1132],{"class":262,"line":379},[260,1129,1064],{"class":266},[260,1131,1023],{"class":978},[260,1133,997],{"class":266},[260,1135,1136,1138,1140],{"class":262,"line":387},[260,1137,1073],{"class":266},[260,1139,382],{"class":978},[260,1141,997],{"class":266},[260,1143,1144],{"class":262,"line":400},[260,1145,1146],{"class":315},"    ...\n",[260,1148,1149,1152,1154],{"class":262,"line":413},[260,1150,1151],{"class":266},"  \u003C\u002F",[260,1153,338],{"class":978},[260,1155,997],{"class":266},[260,1157,1158,1161,1163],{"class":262,"line":426},[260,1159,1160],{"class":266},"\u003C\u002F",[260,1162,979],{"class":978},[260,1164,997],{"class":266},[242,1166,1168],{"label":1167},"Tailwind",[246,1169,1170,1481],{},[249,1171,1173],{"className":251,"code":1172,"filename":253,"language":254,"meta":255,"style":255},"li {\n  view-timeline: --slide inline calc(50% - 140px);\n}\n\n.slide {\n  animation: linear slide-cover both;\n  animation-timeline: --slide;\n  animation-range: contain;\n}\n\n.card {\n  animation: linear rotate-cover both;\n  animation-timeline: --slide;\n  animation-range: contain;\n}\n\n@keyframes rotate-cover {\n  0% {\n    transform: rotateY(-55deg);\n  }\n  50% {\n    transform: rotateY(0deg);\n  }\n  100% {\n    transform: rotateY(55deg);\n  }\n}\n\n@keyframes slide-cover {\n  0% {\n    transform: translateX(30%);\n  }\n  50% {\n    transform: translateX(0) scale(1.2);\n  }\n  100% {\n    transform: translateX(-30%);\n  }\n}\n",[257,1174,1175,1181,1201,1205,1209,1217,1227,1237,1247,1251,1255,1263,1273,1283,1293,1297,1301,1309,1315,1329,1333,1339,1353,1357,1363,1377,1381,1385,1389,1397,1403,1417,1421,1427,1449,1453,1459,1473,1477],{"__ignoreMap":255},[260,1176,1177,1179],{"class":262,"line":263},[260,1178,382],{"class":270},[260,1180,274],{"class":266},[260,1182,1183,1185,1187,1189,1191,1193,1195,1197,1199],{"class":262,"line":277},[260,1184,477],{"class":315},[260,1186,284],{"class":266},[260,1188,482],{"class":315},[260,1190,485],{"class":287},[260,1192,291],{"class":266},[260,1194,295],{"class":294},[260,1196,298],{"class":266},[260,1198,494],{"class":294},[260,1200,304],{"class":266},[260,1202,1203],{"class":262,"line":307},[260,1204,325],{"class":266},[260,1206,1207],{"class":262,"line":322},[260,1208,332],{"emptyLinePlaceholder":331},[260,1210,1211,1213,1215],{"class":262,"line":328},[260,1212,267],{"class":266},[260,1214,514],{"class":270},[260,1216,274],{"class":266},[260,1218,1219,1221,1223,1225],{"class":262,"line":335},[260,1220,612],{"class":280},[260,1222,284],{"class":266},[260,1224,617],{"class":315},[260,1226,319],{"class":266},[260,1228,1229,1231,1233,1235],{"class":262,"line":343},[260,1230,625],{"class":315},[260,1232,284],{"class":266},[260,1234,630],{"class":315},[260,1236,319],{"class":266},[260,1238,1239,1241,1243,1245],{"class":262,"line":356},[260,1240,638],{"class":315},[260,1242,284],{"class":266},[260,1244,643],{"class":315},[260,1246,319],{"class":266},[260,1248,1249],{"class":262,"line":369},[260,1250,325],{"class":266},[260,1252,1253],{"class":262,"line":374},[260,1254,332],{"emptyLinePlaceholder":331},[260,1256,1257,1259,1261],{"class":262,"line":379},[260,1258,267],{"class":266},[260,1260,663],{"class":270},[260,1262,274],{"class":266},[260,1264,1265,1267,1269,1271],{"class":262,"line":387},[260,1266,612],{"class":280},[260,1268,284],{"class":266},[260,1270,704],{"class":315},[260,1272,319],{"class":266},[260,1274,1275,1277,1279,1281],{"class":262,"line":400},[260,1276,625],{"class":315},[260,1278,284],{"class":266},[260,1280,630],{"class":315},[260,1282,319],{"class":266},[260,1284,1285,1287,1289,1291],{"class":262,"line":413},[260,1286,638],{"class":315},[260,1288,284],{"class":266},[260,1290,643],{"class":315},[260,1292,319],{"class":266},[260,1294,1295],{"class":262,"line":426},[260,1296,325],{"class":266},[260,1298,1299],{"class":262,"line":445},[260,1300,332],{"emptyLinePlaceholder":331},[260,1302,1303,1305,1307],{"class":262,"line":456},[260,1304,745],{"class":744},[260,1306,749],{"class":748},[260,1308,274],{"class":266},[260,1310,1311,1313],{"class":262,"line":469},[260,1312,757],{"class":270},[260,1314,274],{"class":266},[260,1316,1317,1319,1321,1323,1325,1327],{"class":262,"line":474},[260,1318,765],{"class":280},[260,1320,284],{"class":266},[260,1322,770],{"class":287},[260,1324,291],{"class":266},[260,1326,775],{"class":294},[260,1328,304],{"class":266},[260,1330,1331],{"class":262,"line":499},[260,1332,783],{"class":266},[260,1334,1335,1337],{"class":262,"line":504},[260,1336,789],{"class":270},[260,1338,274],{"class":266},[260,1340,1341,1343,1345,1347,1349,1351],{"class":262,"line":509},[260,1342,765],{"class":280},[260,1344,284],{"class":266},[260,1346,770],{"class":287},[260,1348,291],{"class":266},[260,1350,805],{"class":294},[260,1352,304],{"class":266},[260,1354,1355],{"class":262,"line":519},[260,1356,783],{"class":266},[260,1358,1359,1361],{"class":262,"line":532},[260,1360,818],{"class":270},[260,1362,274],{"class":266},[260,1364,1365,1367,1369,1371,1373,1375],{"class":262,"line":544},[260,1366,765],{"class":280},[260,1368,284],{"class":266},[260,1370,770],{"class":287},[260,1372,291],{"class":266},[260,1374,834],{"class":294},[260,1376,304],{"class":266},[260,1378,1379],{"class":262,"line":557},[260,1380,783],{"class":266},[260,1382,1383],{"class":262,"line":570},[260,1384,325],{"class":266},[260,1386,1387],{"class":262,"line":582},[260,1388,332],{"emptyLinePlaceholder":331},[260,1390,1391,1393,1395],{"class":262,"line":593},[260,1392,745],{"class":744},[260,1394,859],{"class":748},[260,1396,274],{"class":266},[260,1398,1399,1401],{"class":262,"line":604},[260,1400,757],{"class":270},[260,1402,274],{"class":266},[260,1404,1405,1407,1409,1411,1413,1415],{"class":262,"line":609},[260,1406,765],{"class":280},[260,1408,284],{"class":266},[260,1410,878],{"class":287},[260,1412,291],{"class":266},[260,1414,883],{"class":294},[260,1416,304],{"class":266},[260,1418,1419],{"class":262,"line":622},[260,1420,783],{"class":266},[260,1422,1423,1425],{"class":262,"line":635},[260,1424,789],{"class":270},[260,1426,274],{"class":266},[260,1428,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447],{"class":262,"line":648},[260,1430,765],{"class":280},[260,1432,284],{"class":266},[260,1434,878],{"class":287},[260,1436,291],{"class":266},[260,1438,911],{"class":294},[260,1440,914],{"class":266},[260,1442,917],{"class":287},[260,1444,291],{"class":266},[260,1446,922],{"class":294},[260,1448,304],{"class":266},[260,1450,1451],{"class":262,"line":653},[260,1452,783],{"class":266},[260,1454,1455,1457],{"class":262,"line":658},[260,1456,818],{"class":270},[260,1458,274],{"class":266},[260,1460,1461,1463,1465,1467,1469,1471],{"class":262,"line":668},[260,1462,765],{"class":280},[260,1464,284],{"class":266},[260,1466,878],{"class":287},[260,1468,291],{"class":266},[260,1470,950],{"class":294},[260,1472,304],{"class":266},[260,1474,1475],{"class":262,"line":680},[260,1476,783],{"class":266},[260,1478,1479],{"class":262,"line":692},[260,1480,325],{"class":266},[249,1482,1484],{"className":965,"code":1483,"filename":967,"language":968,"meta":255,"style":255},"\u003CBlossomCarousel class=\"py-24 snap-x snap-mandatory px-[calc(50%-50px)]!\">\n  \u003Cul class=\"whitespace-nowrap! transform-3d\">\n    \u003Cli\n      v-for=\"i in 12\"\n      :key=\"i\"\n      class=\"inline-block! relative transform-3d snap-center w-[100px] aspect-1\u002F2 even:*:*:bg-primary-400\"\n    >\n      \u003Cdiv\n        class=\"perspective-normal slide absolute transform-3d top-0 -left-1\u002F2 aspect-square w-[200%]\"\n      >\n        \u003Cdiv\n          class=\"card bg-primary rounded-lg flex items-center justify-center text-2xl font-bold text-white size-full\"\n        >\n          {{ i }}\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002FBlossomCarousel>\n",[257,1485,1486,1505,1524,1531,1546,1560,1574,1579,1586,1600,1605,1611,1625,1630,1635,1644,1652,1660,1668],{"__ignoreMap":255},[260,1487,1488,1490,1492,1494,1496,1498,1501,1503],{"class":262,"line":263},[260,1489,975],{"class":266},[260,1491,979],{"class":978},[260,1493,983],{"class":982},[260,1495,986],{"class":266},[260,1497,989],{"class":266},[260,1499,1500],{"class":992},"py-24 snap-x snap-mandatory px-[calc(50%-50px)]!",[260,1502,989],{"class":266},[260,1504,997],{"class":266},[260,1506,1507,1509,1511,1513,1515,1517,1520,1522],{"class":262,"line":277},[260,1508,1002],{"class":266},[260,1510,338],{"class":978},[260,1512,983],{"class":982},[260,1514,986],{"class":266},[260,1516,989],{"class":266},[260,1518,1519],{"class":992},"whitespace-nowrap! transform-3d",[260,1521,989],{"class":266},[260,1523,997],{"class":266},[260,1525,1526,1528],{"class":262,"line":307},[260,1527,1011],{"class":266},[260,1529,1530],{"class":978},"li\n",[260,1532,1533,1536,1538,1540,1543],{"class":262,"line":322},[260,1534,1535],{"class":982},"      v-for",[260,1537,986],{"class":266},[260,1539,989],{"class":266},[260,1541,1542],{"class":992},"i in 12",[260,1544,1545],{"class":266},"\"\n",[260,1547,1548,1551,1553,1555,1558],{"class":262,"line":328},[260,1549,1550],{"class":982},"      :key",[260,1552,986],{"class":266},[260,1554,989],{"class":266},[260,1556,1557],{"class":992},"i",[260,1559,1545],{"class":266},[260,1561,1562,1565,1567,1569,1572],{"class":262,"line":335},[260,1563,1564],{"class":982},"      class",[260,1566,986],{"class":266},[260,1568,989],{"class":266},[260,1570,1571],{"class":992},"inline-block! relative transform-3d snap-center w-[100px] aspect-1\u002F2 even:*:*:bg-primary-400",[260,1573,1545],{"class":266},[260,1575,1576],{"class":262,"line":343},[260,1577,1578],{"class":266},"    >\n",[260,1580,1581,1583],{"class":262,"line":356},[260,1582,1020],{"class":266},[260,1584,1585],{"class":978},"div\n",[260,1587,1588,1591,1593,1595,1598],{"class":262,"line":369},[260,1589,1590],{"class":982},"        class",[260,1592,986],{"class":266},[260,1594,989],{"class":266},[260,1596,1597],{"class":992},"perspective-normal slide absolute transform-3d top-0 -left-1\u002F2 aspect-square w-[200%]",[260,1599,1545],{"class":266},[260,1601,1602],{"class":262,"line":374},[260,1603,1604],{"class":266},"      >\n",[260,1606,1607,1609],{"class":262,"line":379},[260,1608,1040],{"class":266},[260,1610,1585],{"class":978},[260,1612,1613,1616,1618,1620,1623],{"class":262,"line":387},[260,1614,1615],{"class":982},"          class",[260,1617,986],{"class":266},[260,1619,989],{"class":266},[260,1621,1622],{"class":992},"card bg-primary rounded-lg flex items-center justify-center text-2xl font-bold text-white size-full",[260,1624,1545],{"class":266},[260,1626,1627],{"class":262,"line":400},[260,1628,1629],{"class":266},"        >\n",[260,1631,1632],{"class":262,"line":413},[260,1633,1634],{"class":315},"          {{ i }}\n",[260,1636,1637,1640,1642],{"class":262,"line":426},[260,1638,1639],{"class":266},"        \u003C\u002F",[260,1641,1023],{"class":978},[260,1643,997],{"class":266},[260,1645,1646,1648,1650],{"class":262,"line":445},[260,1647,1064],{"class":266},[260,1649,1023],{"class":978},[260,1651,997],{"class":266},[260,1653,1654,1656,1658],{"class":262,"line":456},[260,1655,1073],{"class":266},[260,1657,382],{"class":978},[260,1659,997],{"class":266},[260,1661,1662,1664,1666],{"class":262,"line":469},[260,1663,1151],{"class":266},[260,1665,338],{"class":978},[260,1667,997],{"class":266},[260,1669,1670,1672,1674],{"class":262,"line":474},[260,1671,1160],{"class":266},[260,1673,979],{"class":978},[260,1675,997],{"class":266},[1677,1678,1679],"style",{},"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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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}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}",{"title":255,"searchDepth":277,"depth":277,"links":1681},[],"Create a cover-flow carousel effect with CSS scroll-driven animations.","md",null,{},{"icon":109},{"title":1688,"description":1689},"Cover-flow carousel example with Blossom Carousel","Create a cover-flow style carousel using Blossom Carousel and CSS scroll-driven animations.","C3EKF7oAsI8pxy6XLFw6xnk_TmUJFGeXrRBtp_FJEVw",[1692,1694],{"title":96,"path":97,"stem":98,"description":1693,"icon":99,"children":-1},"Add interactive thumbnail navigation with IntersectionObserver.",{"title":111,"path":112,"stem":113,"description":1695,"icon":114,"children":-1},"Create a slideshow with parallax effects.",{"baselineBadge":1697,"browserBadges":1701,"sources":1718,"updatedAt":1722},{"label":1698,"value":1699,"title":1700},"Baseline","Limited","view-timeline is not Baseline yet in the WebDX web-features data.",[1702,1706,1709,1714],{"browser":1703,"version":1704,"title":1705},"Chrome","115+","Chrome supports view-timeline from version 115.",{"browser":1707,"version":1704,"title":1708},"Edge","Edge supports view-timeline from version 115.",{"browser":1710,"version":1711,"note":1712,"title":1713},"Firefox","114+","flag","Firefox supports view-timeline from version 114 with a browser flag enabled.",{"browser":1715,"version":1716,"title":1717},"Safari","26+","Safari supports view-timeline from version 26.",{"bcd":1719,"mdn":1720,"webFeatures":1721},"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-05-31T14:53:11.753Z",1780251489970]