[{"data":1,"prerenderedAt":1013},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fpage-transition":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fpage-transition":1008},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":118,"badge":48,"body":189,"description":1003,"extension":1004,"meta":1005,"navigation":474,"path":119,"seo":1006,"status":13,"stem":120,"__hash__":1007},"docs\u002Fdocs\u002F2.components\u002F21.page-transition.md",{"type":190,"value":191,"toc":993},"minimark",[192,200,220,223,226,231,234,274,279,282,286,289,375,389,403,407,414,568,575,586,683,686,714,779,783,802,883,904,908,911,928,957,961,972,976,983,989],[193,194,197],"playground",{"caption":195,"name":196},"Pick a direction. Tune bubbles, band and the rest below. This site uses the same transition between pages.","page-transition",[198,199],"demo-page-transition",{},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fcore",", ",[208,213,214],{},"@goopui\u002Fvue"," and ",[208,217,218],{},"@goopui\u002Fnuxt"," are in alpha. Page transition is new and experimental: its options may still change. Every navigation on this site runs it.",[205,221,222],{},"A thick band of goo pours in from one edge, slows a little over the middle of the screen, then flows on and out the far edge. Both of its edges are low, wide mounds that are different every time: the front leads with a little momentum and the trailing edge stretches back like poured goo.",[205,224,225],{},"The band is the seam between the two pages. Everything it has already passed shows the new page, and everything ahead of it still shows the old one, so you never see the page swap. Pouring down, the new page is above the band and the old page is below it.",[227,228,230],"h2",{"id":229},"how-the-split-works","How the split works",[205,232,233],{},"When you navigate, the old page is held as a snapshot first. Then the route changes and the new page renders underneath it. Once the new page is ready, the band sweeps across, and the snapshot is cut away along the band's front edge on every frame. The cut follows the same curve as the goo, a few pixels inside it, so the band always hides the seam. A bubble near the front can show a little of both pages.",[235,236,237,261,267],"ul",{},[238,239,240,244,245,248,249,252,253,256,257,260],"li",{},[241,242,243],"strong",{},"View Transitions"," (Chrome and Edge 111+, Safari 18+, Firefox 144+): the snapshot is ",[208,246,247],{},"::view-transition-old(root)",", clipped every frame, and the new page is the live ",[208,250,251],{},"::view-transition-new(root)",". The band gets its own ",[208,254,255],{},"view-transition-name"," (",[208,258,259],{},"goop-page-transition",") once the snapshot is taken, so it stays live and is painted on top. The browser pauses rendering while the new page loads, so the sweep starts once it's ready.",[238,262,263,266],{},[241,264,265],{},"Fallback"," (browsers without View Transitions): the visible part of the old page is copied into a fixed overlay under the band and clipped the same way. Canvases are copied too, and a WebGL canvas that comes out blank is filled with the page background. Here the band pours in right away and waits near the top edge, with nothing new showing yet, until the new page is ready.",[238,268,269,270,273],{},"If neither works, the page swaps while the band is over the middle of the screen, as it does with ",[208,271,272],{},"split: false",".",[205,275,276,278],{},[208,277,272],{}," turns this off: the route changes while the band is over the middle, the new page fades in behind it (about 200 ms), and the band keeps creeping while it waits for a slow page.",[205,280,281],{},"A few bubbles of mixed sizes rise through the goo, against the way it pours. They're real holes, so you see the page through them. They wobble, squash a little as they speed up, and some merge. A bubble that reaches an edge pops into it: the edge dips where it popped, then relaxes. They're re-rolled every time and nothing is left behind.",[227,283,285],{"id":284},"nuxt","Nuxt",[205,287,288],{},"Turn it on in the module options. It's off by default.",[290,291,296],"pre",{"className":292,"code":293,"language":294,"meta":295,"style":295},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n  goop: {\n    pageTransition: true,\n    \u002F\u002F or: pageTransition: { direction: 'up', duration: 500 },\n  },\n})\n","ts","",[208,297,298,307,325,338,344,357,363,369],{"__ignoreMap":295},[299,300,303],"span",{"class":301,"line":302},"line",1,[299,304,306],{"class":305},"sJ8bj","\u002F\u002F nuxt.config.ts\n",[299,308,310,314,317,321],{"class":301,"line":309},2,[299,311,313],{"class":312},"szBVR","export",[299,315,316],{"class":312}," default",[299,318,320],{"class":319},"sScJk"," defineNuxtConfig",[299,322,324],{"class":323},"sVt8B","({\n",[299,326,328,331,335],{"class":301,"line":327},3,[299,329,330],{"class":323},"  modules: [",[299,332,334],{"class":333},"sZZnC","'@goopui\u002Fnuxt'",[299,336,337],{"class":323},"],\n",[299,339,341],{"class":301,"line":340},4,[299,342,343],{"class":323},"  goop: {\n",[299,345,347,350,354],{"class":301,"line":346},5,[299,348,349],{"class":323},"    pageTransition: ",[299,351,353],{"class":352},"sj4cs","true",[299,355,356],{"class":323},",\n",[299,358,360],{"class":301,"line":359},6,[299,361,362],{"class":305},"    \u002F\u002F or: pageTransition: { direction: 'up', duration: 500 },\n",[299,364,366],{"class":301,"line":365},7,[299,367,368],{"class":323},"  },\n",[299,370,372],{"class":301,"line":371},8,[299,373,374],{"class":323},"})\n",[205,376,377,378,381,382,385,386,273],{},"Before each route change, once the next page's components have loaded, the old page is held. The band sweeps on ",[208,379,380],{},"page:finish",", once the new page has rendered. If that never fires, it goes after ",[208,383,384],{},"timeout"," ms (default 2000). Hash and query changes don't transition, and neither does the first load or a swipe back the browser has already animated. The live handle is ",[208,387,388],{},"useNuxtApp().$goopPageTransition",[205,390,391,392,395,396,398,399,402],{},"The module runs its own view transition, so it turns Nuxt's ",[208,393,394],{},"experimental.viewTransition"," off (with a warning) unless you set ",[208,397,272],{},". Page transitions (",[208,400,401],{},"app.pageTransition",") still run, but with the split you don't need them: leave them off.",[227,404,406],{"id":405},"vue","Vue",[205,408,409,410,413],{},"With vue-router, pass the router to ",[208,411,412],{},"GoopPageTransition"," once, near the root:",[290,415,418],{"className":416,"code":417,"language":405,"meta":295,"style":295},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { GoopPageTransition } from '@goopui\u002Fvue'\nimport { useRouter } from 'vue-router'\n\nconst router = useRouter()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopPageTransition :router=\"router\" direction=\"down\" \u002F>\n  \u003CRouterView \u002F>\n\u003C\u002Ftemplate>\n",[208,419,420,444,458,470,476,493,502,506,515,549,559],{"__ignoreMap":295},[299,421,422,425,429,432,435,438,441],{"class":301,"line":302},[299,423,424],{"class":323},"\u003C",[299,426,428],{"class":427},"s9eBZ","script",[299,430,431],{"class":319}," setup",[299,433,434],{"class":319}," lang",[299,436,437],{"class":323},"=",[299,439,440],{"class":333},"\"ts\"",[299,442,443],{"class":323},">\n",[299,445,446,449,452,455],{"class":301,"line":309},[299,447,448],{"class":312},"import",[299,450,451],{"class":323}," { GoopPageTransition } ",[299,453,454],{"class":312},"from",[299,456,457],{"class":333}," '@goopui\u002Fvue'\n",[299,459,460,462,465,467],{"class":301,"line":327},[299,461,448],{"class":312},[299,463,464],{"class":323}," { useRouter } ",[299,466,454],{"class":312},[299,468,469],{"class":333}," 'vue-router'\n",[299,471,472],{"class":301,"line":340},[299,473,475],{"emptyLinePlaceholder":474},true,"\n",[299,477,478,481,484,487,490],{"class":301,"line":346},[299,479,480],{"class":312},"const",[299,482,483],{"class":352}," router",[299,485,486],{"class":312}," =",[299,488,489],{"class":319}," useRouter",[299,491,492],{"class":323},"()\n",[299,494,495,498,500],{"class":301,"line":359},[299,496,497],{"class":323},"\u003C\u002F",[299,499,428],{"class":427},[299,501,443],{"class":323},[299,503,504],{"class":301,"line":365},[299,505,475],{"emptyLinePlaceholder":474},[299,507,508,510,513],{"class":301,"line":371},[299,509,424],{"class":323},[299,511,512],{"class":427},"template",[299,514,443],{"class":323},[299,516,518,521,523,526,529,531,534,536,538,541,543,546],{"class":301,"line":517},9,[299,519,520],{"class":323},"  \u003C",[299,522,412],{"class":427},[299,524,525],{"class":323}," :",[299,527,528],{"class":319},"router",[299,530,437],{"class":323},[299,532,533],{"class":333},"\"",[299,535,528],{"class":323},[299,537,533],{"class":333},[299,539,540],{"class":319}," direction",[299,542,437],{"class":323},[299,544,545],{"class":333},"\"down\"",[299,547,548],{"class":323}," \u002F>\n",[299,550,552,554,557],{"class":301,"line":551},10,[299,553,520],{"class":323},[299,555,556],{"class":427},"RouterView",[299,558,548],{"class":323},[299,560,562,564,566],{"class":301,"line":561},11,[299,563,497],{"class":323},[299,565,512],{"class":427},[299,567,443],{"class":323},[205,569,570,571,574],{},"The router helper holds the old page in ",[208,572,573],{},"beforeResolve"," and starts the sweep right after the new page renders.",[205,576,577,578,581,582,585],{},"Or drive it yourself with the composable. ",[208,579,580],{},"cover()"," resolves once the old page is held (change the page then), and ",[208,583,584],{},"reveal()"," means the new page is ready. It resolves once the band is gone. With a view transition, rendering is paused between the two calls, so don't wait for an animation frame in between:",[290,587,589],{"className":292,"code":588,"language":294,"meta":295,"style":295},"import { useGoopPageTransition } from '@goopui\u002Fvue'\n\nconst goo = useGoopPageTransition({ direction: 'left' })\n\nasync function swap() {\n  await goo.cover()\n  await renderTheNextPage()\n  await goo.reveal()\n}\n",[208,590,591,602,606,627,631,645,658,667,678],{"__ignoreMap":295},[299,592,593,595,598,600],{"class":301,"line":302},[299,594,448],{"class":312},[299,596,597],{"class":323}," { useGoopPageTransition } ",[299,599,454],{"class":312},[299,601,457],{"class":333},[299,603,604],{"class":301,"line":309},[299,605,475],{"emptyLinePlaceholder":474},[299,607,608,610,613,615,618,621,624],{"class":301,"line":327},[299,609,480],{"class":312},[299,611,612],{"class":352}," goo",[299,614,486],{"class":312},[299,616,617],{"class":319}," useGoopPageTransition",[299,619,620],{"class":323},"({ direction: ",[299,622,623],{"class":333},"'left'",[299,625,626],{"class":323}," })\n",[299,628,629],{"class":301,"line":340},[299,630,475],{"emptyLinePlaceholder":474},[299,632,633,636,639,642],{"class":301,"line":346},[299,634,635],{"class":312},"async",[299,637,638],{"class":312}," function",[299,640,641],{"class":319}," swap",[299,643,644],{"class":323},"() {\n",[299,646,647,650,653,656],{"class":301,"line":359},[299,648,649],{"class":312},"  await",[299,651,652],{"class":323}," goo.",[299,654,655],{"class":319},"cover",[299,657,492],{"class":323},[299,659,660,662,665],{"class":301,"line":365},[299,661,649],{"class":312},[299,663,664],{"class":319}," renderTheNextPage",[299,666,492],{"class":323},[299,668,669,671,673,676],{"class":301,"line":371},[299,670,649],{"class":312},[299,672,652],{"class":323},[299,674,675],{"class":319},"reveal",[299,677,492],{"class":323},[299,679,680],{"class":301,"line":517},[299,681,682],{"class":323},"}\n",[227,684,179],{"id":685},"core",[205,687,688,689,692,693,695,696,699,700,703,704,211,707,710,711,273],{},"Without a framework, use ",[208,690,691],{},"createPageTransition"," from ",[208,694,210],{},". It returns ",[208,697,698],{},"{ cover, reveal, phase, seam, update, destroy }",". ",[208,701,702],{},"seam"," says how the next transition splits the pages: ",[208,705,706],{},"'view-transition'",[208,708,709],{},"'clone'"," or ",[208,712,713],{},"null",[290,715,717],{"className":292,"code":716,"language":294,"meta":295,"style":295},"import { createPageTransition } from '@goopui\u002Fcore'\n\nconst goo = createPageTransition({ direction: 'down' })\nawait goo.cover()\n\u002F\u002F swap the page\nawait goo.reveal()\n",[208,718,719,731,735,753,764,769],{"__ignoreMap":295},[299,720,721,723,726,728],{"class":301,"line":302},[299,722,448],{"class":312},[299,724,725],{"class":323}," { createPageTransition } ",[299,727,454],{"class":312},[299,729,730],{"class":333}," '@goopui\u002Fcore'\n",[299,732,733],{"class":301,"line":309},[299,734,475],{"emptyLinePlaceholder":474},[299,736,737,739,741,743,746,748,751],{"class":301,"line":327},[299,738,480],{"class":312},[299,740,612],{"class":352},[299,742,486],{"class":312},[299,744,745],{"class":319}," createPageTransition",[299,747,620],{"class":323},[299,749,750],{"class":333},"'down'",[299,752,626],{"class":323},[299,754,755,758,760,762],{"class":301,"line":340},[299,756,757],{"class":312},"await",[299,759,652],{"class":323},[299,761,655],{"class":319},[299,763,492],{"class":323},[299,765,766],{"class":301,"line":346},[299,767,768],{"class":305},"\u002F\u002F swap the page\n",[299,770,771,773,775,777],{"class":301,"line":359},[299,772,757],{"class":312},[299,774,652],{"class":323},[299,776,675],{"class":319},[299,778,492],{"class":323},[227,780,782],{"id":781},"colors","Colors",[205,784,785,786,789,790,793,794,797,798,801],{},"The goo reads ",[208,787,788],{},"--goop-page-transition",", which falls back to ",[208,791,792],{},"--primary",". Set ",[208,795,796],{},"--goop-page-transition-accent"," to give the edges and the bubbles a thin colored rim, and ",[208,799,800],{},"--goop-page-transition-highlight"," for a soft lighter glow through the middle of the band. This site uses Slime with a deep green rim:",[290,803,807],{"className":804,"code":805,"language":806,"meta":295,"style":295},"language-css shiki shiki-themes github-light github-dark",":root {\n  --goop-page-transition: #1fa64a;\n  --goop-page-transition-accent: oklch(0.43 0.12 150);\n  --goop-page-transition-highlight: oklch(0.73 0.18 146);\n}\n","css",[208,808,809,817,832,857,879],{"__ignoreMap":295},[299,810,811,814],{"class":301,"line":302},[299,812,813],{"class":319},":root",[299,815,816],{"class":323}," {\n",[299,818,819,823,826,829],{"class":301,"line":309},[299,820,822],{"class":821},"s4XuR","  --goop-page-transition",[299,824,825],{"class":323},": ",[299,827,828],{"class":352},"#1fa64a",[299,830,831],{"class":323},";\n",[299,833,834,837,839,842,845,848,851,854],{"class":301,"line":327},[299,835,836],{"class":821},"  --goop-page-transition-accent",[299,838,825],{"class":323},[299,840,841],{"class":352},"oklch",[299,843,844],{"class":323},"(",[299,846,847],{"class":352},"0.43",[299,849,850],{"class":352}," 0.12",[299,852,853],{"class":352}," 150",[299,855,856],{"class":323},");\n",[299,858,859,862,864,866,868,871,874,877],{"class":301,"line":340},[299,860,861],{"class":821},"  --goop-page-transition-highlight",[299,863,825],{"class":323},[299,865,841],{"class":352},[299,867,844],{"class":323},[299,869,870],{"class":352},"0.73",[299,872,873],{"class":352}," 0.18",[299,875,876],{"class":352}," 146",[299,878,856],{"class":323},[299,880,881],{"class":301,"line":346},[299,882,682],{"class":323},[205,884,885,886,211,889,215,892,895,896,899,900,903],{},"The ",[208,887,888],{},"color",[208,890,891],{},"accent",[208,893,894],{},"highlight"," options override them. They take any CSS color or ",[208,897,898],{},"var()",", and ",[208,901,902],{},"accent: false"," turns the lip off.",[227,905,907],{"id":906},"options","Options",[909,910],"component-props",{"name":196},[205,912,913,914,916,917,899,920,923,924,927],{},"In Vue they're props on ",[208,915,412],{}," and options to ",[208,918,919],{},"useGoopPageTransition",[208,921,922],{},"goo: false"," turns it off. In core, use ",[208,925,926],{},"enabled: false"," for the same thing.",[205,929,930,931,934,935,937,938,941,942,945,946,949,950,953,954,956],{},"The Nuxt module also takes ",[208,932,933],{},"fade",", the element to fade in as the new page swaps in with ",[208,936,272],{}," (default ",[208,939,940],{},"'#__nuxt'",", or ",[208,943,944],{},"false"," for none), and ",[208,947,948],{},"fadeDuration"," (default 200 ms). With vue-router, ",[208,951,952],{},"goopRouterTransition"," takes the same ",[208,955,933],{}," option. The split never fades anything.",[227,958,960],{"id":959},"performance","Performance",[205,962,963,964,967,968,971],{},"The overlay is one fixed, full-screen SVG with one filled path, plus one more for the lip. Each frame rewrites that path from about 60 points for the band, plus 20 for each live bubble, and sets the old page's clip path from the same 30 front points. The bubbles are holes cut in the same path (",[208,965,966],{},"fill-rule: evenodd","), not extra layers. There's no blur filter, canvas, or WebGL, so it's cheap on phones. Being ",[208,969,970],{},"position: fixed",", it never changes the page's scroll size, and nothing is in the DOM until the first transition.",[227,973,975],{"id":974},"accessibility","Accessibility",[205,977,978,979,982],{},"The overlay is ",[208,980,981],{},"aria-hidden",". It blocks clicks until the route has changed, so a double click can't start two navigations, and lets them through while it flows away. Focus and scroll are left to the router.",[205,984,985,986,273],{},"Under reduced motion there's no goo, no bubbles and no split. The screen fades to the goo color and back in about 150 ms each way. See ",[987,988,23],"a",{"href":24},[990,991,992],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":295,"searchDepth":327,"depth":327,"links":994},[995,996,997,998,999,1000,1001,1002],{"id":229,"depth":309,"text":230},{"id":284,"depth":309,"text":285},{"id":405,"depth":309,"text":406},{"id":685,"depth":309,"text":179},{"id":781,"depth":309,"text":782},{"id":906,"depth":309,"text":907},{"id":959,"depth":309,"text":960},{"id":974,"depth":309,"text":975},"A thick band of goo, with see-through bubbles rising through it, sweeps across the page when you navigate. It's the seam between the two pages, the new one behind it and the old one ahead of it.","md",{},{"title":118,"description":1003},"oO_RCgNIKO8RVFTpVeXDO0Hc3aq4DuM6xP4qv0tcjdY",[1009,1011],{"title":114,"path":115,"stem":116,"description":1010,"children":-1},"shadcn's Sonner with goo. Toasts drop in as blobs, merge when stacked, and drip away when they leave.",{"title":122,"path":123,"stem":124,"description":1012,"children":-1},"Ambient goo for backgrounds and decoration. It's also goopUI's performance stress test.",1793670386997]