[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fmedia":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":154,"categorySlug":154,"categoryTitle":9,"curated":332,"description":720,"editUrl":721,"extension":722,"group":723,"groupTitle":724,"kind":9,"meta":725,"navigation":332,"path":726,"seo":727,"sourceUrl":728,"stem":729,"wordCount":336,"__hash__":730},"primitives\u002Fdocs\u002Fprimitives\u002F11.media\u002Findex.md","Media",{"type":149,"value":150,"toc":714},"minimark",[151,155,175,213,242,247,307,311,649,653,677,681,710],[152,153,147],"h1",{"id":154},"media",[156,157,158,159,162,163,166,167,170,171,174],"p",{},"Pixels that come from an image, a video or the user's camera instead of from math. Each word\nloads its source, fits it into the layer the way CSS ",[8,160,161],{},"object-fit"," fits an image into a box,\nand returns the GPU half of a definition. Spread it into ",[8,164,165],{},"defineShader({...})"," next to your\nprops, with ",[8,168,169],{},"role: 'media'"," and ",[8,172,173],{},"species: 'custom'",".",[156,176,177,178,181,182,185,186,185,189,192,193,196,197,200,201,204,205,208,209,212],{},"Every media word takes a ",[8,179,180],{},"fit"," prop (",[8,183,184],{},"'cover'",", ",[8,187,188],{},"'contain'",[8,190,191],{},"'fill'"," or ",[8,194,195],{},"'scale-down'",",\nmarked ",[8,198,199],{},"compileTime",") and ",[8,202,203],{},"decode: 'srgb-linear-alpha-cut'",", which reads the source as sRGB\nand makes the letterbox around a contained image transparent. Set ",[8,206,207],{},"naturalSizeKey"," on the\ndefinition so layout can measure the media. Each word takes an ",[8,210,211],{},"onError"," callback so you can\nphrase failures in your own words.",[214,215,220],"pre",{"className":216,"code":217,"language":218,"meta":219,"style":219},"language-ts shiki shiki-themes github-dark","import {media} from 'shaders\u002Fstd'\n","ts","",[8,221,222],{"__ignoreMap":219},[223,224,227,231,235,238],"span",{"class":225,"line":226},"line",1,[223,228,230],{"class":229},"snl16","import",[223,232,234],{"class":233},"s95oV"," {media} ",[223,236,237],{"class":229},"from",[223,239,241],{"class":240},"sU2Wk"," 'shaders\u002Fstd'\n",[243,244,246],"h2",{"id":245},"reach-for-it-when","Reach for it when",[248,249,250,263],"table",{},[251,252,253],"thead",{},[254,255,256,260],"tr",{},[257,258,259],"th",{},"When you need",[257,261,262],{},"Use",[264,265,266,281,294],"tbody",{},[254,267,268,272],{},[269,270,271],"td",{},"a photo or logo from a URL",[269,273,274],{},[275,276,278],"a",{"href":277},"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fimagemedia",[8,279,280],{},"imageMedia",[254,282,283,286],{},[269,284,285],{},"a looping video from a URL",[269,287,288],{},[275,289,291],{"href":290},"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fvideomedia",[8,292,293],{},"videoMedia",[254,295,296,299],{},[269,297,298],{},"the user's camera, with a selfie mirror",[269,300,301],{},[275,302,304],{"href":303},"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fwebcammedia",[8,305,306],{},"webcamMedia",[243,308,310],{"id":309},"example","Example",[214,312,314],{"className":216,"code":313,"language":218,"meta":219,"style":219},"import {defineShader, p, media} from 'shaders\u002Fstd'\n\n\u002F\u002F An image from a URL, fitted like CSS object-fit. The fit prop is a plain string.\nexport const Photo = defineShader({\n  name: 'Photo',\n  role: 'media',\n  species: 'custom',\n  naturalSizeKey: {fromProp: 'url'},\n  props: {\n    url: {default: 'https:\u002F\u002Fshaders.com\u002Fsample.jpg', ui: {type: 'image-upload', label: 'Image'}},\n    objectFit: {\n      default: 'cover',\n      compileTime: true,\n      ui: {type: 'select', options: [{label: 'Cover', value: 'cover'}, {label: 'Contain', value: 'contain'}, {label: 'Fill', value: 'fill'}, {label: 'Scale down', value: 'scale-down'}]},\n    },\n  },\n  ...media.imageMedia({\n    src: p('url'),\n    fit: p('objectFit'),\n    decode: 'srgb-linear-alpha-cut',\n    label: 'Photo',\n    onError: (error, url) => console.error(`Photo: could not load ${url}`, error),\n  }),\n})\n",[8,315,316,327,334,341,364,376,387,398,410,416,440,446,456,467,518,524,530,543,559,574,585,595,637,643],{"__ignoreMap":219},[223,317,318,320,323,325],{"class":225,"line":226},[223,319,230],{"class":229},[223,321,322],{"class":233}," {defineShader, p, media} ",[223,324,237],{"class":229},[223,326,241],{"class":240},[223,328,330],{"class":225,"line":329},2,[223,331,333],{"emptyLinePlaceholder":332},true,"\n",[223,335,337],{"class":225,"line":336},3,[223,338,340],{"class":339},"sAwPA","\u002F\u002F An image from a URL, fitted like CSS object-fit. The fit prop is a plain string.\n",[223,342,344,347,350,354,357,361],{"class":225,"line":343},4,[223,345,346],{"class":229},"export",[223,348,349],{"class":229}," const",[223,351,353],{"class":352},"sDLfK"," Photo",[223,355,356],{"class":229}," =",[223,358,360],{"class":359},"svObZ"," defineShader",[223,362,363],{"class":233},"({\n",[223,365,367,370,373],{"class":225,"line":366},5,[223,368,369],{"class":233},"  name: ",[223,371,372],{"class":240},"'Photo'",[223,374,375],{"class":233},",\n",[223,377,379,382,385],{"class":225,"line":378},6,[223,380,381],{"class":233},"  role: ",[223,383,384],{"class":240},"'media'",[223,386,375],{"class":233},[223,388,390,393,396],{"class":225,"line":389},7,[223,391,392],{"class":233},"  species: ",[223,394,395],{"class":240},"'custom'",[223,397,375],{"class":233},[223,399,401,404,407],{"class":225,"line":400},8,[223,402,403],{"class":233},"  naturalSizeKey: {fromProp: ",[223,405,406],{"class":240},"'url'",[223,408,409],{"class":233},"},\n",[223,411,413],{"class":225,"line":412},9,[223,414,415],{"class":233},"  props: {\n",[223,417,419,422,425,428,431,434,437],{"class":225,"line":418},10,[223,420,421],{"class":233},"    url: {default: ",[223,423,424],{"class":240},"'https:\u002F\u002Fshaders.com\u002Fsample.jpg'",[223,426,427],{"class":233},", ui: {type: ",[223,429,430],{"class":240},"'image-upload'",[223,432,433],{"class":233},", label: ",[223,435,436],{"class":240},"'Image'",[223,438,439],{"class":233},"}},\n",[223,441,443],{"class":225,"line":442},11,[223,444,445],{"class":233},"    objectFit: {\n",[223,447,449,452,454],{"class":225,"line":448},12,[223,450,451],{"class":233},"      default: ",[223,453,184],{"class":240},[223,455,375],{"class":233},[223,457,459,462,465],{"class":225,"line":458},13,[223,460,461],{"class":233},"      compileTime: ",[223,463,464],{"class":352},"true",[223,466,375],{"class":233},[223,468,470,473,476,479,482,485,487,490,493,495,497,499,502,504,506,508,511,513,515],{"class":225,"line":469},14,[223,471,472],{"class":233},"      ui: {type: ",[223,474,475],{"class":240},"'select'",[223,477,478],{"class":233},", options: [{label: ",[223,480,481],{"class":240},"'Cover'",[223,483,484],{"class":233},", value: ",[223,486,184],{"class":240},[223,488,489],{"class":233},"}, {label: ",[223,491,492],{"class":240},"'Contain'",[223,494,484],{"class":233},[223,496,188],{"class":240},[223,498,489],{"class":233},[223,500,501],{"class":240},"'Fill'",[223,503,484],{"class":233},[223,505,191],{"class":240},[223,507,489],{"class":233},[223,509,510],{"class":240},"'Scale down'",[223,512,484],{"class":233},[223,514,195],{"class":240},[223,516,517],{"class":233},"}]},\n",[223,519,521],{"class":225,"line":520},15,[223,522,523],{"class":233},"    },\n",[223,525,527],{"class":225,"line":526},16,[223,528,529],{"class":233},"  },\n",[223,531,533,536,539,541],{"class":225,"line":532},17,[223,534,535],{"class":229},"  ...",[223,537,538],{"class":233},"media.",[223,540,280],{"class":359},[223,542,363],{"class":233},[223,544,546,549,551,554,556],{"class":225,"line":545},18,[223,547,548],{"class":233},"    src: ",[223,550,156],{"class":359},[223,552,553],{"class":233},"(",[223,555,406],{"class":240},[223,557,558],{"class":233},"),\n",[223,560,562,565,567,569,572],{"class":225,"line":561},19,[223,563,564],{"class":233},"    fit: ",[223,566,156],{"class":359},[223,568,553],{"class":233},[223,570,571],{"class":240},"'objectFit'",[223,573,558],{"class":233},[223,575,577,580,583],{"class":225,"line":576},20,[223,578,579],{"class":233},"    decode: ",[223,581,582],{"class":240},"'srgb-linear-alpha-cut'",[223,584,375],{"class":233},[223,586,588,591,593],{"class":225,"line":587},21,[223,589,590],{"class":233},"    label: ",[223,592,372],{"class":240},[223,594,375],{"class":233},[223,596,598,601,604,608,610,613,616,619,622,624,626,629,631,634],{"class":225,"line":597},22,[223,599,600],{"class":359},"    onError",[223,602,603],{"class":233},": (",[223,605,607],{"class":606},"s9osk","error",[223,609,185],{"class":233},[223,611,612],{"class":606},"url",[223,614,615],{"class":233},") ",[223,617,618],{"class":229},"=>",[223,620,621],{"class":233}," console.",[223,623,607],{"class":359},[223,625,553],{"class":233},[223,627,628],{"class":240},"`Photo: could not load ${",[223,630,612],{"class":233},[223,632,633],{"class":240},"}`",[223,635,636],{"class":233},", error),\n",[223,638,640],{"class":225,"line":639},23,[223,641,642],{"class":233},"  }),\n",[223,644,646],{"class":225,"line":645},24,[223,647,648],{"class":233},"})\n",[243,650,652],{"id":651},"types","Types",[248,654,655,665],{},[251,656,657],{},[254,658,659,662],{},[257,660,661],{},"Type",[257,663,664],{},"What it is",[264,666,667],{},[254,668,669,674],{},[269,670,671],{},[8,672,673],{},"MediaSurfaceHalf",[269,675,676],{},"What a media word returns: the GPU half of a definition.",[243,678,680],{"id":679},"words","Words",[682,683,685],"primitive-words",{":words":684},"[{\"name\":\"imageMedia\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fimagemedia\",\"summary\":\"An image from a URL prop, fitted into the layer.\"},{\"name\":\"videoMedia\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fvideomedia\",\"summary\":\"A video from a URL prop, playing in the layer.\"},{\"name\":\"webcamMedia\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmedia\u002Fwebcammedia\",\"summary\":\"The user's camera, live in the layer.\"}]",[686,687,688,696,703],"ul",{},[689,690,691,695],"li",{},[275,692,693],{"href":277},[8,694,280],{}," — An image from a URL prop, fitted into the layer.",[689,697,698,702],{},[275,699,700],{"href":290},[8,701,293],{}," — A video from a URL prop, playing in the layer.",[689,704,705,709],{},[275,706,707],{"href":303},[8,708,306],{}," — The user's camera, live in the layer.",[711,712,713],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":219,"searchDepth":329,"depth":329,"links":715},[716,717,718,719],{"id":245,"depth":329,"text":246},{"id":309,"depth":329,"text":310},{"id":651,"depth":329,"text":652},{"id":679,"depth":329,"text":680},"Pixels that come from an image, a video or the user's camera instead of from math.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fmedia.md","md","paint","Painting",{},"\u002Fdocs\u002Fprimitives\u002Fmedia",{"title":147,"description":720},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fmedia.ts","docs\u002Fprimitives\u002F11.media\u002Findex","2WxjtKvWSbps9W2ThZoxQAdwPkFsCtWvYDRGD5GtA9U"]