[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-fluids\u002Fcursorribbon":145},[4,10,16,20,24,28,32,36,40,44,48,52,56,60,64,69,73,78,82,86,90,94,98,102,106,110,114,117,120,124,127,131,134,138,141],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[15],"js",{"path":17,"title":18,"description":19,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":21,"title":22,"description":23,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":25,"title":26,"description":27,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":29,"title":30,"description":31,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":33,"title":34,"description":35,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":37,"title":38,"description":39,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":41,"title":42,"description":43,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":45,"title":46,"description":47,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":49,"title":50,"description":51,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":53,"title":54,"description":55,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":57,"title":58,"description":59,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":61,"title":62,"description":63,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":65,"title":66,"description":67,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":70,"title":71,"description":72,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install shaders and presets into your codebase as component files, and keep them in sync with the design editor.",{"path":74,"title":75,"description":76,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":79,"title":80,"description":81,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":83,"title":84,"description":85,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":87,"title":88,"description":89,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":91,"title":92,"description":93,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":95,"title":96,"description":97,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":99,"title":100,"description":101,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":103,"title":104,"description":105,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":107,"title":108,"description":109,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":111,"title":112,"description":113,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":115,"title":12,"description":116,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":118,"title":12,"description":119,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":121,"title":122,"description":123,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js and SSR","Render Shaders in Next.js and other React SSR apps by keeping each shader on the client.",{"path":125,"title":12,"description":126,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":128,"title":129,"description":130,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":132,"title":12,"description":133,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":135,"title":136,"description":137,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit and SSR","Render Shaders in SvelteKit and other Svelte SSR apps, where each shader already waits for the browser.",{"path":139,"title":12,"description":140,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":142,"title":143,"description":144,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":146,"title":147,"body":148,"categoryId":870,"categorySlug":871,"categoryTitle":872,"curated":873,"description":158,"editUrl":9,"extension":874,"group":875,"groupTitle":876,"kind":877,"meta":878,"navigation":879,"path":880,"seo":881,"sourceUrl":882,"stem":883,"wordCount":9,"__hash__":884},"primitives\u002Fdocs\u002Fprimitives\u002F38.sim-fluids\u002F3.cursorribbon.md","cursorRibbon",{"type":149,"value":150,"toc":864},"minimark",[151,155,159,532,547,573,578,612,620,623,627,805,819,823,846,850,860],[152,153,147],"h1",{"id":154},"cursorribbon",[156,157,158],"p",{},"An emitter that paints along the pointer's stroke: a ribbon of stamps between last frame's position and this one, so a fast flick leaves a continuous line, not dots.",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-ts shiki shiki-themes github-dark","cursorRibbon\u003CTParams = unknown, TPrepared = undefined>(opts: {\n    \u002F** Pointer tracking: smoothing, the teleport distance, the minimum drag. *\u002F\n    tracker?: PointerVelocityTrackerOptions\n    \u002F** Whether the stroke emits this frame. A live frame keeps the simulation awake. *\u002F\n    activeWhen: (ptr: PointerFrame, f: FluidFrame) => boolean\n    \u002F** Seconds after the last activity before the simulation may sleep. *\u002F\n    fadeSeconds: (f: FluidFrame) => number\n    \u002F** Extra bookkeeping per frame before the idle gate. *\u002F\n    \u002F\u002F InkFlow's color-cycle time drift.\n    onFrame?: (f: FluidFrame, ptr: PointerFrame) => void\n    \u002F** The stamp pass: a pass function, or a `setup` that builds one on resources of its own. *\u002F\n    pass: {kernel: FluidKernel} | {setup: (ctx: FluidSetupCtx) => KitComputePipeline}\n    \u002F** This frame's stamps. *\u002F\n    ribbon: (\n  f: FluidFrame,\n  ptr: PointerFrame,\n  values: TParams,\n) => CursorRibbonSpec\u003CTPrepared>\n}): FluidEmitter\u003CTParams> & {ptr(): PointerFrame | null; active(): boolean}\n","ts","",[8,167,168,213,220,232,238,276,282,305,311,317,348,354,406,412,423,436,448,461,479],{"__ignoreMap":165},[169,170,173,177,181,185,189,192,195,197,200,203,207,210],"span",{"class":171,"line":172},"line",1,[169,174,176],{"class":175},"s95oV","cursorRibbon\u003C",[169,178,180],{"class":179},"svObZ","TParams",[169,182,184],{"class":183},"snl16"," =",[169,186,188],{"class":187},"sDLfK"," unknown",[169,190,191],{"class":175},", ",[169,193,194],{"class":179},"TPrepared",[169,196,184],{"class":183},[169,198,199],{"class":187}," undefined",[169,201,202],{"class":175},">(",[169,204,206],{"class":205},"s9osk","opts",[169,208,209],{"class":183},":",[169,211,212],{"class":175}," {\n",[169,214,216],{"class":171,"line":215},2,[169,217,219],{"class":218},"sAwPA","    \u002F** Pointer tracking: smoothing, the teleport distance, the minimum drag. *\u002F\n",[169,221,223,226,229],{"class":171,"line":222},3,[169,224,225],{"class":205},"    tracker",[169,227,228],{"class":183},"?:",[169,230,231],{"class":179}," PointerVelocityTrackerOptions\n",[169,233,235],{"class":171,"line":234},4,[169,236,237],{"class":218},"    \u002F** Whether the stroke emits this frame. A live frame keeps the simulation awake. *\u002F\n",[169,239,241,244,246,249,252,254,257,259,262,264,267,270,273],{"class":171,"line":240},5,[169,242,243],{"class":179},"    activeWhen",[169,245,209],{"class":183},[169,247,248],{"class":175}," (",[169,250,251],{"class":205},"ptr",[169,253,209],{"class":183},[169,255,256],{"class":179}," PointerFrame",[169,258,191],{"class":175},[169,260,261],{"class":205},"f",[169,263,209],{"class":183},[169,265,266],{"class":179}," FluidFrame",[169,268,269],{"class":175},") ",[169,271,272],{"class":183},"=>",[169,274,275],{"class":187}," boolean\n",[169,277,279],{"class":171,"line":278},6,[169,280,281],{"class":218},"    \u002F** Seconds after the last activity before the simulation may sleep. *\u002F\n",[169,283,285,288,290,292,294,296,298,300,302],{"class":171,"line":284},7,[169,286,287],{"class":179},"    fadeSeconds",[169,289,209],{"class":183},[169,291,248],{"class":175},[169,293,261],{"class":205},[169,295,209],{"class":183},[169,297,266],{"class":179},[169,299,269],{"class":175},[169,301,272],{"class":183},[169,303,304],{"class":187}," number\n",[169,306,308],{"class":171,"line":307},8,[169,309,310],{"class":218},"    \u002F** Extra bookkeeping per frame before the idle gate. *\u002F\n",[169,312,314],{"class":171,"line":313},9,[169,315,316],{"class":218},"    \u002F\u002F InkFlow's color-cycle time drift.\n",[169,318,320,323,325,327,329,331,333,335,337,339,341,343,345],{"class":171,"line":319},10,[169,321,322],{"class":179},"    onFrame",[169,324,228],{"class":183},[169,326,248],{"class":175},[169,328,261],{"class":205},[169,330,209],{"class":183},[169,332,266],{"class":179},[169,334,191],{"class":175},[169,336,251],{"class":205},[169,338,209],{"class":183},[169,340,256],{"class":179},[169,342,269],{"class":175},[169,344,272],{"class":183},[169,346,347],{"class":187}," void\n",[169,349,351],{"class":171,"line":350},11,[169,352,353],{"class":218},"    \u002F** The stamp pass: a pass function, or a `setup` that builds one on resources of its own. *\u002F\n",[169,355,357,360,362,365,368,370,373,376,379,381,384,386,388,391,393,396,398,400,403],{"class":171,"line":356},12,[169,358,359],{"class":205},"    pass",[169,361,209],{"class":183},[169,363,364],{"class":175}," {",[169,366,367],{"class":205},"kernel",[169,369,209],{"class":183},[169,371,372],{"class":179}," FluidKernel",[169,374,375],{"class":175},"} ",[169,377,378],{"class":183},"|",[169,380,364],{"class":175},[169,382,383],{"class":179},"setup",[169,385,209],{"class":183},[169,387,248],{"class":175},[169,389,390],{"class":205},"ctx",[169,392,209],{"class":183},[169,394,395],{"class":179}," FluidSetupCtx",[169,397,269],{"class":175},[169,399,272],{"class":183},[169,401,402],{"class":179}," KitComputePipeline",[169,404,405],{"class":175},"}\n",[169,407,409],{"class":171,"line":408},13,[169,410,411],{"class":218},"    \u002F** This frame's stamps. *\u002F\n",[169,413,415,418,420],{"class":171,"line":414},14,[169,416,417],{"class":179},"    ribbon",[169,419,209],{"class":183},[169,421,422],{"class":175}," (\n",[169,424,426,429,431,433],{"class":171,"line":425},15,[169,427,428],{"class":205},"  f",[169,430,209],{"class":183},[169,432,266],{"class":179},[169,434,435],{"class":175},",\n",[169,437,439,442,444,446],{"class":171,"line":438},16,[169,440,441],{"class":205},"  ptr",[169,443,209],{"class":183},[169,445,256],{"class":179},[169,447,435],{"class":175},[169,449,451,454,456,459],{"class":171,"line":450},17,[169,452,453],{"class":205},"  values",[169,455,209],{"class":183},[169,457,458],{"class":179}," TParams",[169,460,435],{"class":175},[169,462,464,466,468,471,474,476],{"class":171,"line":463},18,[169,465,269],{"class":175},[169,467,272],{"class":183},[169,469,470],{"class":179}," CursorRibbonSpec",[169,472,473],{"class":175},"\u003C",[169,475,194],{"class":179},[169,477,478],{"class":175},">\n",[169,480,482,485,487,490,492,494,497,500,502,504,507,509,511,514,517,520,523,525,527,530],{"class":171,"line":481},19,[169,483,484],{"class":175},"})",[169,486,209],{"class":183},[169,488,489],{"class":179}," FluidEmitter",[169,491,473],{"class":175},[169,493,180],{"class":179},[169,495,496],{"class":175},"> ",[169,498,499],{"class":183},"&",[169,501,364],{"class":175},[169,503,251],{"class":179},[169,505,506],{"class":175},"()",[169,508,209],{"class":183},[169,510,256],{"class":179},[169,512,513],{"class":183}," |",[169,515,516],{"class":187}," null",[169,518,519],{"class":175},"; ",[169,521,522],{"class":179},"active",[169,524,506],{"class":175},[169,526,209],{"class":183},[169,528,529],{"class":187}," boolean",[169,531,405],{"class":175},[156,533,534,535,538,539,542,543,546],{},"Import ",[8,536,537],{},"sim"," from ",[8,540,541],{},"shaders\u002Fstd"," and use ",[8,544,545],{},"sim.fluids.cursorRibbon",".",[156,548,549,550,553,554,557,558,561,562,565,566,569,570,546],{},"It tracks the pointer itself, marks the frame active when ",[8,551,552],{},"activeWhen"," says so, and sleeps the simulation ",[8,555,556],{},"fadeSeconds"," after the last activity. ",[8,559,560],{},"ribbon"," describes this frame's stamps. Read the pointer back with ",[8,563,564],{},".ptr()"," and ",[8,567,568],{},".active()"," inside ",[8,571,572],{},"values",[574,575,577],"h2",{"id":576},"parameters","Parameters",[579,580,581,597],"table",{},[582,583,584],"thead",{},[585,586,587,591,594],"tr",{},[588,589,590],"th",{},"Name",[588,592,593],{},"Type",[588,595,596],{},"Notes",[598,599,600],"tbody",{},[585,601,602,607,610],{},[603,604,605],"td",{},[8,606,206],{},[603,608,609],{},"`{",[603,611],{},[160,613,618],{"className":614,"code":616,"language":617},[615],"language-text","\u002F** Pointer tracking: smoothing, the teleport distance, the minimum drag. *\u002F\ntracker?: PointerVelocityTrackerOptions\n\u002F** Whether the stroke emits this frame. A live frame keeps the simulation awake. *\u002F\nactiveWhen: (ptr: PointerFrame, f: FluidFrame) => boolean\n\u002F** Seconds after the last activity before the simulation may sleep. *\u002F\nfadeSeconds: (f: FluidFrame) => number\n\u002F** Extra bookkeeping per frame before the idle gate. *\u002F\n\u002F\u002F InkFlow's color-cycle time drift.\nonFrame?: (f: FluidFrame, ptr: PointerFrame) => void\n\u002F** The stamp pass: a pass function, or a `setup` that builds one on resources of its own. *\u002F\npass: {kernel: FluidKernel} \\| {setup: (ctx: FluidSetupCtx) => KitComputePipeline}\n\u002F** This frame's stamps. *\u002F\nribbon: (f: FluidFrame, ptr: PointerFrame, values: TParams) => CursorRibbonSpec\u003CTPrepared>\n","text",[8,619,616],{"__ignoreMap":165},[156,621,622],{},"}` |  |",[574,624,626],{"id":625},"example","Example",[160,628,630],{"className":162,"code":629,"language":164,"meta":165,"style":165},"const strokes = cursorRibbon\u003CParams>({activeWhen: (ptr) => ptr.smoothSpeed > 0.005, fadeSeconds: (f) => decayFadeSeconds(255, f.num('dissipation', 0.4)), pass: {kernel: splatKernel}, ribbon: (f, ptr, values) => ({stepSize: Math.max(0.004, f.num('emitRadius', 0.07) * 0.5), maxSteps: 64, write: (emitX, emitY) => f.writeParams({...values, emitX, emitY})})})\n",[8,631,632],{"__ignoreMap":165},[169,633,634,637,640,642,645,647,650,653,655,658,660,662,664,667,670,673,675,677,679,681,683,685,688,691,694,697,700,702,706,708,711,714,716,718,720,722,724,726,728,730,732,735,738,740,743,745,747,749,752,754,757,759,762,765,768,771,773,776,778,781,783,786,788,790,793,796,799,802],{"class":171,"line":172},[169,635,636],{"class":183},"const",[169,638,639],{"class":187}," strokes",[169,641,184],{"class":183},[169,643,644],{"class":179}," cursorRibbon",[169,646,473],{"class":175},[169,648,649],{"class":179},"Params",[169,651,652],{"class":175},">({",[169,654,552],{"class":179},[169,656,657],{"class":175},": (",[169,659,251],{"class":205},[169,661,269],{"class":175},[169,663,272],{"class":183},[169,665,666],{"class":175}," ptr.smoothSpeed ",[169,668,669],{"class":183},">",[169,671,672],{"class":187}," 0.005",[169,674,191],{"class":175},[169,676,556],{"class":179},[169,678,657],{"class":175},[169,680,261],{"class":205},[169,682,269],{"class":175},[169,684,272],{"class":183},[169,686,687],{"class":179}," decayFadeSeconds",[169,689,690],{"class":175},"(",[169,692,693],{"class":187},"255",[169,695,696],{"class":175},", f.",[169,698,699],{"class":179},"num",[169,701,690],{"class":175},[169,703,705],{"class":704},"sU2Wk","'dissipation'",[169,707,191],{"class":175},[169,709,710],{"class":187},"0.4",[169,712,713],{"class":175},")), pass: {kernel: splatKernel}, ",[169,715,560],{"class":179},[169,717,657],{"class":175},[169,719,261],{"class":205},[169,721,191],{"class":175},[169,723,251],{"class":205},[169,725,191],{"class":175},[169,727,572],{"class":205},[169,729,269],{"class":175},[169,731,272],{"class":183},[169,733,734],{"class":175}," ({stepSize: Math.",[169,736,737],{"class":179},"max",[169,739,690],{"class":175},[169,741,742],{"class":187},"0.004",[169,744,696],{"class":175},[169,746,699],{"class":179},[169,748,690],{"class":175},[169,750,751],{"class":704},"'emitRadius'",[169,753,191],{"class":175},[169,755,756],{"class":187},"0.07",[169,758,269],{"class":175},[169,760,761],{"class":183},"*",[169,763,764],{"class":187}," 0.5",[169,766,767],{"class":175},"), maxSteps: ",[169,769,770],{"class":187},"64",[169,772,191],{"class":175},[169,774,775],{"class":179},"write",[169,777,657],{"class":175},[169,779,780],{"class":205},"emitX",[169,782,191],{"class":175},[169,784,785],{"class":205},"emitY",[169,787,269],{"class":175},[169,789,272],{"class":183},[169,791,792],{"class":175}," f.",[169,794,795],{"class":179},"writeParams",[169,797,798],{"class":175},"({",[169,800,801],{"class":183},"...",[169,803,804],{"class":175},"values, emitX, emitY})})})\n",[806,807,808],"blockquote",{},[156,809,810,814,815,818],{},[811,812,813],"strong",{},"Tip."," Raise the tracker's ",[8,816,817],{},"teleportGuard"," when fast flicks should paint: the default treats a quarter-canvas jump as the cursor re-entering and emits nothing.",[574,820,822],{"id":821},"see-also","See also",[824,825,826,837],"ul",{},[827,828,829,836],"li",{},[830,831,833],"a",{"href":832},"\u002Fdocs\u002Fprimitives\u002Fsim-fluids\u002Fsplat",[8,834,835],{},"splat"," — An emitter at a fixed source: one pass per frame that adds dye and momentum where your pass function says (a cone from a point, a line along an edge).",[827,838,839,845],{},[830,840,842],{"href":841},"\u002Fdocs\u002Fprimitives\u002Fsim-fluids\u002Ffluidsim",[8,843,844],{},"fluidSim"," — A fluid the engine solves every frame.",[574,847,849],{"id":848},"used-by","Used by",[156,851,852,191,856],{},[830,853,855],{"href":854},"\u002Fdocs\u002Fcomponents\u002Finkflow","InkFlow",[830,857,859],{"href":858},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow","SmokeFlow",[861,862,863],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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 pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":165,"searchDepth":215,"depth":215,"links":865},[866,867,868,869],{"id":576,"depth":215,"text":577},{"id":625,"depth":215,"text":626},{"id":821,"depth":215,"text":822},{"id":848,"depth":215,"text":849},"sim.fluids","sim-fluids","Fluids",false,"md","simulation","Simulation","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fsim-fluids\u002Fcursorribbon",{"title":147,"description":158},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002Ffluids.ts#L413","docs\u002Fprimitives\u002F38.sim-fluids\u002F3.cursorribbon","Yc-MZ584JOLLZg6xBBomRemKsBNG7s-rVpwreRu7c_c"]