[{"data":1,"prerenderedAt":3401},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcore\u002Fapi":187,"docs-surround:\u002Fdocs\u002Fcore\u002Fapi":3398},[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":189,"badge":13,"body":190,"description":3392,"extension":3393,"meta":3394,"navigation":3395,"path":185,"seo":3396,"status":13,"stem":186,"__hash__":3397},"docs\u002Fdocs\u002F3.core\u002F1.api.md","@goopui\u002Fcore API",{"type":191,"value":192,"toc":3377},"minimark",[193,209,219,224,280,309,464,467,533,544,561,564,885,889,910,1501,1511,1515,1712,1715,1972,1975,1978,1984,1987,2181,2184,2187,2251,2291,2298,2389,2393,2407,2475,2643,2693,2714,2719,2761,2906,2930,2934,3071,3075,3084,3118,3122,3129,3211,3215,3226,3294,3298,3301,3373],[194,195,196,200,201,204,205,208],"p",{},[197,198,199],"code",{},"@goopui\u002Fcore"," is plain TypeScript and DOM. It has no framework and no dependencies, and it never touches ",[197,202,203],{},"document"," or ",[197,206,207],{},"window"," at import time, so it's safe to import during SSR. The Vue, React, and Svelte packages are thin wrappers around it. You only need it directly to put goo on something that isn't a goopUI component, or to build an adapter.",[210,211,212],"callout",{"type":125},[194,213,214,215,218],{},"The package is built and runs every demo on this site, but it isn't on npm yet (version ",[197,216,217],{},"0.0.0","). The API below is what the source exports today.",[220,221,223],"h2",{"id":222},"attachgoop","attachGoop",[225,226,231],"pre",{"className":227,"code":228,"language":229,"meta":230,"style":230},"language-ts shiki shiki-themes github-light github-dark","function attachGoop(host: HTMLElement, options?: GoopOptions): GoopHandle\n","ts","",[197,232,233],{"__ignoreMap":230},[234,235,238,242,246,250,254,257,260,263,266,269,272,275,277],"span",{"class":236,"line":237},"line",1,[234,239,241],{"class":240},"szBVR","function",[234,243,245],{"class":244},"sScJk"," attachGoop",[234,247,249],{"class":248},"sVt8B","(",[234,251,253],{"class":252},"s4XuR","host",[234,255,256],{"class":240},":",[234,258,259],{"class":244}," HTMLElement",[234,261,262],{"class":248},", ",[234,264,265],{"class":252},"options",[234,267,268],{"class":240},"?:",[234,270,271],{"class":244}," GoopOptions",[234,273,274],{"class":248},")",[234,276,256],{"class":240},[234,278,279],{"class":244}," GoopHandle\n",[194,281,282,283,285,286,289,290,293,294,297,298,301,302,305,306,256],{},"This turns ",[197,284,253],{}," into a goo body. It adds an ",[197,287,288],{},"aria-hidden"," goo layer inside the host at ",[197,291,292],{},"z-index: -1"," and sets ",[197,295,296],{},"isolation: isolate"," on the host (plus ",[197,299,300],{},"position: relative"," if it was ",[197,303,304],{},"static","). Your content paints above the goo, unfiltered. Give the host a transparent background and set ",[197,307,308],{},"--goop-color",[225,310,312],{"className":227,"code":311,"language":229,"meta":230,"style":230},"import { attachGoop } from '@goopui\u002Fcore'\n\nconst button = document.querySelector\u003CHTMLButtonElement>('.save')!\nbutton.style.setProperty('--goop-color', 'var(--primary)')\n\nconst goop = attachGoop(button, { dripCount: 2, splash: 'escape' })\n\n\u002F\u002F later\ngoop.update() \u002F\u002F re-read --goop-* variables\ngoop.destroy()\n",[197,313,314,329,336,372,394,399,426,431,438,453],{"__ignoreMap":230},[234,315,316,319,322,325],{"class":236,"line":237},[234,317,318],{"class":240},"import",[234,320,321],{"class":248}," { attachGoop } ",[234,323,324],{"class":240},"from",[234,326,328],{"class":327},"sZZnC"," '@goopui\u002Fcore'\n",[234,330,332],{"class":236,"line":331},2,[234,333,335],{"emptyLinePlaceholder":334},true,"\n",[234,337,339,342,346,349,352,355,358,361,364,367,369],{"class":236,"line":338},3,[234,340,341],{"class":240},"const",[234,343,345],{"class":344},"sj4cs"," button",[234,347,348],{"class":240}," =",[234,350,351],{"class":248}," document.",[234,353,354],{"class":244},"querySelector",[234,356,357],{"class":248},"\u003C",[234,359,360],{"class":244},"HTMLButtonElement",[234,362,363],{"class":248},">(",[234,365,366],{"class":327},"'.save'",[234,368,274],{"class":248},[234,370,371],{"class":240},"!\n",[234,373,375,378,381,383,386,388,391],{"class":236,"line":374},4,[234,376,377],{"class":248},"button.style.",[234,379,380],{"class":244},"setProperty",[234,382,249],{"class":248},[234,384,385],{"class":327},"'--goop-color'",[234,387,262],{"class":248},[234,389,390],{"class":327},"'var(--primary)'",[234,392,393],{"class":248},")\n",[234,395,397],{"class":236,"line":396},5,[234,398,335],{"emptyLinePlaceholder":334},[234,400,402,404,407,409,411,414,417,420,423],{"class":236,"line":401},6,[234,403,341],{"class":240},[234,405,406],{"class":344}," goop",[234,408,348],{"class":240},[234,410,245],{"class":244},[234,412,413],{"class":248},"(button, { dripCount: ",[234,415,416],{"class":344},"2",[234,418,419],{"class":248},", splash: ",[234,421,422],{"class":327},"'escape'",[234,424,425],{"class":248}," })\n",[234,427,429],{"class":236,"line":428},7,[234,430,335],{"emptyLinePlaceholder":334},[234,432,434],{"class":236,"line":433},8,[234,435,437],{"class":436},"sJ8bj","\u002F\u002F later\n",[234,439,441,444,447,450],{"class":236,"line":440},9,[234,442,443],{"class":248},"goop.",[234,445,446],{"class":244},"update",[234,448,449],{"class":248},"() ",[234,451,452],{"class":436},"\u002F\u002F re-read --goop-* variables\n",[234,454,456,458,461],{"class":236,"line":455},10,[234,457,443],{"class":248},[234,459,460],{"class":244},"destroy",[234,462,463],{"class":248},"()\n",[194,465,466],{},"Out of the box an attached element:",[468,469,470,474,485,491,500,510,516,522],"ul",{},[471,472,473],"li",{},"drips on hover, more and faster the harder the pointer comes in;",[471,475,476,477,480,481,484],{},"leans, wobbles, and carries momentum as the pointer moves (",[197,478,479],{},"inertia","), and its hanging drips creep toward the cursor (",[197,482,483],{},"flow",");",[471,486,487,488,484],{},"swells a lump or two toward an approaching pointer before it even touches (",[197,489,490],{},"reach",[471,492,493,494,262,497,484],{},"fires a click-like shockwave, aimed along the motion, when the pointer hits it fast: a hard entry or a fast swipe across or out (",[197,495,496],{},"hitEffect",[197,498,499],{},"splashMinSpeed",[471,501,502,503,506,507,484],{},"squishes on press, and on release adds goo (",[197,504,505],{},"clickGoop",") and fires a shockwave from the click point (",[197,508,509],{},"shockwave",[471,511,512,513,484],{},"pulls a stretchy taffy string when you press and drag off it (",[197,514,515],{},"taffy",[471,517,518,519,484],{},"does the same press from the keyboard: Space or Enter squishes from the top (",[197,520,521],{},"keyboard",[471,523,524,525,528,529,532],{},"sloshes when the page scrolls (",[197,526,527],{},"scrollSlosh","), and its resting drips breathe slowly (",[197,530,531],{},"idle",").",[194,534,535,538,539,543],{},[197,536,537],{},"preset: 'subtle' | 'playful' | 'wild'"," sets the starting point for all of it. See ",[540,541,19],"a",{"href":542},"\u002Fdocs\u002Fgetting-started\u002Ftheming#presets",".",[194,545,546,547,262,550,262,553,556,557,543],{},"Old option and variable names (",[197,548,549],{},"blur",[197,551,552],{},"viscosity",[197,554,555],{},"--goop-threshold",", ...) still work as deprecated aliases. See ",[540,558,560],{"href":559},"\u002Fdocs\u002Fgetting-started\u002Ftheming#renamed-variables","renamed variables",[194,562,563],{},"In Vue, attach on mount and destroy on unmount. This site's demos use a wrapper like this one:",[225,565,570],{"className":566,"code":567,"filename":568,"language":569,"meta":230,"style":230},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { attachGoop, type GoopHandle, type GoopOptions } from '@goopui\u002Fcore'\nimport { onMounted, onUnmounted, ref, watch } from 'vue'\n\nconst props = defineProps\u003C{ options?: GoopOptions }>()\nconst el = ref\u003CHTMLElement | null>(null)\nlet handle: GoopHandle | null = null\n\nonMounted(() => {\n  if (el.value) handle = attachGoop(el.value, { ...props.options })\n})\nwatch(() => props.options, (o) => handle?.update({ ...o }), { deep: true })\nonUnmounted(() => handle?.destroy())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"el\" class=\"goop-button\">\u003Cslot \u002F>\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","GoopHost.vue","vue",[197,571,572,595,617,629,633,657,687,709,713,727,748,754,793,810,820,825,835,876],{"__ignoreMap":230},[234,573,574,576,580,583,586,589,592],{"class":236,"line":237},[234,575,357],{"class":248},[234,577,579],{"class":578},"s9eBZ","script",[234,581,582],{"class":244}," setup",[234,584,585],{"class":244}," lang",[234,587,588],{"class":248},"=",[234,590,591],{"class":327},"\"ts\"",[234,593,594],{"class":248},">\n",[234,596,597,599,602,605,608,610,613,615],{"class":236,"line":331},[234,598,318],{"class":240},[234,600,601],{"class":248}," { attachGoop, ",[234,603,604],{"class":240},"type",[234,606,607],{"class":248}," GoopHandle, ",[234,609,604],{"class":240},[234,611,612],{"class":248}," GoopOptions } ",[234,614,324],{"class":240},[234,616,328],{"class":327},[234,618,619,621,624,626],{"class":236,"line":338},[234,620,318],{"class":240},[234,622,623],{"class":248}," { onMounted, onUnmounted, ref, watch } ",[234,625,324],{"class":240},[234,627,628],{"class":327}," 'vue'\n",[234,630,631],{"class":236,"line":374},[234,632,335],{"emptyLinePlaceholder":334},[234,634,635,637,640,642,645,648,650,652,654],{"class":236,"line":396},[234,636,341],{"class":240},[234,638,639],{"class":344}," props",[234,641,348],{"class":240},[234,643,644],{"class":244}," defineProps",[234,646,647],{"class":248},"\u003C{ ",[234,649,265],{"class":252},[234,651,268],{"class":240},[234,653,271],{"class":244},[234,655,656],{"class":248}," }>()\n",[234,658,659,661,664,666,669,671,674,677,680,682,685],{"class":236,"line":401},[234,660,341],{"class":240},[234,662,663],{"class":344}," el",[234,665,348],{"class":240},[234,667,668],{"class":244}," ref",[234,670,357],{"class":248},[234,672,673],{"class":244},"HTMLElement",[234,675,676],{"class":240}," |",[234,678,679],{"class":344}," null",[234,681,363],{"class":248},[234,683,684],{"class":344},"null",[234,686,393],{"class":248},[234,688,689,692,695,697,700,702,704,706],{"class":236,"line":428},[234,690,691],{"class":240},"let",[234,693,694],{"class":248}," handle",[234,696,256],{"class":240},[234,698,699],{"class":244}," GoopHandle",[234,701,676],{"class":240},[234,703,679],{"class":344},[234,705,348],{"class":240},[234,707,708],{"class":344}," null\n",[234,710,711],{"class":236,"line":433},[234,712,335],{"emptyLinePlaceholder":334},[234,714,715,718,721,724],{"class":236,"line":440},[234,716,717],{"class":244},"onMounted",[234,719,720],{"class":248},"(() ",[234,722,723],{"class":240},"=>",[234,725,726],{"class":248}," {\n",[234,728,729,732,735,737,739,742,745],{"class":236,"line":455},[234,730,731],{"class":240},"  if",[234,733,734],{"class":248}," (el.value) handle ",[234,736,588],{"class":240},[234,738,245],{"class":244},[234,740,741],{"class":248},"(el.value, { ",[234,743,744],{"class":240},"...",[234,746,747],{"class":248},"props.options })\n",[234,749,751],{"class":236,"line":750},11,[234,752,753],{"class":248},"})\n",[234,755,757,760,762,764,767,770,773,775,778,780,783,785,788,791],{"class":236,"line":756},12,[234,758,759],{"class":244},"watch",[234,761,720],{"class":248},[234,763,723],{"class":240},[234,765,766],{"class":248}," props.options, (",[234,768,769],{"class":252},"o",[234,771,772],{"class":248},") ",[234,774,723],{"class":240},[234,776,777],{"class":248}," handle?.",[234,779,446],{"class":244},[234,781,782],{"class":248},"({ ",[234,784,744],{"class":240},[234,786,787],{"class":248},"o }), { deep: ",[234,789,790],{"class":344},"true",[234,792,425],{"class":248},[234,794,796,799,801,803,805,807],{"class":236,"line":795},13,[234,797,798],{"class":244},"onUnmounted",[234,800,720],{"class":248},[234,802,723],{"class":240},[234,804,777],{"class":248},[234,806,460],{"class":244},[234,808,809],{"class":248},"())\n",[234,811,813,816,818],{"class":236,"line":812},14,[234,814,815],{"class":248},"\u003C\u002F",[234,817,579],{"class":578},[234,819,594],{"class":248},[234,821,823],{"class":236,"line":822},15,[234,824,335],{"emptyLinePlaceholder":334},[234,826,828,830,833],{"class":236,"line":827},16,[234,829,357],{"class":248},[234,831,832],{"class":578},"template",[234,834,594],{"class":248},[234,836,838,841,844,846,848,851,854,856,859,862,865,869,872,874],{"class":236,"line":837},17,[234,839,840],{"class":248},"  \u003C",[234,842,843],{"class":578},"button",[234,845,668],{"class":244},[234,847,588],{"class":248},[234,849,850],{"class":327},"\"el\"",[234,852,853],{"class":244}," class",[234,855,588],{"class":248},[234,857,858],{"class":327},"\"goop-button\"",[234,860,861],{"class":248},">\u003C",[234,863,864],{"class":578},"slot",[234,866,868],{"class":867},"s7hpK"," \u002F",[234,870,871],{"class":248},">\u003C\u002F",[234,873,843],{"class":578},[234,875,594],{"class":248},[234,877,879,881,883],{"class":236,"line":878},18,[234,880,815],{"class":248},[234,882,832],{"class":578},[234,884,594],{"class":248},[220,886,888],{"id":887},"goopoptions","GoopOptions",[194,890,891,893,894,898,899,262,902,262,905,262,907,909],{},[197,892,888],{}," takes every ",[540,895,897],{"href":896},"#tuning","tuning knob"," as an optional number (",[197,900,901],{},"softness",[197,903,904],{},"dripCount",[197,906,479],{},[197,908,509],{},", and so on), plus:",[911,912,913,932],"table",{},[914,915,916],"thead",{},[917,918,919,923,926,929],"tr",{},[920,921,922],"th",{},"Option",[920,924,925],{},"Type",[920,927,928],{},"Default",[920,930,931],{},"Description",[933,934,935,960,984,1006,1029,1055,1078,1100,1122,1139,1157,1184,1211,1239,1258,1284,1306,1327,1352,1369,1387,1422,1444,1481],"tbody",{},[917,936,937,943,948,953],{},[938,939,940],"td",{},[197,941,942],{},"preset",[938,944,945],{},[197,946,947],{},"'subtle' | 'playful' | 'wild'",[938,949,950],{},[197,951,952],{},"'playful'",[938,954,955,956,959],{},"Defaults for every feature. Also ",[197,957,958],{},"--goop-preset",". Explicit options and variables still win.",[917,961,962,967,972,977],{},[938,963,964],{},[197,965,966],{},"restingDrips",[938,968,969],{},[197,970,971],{},"number | (number | { x, size?, length?, pinch?, phase? })[]",[938,973,974],{},[197,975,976],{},"0",[938,978,979,980,983],{},"Still drips on the bottom edge. A count spaces them evenly; an array places them at 0 to 1 fractions of the width. Objects also set each drip's size and length as multipliers, for an uneven, organic edge. ",[197,981,982],{},"--goop-drip-variance"," adds natural variety.",[917,985,986,990,995,1000],{},[938,987,988],{},[197,989,496],{},[938,991,992],{},[197,993,994],{},"'shockwave' | 'splash' | 'both' | 'none'",[938,996,997],{},[197,998,999],{},"'shockwave'",[938,1001,1002,1003,543],{},"What a fast pointer hit does. Also ",[197,1004,1005],{},"--goop-hit-effect",[917,1007,1008,1013,1018,1023],{},[938,1009,1010],{},[197,1011,1012],{},"gloss",[938,1014,1015],{},[197,1016,1017],{},"boolean | number",[938,1019,1020],{},[197,1021,1022],{},"false",[938,1024,1025,1026,1028],{},"Wet look: a soft highlight and rim shading. ",[197,1027,790],{}," uses 0.6.",[917,1030,1031,1035,1039,1043],{},[938,1032,1033],{},[197,1034,515],{},[938,1036,1037],{},[197,1038,1017],{},[938,1040,1041],{},[197,1042,790],{},[938,1044,1045,1046,262,1049,262,1052,543],{},"Press and drag off to pull a stretchy string. Tune with ",[197,1047,1048],{},"taffyLength",[197,1050,1051],{},"taffyStrands",[197,1053,1054],{},"globbiness",[917,1056,1057,1061,1065,1069],{},[938,1058,1059],{},[197,1060,490],{},[938,1062,1063],{},[197,1064,1017],{},[938,1066,1067],{},[197,1068,790],{},[938,1070,1071,1072,262,1075,543],{},"Lumps swell toward a pointer closer than this many px. Tune with ",[197,1073,1074],{},"reachSize",[197,1076,1077],{},"reachGlobs",[917,1079,1080,1085,1090,1094],{},[938,1081,1082],{},[197,1083,1084],{},"puddles",[938,1086,1087],{},[197,1088,1089],{},"boolean",[938,1091,1092],{},[197,1093,1022],{},[938,1095,1096,1097,532],{},"Falling drops land, spread flat, and drain (",[197,1098,1099],{},"puddleLife",[917,1101,1102,1107,1111,1115],{},[938,1103,1104],{},[197,1105,1106],{},"labelRide",[938,1108,1109],{},[197,1110,1017],{},[938,1112,1113],{},[197,1114,790],{},[938,1116,1117,1118,1121],{},"Content marked ",[197,1119,1120],{},"[data-goop-label]"," moves and squishes with the goo (transform only, so text stays crisp).",[917,1123,1124,1128,1132,1136],{},[938,1125,1126],{},[197,1127,531],{},[938,1129,1130],{},[197,1131,1089],{},[938,1133,1134],{},[197,1135,790],{},[938,1137,1138],{},"Resting drips breathe with a very slow swell.",[917,1140,1141,1146,1151,1154],{},[938,1142,1143],{},[197,1144,1145],{},"seed",[938,1147,1148],{},[197,1149,1150],{},"number",[938,1152,1153],{},"from the element",[938,1155,1156],{},"Seed for the resting-drip layout, so SSR and re-renders agree.",[917,1158,1159,1164,1169,1174],{},[938,1160,1161],{},[197,1162,1163],{},"splash",[938,1165,1166],{},[197,1167,1168],{},"'near' | 'escape' | 'off'",[938,1170,1171],{},[197,1172,1173],{},"'near'",[938,1175,1176,1177,1180,1181,543],{},"Where splash and shockwave particles go. ",[197,1178,1179],{},"escape"," flies them across the page in a shared overlay. Also ",[197,1182,1183],{},"--goop-splash",[917,1185,1186,1191,1196,1201],{},[938,1187,1188],{},[197,1189,1190],{},"finish",[938,1192,1193],{},[197,1194,1195],{},"'solid' | 'oil'",[938,1197,1198],{},[197,1199,1200],{},"'solid'",[938,1202,1203,1204,1207,1208,543],{},"Surface finish. ",[197,1205,1206],{},"oil"," is a thin-film iridescent sheen and picks the canvas renderer. Also ",[197,1209,1210],{},"--goop-finish",[917,1212,1213,1218,1223,1228],{},[938,1214,1215],{},[197,1216,1217],{},"renderer",[938,1219,1220],{},[197,1221,1222],{},"'svg' | 'canvas' | factory",[938,1224,1225],{},[197,1226,1227],{},"'svg'",[938,1229,1230,1231,1235,1236,543],{},"How the goo is drawn. See ",[540,1232,1234],{"href":1233},"#renderers","Renderers",". Can be switched with ",[197,1237,1238],{},"update()",[917,1240,1241,1246,1250,1255],{},[938,1242,1243],{},[197,1244,1245],{},"escapeRenderer",[938,1247,1248],{},[197,1249,1222],{},[938,1251,1252],{},[197,1253,1254],{},"'canvas'",[938,1256,1257],{},"Renderer for the shared page overlay that escape splashes fly in.",[917,1259,1260,1265,1269,1274],{},[938,1261,1262],{},[197,1263,1264],{},"timeScale",[938,1266,1267],{},[197,1268,1150],{},[938,1270,1271],{},[197,1272,1273],{},"1",[938,1275,1276,1277,1280,1281,543],{},"Per-element speed. ",[197,1278,1279],{},"0.3"," is slow motion for just this element, multiplied with the global ",[197,1282,1283],{},"setGoopTimeScale",[917,1285,1286,1291,1295,1300],{},[938,1287,1288],{},[197,1289,1290],{},"maxDrips",[938,1292,1293],{},[197,1294,1150],{},[938,1296,1297],{},[197,1298,1299],{},"10",[938,1301,1302,1303,543],{},"Cap on live drips. Also ",[197,1304,1305],{},"--goop-max-drips",[917,1307,1308,1313,1317,1321],{},[938,1309,1310],{},[197,1311,1312],{},"drips",[938,1314,1315],{},[197,1316,1089],{},[938,1318,1319],{},[197,1320,790],{},[938,1322,1323,1324,1326],{},"Spawn drips. ",[197,1325,1022],{}," keeps the body, squish, splash, and shockwave.",[917,1328,1329,1334,1338,1342],{},[938,1330,1331],{},[197,1332,1333],{},"interactive",[938,1335,1336],{},[197,1337,1089],{},[938,1339,1340],{},[197,1341,790],{},[938,1343,1344,1345,1347,1348,543],{},"Listen to pointer events on the host. Set it to ",[197,1346,1022],{}," to drive the goo yourself with the ",[540,1349,1351],{"href":1350},"#goophandle","handle",[917,1353,1354,1358,1362,1366],{},[938,1355,1356],{},[197,1357,521],{},[938,1359,1360],{},[197,1361,1089],{},[938,1363,1364],{},[197,1365,790],{},[938,1367,1368],{},"Space and Enter on the focused host squish it from the top and add goo.",[917,1370,1371,1376,1380,1384],{},[938,1372,1373],{},[197,1374,1375],{},"disabled",[938,1377,1378],{},[197,1379,1089],{},[938,1381,1382],{},[197,1383,1022],{},[938,1385,1386],{},"Ignore interaction. Drips already running finish, and nothing new starts.",[917,1388,1389,1394,1399,1404],{},[938,1390,1391],{},[197,1392,1393],{},"reducedMotion",[938,1395,1396],{},[197,1397,1398],{},"boolean | 'auto'",[938,1400,1401],{},[197,1402,1403],{},"'auto'",[938,1405,1406,1408,1409,1412,1413,1416,1417,204,1419,1421],{},[197,1407,1403],{}," follows ",[197,1410,1411],{},"prefers-reduced-motion"," and ",[197,1414,1415],{},"\u003Chtml data-reduced-motion=\"true\">",". ",[197,1418,790],{},[197,1420,1022],{}," forces it.",[917,1423,1424,1429,1433,1437],{},[938,1425,1426],{},[197,1427,1428],{},"tilt",[938,1430,1431],{},[197,1432,1089],{},[938,1434,1435],{},[197,1436,1022],{},[938,1438,1439,1440,1443],{},"Device tilt shifts gravity sideways on phones. Call ",[197,1441,1442],{},"requestTiltPermission()"," from a user gesture first on iOS.",[917,1445,1446,1451,1455,1459],{},[938,1447,1448],{},[197,1449,1450],{},"cssVars",[938,1452,1453],{},[197,1454,1089],{},[938,1456,1457],{},[197,1458,1022],{},[938,1460,1461,1462,262,1465,1468,1469,1472,1473,1476,1477,1480],{},"Write the body's pose to the host each frame as ",[197,1463,1464],{},"--goop-x",[197,1466,1467],{},"--goop-y"," (px), ",[197,1470,1471],{},"--goop-skew"," (deg), ",[197,1474,1475],{},"--goop-sx",", and ",[197,1478,1479],{},"--goop-sy",", so your content can ride along with the goo.",[917,1482,1483,1488,1493,1498],{},[938,1484,1485],{},[197,1486,1487],{},"random",[938,1489,1490],{},[197,1491,1492],{},"() => number",[938,1494,1495],{},[197,1496,1497],{},"Math.random",[938,1499,1500],{},"RNG for drip placement and jitter. Pass a seeded one for tests.",[194,1502,1503,1504,1507,1508,543],{},"Tuning precedence: a JS option, then the ",[197,1505,1506],{},"--goop-*"," variable on the host, then the default. Values are clamped to ",[197,1509,1510],{},"GOOP_LIMITS",[220,1512,1514],{"id":1513},"goophandle","GoopHandle",[911,1516,1517,1526],{},[914,1518,1519],{},[917,1520,1521,1524],{},[920,1522,1523],{},"Member",[920,1525,931],{},[933,1527,1528,1546,1563,1577,1596,1606,1625,1639,1657,1670,1680,1693,1702],{},[917,1529,1530,1535],{},[938,1531,1532],{},[197,1533,1534],{},"update(opts?)",[938,1536,1537,1538,1540,1541,204,1543,1545],{},"Merge new options and re-read the ",[197,1539,1506],{}," variables from the host. Changing ",[197,1542,1217],{},[197,1544,1190],{}," swaps the renderer in place: live drips, particles, puddles, and taffy keep going.",[917,1547,1548,1553],{},[938,1549,1550],{},[197,1551,1552],{},"destroy()",[938,1554,1555,1556,1412,1559,1562],{},"Remove listeners, observers, the rAF ticker, the DOM, and the filter or canvas. Restores the host's inline ",[197,1557,1558],{},"position",[197,1560,1561],{},"isolation",". Safe to call twice.",[917,1564,1565,1574],{},[938,1566,1567,1570,1571],{},[197,1568,1569],{},"press()"," \u002F ",[197,1572,1573],{},"release()",[938,1575,1576],{},"Squish the body, then release it with a spring rebound, like a pointer press.",[917,1578,1579,1584],{},[938,1580,1581],{},[197,1582,1583],{},"hover(on, x?)",[938,1585,1586,1588,1589,1592,1593,1595],{},[197,1587,790],{}," starts hover drips (optionally near ",[197,1590,1591],{},"x",", in host px). ",[197,1594,1022],{}," pulls back drips that haven't detached.",[917,1597,1598,1603],{},[938,1599,1600],{},[197,1601,1602],{},"drip(x?)",[938,1604,1605],{},"Spawn one drip that swells and detaches on its own, like a tap.",[917,1607,1608,1613],{},[938,1609,1610],{},[197,1611,1612],{},"addGoop(amount?, x?)",[938,1614,1615,1616,1416,1618,1621,1622,543],{},"Add goo like a click does: swell the body and throw a drip at ",[197,1617,1591],{},[197,1619,1620],{},"amount"," defaults to ",[197,1623,1624],{},"--goop-click-goop",[917,1626,1627,1632],{},[938,1628,1629],{},[197,1630,1631],{},"shockwave(x?, y?, strength?, aim?)",[938,1633,1634,1635,1638],{},"Fire a click shockwave at (x, y) in host px (default: the center): a particle ring and an edge ripple. ",[197,1636,1637],{},"aim: { vx, vy }"," (px\u002Fs) points it, for hosts that never see the pointer.",[917,1640,1641,1646],{},[938,1642,1643],{},[197,1644,1645],{},"feedPointer({ clientX, clientY })",[938,1647,1648,1649,1652,1653,1656],{},"Drive the pointer from outside, for ",[197,1650,1651],{},"interactive: false"," hosts. While ",[197,1654,1655],{},"hover(true)"," is on it steers lean, inertia, flow, and drip placement.",[917,1658,1659,1664],{},[938,1660,1661],{},[197,1662,1663],{},"splashThrough(x, y, vx, vy)",[938,1665,1666,1667,1669],{},"Punch goo through as if the pointer entered at (x, y) moving at (vx, vy) px\u002Fs. Particles go where ",[197,1668,1163],{}," says.",[917,1671,1672,1677],{},[938,1673,1674],{},[197,1675,1676],{},"inspect()",[938,1678,1679],{},"What's driving the goo right now: pointer velocity, added mass, live drips and particles, slosh, scroll, splash mode.",[917,1681,1682,1687],{},[938,1683,1684],{},[197,1685,1686],{},"layer",[938,1688,1689,1690,1692],{},"The ",[197,1691,288],{}," goo layer element (read-only).",[917,1694,1695,1699],{},[938,1696,1697],{},[197,1698,1393],{},[938,1700,1701],{},"Whether the instance is currently in still mode (read-only).",[917,1703,1704,1709],{},[938,1705,1706],{},[197,1707,1708],{},"tuning",[938,1710,1711],{},"The resolved tuning in use (read-only).",[194,1713,1714],{},"Driving a goo body by hand, for an element that can't take pointer events itself (a decorative strip, a layer under other content):",[225,1716,1718],{"className":227,"code":1717,"language":229,"meta":230,"style":230},"const edge = attachGoop(strip, {\n  interactive: false,\n  restingDrips: [{ x: 0.25, size: 1.2, length: 1.4 }, { x: 0.7, size: 1.5, length: 2 }],\n  splash: 'escape',\n})\n\narea.addEventListener('pointerenter', () => edge.hover(true))\narea.addEventListener('pointerleave', () => edge.hover(false))\narea.addEventListener('pointermove', (e) => edge.feedPointer(e))\narea.addEventListener('click', (e) => {\n  const r = strip.getBoundingClientRect()\n  \u002F\u002F Aim the ring along the pointer's last motion.\n  edge.shockwave(e.clientX - r.left, r.height \u002F 2, 1.5, { vx: 1200, vy: 300 })\n})\n",[197,1719,1720,1734,1744,1782,1791,1795,1799,1830,1855,1884,1905,1923,1928,1968],{"__ignoreMap":230},[234,1721,1722,1724,1727,1729,1731],{"class":236,"line":237},[234,1723,341],{"class":240},[234,1725,1726],{"class":344}," edge",[234,1728,348],{"class":240},[234,1730,245],{"class":244},[234,1732,1733],{"class":248},"(strip, {\n",[234,1735,1736,1739,1741],{"class":236,"line":331},[234,1737,1738],{"class":248},"  interactive: ",[234,1740,1022],{"class":344},[234,1742,1743],{"class":248},",\n",[234,1745,1746,1749,1752,1755,1758,1761,1764,1767,1770,1772,1775,1777,1779],{"class":236,"line":338},[234,1747,1748],{"class":248},"  restingDrips: [{ x: ",[234,1750,1751],{"class":344},"0.25",[234,1753,1754],{"class":248},", size: ",[234,1756,1757],{"class":344},"1.2",[234,1759,1760],{"class":248},", length: ",[234,1762,1763],{"class":344},"1.4",[234,1765,1766],{"class":248}," }, { x: ",[234,1768,1769],{"class":344},"0.7",[234,1771,1754],{"class":248},[234,1773,1774],{"class":344},"1.5",[234,1776,1760],{"class":248},[234,1778,416],{"class":344},[234,1780,1781],{"class":248}," }],\n",[234,1783,1784,1787,1789],{"class":236,"line":374},[234,1785,1786],{"class":248},"  splash: ",[234,1788,422],{"class":327},[234,1790,1743],{"class":248},[234,1792,1793],{"class":236,"line":396},[234,1794,753],{"class":248},[234,1796,1797],{"class":236,"line":401},[234,1798,335],{"emptyLinePlaceholder":334},[234,1800,1801,1804,1807,1809,1812,1815,1817,1820,1823,1825,1827],{"class":236,"line":428},[234,1802,1803],{"class":248},"area.",[234,1805,1806],{"class":244},"addEventListener",[234,1808,249],{"class":248},[234,1810,1811],{"class":327},"'pointerenter'",[234,1813,1814],{"class":248},", () ",[234,1816,723],{"class":240},[234,1818,1819],{"class":248}," edge.",[234,1821,1822],{"class":244},"hover",[234,1824,249],{"class":248},[234,1826,790],{"class":344},[234,1828,1829],{"class":248},"))\n",[234,1831,1832,1834,1836,1838,1841,1843,1845,1847,1849,1851,1853],{"class":236,"line":433},[234,1833,1803],{"class":248},[234,1835,1806],{"class":244},[234,1837,249],{"class":248},[234,1839,1840],{"class":327},"'pointerleave'",[234,1842,1814],{"class":248},[234,1844,723],{"class":240},[234,1846,1819],{"class":248},[234,1848,1822],{"class":244},[234,1850,249],{"class":248},[234,1852,1022],{"class":344},[234,1854,1829],{"class":248},[234,1856,1857,1859,1861,1863,1866,1869,1872,1874,1876,1878,1881],{"class":236,"line":440},[234,1858,1803],{"class":248},[234,1860,1806],{"class":244},[234,1862,249],{"class":248},[234,1864,1865],{"class":327},"'pointermove'",[234,1867,1868],{"class":248},", (",[234,1870,1871],{"class":252},"e",[234,1873,772],{"class":248},[234,1875,723],{"class":240},[234,1877,1819],{"class":248},[234,1879,1880],{"class":244},"feedPointer",[234,1882,1883],{"class":248},"(e))\n",[234,1885,1886,1888,1890,1892,1895,1897,1899,1901,1903],{"class":236,"line":455},[234,1887,1803],{"class":248},[234,1889,1806],{"class":244},[234,1891,249],{"class":248},[234,1893,1894],{"class":327},"'click'",[234,1896,1868],{"class":248},[234,1898,1871],{"class":252},[234,1900,772],{"class":248},[234,1902,723],{"class":240},[234,1904,726],{"class":248},[234,1906,1907,1910,1913,1915,1918,1921],{"class":236,"line":750},[234,1908,1909],{"class":240},"  const",[234,1911,1912],{"class":344}," r",[234,1914,348],{"class":240},[234,1916,1917],{"class":248}," strip.",[234,1919,1920],{"class":244},"getBoundingClientRect",[234,1922,463],{"class":248},[234,1924,1925],{"class":236,"line":756},[234,1926,1927],{"class":436},"  \u002F\u002F Aim the ring along the pointer's last motion.\n",[234,1929,1930,1933,1935,1938,1941,1944,1947,1950,1952,1954,1957,1960,1963,1966],{"class":236,"line":795},[234,1931,1932],{"class":248},"  edge.",[234,1934,509],{"class":244},[234,1936,1937],{"class":248},"(e.clientX ",[234,1939,1940],{"class":240},"-",[234,1942,1943],{"class":248}," r.left, r.height ",[234,1945,1946],{"class":240},"\u002F",[234,1948,1949],{"class":344}," 2",[234,1951,262],{"class":248},[234,1953,1774],{"class":344},[234,1955,1956],{"class":248},", { vx: ",[234,1958,1959],{"class":344},"1200",[234,1961,1962],{"class":248},", vy: ",[234,1964,1965],{"class":344},"300",[234,1967,425],{"class":248},[234,1969,1970],{"class":236,"line":812},[234,1971,753],{"class":248},[194,1973,1974],{},"The hero on the home page doesn't need any of this: the whole panel is one interactive goo body on the canvas renderer.",[220,1976,1977],{"id":1708},"Tuning",[194,1979,1980,1981,1983],{},"These are the per-element knobs. Each one maps to a ",[197,1982,1506],{}," variable:",[1985,1986],"goop-vars-table",{},[911,1988,1989,1998],{},[914,1990,1991],{},[917,1992,1993,1996],{},[920,1994,1995],{},"Export",[920,1997,931],{},[933,1999,2000,2010,2029,2045,2055,2071,2083,2110,2126,2136,2146],{},[917,2001,2002,2007],{},[938,2003,2004],{},[197,2005,2006],{},"GOOP_VAR_META",[938,2008,2009],{},"One entry per variable, keyed by option: name, option, label, description, unit, default, range and step, group, cost, reduced-motion behavior, and old aliases. The docs table and the tuner on this site are built from it.",[917,2011,2012,2026],{},[938,2013,2014,262,2017,262,2020,262,2023],{},[197,2015,2016],{},"GOOP_PRESETS",[197,2018,2019],{},"GOOP_PRESET_VAR",[197,2021,2022],{},"GOOP_DEFAULT_PRESET",[197,2024,2025],{},"readPreset",[938,2027,2028],{},"The presets and how they resolve.",[917,2030,2031,2042],{},[938,2032,2033,262,2036,262,2039],{},[197,2034,2035],{},"GOOP_VAR_RENAMES",[197,2037,2038],{},"GOOP_OPTION_RENAMES",[197,2040,2041],{},"renameOptions",[938,2043,2044],{},"Old variable and option names mapped to the new ones.",[917,2046,2047,2052],{},[938,2048,2049],{},[197,2050,2051],{},"GOOP_DEFAULTS",[938,2053,2054],{},"Default value for each knob (frozen).",[917,2056,2057,2062],{},[938,2058,2059],{},[197,2060,2061],{},"GOOP_CSS_VARS",[938,2063,2064,2065,2067,2068,543],{},"The CSS variable name for each knob, such as ",[197,2066,901],{}," → ",[197,2069,2070],{},"--goop-softness",[917,2072,2073,2077],{},[938,2074,2075],{},[197,2076,1510],{},[938,2078,1689,2079,2082],{},[197,2080,2081],{},"[min, max]"," clamp for each knob.",[917,2084,2085,2099],{},[938,2086,2087,262,2090,262,2093,262,2096],{},[197,2088,2089],{},"GOOP_SPLASH_VAR",[197,2091,2092],{},"GOOP_DEFAULT_SPLASH",[197,2094,2095],{},"GOOP_HIT_VAR",[197,2097,2098],{},"GOOP_DEFAULT_HIT",[938,2100,2101,1412,2103,2105,2106,1412,2108,532],{},[197,2102,1183],{},[197,2104,1005],{},", with their defaults (",[197,2107,1173],{},[197,2109,999],{},[917,2111,2112,2123],{},[938,2113,2114,262,2117,262,2120],{},[197,2115,2116],{},"GOOP_FINISH_VARS",[197,2118,2119],{},"GOOP_FINISH_DEFAULTS",[197,2121,2122],{},"readFinish(el, overrides?)",[938,2124,2125],{},"The oil finish variables, their defaults, and the resolver.",[917,2127,2128,2133],{},[938,2129,2130],{},[197,2131,2132],{},"GOOP_PHYSICS",[938,2134,2135],{},"Engine-level feel constants like spring responses, swell and drain times, and drop drag. They aren't exposed as CSS variables.",[917,2137,2138,2143],{},[938,2139,2140],{},[197,2141,2142],{},"readTuning(el, overrides?)",[938,2144,2145],{},"Resolve the tuning for an element: defaults, then CSS variables, then overrides, all clamped.",[917,2147,2148,2171],{},[938,2149,2150,262,2153,262,2156,262,2159,262,2162,262,2165,262,2168],{},[197,2151,2152],{},"GoopTuning",[197,2154,2155],{},"GoopVarMeta",[197,2157,2158],{},"GoopPreset",[197,2160,2161],{},"GoopHitEffect",[197,2163,2164],{},"GoopSplashMode",[197,2166,2167],{},"GoopFinishName",[197,2169,2170],{},"SpringFeel",[938,2172,2173,2174,2176,2177,2180],{},"Types. A ",[197,2175,2170],{}," is ",[197,2178,2179],{},"{ response, dampingRatio }",", the way Apple-style springs are tuned.",[220,2182,1234],{"id":2183},"renderers",[194,2185,2186],{},"Two renderers draw the same simulation, so a knob means the same thing in both:",[225,2188,2190],{"className":227,"code":2189,"language":229,"meta":230,"style":230},"attachGoop(el)                          \u002F\u002F 'svg' (default): SVG goo filter on DOM spans\nattachGoop(el, { renderer: 'canvas' })  \u002F\u002F WebGL2 metaballs, Canvas 2D fallback\nattachGoop(el, { renderer: makeCanvasRenderer({ backend: '2d' }) })\nattachGoop(el, { finish: 'oil' })       \u002F\u002F picks 'canvas' for you\n",[197,2191,2192,2202,2217,2235],{"__ignoreMap":230},[234,2193,2194,2196,2199],{"class":236,"line":237},[234,2195,223],{"class":244},[234,2197,2198],{"class":248},"(el)                          ",[234,2200,2201],{"class":436},"\u002F\u002F 'svg' (default): SVG goo filter on DOM spans\n",[234,2203,2204,2206,2209,2211,2214],{"class":236,"line":331},[234,2205,223],{"class":244},[234,2207,2208],{"class":248},"(el, { renderer: ",[234,2210,1254],{"class":327},[234,2212,2213],{"class":248}," })  ",[234,2215,2216],{"class":436},"\u002F\u002F WebGL2 metaballs, Canvas 2D fallback\n",[234,2218,2219,2221,2223,2226,2229,2232],{"class":236,"line":338},[234,2220,223],{"class":244},[234,2222,2208],{"class":248},[234,2224,2225],{"class":244},"makeCanvasRenderer",[234,2227,2228],{"class":248},"({ backend: ",[234,2230,2231],{"class":327},"'2d'",[234,2233,2234],{"class":248}," }) })\n",[234,2236,2237,2239,2242,2245,2248],{"class":236,"line":374},[234,2238,223],{"class":244},[234,2240,2241],{"class":248},"(el, { finish: ",[234,2243,2244],{"class":327},"'oil'",[234,2246,2247],{"class":248}," })       ",[234,2249,2250],{"class":436},"\u002F\u002F picks 'canvas' for you\n",[468,2252,2253,2275],{},[471,2254,2255,2259,2260,2263,2264,2267,2268,1412,2271,2274],{},[2256,2257,2258],"strong",{},"SVG"," draws plain ",[197,2261,2262],{},"\u003Cspan>","s (valid inside a ",[197,2265,2266],{},"\u003Cbutton>",") in a filtered layer and only changes ",[197,2269,2270],{},"transform",[197,2272,2273],{},"opacity"," each frame.",[471,2276,2277,2280,2281,2284,2285,2287,2288,2290],{},[2256,2278,2279],{},"Canvas"," gives each element its own small ",[197,2282,2283],{},"\u003Ccanvas>"," in the same layer, so scrolling, clipping, and stacking don't change. One shared WebGL2 context per document draws every element in a single batch. Without WebGL2, or after a context loss, it falls back to Canvas 2D with the same filter and switches back when the context returns. It reads ",[197,2286,308],{}," from computed style and repaints on theme and class changes; call ",[197,2289,1238],{}," after any other color change made while the goo is idle.",[194,2292,2293,2294,2297],{},"Escape splashes fly in one shared, fixed, full-viewport overlay (",[197,2295,2296],{},"acquireGoopOverlay","). You can use it too, for goo that has to leave its component.",[911,2299,2300,2308],{},[914,2301,2302],{},[917,2303,2304,2306],{},[920,2305,1995],{},[920,2307,931],{},[933,2309,2310,2326,2339,2355,2368],{},[917,2311,2312,2323],{},[938,2313,2314,262,2317,262,2320],{},[197,2315,2316],{},"createSvgFilterRenderer",[197,2318,2319],{},"createCanvasRenderer",[197,2321,2322],{},"makeCanvasRenderer(opts)",[938,2324,2325],{},"The built-in renderer factories.",[917,2327,2328,2333],{},[938,2329,2330],{},[197,2331,2332],{},"resolveRenderer(option)",[938,2334,2335,2336,2338],{},"Turn ",[197,2337,1222],{}," into a factory.",[917,2340,2341,2352],{},[938,2342,2343,262,2346,262,2349],{},[197,2344,2345],{},"acquireGoopOverlay(doc, opts)",[197,2347,2348],{},"acquireEscapeLayer",[197,2350,2351],{},"goopOverlayCount()",[938,2353,2354],{},"The shared page overlay.",[917,2356,2357,2365],{},[938,2358,2359,262,2362],{},[197,2360,2361],{},"gooCanvasBackend()",[197,2363,2364],{},"gooCanvasRefCount()",[938,2366,2367],{},"Which canvas backend is live, for tests and devtools.",[917,2369,2370,2378],{},[938,2371,2372,262,2375],{},[197,2373,2374],{},"GoopRenderer",[197,2376,2377],{},"GoopFinishRenderer",[938,2379,2380,2381,2384,2385,2388],{},"The interfaces a custom renderer implements. Parts carry a ",[197,2382,2383],{},"data-goop"," attribute (",[197,2386,2387],{},"GOOP_PART_ATTR",") so tests and devtools can find them.",[220,2390,2392],{"id":2391},"component-engines","Component engines",[194,2394,2395,2397,2398,2401,2402,1412,2404,2406],{},[197,2396,223],{}," is the engine behind Button. Every other component has its own ",[197,2399,2400],{},"attach*"," function in core, with the same shape: pass the root element and options, get a handle with ",[197,2403,1534],{},[197,2405,1552],{},". The Vue components call these on mount, so you only need them to build your own component or an adapter for another framework.",[225,2408,2410],{"className":227,"code":2409,"language":229,"meta":230,"style":230},"import { attachSlider } from '@goopui\u002Fcore'\n\nconst slider = attachSlider(rootEl, { jelly: true, preset: 'wild' })\nslider.update({ speed: 0.5 })\nslider.destroy()\n",[197,2411,2412,2423,2427,2452,2467],{"__ignoreMap":230},[234,2413,2414,2416,2419,2421],{"class":236,"line":237},[234,2415,318],{"class":240},[234,2417,2418],{"class":248}," { attachSlider } ",[234,2420,324],{"class":240},[234,2422,328],{"class":327},[234,2424,2425],{"class":236,"line":331},[234,2426,335],{"emptyLinePlaceholder":334},[234,2428,2429,2431,2434,2436,2439,2442,2444,2447,2450],{"class":236,"line":338},[234,2430,341],{"class":240},[234,2432,2433],{"class":344}," slider",[234,2435,348],{"class":240},[234,2437,2438],{"class":244}," attachSlider",[234,2440,2441],{"class":248},"(rootEl, { jelly: ",[234,2443,790],{"class":344},[234,2445,2446],{"class":248},", preset: ",[234,2448,2449],{"class":327},"'wild'",[234,2451,425],{"class":248},[234,2453,2454,2457,2459,2462,2465],{"class":236,"line":374},[234,2455,2456],{"class":248},"slider.",[234,2458,446],{"class":244},[234,2460,2461],{"class":248},"({ speed: ",[234,2463,2464],{"class":344},"0.5",[234,2466,425],{"class":248},[234,2468,2469,2471,2473],{"class":236,"line":396},[234,2470,2456],{"class":248},[234,2472,460],{"class":244},[234,2474,463],{"class":248},[911,2476,2477,2490],{},[914,2478,2479],{},[917,2480,2481,2484,2487],{},[920,2482,2483],{},"Function",[920,2485,2486],{},"Host",[920,2488,2489],{},"Component",[933,2491,2492,2506,2520,2534,2549,2563,2577,2600,2615,2629],{},[917,2493,2494,2499,2502],{},[938,2495,2496],{},[197,2497,2498],{},"attachSpinner(host, opts)",[938,2500,2501],{},"the spinner element",[938,2503,2504],{},[540,2505,41],{"href":42},[917,2507,2508,2513,2516],{},[938,2509,2510],{},[197,2511,2512],{},"attachSwitch(host, opts)",[938,2514,2515],{},"the switch root",[938,2517,2518],{},[540,2519,50],{"href":51},[917,2521,2522,2527,2530],{},[938,2523,2524],{},[197,2525,2526],{},"attachCheckbox(host, opts)",[938,2528,2529],{},"the checkbox root",[938,2531,2532],{},[540,2533,54],{"href":55},[917,2535,2536,2541,2544],{},[938,2537,2538],{},[197,2539,2540],{},"attachRadioGroup(host, opts)",[938,2542,2543],{},"the radio group root",[938,2545,2546],{},[540,2547,2548],{"href":59},"Radio group",[917,2550,2551,2556,2559],{},[938,2552,2553],{},[197,2554,2555],{},"attachSlider(host, opts)",[938,2557,2558],{},"the slider root",[938,2560,2561],{},[540,2562,66],{"href":67},[917,2564,2565,2570,2573],{},[938,2566,2567],{},[197,2568,2569],{},"attachProgress(host, opts)",[938,2571,2572],{},"the progress root",[938,2574,2575],{},[540,2576,70],{"href":71},[917,2578,2579,2584,2591],{},[938,2580,2581],{},[197,2582,2583],{},"attachEmerge(host, opts)",[938,2585,2586,2587,2590],{},"the panel (",[197,2588,2589],{},"anchor"," option: what it oozes from)",[938,2592,2593,262,2595,262,2598],{},[540,2594,78],{"href":79},[540,2596,2597],{"href":83},"Dropdown menu",[540,2599,86],{"href":87},[917,2601,2602,2607,2610],{},[938,2603,2604],{},[197,2605,2606],{},"attachMenuHighlight(container, opts)",[938,2608,2609],{},"the menu content",[938,2611,2612,2613],{},"highlight in ",[540,2614,2597],{"href":83},[917,2616,2617,2622,2625],{},[938,2618,2619],{},[197,2620,2621],{},"attachTabsIndicator(list, opts)",[938,2623,2624],{},"the tab list",[938,2626,2627],{},[540,2628,90],{"href":91},[917,2630,2631,2636,2639],{},[938,2632,2633],{},[197,2634,2635],{},"attachToaster(root, opts)",[938,2637,2638],{},"vue-sonner's or Sonner's toaster root",[938,2640,2641],{},[540,2642,114],{"href":115},[194,2644,2645,2646,262,2649,262,2651,1476,2653,2655,2656,2658,2659,2661,2662,2665,2666,204,2669,2672,2673,262,2676,262,2679,2682,2683,262,2686,262,2689,2692],{},"Most of them take the same few options: ",[197,2647,2648],{},"speed",[197,2650,942],{},[197,2652,1217],{},[197,2654,1393],{},", plus a boolean or ",[197,2657,976],{}," to ",[197,2660,416],{}," strength for each of the component's effects (listed in its ",[197,2663,2664],{},"*_EFFECTS"," export, such as ",[197,2667,2668],{},"SLIDER_EFFECTS",[197,2670,2671],{},"TOASTER_EFFECTS","). Each also exports its per-preset feel table (",[197,2674,2675],{},"SLIDER_FEEL",[197,2677,2678],{},"PROGRESS_FEEL",[197,2680,2681],{},"TOAST_FEEL",", ...), its pure pose functions (",[197,2684,2685],{},"sliderPose",[197,2687,2688],{},"progressPose",[197,2690,2691],{},"toastDropPose",", ...), and its option, handle, and pose types.",[194,2694,2695,2696,262,2699,262,2702,262,2705,262,2708,262,2711,543],{},"The ones with a color variable paint with it: ",[197,2697,2698],{},"--goop-slider-color",[197,2700,2701],{},"--goop-progress-color",[197,2703,2704],{},"--goop-switch-fill",[197,2706,2707],{},"--goop-switch-thumb",[197,2709,2710],{},"--goop-checkbox-fill",[197,2712,2713],{},"--goop-radio-fill",[2715,2716,2718],"h3",{"id":2717},"slider-progress-and-toaster","Slider, progress, and toaster",[225,2720,2722],{"className":227,"code":2721,"language":229,"meta":230,"style":230},"attachSlider(root, options?: SliderOptions): SliderHandle\nattachProgress(root, options?: ProgressOptions): ProgressHandle\nattachToaster(root, options?: ToasterOptions): ToasterHandle\n",[197,2723,2724,2737,2749],{"__ignoreMap":230},[234,2725,2726,2729,2732,2734],{"class":236,"line":237},[234,2727,2728],{"class":244},"attachSlider",[234,2730,2731],{"class":248},"(root, options",[234,2733,268],{"class":240},[234,2735,2736],{"class":248}," SliderOptions): SliderHandle\n",[234,2738,2739,2742,2744,2746],{"class":236,"line":331},[234,2740,2741],{"class":244},"attachProgress",[234,2743,2731],{"class":248},[234,2745,268],{"class":240},[234,2747,2748],{"class":248}," ProgressOptions): ProgressHandle\n",[234,2750,2751,2754,2756,2758],{"class":236,"line":338},[234,2752,2753],{"class":244},"attachToaster",[234,2755,2731],{"class":248},[234,2757,268],{"class":240},[234,2759,2760],{"class":248}," ToasterOptions): ToasterHandle\n",[911,2762,2763,2775],{},[914,2764,2765],{},[917,2766,2767,2769,2772],{},[920,2768,2483],{},[920,2770,2771],{},"Options",[920,2773,2774],{},"Handle",[933,2776,2777,2832,2874],{},[917,2778,2779,2783,2815],{},[938,2780,2781],{},[197,2782,2728],{},[938,2784,2785,262,2788,262,2791,262,2794,262,2797,2800,2801,262,2804,262,2807,2810,2811,2814],{},[197,2786,2787],{},"jelly",[197,2789,2790],{},"slosh",[197,2792,2793],{},"stretch",[197,2795,2796],{},"splat",[197,2798,2799],{},"orientation",", plus ",[197,2802,2803],{},"thumbSelector",[197,2805,2806],{},"rangeSelector",[197,2808,2809],{},"trackSelector"," (they default to shadcn's ",[197,2812,2813],{},"data-slot","s)",[938,2816,2817,262,2819,262,2822,262,2825,262,2828,262,2830],{},[197,2818,446],{},[197,2820,2821],{},"measure()",[197,2823,2824],{},"pose",[197,2826,2827],{},"running",[197,2829,1393],{},[197,2831,460],{},[917,2833,2834,2838,2859],{},[938,2835,2836],{},[197,2837,2741],{},[938,2839,2840,2843,2844,2846,2847,262,2850,262,2852,262,2854,262,2857],{},[197,2841,2842],{},"value"," (",[197,2845,684],{}," is indeterminate), ",[197,2848,2849],{},"max",[197,2851,2790],{},[197,2853,1312],{},[197,2855,2856],{},"wobble",[197,2858,1145],{},[938,2860,2861,262,2863,262,2866,262,2868,262,2870,262,2872],{},[197,2862,446],{},[197,2864,2865],{},"resize()",[197,2867,2824],{},[197,2869,2827],{},[197,2871,1393],{},[197,2873,460],{},[917,2875,2876,2880,2890],{},[938,2877,2878],{},[197,2879,2753],{},[938,2881,2882,262,2885,262,2888],{},[197,2883,2884],{},"dropIn",[197,2886,2887],{},"merge",[197,2889,1312],{},[938,2891,2892,262,2894,262,2897,262,2899,262,2902,262,2904],{},[197,2893,446],{},[197,2895,2896],{},"refresh()",[197,2898,1686],{},[197,2900,2901],{},"count",[197,2903,1393],{},[197,2905,460],{},[194,2907,2908,1412,2910,2912,2913,2915,2916,2918,2919,2922,2923,262,2926,2929],{},[197,2909,2728],{},[197,2911,2741],{}," add one ",[197,2914,288],{}," goo layer to the root and measure the real range, thumbs, or indicator, which you make see-through. ",[197,2917,2753],{}," is different: it keeps one shared layer in ",[197,2920,2921],{},"document.body"," behind the whole stack, and moves each toast's background, border, and shadow onto it (",[197,2924,2925],{},"TOAST_SELECTOR",[197,2927,2928],{},"TOAST_GOO_ATTR","). The toasts stay real DOM.",[2715,2931,2933],{"id":2932},"shared-pieces","Shared pieces",[911,2935,2936,2944],{},[914,2937,2938],{},[917,2939,2940,2942],{},[920,2941,1995],{},[920,2943,931],{},[933,2945,2946,2974,2991,3016,3036,3055],{},[917,2947,2948,2971],{},[938,2949,2950,262,2953,262,2956,262,2959,262,2962,262,2965,262,2968],{},[197,2951,2952],{},"gooBridge",[197,2954,2955],{},"splatCurve",[197,2957,2958],{},"splatAxes",[197,2960,2961],{},"splashDrops",[197,2963,2964],{},"splatToggleEnd",[197,2966,2967],{},"GOO_SPLAT",[197,2969,2970],{},"gooEffectValue",[938,2972,2973],{},"The splat, bridge, and droplet math the toggles share.",[917,2975,2976,2984],{},[938,2977,2978,262,2981],{},[197,2979,2980],{},"createGooToggle",[197,2982,2983],{},"GOO_PENDING_ATTR",[938,2985,2986,2987,2990],{},"A runner for one-shot toggle animations. Sets ",[197,2988,2989],{},"data-goop-pending"," while the goo hides the real indicator.",[917,2992,2993,3013],{},[938,2994,2995,262,2998,262,3001,262,3004,262,3007,262,3010],{},[197,2996,2997],{},"liquidBar",[197,2999,3000],{},"hangingDrip",[197,3002,3003],{},"createSlosh",[197,3005,3006],{},"stepSlosh",[197,3008,3009],{},"sloshWave",[197,3011,3012],{},"LIQUID_SLOSH",[938,3014,3015],{},"Liquid fill, hanging drip, and slosh spring helpers behind Slider and Progress.",[917,3017,3018,3033],{},[938,3019,3020,262,3023,262,3026,262,3029,3032],{},[197,3021,3022],{},"emergeJelly",[197,3024,3025],{},"emergePose",[197,3027,3028],{},"EMERGE_FEEL",[197,3030,3031],{},"emergeMomentum",", ...",[938,3034,3035],{},"The emerge engine's pose math and feel tables.",[917,3037,3038,3052],{},[938,3039,3040,262,3043,262,3046,262,3049],{},[197,3041,3042],{},"resolveSurfaceColors",[197,3044,3045],{},"parseCssColor",[197,3047,3048],{},"compositeColor",[197,3050,3051],{},"pageBackdrop",[938,3053,3054],{},"Read a surface's real color, composited over the page, for panels with translucent backgrounds.",[917,3056,3057,3068],{},[938,3058,3059,262,3062,262,3065],{},[197,3060,3061],{},"TOOLTIP_FEEL",[197,3063,3064],{},"TABS_FEEL",[197,3066,3067],{},"MENU_FEEL",[938,3069,3070],{},"Per-preset feel for each emerge-based component.",[220,3072,3074],{"id":3073},"reduced-motion","Reduced motion",[194,3076,3077,3078,3080,3081,3083],{},"Under reduced motion every element switches to a still mode, whatever the preset. The body shape and resting drips stay (without breathing). The drip simulation, wobble, momentum, flow, reach, taffy, label ride, scroll slosh, splashes, shockwaves, and puddles stop, and the oil sheen holds still. Each variable's own behavior is in its ",[197,3079,1393],{}," note in ",[197,3082,2006],{},". The engine watches the setting live, so turning it on mid-session clears anything in flight.",[911,3085,3086,3094],{},[914,3087,3088],{},[917,3089,3090,3092],{},[920,3091,1995],{},[920,3093,931],{},[933,3095,3096,3108],{},[917,3097,3098,3103],{},[938,3099,3100],{},[197,3101,3102],{},"isReducedMotion(doc)",[938,3104,3105,3106,543],{},"One-time check: OS setting or ",[197,3107,1415],{},[917,3109,3110,3115],{},[938,3111,3112],{},[197,3113,3114],{},"watchReducedMotion(doc, cb)",[938,3116,3117],{},"Subscribe to changes. The callback only fires on a change. Returns an unsubscribe function.",[220,3119,3121],{"id":3120},"animation-loop-and-input","Animation loop and input",[194,3123,3124,3125,3128],{},"Every instance shares one ",[197,3126,3127],{},"requestAnimationFrame"," loop. It stops when nothing is moving, and a single frame step is capped, so switching tabs doesn't make things jump.",[911,3130,3131,3139],{},[914,3132,3133],{},[917,3134,3135,3137],{},[920,3136,1995],{},[920,3138,931],{},[933,3140,3141,3154,3170,3193],{},[917,3142,3143,3148],{},[938,3144,3145],{},[197,3146,3147],{},"setGoopTimeScale(scale)",[938,3149,3150,3151,3153],{},"Slow every goo on the page down. For one element, use the ",[197,3152,1264],{}," option instead.",[917,3155,3156,3167],{},[938,3157,3158,262,3161,262,3164],{},[197,3159,3160],{},"isLoopRunning()",[197,3162,3163],{},"activeTickerCount()",[197,3165,3166],{},"loopStats()",[938,3168,3169],{},"For tests and devtools.",[917,3171,3172,3180],{},[938,3173,3174,1570,3177],{},[197,3175,3176],{},"wakeTicker(t)",[197,3178,3179],{},"removeTicker(t)",[938,3181,3182,3183,2843,3186,3189,3190,3192],{},"Low level: add or remove a ",[197,3184,3185],{},"Ticker",[197,3187,3188],{},"(dt) => boolean",", which returns ",[197,3191,790],{}," while it's still moving).",[917,3194,3195,3208],{},[938,3196,3197,262,3200,262,3203,262,3206],{},[197,3198,3199],{},"trackPointer",[197,3201,3202],{},"trackScroll",[197,3204,3205],{},"trackTilt",[197,3207,1442],{},[938,3209,3210],{},"The shared input trackers behind momentum, scroll slosh, and tilt.",[220,3212,3214],{"id":3213},"filter","Filter",[194,3216,3217,3218,3221,3222,3225],{},"The SVG renderer keeps one hidden ",[197,3219,3220],{},"\u003Csvg>"," per document, holding a ",[197,3223,3224],{},"\u003Cfilter>"," for each distinct parameter set. Each filter is ref-counted and removed when its last user goes away. The pipeline blurs the source, crushes the alpha into a hard edge, and draws the original pixels on top so colors come from the source.",[911,3227,3228,3236],{},[914,3229,3230],{},[917,3231,3232,3234],{},[920,3233,1995],{},[920,3235,931],{},[933,3237,3238,3255,3265,3281],{},[917,3239,3240,3245],{},[938,3241,3242],{},[197,3243,3244],{},"acquireGooFilter(doc, params)",[938,3246,3247,3248,3251,3252,543],{},"Get or create the filter for ",[197,3249,3250],{},"{ blur, contrast, threshold }"," and take a reference. Returns ",[197,3253,3254],{},"{ id, release() }",[917,3256,3257,3262],{},[938,3258,3259],{},[197,3260,3261],{},"gooFilterMarkup(params, id?)",[938,3263,3264],{},"The filter's markup as a string, for SSR or snapshot tests.",[917,3266,3267,3278],{},[938,3268,3269,262,3272,262,3275],{},[197,3270,3271],{},"gooFilterId(params)",[197,3273,3274],{},"gooColorMatrix(params)",[197,3276,3277],{},"gooVanishRadius",[938,3279,3280],{},"Helpers.",[917,3282,3283,3291],{},[938,3284,3285,262,3288],{},[197,3286,3287],{},"createOilFilter",[197,3289,3290],{},"OIL_PALETTE",[938,3292,3293],{},"The oil finish's 2D-fallback filter and palette.",[220,3295,3297],{"id":3296},"low-level-physics","Low-level physics",[194,3299,3300],{},"These are exported for adapters and tests. Most apps never need them.",[911,3302,3303,3311],{},[914,3304,3305],{},[917,3306,3307,3309],{},[920,3308,1995],{},[920,3310,931],{},[933,3312,3313,3323,3342,3354],{},[917,3314,3315,3320],{},[938,3316,3317],{},[197,3318,3319],{},"DripField",[938,3321,3322],{},"The drip simulation: spawning, swelling, necking, detaching, falling, and resting drips.",[917,3324,3325,3339],{},[938,3326,3327,262,3330,262,3333,262,3336],{},[197,3328,3329],{},"ParticleFluid",[197,3331,3332],{},"fluidParams",[197,3334,3335],{},"drainRadius",[197,3337,3338],{},"liveParticleCount",[938,3340,3341],{},"The particle fluid behind splashes and shockwaves.",[917,3343,3344,3349],{},[938,3345,3346],{},[197,3347,3348],{},"springConfig(feel, viscosity?)",[938,3350,2335,3351,3353],{},[197,3352,2179],{}," into stiffness and damping.",[917,3355,3356,3370],{},[938,3357,3358,262,3361,262,3364,262,3367],{},[197,3359,3360],{},"stepSpring",[197,3362,3363],{},"stepFall",[197,3365,3366],{},"isSpringSettled",[197,3368,3369],{},"clampDt",[938,3371,3372],{},"Closed-form spring and fall steps. Frame-rate independent.",[3374,3375,3376],"style",{},"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":230,"searchDepth":338,"depth":338,"links":3378},[3379,3380,3381,3382,3383,3384,3388,3389,3390,3391],{"id":222,"depth":331,"text":223},{"id":887,"depth":331,"text":888},{"id":1513,"depth":331,"text":1514},{"id":1708,"depth":331,"text":1977},{"id":2183,"depth":331,"text":1234},{"id":2391,"depth":331,"text":2392,"children":3385},[3386,3387],{"id":2717,"depth":338,"text":2718},{"id":2932,"depth":338,"text":2933},{"id":3073,"depth":331,"text":3074},{"id":3120,"depth":331,"text":3121},{"id":3213,"depth":331,"text":3214},{"id":3296,"depth":331,"text":3297},"The framework-agnostic engine under every goopUI component. Attach goo to any element, then tune it, drive it, and tear it down.","md",{},{"title":184},{"title":189,"description":3392},"KFx6E1ieQaEQ3hV7Fflx3zP9QuknyBJ7HsfMzTd1kCQ",[3399,13],{"title":175,"path":176,"stem":177,"description":3400,"children":-1},"shadcn's dashboard Sidebar with goo. A goo highlight glides between items, and the edge sloshes as it collapses.",1793670386291]