[{"data":1,"prerenderedAt":1457},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-advanced-smart-stack":215,"-docs-examples-advanced-smart-stack-surround":1425,"$fSoLL_rMNAyGHq0-li8uxHUy71Ra9oqZfietPONPwFOc":1430},[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":121,"body":217,"description":1416,"extension":1417,"links":1418,"meta":1419,"navigation":1420,"path":122,"seo":1421,"stem":123,"__hash__":1424},"docs\u002Fdocs\u002F3.examples\u002F2.advanced\u002F3.smart-stack.md",{"type":218,"value":219,"toc":1414},"minimark",[220,234,237,1410],[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-smart-stack",{},[238,239,241,1011],"tabs",{"sync":240},"example-code-style",[242,243,245],"tabs-item",{"label":244},"CSS",[246,247,248,785],"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",".widget {\n  width: 160px;\n  height: 160px;\n  overflow: clip;\n  background: red;\n  border-radius: 2rem;\n}\n\n.smart-stack {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 100%;\n  height: 100%;\n  scroll-snap-type: x mandatory;\n\n  & .slide {\n    view-timeline: --slide inline 30%;\n\n    & .slide-content {\n      animation: slide cubic-bezier(0, 0.5, 1, 0.5) both;\n      animation-timeline: --slide;\n      animation-range: cover;\n    }\n  }\n}\n\n.slide {\n  width: 100%;\n  height: 100%;\n  scroll-snap-align: center;\n  scroll-snap-stop: always;\n}\n\n.slide-content {\n  width: 100%;\n  height: 100%;\n  background: blue;\n  border-radius: 2rem;\n}\n\n@keyframes slide {\n  0% {\n    scale: 0.8;\n  }\n  50% {\n    scale: 1;\n  }\n  100% {\n    scale: 0.8;\n  }\n}\n",".css","css","",[257,258,259,275,292,304,318,331,344,350,357,367,380,393,406,417,430,435,441,457,462,468,512,525,538,544,550,555,560,570,581,592,605,618,623,628,638,649,660,672,683,688,693,706,714,727,732,740,751,756,764,775,780],"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","widget",[260,273,274],{"class":266}," {\n",[260,276,278,282,285,289],{"class":262,"line":277},2,[260,279,281],{"class":280},"sqsOY","  width",[260,283,284],{"class":266},":",[260,286,288],{"class":287},"sbssI"," 160px",[260,290,291],{"class":266},";\n",[260,293,295,298,300,302],{"class":262,"line":294},3,[260,296,297],{"class":280},"  height",[260,299,284],{"class":266},[260,301,288],{"class":287},[260,303,291],{"class":266},[260,305,307,310,312,316],{"class":262,"line":306},4,[260,308,309],{"class":280},"  overflow",[260,311,284],{"class":266},[260,313,315],{"class":314},"sTEyZ"," clip",[260,317,291],{"class":266},[260,319,321,324,326,329],{"class":262,"line":320},5,[260,322,323],{"class":280},"  background",[260,325,284],{"class":266},[260,327,328],{"class":314}," red",[260,330,291],{"class":266},[260,332,334,337,339,342],{"class":262,"line":333},6,[260,335,336],{"class":280},"  border-radius",[260,338,284],{"class":266},[260,340,341],{"class":287}," 2rem",[260,343,291],{"class":266},[260,345,347],{"class":262,"line":346},7,[260,348,349],{"class":266},"}\n",[260,351,353],{"class":262,"line":352},8,[260,354,356],{"emptyLinePlaceholder":355},true,"\n",[260,358,360,362,365],{"class":262,"line":359},9,[260,361,267],{"class":266},[260,363,364],{"class":270},"smart-stack",[260,366,274],{"class":266},[260,368,370,373,375,378],{"class":262,"line":369},10,[260,371,372],{"class":280},"  display",[260,374,284],{"class":266},[260,376,377],{"class":314}," grid",[260,379,291],{"class":266},[260,381,383,386,388,391],{"class":262,"line":382},11,[260,384,385],{"class":280},"  grid-auto-flow",[260,387,284],{"class":266},[260,389,390],{"class":314}," column",[260,392,291],{"class":266},[260,394,396,399,401,404],{"class":262,"line":395},12,[260,397,398],{"class":280},"  grid-auto-columns",[260,400,284],{"class":266},[260,402,403],{"class":287}," 100%",[260,405,291],{"class":266},[260,407,409,411,413,415],{"class":262,"line":408},13,[260,410,297],{"class":280},[260,412,284],{"class":266},[260,414,403],{"class":287},[260,416,291],{"class":266},[260,418,420,423,425,428],{"class":262,"line":419},14,[260,421,422],{"class":280},"  scroll-snap-type",[260,424,284],{"class":266},[260,426,427],{"class":314}," x mandatory",[260,429,291],{"class":266},[260,431,433],{"class":262,"line":432},15,[260,434,356],{"emptyLinePlaceholder":355},[260,436,438],{"class":262,"line":437},16,[260,439,440],{"class":314},"  & .slide {\n",[260,442,444,447,449,452,455],{"class":262,"line":443},17,[260,445,446],{"class":314},"    view-timeline",[260,448,284],{"class":266},[260,450,451],{"class":314}," --slide inline ",[260,453,454],{"class":287},"30%",[260,456,291],{"class":266},[260,458,460],{"class":262,"line":459},18,[260,461,356],{"emptyLinePlaceholder":355},[260,463,465],{"class":262,"line":464},19,[260,466,467],{"class":314},"    & .slide-content {\n",[260,469,471,474,476,479,483,486,489,492,495,497,500,502,504,507,510],{"class":262,"line":470},20,[260,472,473],{"class":280},"      animation",[260,475,284],{"class":266},[260,477,478],{"class":314}," slide ",[260,480,482],{"class":481},"s2Zo4","cubic-bezier",[260,484,485],{"class":266},"(",[260,487,488],{"class":287},"0",[260,490,491],{"class":266},",",[260,493,494],{"class":287}," 0.5",[260,496,491],{"class":266},[260,498,499],{"class":287}," 1",[260,501,491],{"class":266},[260,503,494],{"class":287},[260,505,506],{"class":266},")",[260,508,509],{"class":314}," both",[260,511,291],{"class":266},[260,513,515,518,520,523],{"class":262,"line":514},21,[260,516,517],{"class":314},"      animation-timeline",[260,519,284],{"class":266},[260,521,522],{"class":314}," --slide",[260,524,291],{"class":266},[260,526,528,531,533,536],{"class":262,"line":527},22,[260,529,530],{"class":314},"      animation-range",[260,532,284],{"class":266},[260,534,535],{"class":314}," cover",[260,537,291],{"class":266},[260,539,541],{"class":262,"line":540},23,[260,542,543],{"class":266},"    }\n",[260,545,547],{"class":262,"line":546},24,[260,548,549],{"class":314},"  }\n",[260,551,553],{"class":262,"line":552},25,[260,554,349],{"class":314},[260,556,558],{"class":262,"line":557},26,[260,559,356],{"emptyLinePlaceholder":355},[260,561,563,565,568],{"class":262,"line":562},27,[260,564,267],{"class":266},[260,566,567],{"class":270},"slide",[260,569,274],{"class":266},[260,571,573,575,577,579],{"class":262,"line":572},28,[260,574,281],{"class":280},[260,576,284],{"class":266},[260,578,403],{"class":287},[260,580,291],{"class":266},[260,582,584,586,588,590],{"class":262,"line":583},29,[260,585,297],{"class":280},[260,587,284],{"class":266},[260,589,403],{"class":287},[260,591,291],{"class":266},[260,593,595,598,600,603],{"class":262,"line":594},30,[260,596,597],{"class":280},"  scroll-snap-align",[260,599,284],{"class":266},[260,601,602],{"class":314}," center",[260,604,291],{"class":266},[260,606,608,611,613,616],{"class":262,"line":607},31,[260,609,610],{"class":280},"  scroll-snap-stop",[260,612,284],{"class":266},[260,614,615],{"class":314}," always",[260,617,291],{"class":266},[260,619,621],{"class":262,"line":620},32,[260,622,349],{"class":266},[260,624,626],{"class":262,"line":625},33,[260,627,356],{"emptyLinePlaceholder":355},[260,629,631,633,636],{"class":262,"line":630},34,[260,632,267],{"class":266},[260,634,635],{"class":270},"slide-content",[260,637,274],{"class":266},[260,639,641,643,645,647],{"class":262,"line":640},35,[260,642,281],{"class":280},[260,644,284],{"class":266},[260,646,403],{"class":287},[260,648,291],{"class":266},[260,650,652,654,656,658],{"class":262,"line":651},36,[260,653,297],{"class":280},[260,655,284],{"class":266},[260,657,403],{"class":287},[260,659,291],{"class":266},[260,661,663,665,667,670],{"class":262,"line":662},37,[260,664,323],{"class":280},[260,666,284],{"class":266},[260,668,669],{"class":314}," blue",[260,671,291],{"class":266},[260,673,675,677,679,681],{"class":262,"line":674},38,[260,676,336],{"class":280},[260,678,284],{"class":266},[260,680,341],{"class":287},[260,682,291],{"class":266},[260,684,686],{"class":262,"line":685},39,[260,687,349],{"class":266},[260,689,691],{"class":262,"line":690},40,[260,692,356],{"emptyLinePlaceholder":355},[260,694,696,700,704],{"class":262,"line":695},41,[260,697,699],{"class":698},"s7zQu","@keyframes",[260,701,703],{"class":702},"sHdIc"," slide",[260,705,274],{"class":266},[260,707,709,712],{"class":262,"line":708},42,[260,710,711],{"class":270},"  0%",[260,713,274],{"class":266},[260,715,717,720,722,725],{"class":262,"line":716},43,[260,718,719],{"class":280},"    scale",[260,721,284],{"class":266},[260,723,724],{"class":287}," 0.8",[260,726,291],{"class":266},[260,728,730],{"class":262,"line":729},44,[260,731,549],{"class":266},[260,733,735,738],{"class":262,"line":734},45,[260,736,737],{"class":270},"  50%",[260,739,274],{"class":266},[260,741,743,745,747,749],{"class":262,"line":742},46,[260,744,719],{"class":280},[260,746,284],{"class":266},[260,748,499],{"class":287},[260,750,291],{"class":266},[260,752,754],{"class":262,"line":753},47,[260,755,549],{"class":266},[260,757,759,762],{"class":262,"line":758},48,[260,760,761],{"class":270},"  100%",[260,763,274],{"class":266},[260,765,767,769,771,773],{"class":262,"line":766},49,[260,768,719],{"class":280},[260,770,284],{"class":266},[260,772,724],{"class":287},[260,774,291],{"class":266},[260,776,778],{"class":262,"line":777},50,[260,779,549],{"class":266},[260,781,783],{"class":262,"line":782},51,[260,784,349],{"class":266},[249,786,791],{"className":787,"code":788,"filename":789,"language":790,"meta":255,"style":255},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"widget\">\n  \u003CBlossomCarousel class=\"smart-stack\">\n    \u003Cdiv class=\"slide\">\n      \u003Cdiv class=\"slide-content\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"slide\">\n      \u003Cdiv class=\"slide-content\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"slide\">\n      \u003Cdiv class=\"slide-content\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    ...\n  \u003C\u002FBlossomCarousel>\n\u003C\u002Fdiv>\n",".html","html",[257,792,793,820,840,859,883,892,910,932,940,958,980,988,993,1002],{"__ignoreMap":255},[260,794,795,798,802,806,809,812,815,817],{"class":262,"line":263},[260,796,797],{"class":266},"\u003C",[260,799,801],{"class":800},"swJcz","div",[260,803,805],{"class":804},"spNyl"," class",[260,807,808],{"class":266},"=",[260,810,811],{"class":266},"\"",[260,813,271],{"class":814},"sfazB",[260,816,811],{"class":266},[260,818,819],{"class":266},">\n",[260,821,822,825,828,830,832,834,836,838],{"class":262,"line":277},[260,823,824],{"class":266},"  \u003C",[260,826,827],{"class":800},"BlossomCarousel",[260,829,805],{"class":804},[260,831,808],{"class":266},[260,833,811],{"class":266},[260,835,364],{"class":814},[260,837,811],{"class":266},[260,839,819],{"class":266},[260,841,842,845,847,849,851,853,855,857],{"class":262,"line":294},[260,843,844],{"class":266},"    \u003C",[260,846,801],{"class":800},[260,848,805],{"class":804},[260,850,808],{"class":266},[260,852,811],{"class":266},[260,854,567],{"class":814},[260,856,811],{"class":266},[260,858,819],{"class":266},[260,860,861,864,866,868,870,872,874,876,879,881],{"class":262,"line":306},[260,862,863],{"class":266},"      \u003C",[260,865,801],{"class":800},[260,867,805],{"class":804},[260,869,808],{"class":266},[260,871,811],{"class":266},[260,873,635],{"class":814},[260,875,811],{"class":266},[260,877,878],{"class":266},">\u003C\u002F",[260,880,801],{"class":800},[260,882,819],{"class":266},[260,884,885,888,890],{"class":262,"line":320},[260,886,887],{"class":266},"    \u003C\u002F",[260,889,801],{"class":800},[260,891,819],{"class":266},[260,893,894,896,898,900,902,904,906,908],{"class":262,"line":333},[260,895,844],{"class":266},[260,897,801],{"class":800},[260,899,805],{"class":804},[260,901,808],{"class":266},[260,903,811],{"class":266},[260,905,567],{"class":814},[260,907,811],{"class":266},[260,909,819],{"class":266},[260,911,912,914,916,918,920,922,924,926,928,930],{"class":262,"line":346},[260,913,863],{"class":266},[260,915,801],{"class":800},[260,917,805],{"class":804},[260,919,808],{"class":266},[260,921,811],{"class":266},[260,923,635],{"class":814},[260,925,811],{"class":266},[260,927,878],{"class":266},[260,929,801],{"class":800},[260,931,819],{"class":266},[260,933,934,936,938],{"class":262,"line":352},[260,935,887],{"class":266},[260,937,801],{"class":800},[260,939,819],{"class":266},[260,941,942,944,946,948,950,952,954,956],{"class":262,"line":359},[260,943,844],{"class":266},[260,945,801],{"class":800},[260,947,805],{"class":804},[260,949,808],{"class":266},[260,951,811],{"class":266},[260,953,567],{"class":814},[260,955,811],{"class":266},[260,957,819],{"class":266},[260,959,960,962,964,966,968,970,972,974,976,978],{"class":262,"line":369},[260,961,863],{"class":266},[260,963,801],{"class":800},[260,965,805],{"class":804},[260,967,808],{"class":266},[260,969,811],{"class":266},[260,971,635],{"class":814},[260,973,811],{"class":266},[260,975,878],{"class":266},[260,977,801],{"class":800},[260,979,819],{"class":266},[260,981,982,984,986],{"class":262,"line":382},[260,983,887],{"class":266},[260,985,801],{"class":800},[260,987,819],{"class":266},[260,989,990],{"class":262,"line":395},[260,991,992],{"class":314},"    ...\n",[260,994,995,998,1000],{"class":262,"line":408},[260,996,997],{"class":266},"  \u003C\u002F",[260,999,827],{"class":800},[260,1001,819],{"class":266},[260,1003,1004,1007,1009],{"class":262,"line":419},[260,1005,1006],{"class":266},"\u003C\u002F",[260,1008,801],{"class":800},[260,1010,819],{"class":266},[242,1012,1014],{"label":1013},"Tailwind",[246,1015,1016,1193],{},[249,1017,1019],{"className":251,"code":1018,"filename":253,"language":254,"meta":255,"style":255},".smart-stack {\n  & .slide {\n    view-timeline: --slide inline 30%;\n\n    & .slide-content {\n      animation: slide cubic-bezier(0, 0.5, 1, 0.5) both;\n      animation-timeline: --slide;\n      animation-range: cover;\n    }\n  }\n}\n\n@keyframes slide {\n  0% {\n    scale: 0.8;\n  }\n  50% {\n    scale: 1;\n  }\n  100% {\n    scale: 0.8;\n  }\n}\n",[257,1020,1021,1029,1033,1045,1049,1053,1085,1095,1105,1109,1113,1117,1121,1129,1135,1145,1149,1155,1165,1169,1175,1185,1189],{"__ignoreMap":255},[260,1022,1023,1025,1027],{"class":262,"line":263},[260,1024,267],{"class":266},[260,1026,364],{"class":270},[260,1028,274],{"class":266},[260,1030,1031],{"class":262,"line":277},[260,1032,440],{"class":314},[260,1034,1035,1037,1039,1041,1043],{"class":262,"line":294},[260,1036,446],{"class":314},[260,1038,284],{"class":266},[260,1040,451],{"class":314},[260,1042,454],{"class":287},[260,1044,291],{"class":266},[260,1046,1047],{"class":262,"line":306},[260,1048,356],{"emptyLinePlaceholder":355},[260,1050,1051],{"class":262,"line":320},[260,1052,467],{"class":314},[260,1054,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083],{"class":262,"line":333},[260,1056,473],{"class":280},[260,1058,284],{"class":266},[260,1060,478],{"class":314},[260,1062,482],{"class":481},[260,1064,485],{"class":266},[260,1066,488],{"class":287},[260,1068,491],{"class":266},[260,1070,494],{"class":287},[260,1072,491],{"class":266},[260,1074,499],{"class":287},[260,1076,491],{"class":266},[260,1078,494],{"class":287},[260,1080,506],{"class":266},[260,1082,509],{"class":314},[260,1084,291],{"class":266},[260,1086,1087,1089,1091,1093],{"class":262,"line":346},[260,1088,517],{"class":314},[260,1090,284],{"class":266},[260,1092,522],{"class":314},[260,1094,291],{"class":266},[260,1096,1097,1099,1101,1103],{"class":262,"line":352},[260,1098,530],{"class":314},[260,1100,284],{"class":266},[260,1102,535],{"class":314},[260,1104,291],{"class":266},[260,1106,1107],{"class":262,"line":359},[260,1108,543],{"class":266},[260,1110,1111],{"class":262,"line":369},[260,1112,549],{"class":314},[260,1114,1115],{"class":262,"line":382},[260,1116,349],{"class":314},[260,1118,1119],{"class":262,"line":395},[260,1120,356],{"emptyLinePlaceholder":355},[260,1122,1123,1125,1127],{"class":262,"line":408},[260,1124,699],{"class":698},[260,1126,703],{"class":702},[260,1128,274],{"class":266},[260,1130,1131,1133],{"class":262,"line":419},[260,1132,711],{"class":270},[260,1134,274],{"class":266},[260,1136,1137,1139,1141,1143],{"class":262,"line":432},[260,1138,719],{"class":280},[260,1140,284],{"class":266},[260,1142,724],{"class":287},[260,1144,291],{"class":266},[260,1146,1147],{"class":262,"line":437},[260,1148,549],{"class":266},[260,1150,1151,1153],{"class":262,"line":443},[260,1152,737],{"class":270},[260,1154,274],{"class":266},[260,1156,1157,1159,1161,1163],{"class":262,"line":459},[260,1158,719],{"class":280},[260,1160,284],{"class":266},[260,1162,499],{"class":287},[260,1164,291],{"class":266},[260,1166,1167],{"class":262,"line":464},[260,1168,549],{"class":266},[260,1170,1171,1173],{"class":262,"line":470},[260,1172,761],{"class":270},[260,1174,274],{"class":266},[260,1176,1177,1179,1181,1183],{"class":262,"line":514},[260,1178,719],{"class":280},[260,1180,284],{"class":266},[260,1182,724],{"class":287},[260,1184,291],{"class":266},[260,1186,1187],{"class":262,"line":527},[260,1188,549],{"class":266},[260,1190,1191],{"class":262,"line":540},[260,1192,349],{"class":266},[249,1194,1196],{"className":787,"code":1195,"filename":789,"language":790,"meta":255,"style":255},"\u003Cdiv class=\"size-40 aspect-square overflow-clip bg-primary\u002F30 rounded-xl\">\n  \u003CBlossomCarousel\n    class=\"smart-stack snap-x snap-mandatory grid! grid-flow-col auto-cols-[100%] h-full\"\n  >\n    \u003Cdiv class=\"size-full snap-center snap-always\">\n      \u003Cdiv class=\"size-full rounded-lg bg-primary rounded-xl\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"size-full snap-center snap-always\">\n      \u003Cdiv class=\"size-full rounded-lg bg-primary rounded-xl\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"size-full snap-center snap-always\">\n      \u003Cdiv class=\"size-full rounded-lg bg-primary rounded-xl\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    ...\n  \u003C\u002FBlossomCarousel>\n\u003C\u002Fdiv>\n",[257,1197,1198,1217,1224,1239,1244,1263,1286,1294,1312,1334,1342,1360,1382,1390,1394,1402],{"__ignoreMap":255},[260,1199,1200,1202,1204,1206,1208,1210,1213,1215],{"class":262,"line":263},[260,1201,797],{"class":266},[260,1203,801],{"class":800},[260,1205,805],{"class":804},[260,1207,808],{"class":266},[260,1209,811],{"class":266},[260,1211,1212],{"class":814},"size-40 aspect-square overflow-clip bg-primary\u002F30 rounded-xl",[260,1214,811],{"class":266},[260,1216,819],{"class":266},[260,1218,1219,1221],{"class":262,"line":277},[260,1220,824],{"class":266},[260,1222,1223],{"class":800},"BlossomCarousel\n",[260,1225,1226,1229,1231,1233,1236],{"class":262,"line":294},[260,1227,1228],{"class":804},"    class",[260,1230,808],{"class":266},[260,1232,811],{"class":266},[260,1234,1235],{"class":814},"smart-stack snap-x snap-mandatory grid! grid-flow-col auto-cols-[100%] h-full",[260,1237,1238],{"class":266},"\"\n",[260,1240,1241],{"class":262,"line":306},[260,1242,1243],{"class":266},"  >\n",[260,1245,1246,1248,1250,1252,1254,1256,1259,1261],{"class":262,"line":320},[260,1247,844],{"class":266},[260,1249,801],{"class":800},[260,1251,805],{"class":804},[260,1253,808],{"class":266},[260,1255,811],{"class":266},[260,1257,1258],{"class":814},"size-full snap-center snap-always",[260,1260,811],{"class":266},[260,1262,819],{"class":266},[260,1264,1265,1267,1269,1271,1273,1275,1278,1280,1282,1284],{"class":262,"line":333},[260,1266,863],{"class":266},[260,1268,801],{"class":800},[260,1270,805],{"class":804},[260,1272,808],{"class":266},[260,1274,811],{"class":266},[260,1276,1277],{"class":814},"size-full rounded-lg bg-primary rounded-xl",[260,1279,811],{"class":266},[260,1281,878],{"class":266},[260,1283,801],{"class":800},[260,1285,819],{"class":266},[260,1287,1288,1290,1292],{"class":262,"line":346},[260,1289,887],{"class":266},[260,1291,801],{"class":800},[260,1293,819],{"class":266},[260,1295,1296,1298,1300,1302,1304,1306,1308,1310],{"class":262,"line":352},[260,1297,844],{"class":266},[260,1299,801],{"class":800},[260,1301,805],{"class":804},[260,1303,808],{"class":266},[260,1305,811],{"class":266},[260,1307,1258],{"class":814},[260,1309,811],{"class":266},[260,1311,819],{"class":266},[260,1313,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332],{"class":262,"line":359},[260,1315,863],{"class":266},[260,1317,801],{"class":800},[260,1319,805],{"class":804},[260,1321,808],{"class":266},[260,1323,811],{"class":266},[260,1325,1277],{"class":814},[260,1327,811],{"class":266},[260,1329,878],{"class":266},[260,1331,801],{"class":800},[260,1333,819],{"class":266},[260,1335,1336,1338,1340],{"class":262,"line":369},[260,1337,887],{"class":266},[260,1339,801],{"class":800},[260,1341,819],{"class":266},[260,1343,1344,1346,1348,1350,1352,1354,1356,1358],{"class":262,"line":382},[260,1345,844],{"class":266},[260,1347,801],{"class":800},[260,1349,805],{"class":804},[260,1351,808],{"class":266},[260,1353,811],{"class":266},[260,1355,1258],{"class":814},[260,1357,811],{"class":266},[260,1359,819],{"class":266},[260,1361,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380],{"class":262,"line":395},[260,1363,863],{"class":266},[260,1365,801],{"class":800},[260,1367,805],{"class":804},[260,1369,808],{"class":266},[260,1371,811],{"class":266},[260,1373,1277],{"class":814},[260,1375,811],{"class":266},[260,1377,878],{"class":266},[260,1379,801],{"class":800},[260,1381,819],{"class":266},[260,1383,1384,1386,1388],{"class":262,"line":408},[260,1385,887],{"class":266},[260,1387,801],{"class":800},[260,1389,819],{"class":266},[260,1391,1392],{"class":262,"line":419},[260,1393,992],{"class":314},[260,1395,1396,1398,1400],{"class":262,"line":432},[260,1397,997],{"class":266},[260,1399,827],{"class":800},[260,1401,819],{"class":266},[260,1403,1404,1406,1408],{"class":262,"line":437},[260,1405,1006],{"class":266},[260,1407,801],{"class":800},[260,1409,819],{"class":266},[1411,1412,1413],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":1415},[],"Build an iOS-like smart stack.","md",null,{},{"icon":124},{"title":1422,"description":1423},"Smart stack example with Blossom Carousel","Build an iOS-like smart stack with scroll-driven animations and Blossom Carousel.","g0pxwRS2CSL-NdWKOu4sjxWGOSSLf_0sVd6gRJDokXU",[1426,1428],{"title":116,"path":117,"stem":118,"description":1427,"icon":119,"children":-1},"Build an Instagram Stories-inspired 3d effect.",{"title":126,"path":127,"stem":128,"description":1429,"icon":129,"children":-1},"Build an iMessage-style card stack.",{"baselineBadge":1431,"browserBadges":1435,"sources":1452,"updatedAt":1456},{"label":1432,"value":1433,"title":1434},"Baseline","Limited","view-timeline is not Baseline yet in the WebDX web-features data.",[1436,1440,1443,1448],{"browser":1437,"version":1438,"title":1439},"Chrome","115+","Chrome supports view-timeline from version 115.",{"browser":1441,"version":1438,"title":1442},"Edge","Edge supports view-timeline from version 115.",{"browser":1444,"version":1445,"note":1446,"title":1447},"Firefox","114+","flag","Firefox supports view-timeline from version 114 with a browser flag enabled.",{"browser":1449,"version":1450,"title":1451},"Safari","26+","Safari supports view-timeline from version 26.",{"bcd":1453,"mdn":1454,"webFeatures":1455},"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",1780256956247]