1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["23007"],{4046(e,s,n){n.r(s),n.d(s,{metadata:()=>a,default:()=>d,frontMatter:()=>o,contentTitle:()=>r,toc:()=>i,assets:()=>p});var a=JSON.parse('{"id":"effects/thermal-vision","title":"thermalVision()","description":"Part of the @remotion/effects package.","source":"@site/docs/effects/thermal-vision.mdx","sourceDirName":"effects","slug":"/effects/thermal-vision","permalink":"/docs/effects/thermal-vision","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/effects/thermal-vision.mdx","tags":[],"version":"current","lastUpdatedAt":1790778889000,"frontMatter":{"image":"/generated/articles-docs-effects-thermal-vision.png","slug":"/effects/thermal-vision","title":"thermalVision()","sidebar_label":"thermalVision()","crumb":"@remotion/effects"},"sidebar":"apiSidebar","previous":{"title":"tear()","permalink":"/docs/effects/tear"},"next":{"title":"tile()","permalink":"/docs/effects/tile"}}'),l=n(57825),t=n(29721);let o={image:"/generated/articles-docs-effects-thermal-vision.png",slug:"/effects/thermal-vision",title:"thermalVision()",sidebar_label:"thermalVision()",crumb:"@remotion/effects"},r="thermalVision()",p={},i=[{value:"Preview",id:"preview",level:2},{value:"Example",id:"example",level:2},{value:"API",id:"api",level:2},{value:"<code>amount?</code>",id:"amount",level:3},{value:"<code>palette?</code>",id:"palette",level:3},{value:"<code>disabled?</code>
1",id:"disabled",level:3},{value:"Requirements",id:"requirements",level:2},{value:"See also",id:"see-also",level:2}];function c(e){let s={a:"a",code:"code",div:"div",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,t.R)(),...e.components},{AvailableFrom:n,EffectsDemo:a,RawMarkdownCarrier:o}=s;return n||m("AvailableFrom",!0),a||m("EffectsDemo",!0),o||m("RawMarkdownCarrier",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(o,{raw:"---\nimage: /generated/articles-docs-effects-thermal-vision.png\nslug: /effects/thermal-vision\ntitle: thermalVision()\nsidebar_label: thermalVision()\ncrumb: '@remotion/effects'\n---\n\n# thermalVision()<AvailableFrom v=\"4.0.479\" />\n\n_Part of the [`@remotion/effects`](/docs/effects/api) package._\n\nMaps source luminance to a thermal heat-map color ramp. It can be applied to canvas-based components such as [`<Video>`](/docs/media/video), [`<HtmlInCanvas>`](/docs/remotion/html-in-canvas) and [`<Solid>`](/docs/solid).\n\nThe source alpha channel is preserved, so transparent and semi-transparent regions keep their original transparency.\n\n## Preview\n\n<EffectsDemo type=\"effects-thermal-vision\" />\n\n## Example\n\n```tsx twoslash title=\"MyComp.tsx\"\nimport {thermalVision} from '@remotion/effects/thermal-vision';\nimport {AbsoluteFill, CanvasImage, staticFile} from 'remotion';\n\nexport const MyComp: React.FC = () => {\n return (\n <AbsoluteFill>\n <CanvasImage\n src={staticFile('image.png')}\n width={1280}\n height={720}\n fit=\"cover\"\n effects={[\n thermalVision({\n amount: 1,\n palette: [\n '#020617',\n '#1238ff',\n '#00a6ff',\n '#00c853',\n '#d6f542',\n '#ffb000',\n '#ff2f00',\n '#ffffff',\n ],\n }),\n ]}\n />\n </AbsoluteFill>\n );\n};\n```\n\n## API\n\nPass an object with the following properties. You can also call `thermalVision()` without arguments.\n\n### `amount?`\n\nBlend amount from `0` to `1`. Defaults to `1`.\n\nUse `0` to leave the layer unchanged. Use `1` to fully remap luminance to the thermal color ramp.\n\n### `palette?`\n\nColor ramp used from dark to bright pixels. Accepts an array of at least two CSS color strings.\n\nDefaults to a dark blue, blue, cyan, green, yellow, orange, red and white ramp.\n\n### `disabled?`\n\nWhen `true`, the effect is skipped. Defaults to `false`.\n\n## Requirements\n\n`thermalVision()` uses a WebGL2 backend. See [Using WebGL and WebGPU during renders](/docs/webgl).\n\n## See also\n\n- [`@remotion/effects`](/docs/effects/api)\n- [`duotone()`](/docs/effects/duotone)\n- [`grayscale()`](/docs/effects/grayscale)\n- [Source code for this effect](https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/thermal-vision.ts)\n"}),"\n",(0,l.jsx)(s.header,{children:(0,l.jsxs)(s.h1,{id:"thermalvision",children:["thermalVision()",(0,l.jsx)(n,{v:"4.0.479"})]})}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsxs)(s.em,{children:["Part of the ",(0,l.jsx)(s.a,{href:"/docs/effects/api",children:(0,l.jsx)(s.code,{children:"@remotion/effects"})})," package."]})}),"\n",(0,l.jsxs)(s.p,{children:["Maps source luminance to a thermal heat-map color ramp. It can be applied to canvas-based components such as ",(0,l.jsx)(s.a,{href:"/docs/media/video",children:(0,l.jsx)(s.code,{children:"<Video>"})}),", ",(0,l.jsx)(s.a,{href:"/docs/remotion/html-in-canvas",children:(0,l.jsx)(s.code,{children:"<HtmlInCanvas>"})})," and ",(0,l.jsx)(s.a,{href:"/docs/solid",children:(0,l.jsx)(s.code,{children:"<Solid>"})}),"."]}),"\n",(0,l.jsx)(s.p,{children:"The source alpha channel is preserved, so transparent and semi-transparent regions keep their original transparency."}),"\n",(0,l.jsx)(s.h2,{id:"preview",children:"Preview"}),"\n",(0,l.jsx)(a,{type:"effects-thermal-vision"}),"\n",(0,l.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,l.jsx)(s.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">MyComp.tsx</div><code><span class="line"><span style="color:#F97583">
1import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const thermalVision: (params?: (ThermalVisionParams & {\n readonly disabled?: boolean | undefined;\n}) | undefined) => import("/vercel/path0/packages/core/dist/cjs/index").EffectDescriptor<unknown>\nimport thermalVision">thermalVision</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'@remotion/effects/thermal-vision\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "loop" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {\n readonly stack?: string | undefined;\n}>\nimport AbsoluteFill">AbsoluteFill</data-lsp></span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const CanvasImage: React.ComponentType<Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps & CanvasImageCanvasProps & {\n readonly src: string;\n readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;\n readonly width?: number | undefined;\n readonly height?: number | undefined;\n readonly fit?: import("/vercel/path0/packages/core/dist/cjs/calculate-image-fit").ImageFit | undefined;\n readonly effects?: EffectsProp | undefined;\n ... 9 more ...;\n readonly _remotionInternalCropComponentName?: string | undefined;\n} & React.RefAttributes<...>>\nimport CanvasImage">CanvasImage</data-lsp></span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const staticFile: (path: string) => string\nimport staticFile">staticFile</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'remotion\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const MyComp: React.FC<{}>">MyComp</data-lsp></span><span style="color:#F97583">:</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(alias) namespace React\nexport namespace React">React</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="type React.FC<P = {}> = React.FunctionComponent<P>">FC</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "loop" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {\n readonly stack?: string | undefined;\n}>\nimport AbsoluteFill">AbsoluteFill</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const CanvasImage: React.ComponentType<Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps & CanvasImageCanvasProps & {\n readonly src: string;\n readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;\n readonly width?: number | undefined;\n readonly height?: number | undefined;\n readonly fit?: import("/vercel/path0/packages/core/dist/cjs/calculate-image-fit").ImageFit | undefined;\n readonly effects?: EffectsProp | undefined;\n ... 9 more ...;\n readonly _remotionInternalCropComponentName?: string | undefined;\n} & React.RefAttributes<...>>\nimport CanvasImage">CanvasImage</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) src: string">src</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">
1{</span><span style="color:#B392F0"><data-lsp lsp="(alias) staticFile(path: string): string\nimport staticFile">staticFile</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">\'image.png\'</span><span style="color:#E1E4E8">)}</span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) width?: number | undefined">width</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">1280</span><span style="color:#E1E4E8">}</span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) height?: number | undefined">height</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">720</span><span style="color:#E1E4E8">}</span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) fit?: ImageFit | undefined">fit</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"cover"</span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) effects?: EffectsProp | undefined">effects</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{[</span></span>\n<span class="line"><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(alias) thermalVision(params?: (ThermalVisionParams & {\n readonly disabled?: boolean | undefined;\n}) | undefined): import("/vercel/path0/packages/core/dist/cjs/index").EffectDescriptor<unknown>\nimport thermalVision">thermalVision</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8"> </span><span style="color:#E1E4E8"><data-lsp lsp="(property) amount?: number | undefined">amount</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8"> </span><span style="color:#E1E4E8"><data-lsp lsp="(property) palette?: readonly string[] | undefined">palette</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#020617\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#1238ff\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#00a6ff\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#00c853\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#d6f542\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#ffb000\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#ff2f00\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#9ECBFF"> \'#ffffff\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8"> ],</span></span>\n<span class="line"><span style="color:#E1E4E8"> }),</span></span>\n<span class="line"><span style="color:#E1E4E8"> ]}</span></span>\n<span class="line"><span style="color:#E1E4E8"> /></span></span>\n<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "loop" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {\n readonly stack?: string | undefined;\n}>\nimport AbsoluteFill">AbsoluteFill</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8"> );</span></span>\n<span class="line"><span style="color:#E1E4E8">};
1</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,l.jsx)(s.h2,{id:"api",children:"API"}),"\n",(0,l.jsxs)(s.p,{children:["Pass an object with the following properties. You can also call ",(0,l.jsx)(s.code,{children:"thermalVision()"})," without arguments."]}),"\n",(0,l.jsx)(s.h3,{id:"amount",children:(0,l.jsx)(s.code,{children:"amount?"})}),"\n",(0,l.jsxs)(s.p,{children:["Blend amount from ",(0,l.jsx)(s.code,{children:"0"})," to ",(0,l.jsx)(s.code,{children:"1"}),". Defaults to ",(0,l.jsx)(s.code,{children:"1"}),"."]}),"\n",(0,l.jsxs)(s.p,{children:["Use ",(0,l.jsx)(s.code,{children:"0"})," to leave the layer unchanged. Use ",(0,l.jsx)(s.code,{children:"1"})," to fully remap luminance to the thermal color ramp."]}),"\n",(0,l.jsx)(s.h3,{id:"palette",children:(0,l.jsx)(s.code,{children:"palette?"})}),"\n",(0,l.jsx)(s.p,{children:"Color ramp used from dark to bright pixels. Accepts an array of at least two CSS color strings."}),"\n",(0,l.jsx)(s.p,{children:"Defaults to a dark blue, blue, cyan, green, yellow, orange, red and white ramp."}),"\n",(0,l.jsx)(s.h3,{id:"disabled",children:(0,l.jsx)(s.code,{children:"disabled?"})}),"\n",(0,l.jsxs)(s.p,{children:["When ",(0,l.jsx)(s.code,{children:"true"}),", the effect is skipped. Defaults to ",(0,l.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,l.jsx)(s.h2,{id:"requirements",children:"Requirements"}),"\n",(0,l.jsxs)(s.p,{children:[(0,l.jsx)(s.code,{children:"thermalVision()"})," uses a WebGL2 backend. See ",(0,l.jsx)(s.a,{href:"/docs/webgl",children:"Using WebGL and WebGPU during renders"}),"."]}),"\n",(0,l.jsx)(s.h2,{id:"see-also",children:"See also"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"/docs/effects/api",children:(0,l.jsx)(s.code,{children:"@remotion/effects"})})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"/docs/effects/duotone",children:(0,l.jsx)(s.code,{children:"duotone()"})})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"/docs/effects/grayscale",children:(0,l.jsx)(s.code,{children:"grayscale()"})})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/thermal-vision.ts",children:"Source code for this effect"})}),"\n"]})]})}function d(e={}){let{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}function m(e,s){throw Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.